Tree

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

Usage

import { Tree } from 'rsuite';

Examples

Default

Draggable

Virtualized List

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 * 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)
height number (360px) height of menu. When virtualize is true, you can set the height of menu
labelKey string ('label') Tree data structure Label property name
onChange (value:string) => void Callback function for data change
onDragStart (nodeData:DataItemType, event) => void Called when node drag start
onDragEnter (nodeData:DataItemType, event) => void Called when node drag enter
onDragOver (nodeData:DataItemType, event) => void Called when node drag over
onDragLeave (nodeData:DataItemType, event) => void Called when node drag leave
onDragEnd (nodeData:DataItemType, event) => void Called when node drag end
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) => React.Node Custom Render drag node when draggable is true
renderTreeIcon (nodeData:DataItemType) => React.Node Custom Render icon
renderTreeNode (nodeData:DataItemType) => React.Node Custom Render tree Node
searchKeyword string searchKeyword (Controlled)
value string Selected value
valueKey string ('value') Tree data Structure Value property name
virtualized boolean (false) Whether using Virtualized List

DataItemType

type DataItemType = {
  value: string;
  label: React.Node;
  children?: Array<DataItemType>;
};

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.