Expand All

  Getting Started



  Row Models





Github stars make projects look great. Please help, donate a star, it's free.
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').

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 (Sausage, Spaceman and Winklepicker) - this is where you would put aggregation values or group titles if needed.

Also take a look at the File Browser example for a full example.

Tree Data & Vertical Scroll Location

Depending on your scroll position the last item's group data may not be visible when clicking on the expand icon.

You can resolve this by using the function api.ensureIndexVisible(). This ensures the index is visible, scrolling the table if needed.

Example - api.ensureIndexVisible()