---
title: "Tree Data - Overview"
enterprise: true
framework: javascript
version: "36.1.0"
---

# Tree Data - Overview

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

#### Kitchen Sink

```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: "created" },
    { field: "modified" },
    {
      field: "size",
      aggFunc: "sum",
      valueFormatter: (params) => {
        const sizeInKb = params.value / 1024;

        if (sizeInKb > 1024) {
          return `${+(sizeInKb / 1024).toFixed(2)} MB`;
        } else {
          return `${+sizeInKb.toFixed(2)} KB`;
        }
      },
    },
  ],
  defaultColDef: {
    flex: 1,
  },
  autoGroupColumnDef: {
    headerName: "File Explorer",
    minWidth: 280,

    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: Kitchen Sink](https://www.ag-grid.com/examples/tree-data/kitchen-sink/typescript)

## 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](https://www.ag-grid.com/javascript-data-grid/tree-data-paths/). Alternatively, see how to [Provide Tree Data](https://www.ag-grid.com/javascript-data-grid/tree-data-data/).

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

```js
const gridOptions = {
    treeData: true,
    getDataPath: data => data.path,

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

## API Reference

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `treeData` | `boolean` |  | `false` | Set to `true` to enable the Grid to work with Tree Data. You must also implement the `getDataPath(data)` callback. See [Tree Data](https://www.ag-grid.com/javascript-data-grid/tree-data/) for more information. Module: [`TreeDataModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `getDataPath` | `GetDataPath` |  |  | Callback to be used when working with Tree Data when `treeData = true`. See [Tree Data](https://www.ag-grid.com/javascript-data-grid/tree-data/) for more information. Module: [`TreeDataModule`](https://www.ag-grid.com/javascript-data-grid/modules/). [Initial](https://www.ag-grid.com/javascript-data-grid/grid-interface/#initial-grid-options). |
| `treeDataChildrenField` | `string` |  |  | The name of the field to use in a data item to retrieve the array of children nodes of a node when while using treeData=true. It supports accessing nested fields using the dot notation. See [Tree Data](https://www.ag-grid.com/javascript-data-grid/tree-data/) for more information. Module: [`TreeDataModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `treeDataParentIdField` | `string` |  |  | The name of the field to use in a data item to find the parent node of a node when using treeData=true. The tree will be constructed via relationships between nodes using this field. getRowId callback need to be provided as well for this to work. It supports accessing nested fields using the dot notation. See [Tree Data](https://www.ag-grid.com/javascript-data-grid/tree-data/) for more information. Module: [`TreeDataModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `treeDataDisplayType` | `TreeDataDisplayType` |  |  | Specifies how tree data should be displayed. The options are: - `'auto'`: group column automatically added by the grid. - `'custom'`: informs the grid that group columns will be provided. Module: [`TreeDataModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `autoGroupColumnDef` | `AutoGroupColumnDef` |  |  | 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. Cell tooltip properties set here (`tooltipField`, `tooltipValueGetter`, `tooltipComponent`) apply to leaf rows only; group rows inherit cell tooltips from their underlying column `colDef`. `headerTooltip` continues to apply to the group column header. See [Group Column Configuration](https://www.ag-grid.com/javascript-data-grid/grouping-single-group-column/#configuration) for more information. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/javascript-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `groupDefaultExpanded` | `number` |  | `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. See [Opening Group Levels by Default](https://www.ag-grid.com/javascript-data-grid/grouping-opening-groups/#expanding-by-group-level) for more information. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/javascript-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `isGroupOpenByDefault` | `IsGroupOpenByDefault` |  |  | (Client-side Row Model only) Allows group rows to be open by default. For master rows use `isMasterOpenByDefault`. See [Open Groups by Default](https://www.ag-grid.com/javascript-data-grid/grouping-opening-groups/#expanding-via-callback) for more information. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/javascript-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `suppressGroupRowsSticky` | `boolean` |  | `false` | Set to `true` prevent Group Rows from sticking to the top of the grid. See [Suppressing Sticky Groups](https://www.ag-grid.com/javascript-data-grid/grouping-opening-groups/#prevent-sticky-groups) for more information. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/javascript-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/javascript-data-grid/modules/). [Initial](https://www.ag-grid.com/javascript-data-grid/grid-interface/#initial-grid-options). |