Top
TreeView - Using the path property
TreeView
Each node has a path to itself, starting from the root of the tree. The node path is a string that uniquely identifies a node from dataSource.
The node path is used to indicate which nodes are collapsed, expanded, active or selected
There are two ways to configure how the <TreeView /> uses node paths and indexes nodes based on their path:
  • using the pathProperty prop - if this is specified, the node path is built by joining together all values of curentNode[pathProperty] starting from the root to the targeted node. Those values are joined together using the value specified by pathSeparator.
  • using the idProperty - if this is specified, the node path is just the value of node[idProperty] property, as it already uniquely identifies the node.
If neither pathProperty nor idProperty are specified, the path of a node is built by joining the indexes of all parent nodes from root to the targeted node (the indexes are joined using the pathSeparator prop value). So for the third child of the first dataSource item, the path would be "0/2". For the second child of this node, the path would be "0/2/1".
The most important thing about node paths and how you configure them is that they have to be unique! Unless paths are not unique, it can make the <TreeView /> behave in unexpected ways.
Make sure that the node paths are unique by choosing the best stragegy that fits your use-case.
Paths are important to grasp because you have to use them in a number of props in the <TreeView /> - for example, when you want to specify some nodes to be rendered as collapsed by default.
If you want all nodes after a certain depth to be rendered as collapsed, you can use the uncontrolled defaultCollapsedDepth prop (or the controlled collapsedDepth). This prop should not be used (has no effect) when collapsed or defaultCollapsed are specified.