TreePicker

<TreePicker> Selector component, tree single selector.

Import

MainIndividual
import { TreePicker } from 'rsuite';

Examples

Basic

Appearance

Size

Placement

Disabled and Read only

Disable Search

Custom Option

Async

Extra footer

Accessibility

ARIA properties

  • TreePicker has role combobox.
  • Has the aria-haspopup="tree" attribute to indicate that the combobox has a popup tree.
  • Has the aria-expanded attribute to indicate whether the tree is open or not.
  • Has the aria-controls attribute to indicate the ID of the tree element.
  • Has the aria-activedescendant attribute to indicate the ID of the focused tree node.
  • When label is set, the aria-labelledby attribute is added to the combobox element and the tree element and is set to the value of the id attribute of label.

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.
  • Esc - Close the tree.

Props

<TreePicker>

Property Type (Default) Description
appearance 'default' | 'subtle' ('default') Set picker appearence
block boolean Blocking an entire row
caretAs ElementType Custom component for the caret icon
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 | (() => HTMLElement) Sets the rendering container
data * ItemDataType[] Tree data
defaultExpandAll boolean Expand all nodes By default
defaultExpandItemValues string[] 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 string[] Set the value of the expanded node (controlled)
getChildren (node: 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') Tree data structure Label property name
listProps ListProps Properties of virtualized lists.
loading boolean (false) Whether to display a loading state indicator
locale PickerLocaleType Locale text
menuClassName string A css class to apply to the Menu DOM node
menuStyle CSSProperties style for Menu
onChange (value:string) => void Callback function for data change
onClean (event) => 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: string[], item:ItemDataType, 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 (item:ItemDataType, value: string, event) => void Callback function after selecting tree node
open boolean Open (Controlled)
placeholder ReactNode ('Select') Placeholder
placement Placement('bottomStart') Expand placement
renderExtraFooter () => ReactNode Customizing footer Content
renderTreeIcon (item: ItemDataType) => ReactNode Custom render icon
renderTreeNode (item: ItemDataType) => ReactNode Custom render tree Node
renderValue (value: string,item:ItemDataType, selectedElement:ReactNode) => ReactNode Custom render selected value
searchable boolean (true) Set whether you can search
searchBy (keyword: string, label: ReactNode, item: ItemDataType) => boolean Custom search rules
size 'lg' | 'md' | 'sm' | 'xs' ('md') A picker can have different sizes
toggleAs 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 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:Placement 

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';

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

  • <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.
Vercel banner