Tree data PRO
Express data hierarchies through paths or parent IDs.
Provide paths or parent IDs, such as Headquarters → Sales → Representative. Every item must have a unique ID.
View code
Sample data included in the code · 6 rows
Usage guide
#Expand and collapse hierarchical data such as organizations or folders. Unlike regular grouping, this follows parent/child relationships rather than equal values.
Integration steps
- Prepare the hierarchy
Provide paths or parent IDs, such as Headquarters → Sales → Representative. Every item must have a unique ID.
- Pass relationships
Return paths from getDataPath or identify node/parent fields with treeIdField and treeParentField. Follow the API contract for your chosen approach.
- Verify expansion and data
Expand parents and verify children appear. Also handle invalid data such as missing parents or self-parent references.
Create an indented, expandable list reflecting actual parent/child relationships.
The current order sample is flat. Connect hierarchical data and settings in your app to see tree behavior.
Useful terms
- Parent ID
- A unique value referencing the item one level above.
- getDataPath
- A function identifying each row's path within the hierarchy.
Using this feature in your product requires the Pro runtime and a valid license.
API reference
#Other properties4
| Attribute / Property | Type / Default | Description |
|---|---|---|
PRO getDataPath | (row: Record<string, unknown>) => readonly string[]Default: undefined | tree data via materialized paths (AG `treeData` + `getDataPath` parity): every row names its position as a `string[]`. Function prop (property assignment, not attribute). The tree stage runs after filter/sort, before pagination. Mutually exclusive with `group-by` — tree data wins and warns once. |
PRO treeIdField | stringDefault: undefined | declarative tree linkage for `{id, parentId}` tables : set BOTH `tree-id-field` and `tree-parent-field` to activate. `getDataPath` wins when both surfaces are set. |
PRO treeParentField | stringDefault: undefined | parent-id column for declarative tree linkage. |
PRO treeLabelField | stringDefault: undefined | label column for id-linked trees (defaults to the id). |
Events2
| Events | Detail type | Description |
|---|---|---|
PRO | { path: readonly string[]; expanded: boolean } | fires when a tree node expands or collapses. |
PRO | SyGridTreeReparentedDetail | Select a name to inspect its type contract. |
Methods4
| Method / Arguments | Return type | Description |
|---|---|---|
PRO path: readonly string[], expanded: boolean | Promise<void> | expand/collapse one tree node by its path. No-ops (with a warning) when tree data is inactive or the path names no collapsible node (leaves have nothing to collapse). |
PRO | Promise<void> | expand every tree node (one `treeNodeToggled` per change). |
PRO | Promise<void> | collapse every collapsible tree node. |
PRO request: SyGridReparentRequest | Promise<SyGridReparentResult> | reparent rows on the id-linkage tree: plan , apply (a NEW rowData; movers cloned with the parent field rewritten), emit `treeReparented`. Loads the `row-drag` chunk on first use; a non-id-linkage tree refuses without loading anything. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.