Tree

For content with many levels, such as folders, catalogs, and organizational structures, the tree can clearly show their hierarchical relationship, and has interactive functions such as expanding, collapsing, and selecting.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

• Basic: Give each TreeNode node a globally unique key (required), and the title is the content to be displayed on the node.
• From TreeData
• BlockNode: The treeNode occupy the remaining horizontal space.
• Multiple Selection: Add multiple={true} to Tree to enable multiple selection.
• Checkable: Add the checkable attribute to display the checkbox, and you can use defaultCheckedKeys to specify which nodes are checked by default.
• Controlled: You can specify the selectedKeys or checkedKeys or expandedKeys property of the tree to turn the tree into a controlled mode, and operate on the return value in the onSelect / onCheck / onExpand callback.
• Dynamic Loading: Load nodes dynamically.
• Draggable: Draggable nodes.
• Checked Strategy: Add checkedStrategy to set the return value when selected.
• Show Line: Add the showLine property to Tree to display the connecting line.
• Size
• Node Icon: The property icon of TreeNode can specify an icon for the node.
• Extra Node: The renderExtra property of Tree can customize node content.
• Component Icons: The components loadingIcon, dragIcon, and switcherIcon can be set through the icons property.
• Virtual List: By specifying virtualListProps to turn on the virtual list, high performance can be obtained when a large amount of data is used.
• Searchable
• Customize treeData: You can customize treeData by fieldNames.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Tree

Tree.Node

AllowDrop

export type AllowDrop = (options: {
  dropNode: NodeInstance;
  dragNode: NodeInstance | null;
  dropPosition: number;
}) => boolean;

TreeDataType

export type TreeDataType = NodeProps & {
  key?: string;
  _index?: number;
  children?: TreeDataType[];
  [key: string]: any;
};

FieldNamesType

export type FieldNamesType = {
  key?: string;
  title?: string;
  disabled?: string;
  children?: string;
  isLeaf?: string;
  disableCheckbox?: string;
  checkable?: string;
};

AvailableVirtualListProps

export type AvailableVirtualListProps = Pick<
  VirtualListProps<any>,
  | "height"
  | "itemHeight"
  | "threshold"
  | "isStaticItemHeight"
  | "scrollOptions"
  | "onScroll"
  | "wrapperChild"
>;

ActionOnClick

export type ActionOnClick = "select" | "check" | "expand";

NodeInstance

export type NodeInstance = ReactElement<
  PropsWithChildren<NodeProps>,
  typeof TreeNode
>;

VirtualListProps