Tree

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

Import

MainIndividual
import { Tree } from 'rsuite';

Examples

Basic

Show Indent Lines

Custom Tree Node

Draggable

Virtualized

Asynchronous Loading of Child Nodes

Searchable

Disabled Tree Node

Accessibility

ARIA properties

tree

  • Tree has role tree.

treeitem

  • Tree node has role treeitem.
  • Has the aria-expanded attribute to indicate whether the tree is open or not.
  • Has the aria-selected attribute to indicate whether the tree node is selected or not.
  • Has the aria-level attribute to indicate the level of the tree node.
  • Has the aria-disabled attribute to indicate whether the tree node is disabled or not.

Keyboard interactions

  • ↓ - Move focus to the next tree node.
  • ↑ - Move focus to the previous tree node.
  • → - Expand the focused tree node if it is collapsed.
  • ← - Collapse the focused tree node if it is expanded.
  • Enter - Select the focused tree node.

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 * TreeNode[] 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 (node: TreeNode) => Promise<TreeNode > 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 (node: TreeNode, event) => void Called when drag ends
onDragEnter (node: TreeNode, event) => void Called when drag enters a node
onDragLeave (node: TreeNode, event) => void Called when drag leaves a node
onDragOver (node: TreeNode, event) => void Called when drag over a node
onDragStart (node: TreeNode, event) => void Called when drag start
onDrop (dropData: DropDataType, event) => void Called when drop
onExpand (expandItemValues: string[], node: TreeNode, concat:(data, children) => Array) => void Callback When tree node is displayed
onSearch (keyword: string) => void Callback function for search
onSelect (node:TreeNode, value, event) => void Callback function after selecting tree node
renderTreeIcon (node: TreeNode, expanded: boolean) => ReactNode Custom Render icon
renderTreeNode (node: TreeNode) => ReactNode Custom Render tree Node
searchable boolean Whether to show the search box
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:TreeNode 

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

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

  /** The data of the child option corresponds to the `childrenKey` in the data. */
  children?: TreeNode[];
}

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