Tree

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

Import 

import { Tree } from 'rsuite';

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

Examples

Basic

Show Indent Lines

Draggable

Async

Props

<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 * ItemDataType[] Tree Data
defaultExpandAll boolean Expand all nodes By default
defaultExpandItemValues string[] 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 string[] Set the value of the expanded node (controlled)
getChildren (item: ItemDataType) => Promise<ItemDataType > 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 Properties of virtualized lists.
onChange (value:string) => void Callback function for data change
onDragEnd (item: ItemDataType, event) => void Called when node drag end
onDragEnter (item: ItemDataType, event) => void Called when node drag enter
onDragLeave (item: ItemDataType, event) => void Called when node drag leave
onDragOver (item: ItemDataType, event) => void Called when node drag over
onDragStart (item: ItemDataType, event) => void Called when node drag start
onDrop (dropData: [DropDataType][drop], event) => void Called when node drop
onExpand (expandItemValues: string[], item: ItemDataType, concat:(data, children) => Array) => void Callback When tree node is displayed
onSelect (item:ItemDataType, value, event) => void Callback function after selecting tree node
renderTreeIcon (item: ItemDataType) => ReactNode Custom Render icon
renderTreeNode (item: ItemDataType) => ReactNode Custom Render tree Node
searchKeyword string searchKeyword (Controlled)
showIndentLine boolean Whether to show indent line
value string Selected value
valueKey string ('value') Tree data Structure Value property name
virtualized boolean Whether using Virtualized List

ts:ItemDataType 

interface ItemDataType {
  /** 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?: ItemDataType[];

  /**
   * 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;
}

ts:ListProps 

interface ListProps {
  /**
   * Size of a item in the direction being windowed.
   */
  itemSize?: number | ((index: number) => number);

  /**
   * Scroll offset for initial render.
   */
  initialScrollOffset?: number;

  /**
   * Called when the items rendered by the list change.
   */
  onItemsRendered?: (props: ListOnItemsRenderedProps) => void;

  /**
   * Called when the list scroll positions changes, as a result of user scrolling or scroll-to method calls.
   */
  onScroll?: (props: ListOnScrollProps) => void;
}

ts:DropDataType 

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
}

Related components

  • <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.
Vercel banner