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: GridColDef[] = [{ 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 },
];
const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => row.path;
<DataGridPro
treeData
getTreeDataPath={getTreeDataPath}
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 },
];
const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) =>
row.path.split('/');
<DataGridPro
treeData
getTreeDataPath={getTreeDataPath}
rows={rows}
columns={columns}
/>;
Custom grouping column
Same behavior as for the Row grouping except for the leafField
and mainGroupingCriteria
which are not applicable for the Tree data.
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.
Automatic parents and children selection
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.
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.
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.
Children lazy-loading
Check the Server-side tree data section for more information about lazy-loading tree data children.