gantt icon indicating copy to clipboard operation
gantt copied to clipboard

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

Open z-h2o opened this issue 1 year ago • 2 comments

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

z-h2o avatar May 10 '24 02:05 z-h2o

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

z-h2o avatar May 10 '24 02:05 z-h2o

@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

gearcoded avatar May 21 '24 07:05 gearcoded