---
title: "Tree Data - Data Paths"
enterprise: true
framework: vue
version: "36.1.0"
---

# Tree Data - Data Paths

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

## Providing Hierarchy

Each row's 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'.

> **Note**
>
> Each path is a unique identifier which the grid uses to determine the hierarchy of the data.
>
> Refer to [Displayed Values](https://www.ag-grid.com/vue-data-grid/tree-data-paths/#providing-group-values) to learn how to represent identical siblings.

## Providing Group Values

The Group Column cells are populated by the path keys as a default. As these keys must be unique, it can be preferable to display a different value. This can be overridden by providing a `field` or `valueGetter` in the `autoGroupColumnDef` grid option.

#### Displayed Values

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetDataPath,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, TreeDataModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :rowData="rowData"
      :treeData="true"
      :groupDefaultExpanded="groupDefaultExpanded"
      :getDataPath="getDataPath"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([{ field: "employeeId" }]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerName: "Organisation Chart",
      field: "name",
      cellRendererParams: {
        suppressCount: true,
      },
    });
    const rowData = ref<any[] | null>(getData());
    const groupDefaultExpanded = ref(1);
    const getDataPath = ref<GetDataPath>((data) => data.path);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      rowData,
      groupDefaultExpanded,
      getDataPath,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Displayed Values](https://www.ag-grid.com/examples/tree-data-paths/duplicate-paths/vue3)

The above example uses the following configuration to show two 'Bob Stevens' working within the same team, where the path is comprised of unique employee IDs:

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

this.treeData = true;
this.rowData = [
    { employeeId: '1', name: 'Alice Johnson', path: ['1'] },
    { employeeId: '2', name: 'Bob Stevens', path: ['1', '2'] },
    { employeeId: '3', name: 'Bob Stevens', path: ['1', '3'] },
    { employeeId: '4', name: 'Jessica Adams', path: ['1', '4'] },
];
this.getDataPath = data => data.path;
this.autoGroupColumnDef = {
    field: 'name', // display the name instead of the path key
};
```

## 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.

#### Filler Groups

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetDataPath,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, TreeDataModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"
      :treeData="true"
      :groupDefaultExpanded="groupDefaultExpanded"
      :getDataPath="getDataPath"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      // we're using the auto group column by default!
      {
        field: "groupType",
        valueGetter: (params) => {
          return params.data ? "" : "Filler Group";
        },
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
    });
    const rowData = ref<any[] | null>(getData());
    const groupDefaultExpanded = ref(-1);
    const getDataPath = ref<GetDataPath>((data) => data.path);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      groupDefaultExpanded,
      getDataPath,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Filler Groups](https://www.ag-grid.com/examples/tree-data-paths/filler-nodes/vue3)

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

```ts
<ag-grid-vue
    :rowData="rowData"
    :getDataPath="getDataPath"
    /* 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' },
];
this.getDataPath = data => data.path;
```

> **Note**
>
> 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.

#### Aggregated Data

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetDataPath,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, TreeDataModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :rowData="rowData"
      :treeData="true"
      :groupDefaultExpanded="groupDefaultExpanded"
      :getDataPath="getDataPath"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "Aggregated (Sum)",
        aggFunc: "sum",
        field: "items",
      },
      {
        headerName: "Provided",
        field: "items",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerName: "Name",
      cellRendererParams: {
        suppressCount: true,
      },
    });
    const rowData = ref<any[] | null>(getData());
    const groupDefaultExpanded = ref(-1);
    const getDataPath = ref<GetDataPath>((data) => data.path);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      rowData,
      groupDefaultExpanded,
      getDataPath,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Aggregated Data](https://www.ag-grid.com/examples/tree-data-paths/aggregated-data/vue3)

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](https://www.ag-grid.com/vue-data-grid/aggregation/) page for more details, and [Editing Groups](https://www.ag-grid.com/vue-data-grid/grouping-edit/) for editing aggregated values with cascading updates to children.