Tree Data (Legacy)

This section describes the legacy approach for working with Tree Data. For the recommended approach which was introduced in v14 please refer to 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.