CascadeTree

CascadeTree is a component that displays tree-structured data in columns.

Import

MainIndividual
import { CascadeTree } from 'rsuite';

Examples

Basic

Custom options

Async Data

This tree allows the use of the getChildren option and the length of the children field on the node to be 0 to load children asynchronously.

Searchable

Accessibility

ARIA properties

  • CascadeTree has role tree.
  • Each column has role group.
  • Each item has role treeitem.
  • Each item has aria-setsize equal to the number of items in the column.
  • Each item has aria-level equal to the column index.
  • The selected item has aria-selected="true".
  • The disabled item has aria-disabled="true".
  • The search input has role searchbox.

Props

<CascadeTree>

Property Type(Default) Description
childrenKey string ('children') Set children key in data
classPrefix string ('cascader-tree') The prefix of the component CSS class
columnHeight number Sets the height of the menu
columnWidth number Sets the width of the menu
data * ItemDataType[] The data of component
defaultValue string Specifies the default value of the selected items
disabledItemValues string[] Disabled items
getChildren (item: ItemDataType) => Promise<ItemDataType[]> Asynchronously load the children of the tree node.
labelKey string ('label') Set label key in data
onChange (value: string, event: SyntheticEvent) => void Callback fired when value changes
onSearch (value: string, event) => void Callback fired when search value changes
onSelect (item: ItemDataType, selectedPaths: ItemDataType[], event) => void Callback fired when item is selected
renderColumn (childNodes: ReactNode, column: { items, parentItem, layer}) => ReactNode Customizing the Rendering Menu list
renderTreeNode (node: ReactNode, item: ItemDataType) => ReactNode Custom render menu items
searchable boolean Whether to enable search
value string Specifies the values of the selected items(Controlled)
valueKey string ('value') Set value key in data

ItemDataType 

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

  /** 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<V>[];

  /**
   * 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;
}
Vercel banner