CheckTree
<CheckTree> is used to display a tree structure data and supports Checkbox selection.
Import
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 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 | Properties of virtualized lists. |
| 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;
}
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;
}