Vue Data Grid

Tree Data

vue logo

Use Tree Data to display data that has parent / child relationships where the parent / child relationships are provided as part of the data. For example, a folder can contain zero or more files as well as other folders.

This section introduces simple ways to work with Tree Data, before covering more advanced use cases.

Tree Data Mode

In order to set the grid to work with Tree Data, simply enable Tree Data mode via the Grid Options using:

    /* other grid options ... */>

this.treeData = true;

Supplying Tree Data

When providing tree data to the grid, you will need to implement the gridOptions.getDataPath(data) callback to tell the grid the hierarchy for each row. The callback must return a string[] representing the route, with each element specifying a level of the tree. Below are two examples presenting the hierarchy in different ways.