---
title: "Tree Data - Supplying Data"
enterprise: true
framework: react
version: "36.1.0"
---

# Tree Data - Supplying Data

Tree Data can be supplied to the grid in multiple ways.

## Picking Your Approach

Tree Data can be provided in two different ways, either as a flat list with each record knowing all its ancestors, or as a nested structure with each record containing an array of its children.

Your requirements should determine which approach is best for your application:

- Use [Data Paths](https://www.ag-grid.com/react-data-grid/tree-data-paths/) when using relational databases or being provided with flat data. The data does not need to be provided to the grid pre-structured. Supports [Transaction Updates](https://www.ag-grid.com/react-data-grid/data-update-transactions/).

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

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

- Use [Nested Records](https://www.ag-grid.com/react-data-grid/tree-data-nesting/) if your data is already in a structured hierarchy, for example, when using object databases. Does NOT support [Transaction Updates](https://www.ag-grid.com/react-data-grid/data-update-transactions/).

```
const rowData = [
    {
        id: 'A',
        children: [
            { id: 'B' },
            { id: 'C' },
        ]
    }
]
```

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

- Use [Self-Referential Records](https://www.ag-grid.com/react-data-grid/tree-data-self-referential/) if your data is flat and has a parent id field, for example if it comes from a relational database table. Supports [Transaction Updates](https://www.ag-grid.com/react-data-grid/data-update-transactions/).

```
const rowData = [
    { id: 'A' },
    { id: 'B', parentId: 'A' },
    { id: 'C', parentId: 'A' },
]
```

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