Tree

<Tree> Used to show a tree-structured data.

Import

import { Tree } from 'rsuite';

// or
import Tree from 'rsuite/Tree';

Examples

Default

Draggable

Async

Props

interface DataItemType {
  /** The value of the option corresponds to the `valueKey` in the data. **/
  value: string;

  /** The content displayed by the option corresponds to the `labelKey` in the data. **/
  label: ReactNode;

  /**
   * The data of the child option corresponds to the `childrenKey` in the data.
   * Properties owned by tree structure components, such as TreePicker, Cascader.
   */
  children?: DataItemType[];

  /**
   * Properties of grouping functional components, such as CheckPicker, InputPicker
   */
  groupBy?: string;

  /**
   * The children under the current node are loading.
   * Used for components that have cascading relationships and lazy loading of children. E.g. Cascader, MultiCascader
   */
  loading?: boolean;
}
type DropDataType = {
  /** drag node data */
  dragNode: any;

  /** dropNode data */
  dropNode: any;

  /** node drop position */
  dropNodePosition: TREE_NODE_DROP_POSITION;

  /** Update Data when drop node */
  createUpdateDataFunction: (data: any[]) => any[];
};

enum TREE_NODE_DROP_POSITION {
  DRAG_OVER = 0, // drag node in tree node
  DRAG_OVER_TOP = 1, // drag node on tree node
  DRAG_OVER_BOTTOM = 2 // drag node under tree node
}

<Tree>

Property Type (Default) Description
childrenKey string ('children') Tree data structure Children property name
classPrefix string('picker') The prefix of the component CSS class
data * Array<DataItemType > Tree Data
defaultExpandAll boolean Expand all nodes By default
defaultExpandItemValues any [] Set the value of the default expanded node
defaultValue string Default selected Value
disabledItemValues string[] Disable item by value
draggable boolean Setting drag node
expandItemValues any [] Set the value of the expanded node (controlled)
getChildren (node: DataItemType) => Promise<DataItemType > load node children data asynchronously
height number (360px) Height of tree. When virtualize is true, you can set the height of tree
labelKey string ('label') Tree data structure Label property name
listProps ListProps List-related properties in react-virtualized
onChange (value:string) => void Callback function for data change
onDragEnd (nodeData:DataItemType, event) => void Called when node drag end
onDragEnter (nodeData:DataItemType, event) => void Called when node drag enter
onDragLeave (nodeData:DataItemType, event) => void Called when node drag leave
onDragOver (nodeData:DataItemType, event) => void Called when node drag over
onDragStart (nodeData:DataItemType, event) => void Called when node drag start
onDrop (dropData:DropDataType, event) => void Called when node drop
onExpand (expandItemValues: any [], activeNode: DataItemType, concat:(data, children) => Array) => void Callback When tree node is displayed
onSelect (activeNode:DataItemType, value, event) => void Callback function after selecting tree node
renderDragNode (nodeData:DataItemType) => ReactNode Custom Render drag node when draggable is true
renderTreeIcon (nodeData:DataItemType) => ReactNode Custom Render icon
renderTreeNode (nodeData:DataItemType) => ReactNode Custom Render tree Node
searchKeyword string searchKeyword (Controlled)
value string Selected value
valueKey string ('value') Tree data Structure Value property name
virtualized boolean Whether using Virtualized List
  • <CheckTree> Selector component, which supports a Checkbox on the TreePicker node for multiple selections.
  • <TreePicker> Used to show a tree-structured data.
  • <CheckTreePicker> Used to show a tree-structured data while supporting Checkbox selection.