For grouped data grids, you can use the groupHeaderRenderer to display a custom header for each group. The group header can span the entire width of the grid, or it can be split into left and right locked sections. You can use the existing hierarchy column to display the group header, or you can use a custom renderer Please see https://reactdatagrid.com/examples/?example=Group_Headers and https://reactdatagrid.com/examples/?example=Large_Dynamic_Grid for examples.
The group header label function. This is used to control the text that is displayed in the group header.
The text that is displayed in the group header.
The item that is being rendered.
The flag to turn on group headers.
The field that is used to render the group header.
The group header height function. This is used to control the height of the group header.
When grouped headers are used, you can optionally show the group item row itself. this is useful when you want to show the group header, but also want to show the group item row which may have summary data.
If you already have a column that renders hierarchy, you can use that column to render the group header. as we do in the following example: https://reactdatagrid.com/examples/?example=Group_Headers This is what enables the checkbox as well as the expand/collapse icon in the group header.
Generated using TypeDoc