TreePicker
<TreePicker> Selector component, tree single selector.
Usage
import { TreePicker } from 'rsuite';Examples
Default
Appearance
Size
Placement
Disabled
Disable Search
Custom Option
Async
Extra Footer
Virtualized List
Props
<TreePicker>
| Property | Type (Default) |
Description |
|---|---|---|
| appearance | enum: 'default', 'subtle' ('default') |
Set picker appearence |
| block | boolean | Blocking an entire row |
| childrenKey | string ('children') |
Tree data structure Children property name |
| classPrefix | string('picker') |
The prefix of the component CSS class |
| cleanable | boolean (true) |
Set whether you can clear |
| container | HTMLElement or (() => HTMLElement) | Sets the rendering container |
| data * | Array<DataItemType> | Tree data |
| defaultExpandAll | boolean | Expand all nodes By default |
| defaultExpandItemValues | any [] | Set the value of the default expanded node |
| defaultOpen | boolean | Open by default |
| defaultValue | string | Default selected Value |
| disabled | boolean | Whether to disable Picker |
| disabledItemValues | string[] | Disable item by value |
| expandItemValues | any [] | Set the value of the expanded node (controlled) |
| height | number (360px) |
height of menu. When virtualize is true, you can set the height of menu |
| labelKey | string ('label') |
Tree data structure Label property name |
| menuClassName | string | A css class to apply to the Menu DOM node |
| menuStyle | React.CSSProperties | style for Menu |
| onChange | (value:string) => void | Callback function for data change |
| onClean | (event:SyntheticEvent) => void | Callback fired when value clean |
| onClose | () => void | Close Dropdown callback functions |
| onEnter | () => void | Callback fired before the overlay transitions in |
| onEntered | () => void | Callback fired after the overlay finishes transitioning in |
| onEntering | () => void | Callback fired as the overlay begins to transition in |
| onExit | () => void | Callback fired right before the overlay transitions out |
| onExited | () => void | Callback fired after the overlay finishes transitioning out |
| onExiting | () => void | Callback fired as the overlay begins to transition out |
| onExpand | (expandItemValues: any [], activeNode:DataItemType, concat:(data, children) => Array) => void | Callback When tree node is displayed |
| onOpen | () => void | Open Dropdown callback function |
| onSearch | (searchKeyword:string, event) => void | Search callback function |
| onSelect | (activeNode:DataItemType, value:any, event) => void | Callback function after selecting tree node |
| open | boolean | Open (Controlled) |
| placeholder | React.Node ('Select') |
Placeholder |
| placement | enum: Placement('bottomStart') |
Expand placement |
| renderExtraFooter | () => React.Node | Customizing footer Content |
| renderTreeIcon | (nodeData:DataItemType) => React.Node | Custom render icon |
| renderTreeNode | (nodeData:DataItemType) => React.Node | Custom render tree Node |
| renderValue | (value:string,item:DataItemType, selectedElement:React.Node) => React.Node | Custom render selected value |
| searchBy | (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean | Custom search rules |
| searchable | boolean (true) |
Set whether you can search |
| size | enum: 'lg', 'md', 'sm', 'xs' ('md') |
A picker can have different sizes |
| toggleComponentClass | React.ElementType ('a') |
You can use a custom element for this component |
| value | string | Selected value |
| valueKey | string ('value') |
Tree data Structure Value property name |
| virtualized | boolean (false) |
Whether using Virtualized List |
Related components
<CheckTreePicker>Selector component, which supports a Checkbox on the Treepicker node for multiple selections.<Tree>Used to show a tree-structured data.<CheckTree>Used to show a tree-structured data while supporting Checkbox selection.