React Data GridTree Data - Overview

Enterprise

Tree Data provides a way to supply the grid with structured hierarchical data.

Enabling Tree Data Copy Link

To enable Tree Data set the treeData property to true in the grid options, and provide a getDataPath callback to configure the Row Hierarchy. Alternatively, see how to Provide Tree Data.

The example above uses the following configuration to enable Tree Data:

const treeData = true;
const getDataPath = useCallback(data => data.path, []);

<AgGridReact
    treeData={treeData}
    getDataPath={getDataPath}
/>

API Reference Copy Link

treeDataCopy Link
boolean
default: false
Set to true to enable the Grid to work with Tree Data. You must also implement the getDataPath(data) callback.
getDataPathCopy Link
GetDataPath
Callback to be used when working with Tree Data when treeData = true.
treeDataChildrenFieldCopy Link
string
The name of the field to use in a data item to retrieve the array of children nodes of a node when while using treeData=true. It supports accessing nested fields using the dot notation.
treeDataParentIdFieldCopy Link
string
The name of the field to use in a data item to find the parent node of a node when using treeData=true. The tree will be constructed via relationships between nodes using this field. getRowId callback need to be provided as well for this to work. It supports accessing nested fields using the dot notation.
autoGroupColumnDefCopy Link
Allows specifying the group 'auto column' if you are not happy with the default. If grouping, this column definition is included as the first column in the grid. If not grouping, this column is not included.
groupDefaultExpandedCopy Link
number
default: 0
If grouping, set to the number of levels to expand by default, e.g. 0 for none, 1 for first level only, etc. Set to -1 to expand everything.
isGroupOpenByDefaultCopy Link
Function
(Client-side Row Model only) Allows groups to be open by default.
suppressGroupRowsStickyCopy Link
boolean
default: false
Set to true prevent Group Rows from sticking to the top of the grid.

Next Up Copy Link

Continue to the next section to learn how to Supply Data.