React Data GridTree 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 when using relational databases or being provided with flat data. The data does not need to be provided to the grid pre-structured and can support 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 if your data is already in a structured hierarchy, for example, when using object databases.

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

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

Next Up

Continue to the next section to learn about supplying Data Paths.