Skip to content

Data grid - Tree data

Use Tree data to handle rows with parent / child relationship.

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}
/>;
Group
Job Title
Recruitment Date
Sarah
Head of Human Resources
9/12/2020
Thomas (6)
Head of Sales
4/4/2017
Mary (6)
Head of Engineering
4/14/2016
Total Rows: 3

Custom grouping column

Same behavior as for the Row grouping except for the leafField and mainGroupingCriteria which are not applicable for the Tree data.

Hierarchy
Name
Job Title
Recruitment Date
Sarah
Head of Human Resources
9/12/2020
Thomas
Head of Sales
4/4/2017
Mary
Head of Engineering
4/14/2016
Total Rows: 3

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

Same behavior as for the Row grouping.

Gaps in the tree

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

Group
Job Title
Recruitment Date
Gap
Sarah
Head of Human Resources
9/12/2020
no
Thomas (6)
Mary (6)
Total Rows: 3

Filtering

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

  • at least one of its descendants 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.

Group
Job Title
Recruitment Date
Thomas (6)
Head of Sales
4/4/2017
Robert
Sales Person
12/20/2020
Karen
Sales Person
11/14/2020
Nancy
Sales Person
11/29/2017
Daniel
Sales Person
8/21/2020
Christopher
Sales Person
8/20/2020
Donald
Sales Person
7/28/2019
Mary (6)
Head of Engineering
4/14/2016
Jennifer (1)
Tech lead front
6/17/2016
Total Rows: 2 of 3

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.

Group
Job Title
Recruitment Date
Mary (6)
Head of Engineering
4/14/2016
Jennifer (1)
Tech lead front
6/17/2016
Anna
Front-end developer
12/7/2019
Michael
Tech lead devops
8/1/2021
Linda (2)
Tech lead back
1/12/2017
Elizabeth
Back-end developer
3/22/2019
William
Back-end developer
5/19/2018
Thomas (6)
Head of Sales
4/4/2017
Robert
Sales Person
12/20/2020
Total Rows: 3

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

Alternatively, you can achieve a similar behavior by implementing this feature outside the component as shown below. 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 rowExpansionChange event.

No rows
Group
Job Title
Recruitment Date

Full example

Name
Avatar
Website
Rating
Email
Phone
Username