DHTMLX / gantt

GPL version of Javascript Gantt Chart
https://dhtmlx.com/docs/products/dhtmlxGantt/
GNU General Public License v2.0
1.44k stars 320 forks source link

How to customize header, such as header color, font size, font width, and background color #112

Open lzwStore opened 4 months ago

lzwStore commented 4 months ago

How to customize header, such as header color, font size, font width, and background color

lzwStore commented 4 months ago

Hope to create an API, such as Gantt's template function for table columns, which can customize rendering content for example: image

gearcoded commented 3 months ago

@lzwStore, You can set the header colors and font settings via CSS. Gantt adds the class name to grid header cells depending on the name parameter of the column configuration. For example, if the name has the progress value, the class name is gantt_grid_head_progress. But you can also use on the data-column-id attribute: https://docs.dhtmlx.com/gantt/desktop__css_overview.html#:~:text=%3D%2050%3B-,A%20cell%20of%20the%20grid%20header,-You%20can%20apply

Here is an example in the snippet: https://snippet.dhtmlx.com/opqlk00r

There is no template function for the grid header cells, the contents depend on the label parameter: https://docs.dhtmlx.com/gantt/api__gantt_columns_config.html#:~:text=specifies%20the%20title%20of%20the%20column

If you want to have a dynamical value for the grid header cells, you need to implement a custom solution. Assigning a custom function to the label parameter is not enough as Gantt accepts only the string or number values. If you add a function, Gantt will obtain the returned value and assign it to the label parameter. So, you will need to manually modify the label parameter. Here is an example of how it can be implemented: https://snippet.dhtmlx.com/tfq405c0