Skip to content
Edit this page

Data grid - Column groups

Group your columns.

Grouping columns allows you to have a multi-level hierarchy of columns in your header.

Define column groups

You can define column groups with the columnGroupingModel prop. This prop receives an array of column groups.

A column group is defined by at least two properties:

  • groupId: a string used to identify the group
  • children: an array containing the children of the group

The children attribute can contain two types of objects:

  • leafs with type { field: string }, which add the column with the corresponding field to this group.
  • other column groups which allows you to have nested groups.
<DataGrid
  columnGroupingModel={[
    {
      groupId: 'internal data',
      children: [{ field: 'id' }],
    },
    {
      groupId: 'character',
      children: [
        {
          groupId: 'naming',
          children: [{ field: 'lastName' }, { field: 'firstName' }],
        },
        { field: 'age' },
      ],
    },
  ]}
/>

<DataGridPro
  experimentalFeatures={{ columnGrouping: true }}
  rows={rows}
  columns={columns}
  checkboxSelection
  disableSelectionOnClick
  columnGroupingModel={columnGroupingModel}
/>

Customize column group

In addition to the required groupId and children, you can use the following optional properties to customize a column group:

  • headerName: the string displayed as the column's name (instead of groupId).
  • description: a text for the tooltip.
  • headerClassName: a CSS class for styling customization.
  • renderHeaderGroup: a function returning custom React component.
<DataGridPro
  rows={rows}
  columns={columns}
  experimentalFeatures={{ columnGrouping: true }}
  checkboxSelection
  disableSelectionOnClick
  columnGroupingModel={columnGroupingModel}
/>

Column reordering

By default, the columns that are part of a group cannot be dragged to outside their group. You can customize this behavior on specific groups by setting freeReordering: true in a column group object.

In the example below, the Full name column group can be divided, but not other column groups.

<DataGridPro
  rows={rows}
  columns={columns}
  experimentalFeatures={{ columnGrouping: true }}
  checkboxSelection
  disableSelectionOnClick
  columnGroupingModel={columnGroupingModel}
/>

Manage group visibility 🚧

The column group should allow to switch between an extended/collapsed view which hide/show some columns

Reordering groups 🚧

Users could drag and drop group header to move all the group children at once

API