Data Grid - Tree data

Use tree data to render grouped rows in the Data Grid.

Trees are hierarchical data structures that organize data into parent-child relationships. The Data Grid Pro can use tree data to render grouped rows with nested children. The demo below illustrates this feature with a large and complex hierarchical dataset:

Rendering tree data

To work with client-side tree data, pass the treeData and getTreeDataPath props to the <DataGridPro /> component. The getTreeDataPath function returns an array of strings representing the path to a given row.

<DataGridPro treeData getTreeDataPath={getTreeDataPath} />

Both examples that follow will render a tree that looks like this:

// - Sarah
//     - Thomas
//         - Robert
//         - Karen

1. Without transformation:

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

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 },
];

const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => row.path;

<DataGridPro
  treeData
  getTreeDataPath={getTreeDataPath}
  rows={rows}
  columns={columns}
/>;

2. With transformation:

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

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 },
];

const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) =>
  row.path.split('/');

<DataGridPro
  treeData
  getTreeDataPath={getTreeDataPath}
  rows={rows}
  columns={columns}
/>;

Customizing grouping columns with tree data

For complete details on customizing grouping columns, see Row grouping—Grouping columns. The implementation and behavior are the same when working with tree data, but note that the leafField and mainGroupingCriteria props are not applicable.

The demo below customizes the Hierarchy grouping column:

Accessing the grouping column field

To access the grouping column field—for example, to use it with column pinning—the Grid provides the GRID_TREE_DATA_GROUPING_FIELD constant:

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

Group expansion with tree data

For complete details on customizing the group expansion experience, see Row grouping—Group expansion. The implementation and behavior are the same when working with tree data.

Automatic parent and child selection with tree data

For complete details on automatic parent and child selection, see Row grouping—Automatic parent and child selection. The implementation and behavior are the same when working with tree data.

Gaps in the tree

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

Filtering tree data

When a filter is applied, a node is included if it or any of its descendents passes.

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

Sorting tree data

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

Lazy-loading tree data children

See Server-side data—Tree data for details on lazy-loading tree data children.

API

• DataGrid
• DataGridPro
• DataGridPremium