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') | Set the key of the child node of the tree node in data | | classPrefix | string('picker') | The prefix of the component CSS class | | data * | TreeNode[] | Data to render the tree | | defaultExpandAll | boolean | Default expand all nodes | | defaultExpandItemValues | string[] | Set the value of the default expanded node | | defaultValue | string | Default selected Value | | disabledItemValues | string[] | Disabled tree node values | ห | | draggable | boolean | Whether to enable drag and drop | | expandItemValues | string[] | Set the value of the expanded node (controlled) | | getChildren | (node: TreeNode) => Promise<TreeNode > | Load node children data asynchronously | | height | number (360px) | The height of the tree | | labelKey | string ('label') | Set the tree node display content to the key in data | | listProps | ListProps | Properties of virtualized lists | | onChange | (value:string) => void | Called when the tree value changes | | 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 | Called when the tree node expand state changes | | onSearch | (keyword: string) => void | Called when the search box input changes | | onSelect | (node:TreeNode, value, event) => void | Called when the tree node is selected | | renderTreeIcon | (node: TreeNode, expanded: boolean) => ReactNode | Custom render tree node icon | | renderTreeNode | (node: TreeNode) => ReactNode | Custom render tree node | | searchable | boolean | Whether to show the search box
| | searchKeyword | string | Set search keywords for the search box | | showIndentLine | boolean | Whether to show the indent line | | value | string | Set the current selected value | | valueKey | string ('value') | Set the tree node value to the key in data | | 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