Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

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.