Search

Vue Data GridTree Data - Hierarchy

Enterprise

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

Providing Hierarchy

Each rows position in the hierarchy must be provided to the grid as an array of strings, representing the path to the row. The getDataPath callback is used to provide the grid with this path for each row.

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 a case where two group rows were omitted from the provided hierarchy. The grid highlights these omitted group rows by displaying 'Filler Group' in the 'Group Type' column.

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.