/ S

React Data Grid Column groups

Group your columns, using multiple levels of nested column headers, to better reflect the structure of your data.

In this article

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 the colspan 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 to 1000.
      • A nested column header can't be wider than its parent element (headers can't overlap).

      ← Column hiding →