@rc-component/tree

When using asynchronous loading with loadData, the component caches some calculations to improve performance when checkable is enabled. To avoid issues with these cached states during async loading, you should conditionally render the tree only when your data is ready:

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

Install the tree component via npm:

npm install @rc-component/tree

When providing data to the Tree component, you should follow the BasicDataNode interface. This interface defines the standard properties that the tree uses to manage node state and appearance. If you are using custom data structures, you can use FieldDataNode to wrap your custom type with these required tree properties.

Key properties include:

• key: A unique identifier for the node.
• title: The content to display (can be a ReactNode or a function receiving the node data).
• isLeaf: Boolean indicating if the node has no children.
• selectable: Whether the node can be selected.
• checkable: Whether the node can be checked (for checkbox trees).
• disabled: Whether the node is interactive.
• children: An array of child nodes.

The TreeNode component supports native HTML5 drag and drop. While much of the logic is managed by the parent Tree context, the TreeNode handles the following event lifecycle:

• onDragStart: Triggered when dragging begins.
• onDragEnter / onDragOver / onDragLeave: Used to manage drag hover states and drop indicators.
• onDrop: Triggered when a node is dropped onto the target.
• onDragEnd: Triggered when the drag operation completes.

Note that the draggable attribute is automatically applied to the node if the parent Tree context has draggable enabled and the specific node is not disabled.

This demo demonstrates the difference between controlled and uncontrolled approaches when expanding a node and scrolling to a nested node within the Tree component.

In an uncontrolled approach, the Tree manages its own internal state for expansion and scrolling. In a controlled approach, you manage the expandedKeys and potentially other state properties externally, passing them back into the Tree to dictate its behavior.

To use the tree component, import Tree and the DataNode type. You must also import the bundled CSS for the tree to render correctly. You can provide data via the treeData prop using an array of DataNode objects.

import Tree from '@rc-component/tree';
import type { DataNode } from '@rc-component/tree';
import '@rc-component/tree/assets/index.css';

const treeData: DataNode[] = [
  {
    key: '0',
    title: 'Documents',
    children: [{ key: '0-0', title: 'Roadmap' }],
  },
];

export default () => (
  <Tree defaultExpandAll treeData={treeData} onSelect={keys => console.log(keys)} />
);