Header Height

LyteNyte Grid provides flexible header height customization. The header can consist of three possible components:

• Column group rows
• Column header row
• Floating header row

Column group rows appear only when columns are organized into groups. The floating header row displays only when the floatingRowEnabled property is set to true on the LyteNyte Grid.

Column Header Height

You can set the column header height using the columnHeaderHeight property. This property accepts a number value representing the height in pixels.

TODO;

The column header height can be adjusted dynamically after initial setup:

// Set the header height to 24px
grid.state.columnHeaderHeight.set(24);

Column Headers Span Column Group Rows

When using column groups, some columns may not belong to any group or may belong to groups with fewer levels than the deepest group. In these cases, the column header will span multiple column group rows, increasing the cell height proportionally to the number of rows spanned.

TODO;

Column Group Header Height

The columnGroupHeaderHeight property determines the height of each column group header row. Column groups can form a hierarchical structure with multiple rows.

TODO;

You can modify the column group header height by updating the columnGroupHeaderHeight state:

// Set the column group header height to 30px
grid.state.columnGroupHeaderHeight.set(30);

Floating Row Height

The floating row appears as an additional header row below the column header. It's useful for displaying supplementary information or interactive components such as floating filters. Use the floatingRowHeight property to set its height.

TODO;

The floating row height can be adjusted dynamically:

// Set the floating row height to 24px
grid.state.floatingRowHeight.set(24);