Data Grid - Group & Pivot

Use grouping, pivoting, and more to analyze the data in depth.

Tree Data

Tree Data allows to display data with parent/child relationships.

To enable the Tree Data, you simply have to use the treeData prop as well as provide a getTreeDataPath prop. The getTreeDataPath function returns an array of strings which represents the path to a given row.

// The following examples will both render the same tree
// - Sarah
//     - Thomas
//         - Robert
//         - Karen

const columns: GridColumns = [{ field: 'jobTitle', width: 250 }];

// Without transformation
const rows: GridRowsProp = [
  { path: ['Sarah'], jobTitle: 'CEO', id: 0 },
  { path: ['Sarah', 'Thomas'], jobTitle: 'Head of Sales', id: 1 },
  { path: ['Sarah', 'Thomas', 'Robert'], jobTitle: 'Sales Person', id: 2 },
  { path: ['Sarah', 'Thomas', 'Karen'], jobTitle: 'Sales Person', id: 3 },
];

<DataGridPro
  treeData
  getTreeDataPath={(row) => row.path}
  rows={rows}
  columns={columns}
/>;

// With transformation
const rows: GridRowsProp = [
  { path: 'Sarah', jobTitle: 'CEO', id: 0 },
  { path: 'Sarah/Thomas', jobTitle: 'Head of Sales', id: 1 },
  { path: 'Sarah/Thomas/Robert', jobTitle: 'Sales Person', id: 2 },
  { path: 'Sarah/Thomas/Karen', jobTitle: 'Sales Person', id: 3 },
];

<DataGridPro
  treeData
  getTreeDataPath={(row) => row.path.split('/')}
  rows={rows}
  columns={columns}
/>;

Custom grouping column

Use the groupingColDef prop to customize the rendering of the grouping column.

Accessing the grouping column field

If you want to access the grouping column field, for instance, to use it with column pinning, the GRID_TREE_DATA_GROUPING_FIELD constant is available.

<DataGridPro
  treeData
  initialState={{
    pinnedColumns: {
      left: [GRID_TREE_DATA_GROUPING_FIELD],
    },
  }}
  {...otherProps}
/>

Group expansion

Use the defaultGroupingExpansionDepth prop to expand all the groups up to a given depth when loading the data. If you want to expand the whole tree, set defaultGroupingExpansionDepth = -1

Use the setRowChildrenExpansion method on apiRef to programmatically set the expansion of a row.

Gaps in the tree

If some entries are missing to build the full tree, the DataGridPro will automatically create rows to fill those gaps.

Filtering

A node is included if one of the following criteria is met:

• at least one of its descendant is passing the filters
• it is passing the filters

By default, the filtering is applied to every depth of the tree. You can limit the filtering to the top-level rows with the disableChildrenFiltering prop.

Sorting

By default, the sorting is applied to every depth of the tree. You can limit the sorting to the top level rows with the disableChildrenSorting prop.

If you are using sortingMode="server", you need to always put the children of a row after its parent. For instance:

// ✅ The row A.A is immediately after its parent
const validRows = [{ path: ['A'] }, { path: ['A', 'A'] }, { path: ['B'] }];

// ❌ The row A.A is not immediately after its parent
const invalidRows = [{ path: ['A'] }, { path: ['B'] }, { path: ['A', 'A'] }];

Children lazy-loading

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #3377 if you want to see it land faster.

Alternatively, you can achieve a similar behavior by implementing this feature outside the component as shown bellow. This implementation does not support every feature of the grid but can be a good starting point for large datasets.

The idea is to add a property descendantCount on the row and to use it instead of the internal grid state. To do so, we need to override both the renderCell of the grouping column and to manually open the rows by listening to GridEvents.rowExpansionChange.

Full example

🚧 Master detail

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #211 if you want to see it land faster.

The feature allows to display row details on an expandable pane.

🚧 Grouping

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #212 if you want to see it land faster.

Group rows together that share a column value, this creates a visible header for each group and allows the end-user to collapse groups that they don't want to see.

🚧 Aggregation

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #213 if you want to see it land faster.

When grouping, you will be able to apply an aggregation function to populate the group row with values.

🚧 Pivoting

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #214 if you want to see it land faster.

Pivoting will allow you to take a columns values and turn them into columns.

API

• DataGrid
• DataGridPro