Vue Data GridTree Data - Overview

Enterprise

Tree Data provides a way to supply the grid with structured hierarchical data.

Enabling Tree Data

To enable Tree Data set the treeData property to true in the grid options, and provide a getDataPath callback to configure the Row Hierarchy

The example above uses the following configuration to enable Tree Data:

<ag-grid-vue
    :treeData="treeData"
    :getDataPath="getDataPath"
    /* other grid options ... */>
</ag-grid-vue>

this.treeData = true;
this.getDataPath = data => data.path;

API Reference

boolean

default: false

Set to true to enable the Grid to work with Tree Data. You must also provide 'treeDataChildrenField' or implement the getDataPath(data) callback.

Tree Data

GetDataPath

Initial

Callback to be used when working with Tree Data when treeData = true.

Tree Data

ColDef

Allows specifying the group 'auto column' if you are not happy with the default. If grouping, this column definition is included as the first column in the grid. If not grouping, this column is not included.

Group Column Configuration

number

default: 0

If grouping, set to the number of levels to expand by default, e.g. 0 for none, 1 for first level only, etc. Set to -1 to expand everything.

Opening Group Levels by Default

Function

(Client-side Row Model only) Allows groups to be open by default.

Open Groups by Default

boolean

default: false

Initial

Set to true prevent Group Rows from sticking to the top of the grid.