Tree #

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

Import #

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.