---
title: "Tree Data - Data Paths"
enterprise: true
framework: javascript
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/javascript-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 {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, TreeDataModule]);

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [{ field: "employeeId" }],
  defaultColDef: {
    flex: 1,
  },
  autoGroupColumnDef: {
    headerName: "Organisation Chart",
    field: "name",

    cellRendererParams: {
      suppressCount: true,
    },
  },
  rowData: getData(),
  treeData: true,
  groupDefaultExpanded: 1,
  getDataPath: (data) => data.path,
};

// wait for the document to be loaded, otherwise
// AG Grid will not find the div in the document.
// lookup the container we want the Grid to use
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;

// create the grid passing in the div to use together with the columns & data we want to use
gridApi = createGrid(gridDiv, gridOptions);
```

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

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:

```js
const gridOptions = {
    treeData: true,
    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'] },
    ],
    getDataPath: data => data.path,
    autoGroupColumnDef: {
        field: 'name', // display the name instead of the path key
    },

    // other grid options ...
}
```

## 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 {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, TreeDataModule]);

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [
    // we're using the auto group column by default!
    {
      field: "groupType",
      valueGetter: (params) => {
        return params.data ? "" : "Filler Group";
      },
    },
  ],
  defaultColDef: {
    flex: 1,
  },
  rowData: getData(),
  treeData: true, // enable Tree Data mode
  groupDefaultExpanded: -1, // expand all groups by default
  getDataPath: (data) => data.path,
};

// wait for the document to be loaded, otherwise
// AG Grid will not find the div in the document.
// lookup the container we want the Grid to use
const eGridDiv = document.querySelector<HTMLElement>("#myGrid")!;

// create the grid passing in the div to use together with the columns & data we want to use
gridApi = createGrid(eGridDiv, gridOptions);
```

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

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

```js
const gridOptions = {
    rowData: [
        { path: ['A', 'B', 'C'], id: 'C' },

        { path: ['D'], id: 'D' },
        { path: ['D', 'E'], id: 'E' },
        { path: ['D', 'E', 'F'], id: 'F' },
    ],
    getDataPath: data => data.path,

    // other grid options ...
}
```

> **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 {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, TreeDataModule]);

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [
    {
      headerName: "Aggregated (Sum)",
      aggFunc: "sum",
      field: "items",
    },
    {
      headerName: "Provided",
      field: "items",
    },
  ],
  defaultColDef: {
    flex: 1,
  },
  autoGroupColumnDef: {
    headerName: "Name",
    cellRendererParams: {
      suppressCount: true,
    },
  },
  rowData: getData(),
  treeData: true, // enable Tree Data mode
  groupDefaultExpanded: -1, // expand all groups by default
  getDataPath: (data) => data.path,
};

// wait for the document to be loaded, otherwise
// AG Grid will not find the div in the document.
// lookup the container we want the Grid to use
const eGridDiv = document.querySelector<HTMLElement>("#myGrid")!;

// create the grid passing in the div to use together with the columns & data we want to use
gridApi = createGrid(eGridDiv, gridOptions);
```

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

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