Tree Data can be supplied to the grid in multiple ways.
Picking Your Approach Copy Link
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. Supports Transaction Updates.
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. Does NOT support Transaction Updates.
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 if your data is flat and has a parent id field, for example if it comes from a relational database table. Supports Transaction Updates.
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'.
Next Up Copy Link
Continue to the next section to learn about supplying Data Paths.