Top
TreeView - Checking selecting & expanding nodes
TreeView
The <TreeView /> can render checkboxes next to each node when enableChecked=true.
The following props control checkedbox behaviour and allow customizing how the user can interact with the checkboxes in the tree:
  • checked - controls which nodes are rendered as checked. This is a controlled prop. Make sure you use it in combination with onCheckedChange({ checkedMap }). This property is an object with keys being node paths. Truthy values represent checked tree nodes. Eg: checked={ '0/1': true, '3/2': true }.
  • defaultChecked : Object - uncontrolled version of checked, sets the initial checked state.
  • checkNodesRecursive : Bool - whether node checking should be recursive - when checkNodesRecursive=true, checking a root node will also check all its child nodes. Interaction also goes upwards - so checking the last unchecked leaf in a root node will change the checked state for the root. Basically, it's the normal behaviour one expects from checking nodes in a tree structure - for any given a node:
    • if it's children are all checked, it will also be rendered as checked.
    • if only some of it's children are checked, it will have undeterminated state.
    • if only some of the children are checked and the user checks the node, all of node's children will be checked.
    • if all of it's children are checked and the user clicks to uncheck the node, all of node's children will be unchecked.
  • enableChecked : Bool - controls whether the <TreeView /> should render checkboxes for tree nodes.
  • checkBeforeIcon : Bool - controls checkbox position.
  • renderCheck : Fn({(domProps, nodeProps)})|React.Node - custom render for CheckBox.
  • checkNode: Fn(path) - method used to check a node.
  • setChecked: Fn(path) - method used to change checked.
  • checkAll: Fn(path) - method used to check all nodes.
  • checkOnClick - whether to check node when node.label is clicked.
  • checkOnSelect - whether to render selected nodes as checked. This makes selected and checked syncronized.
  • isNodeChecked({ node, path, checkedMap }) - determines if a node is checked, overwrites checked and defaultChecked.
  • onCheckedChange({ checkedMap }) - function called when checked changes.
<TreeView /> nodes can be selected by clicking on them if enableSelection=true. Selected nodes have a specific background set by the theme.
Here's a list with various props that configure how node selection is performed and how the use can interact with selected nodes:
  • selected : Object - controls which nodes are rendered as selected. This is a controlled prop. Make sure you use it in combination with onSelectionChange({ selectedMap }). This property is an object with keys being node paths. Truthy values represent selected tree nodes. Eg: checked={ '0/1': true, '3/2': true }
  • defaultSelected : Object - uncontrolled version of selected, sets its initial selected state.
  • selectNode(nodePath) : Fn(nodePath) - method used to programatically select the node at the specified path.
  • deselectNode(nodePath) : Fn(nodePath) - method used to programmatically deselect the node at the specified path.
  • setSelected(pathMap) : Fn(selected: pathMap) - method used to programatically set the selected state.
  • selectAll : Fn() - method used to select all nodes.
  • onSelectionChange : Fn({ selectedMap, ...nodeProps}) - function prop called when selection changes. If you are using the controlled selected prop, make sure you specify onSelectionChange in order to update the controlled selected prop value.
The <TreeView /> offers a very flexible control over which nodes to be rendered collapsed and which be rendered expanded. By default, if no prop is specified, all nodes are rendered as expanded.
You can use the defaultCollapsed prop to explicitly configure which nodes should be collapsed.
Or use defaultCollapsedDepth to make all nodes after a certain depth be collapsed.
Additionally, in you can use isNodeCollapsed to determine which nodes should be rendered as collapsed or expanded.
isNodeCollapsed overrides both the collapsed (and the uncontrolled defaultCollapsed) and collapsedDepth (and the uncontrolled defaultCollapsedDepth) props. Since it overrides all those props, it's the ultimate source of truth for determining if a node is collapsed or expanded.