資料格 - 樹狀資料
使用樹狀資料處理具有父/子關係的列。
若要啟用樹狀資料，您只需使用 treeData 屬性，並提供 getTreeDataPath 屬性。getTreeDataPath 函數會傳回字串陣列，代表給定列的路徑。
// 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}
/>;
存取分組欄位
如果您想要存取分組欄位，例如，將其與欄位釘選一起使用，則可以使用 GRID_TREE_DATA_GROUPING_FIELD 常數。
<DataGridPro
treeData
initialState={{
pinnedColumns: {
left: [GRID_TREE_DATA_GROUPING_FIELD],
},
}}
{...otherProps}
/>
群組展開
與列分組的行為相同。
自動父項和子項選取
與列分組的行為相同。
樹狀結構中的間隙
如果缺少某些條目來建立完整的樹狀結構，Data Grid Pro 將自動建立列來填補這些間隙。
篩選
如果符合以下條件之一，則包含節點
- 其至少一個後代通過篩選器
- 它正在通過篩選器
預設情況下，篩選會套用至樹狀結構的每個深度。您可以使用 disableChildrenFiltering 屬性將篩選限制為最上層列。
排序
預設情況下，排序會套用至樹狀結構的每個深度。您可以使用 disableChildrenSorting 屬性將排序限制為最上層列。