CheckTree

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

Import 

import { CheckTree } from 'rsuite';

// or
import CheckTree from 'rsuite/CheckTree';

Examples

Default

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 options

Async

Props

<CheckTree>

Property Type (Default) Description
cascade boolean (true) Whether cascade select
childKey string ('children') Set childrenKey key in data
data * ItemDataType[] Tree data
defaultExpandAll boolean Expand all tree node
defaultExpandItemValues any [] Set the value of the default expanded node
defaultValue string[] Default values of the selected tree node
disabledItemValues string[] Values of disabled tree node
expandItemValues any [] Set the value of the expanded node (controlled)
getChildren (item: ItemDataType) => Promise<ItemDataType> load node children data asynchronously
height number (360px) height of menu. When virtualize is true, you can set the height of menu
labelKey string ('label') Set label key in data
listProps ListProps List-related properties in react-virtualized
onChange (values:string[]) => void Callback fired when value change
onExpand (expandItemValues: any [], item: ItemDataType, concat:(data, children) => Array) => void callback fired when tree node expand state changed
onSelect (item: ItemDataType, value:any, event) => void Callback fired when tree node is selected
renderTreeIcon (item: ItemDataType) => ReactNode Custom render the icon in tree node
renderTreeNode (item: ItemDataType) => ReactNode Custom render tree node
searchKeyword string searchKeyword (Controlled)
uncheckableItemValues string[] Set the option value for the check box not to be rendered
value string[] Specifies the values of the selected tree node (Controlled)
valueKey string ('value') Set value key in data
virtualized boolean Whether using Virtualized List

ts:ItemDataType 

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

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

  /**
   * The data of the child option corresponds to the `childrenKey` in the data.
   * Properties owned by tree structure components, such as TreePicker, Cascader.
   */
  children?: ItemDataType[];

  /**
   * Properties of grouping functional components, such as CheckPicker, InputPicker
   */
  groupBy?: string;

  /**
   * The children under the current node are loading.
   * Used for components that have cascading relationships and lazy loading of children. E.g. Cascader, MultiCascader
   */
  loading?: boolean;
}

Related components