CheckTree

<CheckTree> is used to display a tree structure data and supports Checkbox selection.

Import

MainIndividual
import { CheckTree } from 'rsuite';

Examples

Basic

Cascade

The cascade attribute can set whether or not CheckTree can consider the cascade relationship of the parent parent when selecting. The default value is true.

Show Indent Lines

Custom Tree Node

Virtualized

Asynchronous Loading of Child Nodes

Searchable

Uncheckable Tree Node

Disabled Tree Node

Accessibility

ARIA properties

tree

  • CheckTree has role tree.
  • CheckTree has the aria-multiselectable=true attribute to indicate that the tree is multi-selectable.

treeitem

  • CheckTree node has role treeitem.
  • Has the aria-expanded attribute to indicate whether the tree is open or not.
  • Has the aria-checked attribute to indicate whether the tree node is checked 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

<CheckTree>

Property Type (Default) Description
cascade boolean (true) Whether to enable cascade selection
childrenKey string ('children') Set the key of the child node of the tree node in data
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
expandItemValues string[] Set the value of the expanded node (controlled)
getChildren (item: 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 (values:string[]) => void Called when the tree value changes
onExpand (expandItemValues: string[], item: TreeNode, concat:(data, children) => Array) => void Called when the tree node expands the child node
onSearch (keyword: string) => void Called when the search box changes
onSelect (item: TreeNode, value:string, event) => void Called when the tree node is selected
renderTreeIcon (item: TreeNode, expanded: boolean) => ReactNode Custom render the icon in tree node
renderTreeNode (item: TreeNode) => ReactNode Custom render tree node
searchable boolean Whether to show the search box
searchKeyword string Set search keywords for the search box
uncheckableItemValues string[] Set the tree node values that do not display checkboxes
value string[] The value of the selected tree node
valueKey string ('value') Set the key of the tree node value in data
virtualized boolean Whether to enable virtualized lists

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

Related components

Vercel banner