Tree Data

It is possible to provide the data to ag-Grid in a tree structure. This can be used to provide a view of
a tree (such as a file browser, this is what the File Browser
example does) or you can provide data already
grouped (eg maybe you are going the grouping in our database).

Providing data in a tree structure is in replace of the ag-Grid provided row grouping. If you are
providing the data as a tree structure, then the row grouping features will not be available.

To provide data as a tree structure, you should provide a getNodeChildDetails() callback function.
The existence of this function tells the grid the data is already structured. When you set data into the grid,
the callback function will get called exactly once for each element in the structure. What you should
return from the function is as follows:

Leaf Nodes: Return nothing (null or undefined).

Group Nodes: Return back a nodeChildDetails structure with the following:

group: Always set to 'true'

children: Provide a list of children to this group item.

expanded: Set to true to expand by default, otherwise false.

field: The field (eg 'File Name' or 'Country').

key: The key (eg 'readme.txt' or 'Ireland').

Simple Tree Data Example

Below shows a simple example of providing already structured data. Notice that you can also provide
data to the group level nodes ('Mix of Names', '2000..2012' and 'Group Country') - this is where you
would put aggregation values or group titles if needed.

Example - File Explorer

Below is a more interesting example, real world example. The example also includes
some additional formatting to make it look like Microsoft Windows file explorer.

Welcome to ag-Grid

Niall Crosby spent years building Enterprise Web Applications and found the JavaScript
data grid choice frustrating. That frustration led to Niall quitting his job and
setting up the ag-Grid project.
Read more about ag-Grid →