🌳 Tree Data & Row Grouping

Display complex, hierarchical data structures with ease.

📂 Row Grouping

Row grouping allows you to categorize rows based on common column values.

<DataGrid
  rows={rows}
  rowGroupingModel={['department', 'role']}
/>

Multi-Level Groups: Nest data as deeply as needed.
Aggregation Integration: Summarize values automatically for each group level.
Expansion Control: Control which groups are expanded by default.

Tree data is used for data that has a natural parent-child relationship (e.g., an organizational chart or file system).

<DataGrid
  treeData
  getTreeDataPath={(row) => row.hierarchyPath} // e.g. ['CEO', 'VP Engineering', 'Manager']
/>

Prop	Type	Default	Description
`rowGroupingModel`	`string[]`	`[]`	Fields to group by (in order).
`treeData`	`boolean`	`false`	Enable tree data mode.
`getTreeDataPath`	`(row) => string[]`	`undefined`	Function to get the path for a row.
`defaultGroupingExpansionDepth`	`number`	`0`	How many levels to expand on load.
`groupingColDef`	`GridColDef`	`undefined`	Custom configuration for the generated group column.

By default, OpenGridX creates a __group__ column. You can customize its appearance:

<DataGrid
  groupingColDef={{
    headerName: 'Hierarchy',
    width: 300,
    renderCell: (params) => { /* custom renderer */ }
  }}
/>