Top
TreeView - Configuring the data source
TreeView
<TreeView /> nodes are configured using dataSource prop.
Objects in the dataSource prop can have the following shape:
  • label - the content (React.Node) to display for the node.
  • icon - an optional icon for the tree node. When a String, is rendered an <img /> with src attribute being set to the value of icon . Otherwise, the given React.Node is rendered.
  • nodes - optional child nodes for the node. A leaf node is a node with nodes=null or nodes=undefined.
  • className - an optional className for the tree node.
  • labelClassName - an optional className for the node label.
  • contentClassName - an optional className for the node content.
  • disabled - whether to render the node is disabled or not.
  • labelStyle - an optional style for the node label.
  • contentStyle - an optional style for the node content.
For non-async trees, a leaf node is a node that has nodes=null or nodes=undefined. When a node is a leaf, the expand tool is not rendered. A node with an empty array for the nodes property, is not a leaf, because you can have a node that is expandable without children (e.g. a folder with no files).
For async trees, that have loadNode or loadNodeOnce specified, a node with node.nodes === null is an async node, which will be loaded once it is expanded. See the next page on Async data and nodes for more details.
The dataSource can also be a Promise or a function returning a Promise (in which case, it is called the the <TreeView /> props as the first argument).
If you want all nodes after a certain depth to be rendered as collapsed, use the uncontrolled defaultCollapsedDepth prop (or the controlled collapsedDepth). This prop should not be used (has no effect) when collapsed or defaultCollapsed are specified.