React Data GridColumn groups
Group your columns, using multiple levels of nested column headers, to better reflect the structure of your data.
Nested column headers
The NestedHeaders
plugin allows you to create a nested headers structure by using the colspan
attribute.
To create a header that spans multiple columns, its corresponding configuration array element should be provided as an object with label
and colspan
properties. The label
property defines the header's label, while the colspan
property defines the number of columns that the header should cover.
Configuration
nestedHeaders={[
['A', { label: 'B', colspan: 8 }, 'C'],
['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],
['H', { label: 'I', colspan: 2 }, { label: 'J', colspan: 2 }, { label: 'K', colspan: 2 }, { label: 'L', colspan: 2 }, 'M'],
['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']
]}
Example
Collapsible headers
The CollapsibleColumns
plugin enables columns and their headers to be collapsed/expanded.
This plugin adds multi-column headers which have buttons. Clicking these buttons will collapse or expand all "child" headers, leaving the first one visible.
The NestedHeaders
plugin needs to be enabled for this to work properly.
Configuration
To enable the Collapsible Columns plugin, either set the collapsibleColumns
configuration option to:
true
- this will enable the functionality for all multi-column headers, every column with thecolspan
attribute defined will be extended with the "expand/collapse" button- An array of objects containing information specifying which headers should have the "expand/collapse" buttons for example:
collapsibleColumns={[
{ row: -4, col: 1, collapsible: true }, // Add the button to the 4th-level header of the 1st column - counting from the first table row upwards.
{ row: -3, col: 5, collapsible: true } // Add the button to the 3rd-level header of the 5th column - counting from the first table row upwards.
]}
Example
Known limitations
- A column header can span up to 1000 columns, as the HTML table specification (opens new window) sets the
limit of
colspan
to1000
. - A nested column header can't be wider than its parent element (headers can't overlap).
Related keyboard shortcuts
Windows | macOS | Action | Excel | Sheets |
---|---|---|---|---|
Enter | Enter | Collapse or expand the selected column group | ✗ | ✗ |
Related API reference
- Configuration options:
- Core methods:
- Hooks:
- Plugins: