Search

Vue Data GridTree Data - Hierarchy

Enterprise

Configure the grid to display structured data by providing data paths.

Providing Hierarchy

A hierarchy must be presented to the grid as an array of strings, the getDataPath callback is used to convert the underlying data to a string array for the grid.

The below structure demonstrates a simple hierarchy, wherein the grid would expect the getDataPath callback to return the path field:

const data = [
    { path: ['A'], id: 'A' },
    { path: ['A', 'B'], id: 'B' },
    { path: ['A', 'B', 'C'], id: 'C' },
]

In the above hierarchy, the 'A' row is the parent of 'B', and 'B' is the parent of 'C'.

Each path is a unique identifier which the grid uses to determine the hierarchy of the data.

Refer to Displayed Values to learn how to represent identical siblings.

Filler Groups

When providing tree data, the grid will create Filler Groups for any omitted levels in the hierarchy. This means a partial hierarchy can be provided and the grid will use the provided row where possible, or create a Filler Group where not.

The example below demonstrates two group rows which were omitted from the hierarchy, it highlights these by displaying 'Filler' in the 'Group Type' column. All of the other rows were provided, enabling the grid to use the provided data.

This uses the following dataset to provide data for the D and E group rows, but not the A and B group rows:

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

this.rowData = [
    { path: ['A', 'B', 'C'], id: 'C' },

    { path: ['D'], id: 'D' },
    { path: ['D', 'E'], id: 'E' },
    { path: ['D', 'E', 'F'], id: 'F' },
];

As Filler Groups are generated by the grid, they will not contain a data property on the RowNode.

They also do not keep their state should the filler group be moved. E.g when changing row path from A->B->C, to D->B->C group B will not keep its selection or expansion states.

Supplied vs Aggregated

When using Tree Data, columns defined with an aggregation function will always perform aggregations on the group nodes. This means any supplied group data will be ignored in favour of the aggregated values.

The example above uses the configuration below to demonstrate the Desktop row is being aggregated to show the sum of its children (4), rather than the provided value (1), despite both columns showing the same field:

const gridOptions = {
    treeData: true,
    columnDefs: [
        {
            headerName: 'Aggregated (Sum)',
            aggFunc: 'sum',
            field: 'items',
        },
        {
            headerName: 'Provided',
            field: 'items',
        },
    ],
};

Refer to the Aggregation page for more details.

Next Up

Continue to the next section to learn how to configure the Group Column.