Tree

When To Use

Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The Tree component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a Tree.

Examples

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/basic-controlled.tsx">Controlled Tree</code> <code src="./demo/draggable.tsx">draggable</code> <code src="./demo/dynamic.tsx">load data asynchronously</code> <code src="./demo/search.tsx">Searchable</code> <code src="./demo/line.tsx">Tree with line</code> <code src="./demo/customized-icon.tsx">Customize Icon</code> <code src="./demo/directory.tsx">directory</code> <code src="./demo/directory-debug.tsx" debug>Directory Debug</code> <code src="./demo/switcher-icon.tsx">Customize collapse/expand icon</code> <code src="./demo/virtual-scroll.tsx">Virtual scroll</code> <code src="./demo/drag-debug.tsx" debug>Drag Debug</code> <code src="./demo/big-data.tsx" debug>Big data</code> <code src="./demo/block-node.tsx">Block Node</code> <code src="./demo/component-token.tsx" debug>Component Token</code> <code src="./demo/multiple-line.tsx" debug>Multiple lines</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/line-debug.tsx" debug>Line debug</code>

API

Common props ref：Common props

Tree props

TreeNode props

DirectoryTree props

Note

Before 3.4.0: The number of treeNodes can be very large, but when checkable=true, it will increase the compute time. So, we cache some calculations (e.g. this.treeNodesStates) to avoid double computing. But, this brings some restrictions. When you load treeNodes asynchronously, you should render tree like this:

{
  this.state.treeData.length ? (
    <Tree>
      {this.state.treeData.map((data) => (
        <TreeNode />
      ))}
    </Tree>
  ) : (
    'loading tree'
  );
}

Tree Methods

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="Tree"></ComponentTokenTable>

FAQ

Why defaultExpandAll not working on ajax data? {#faq-default-expand-all}

default prefix props only work when initializing. So defaultExpandAll has already been executed when ajax loads data. You can control expandedKeys or render the Tree when data is loaded to realize expanding all nodes.

Virtual scroll limitation {#faq-virtual-scroll-limitation}

Virtual scroll only render items in visible region. Thus not support auto width (like long title with horizontal scroll).

What does disabled node work logic in the tree? {#faq-disabled-node}

Tree change its data by conduction. Includes checked or auto expanded, it will conduction state to parent / children node until current node is disabled. So if a controlled node is disabled, it will only modify self state and not affect other nodes. For example, a parent node contains 3 child nodes and one of them is disabled. When check the parent node, it will only check rest 2 child nodes. As the same, when check these 2 child node, parent will be checked whatever checked state the disabled one is.

This conduction logic prevents modifying disabled parent checked state by checking children nodes, and users cannot modify directly with click which avoids interactive conflicts. If you want to modify this conduction logic, you can customize it with the checkStrictly prop.