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' },
      ],
    },
  ]}
/>

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.

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.

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

• DataGrid
• DataGridPro
• DataGridPremium