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.

Group header height

By default, column group headers are the same height as column headers. This will be the default 56 pixels or a custom value set with the columnHeaderHeight prop.

The columnGroupHeaderHeight prop can be used to size column group headers independently of column headers.

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.

Collapsible column groups

The demo below uses renderHeaderGroup to add a button to collapse/expand the column group.

Manage group visibility 🚧

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

Column group ordering 🚧

Users could drag and drop group header to move all the group children at once, like they can already do it with normal columns.

API

• DataGrid
• DataGridPro
• DataGridPremium