MultiCascadeTree

MultiCascadeTree is a component that displays tree-structured data in columns and supports multiple selection.

Import

MainIndividual
import { MultiCascadeTree } 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.

Disabled options

Uncheckable options

Searchable

Accessibility

ARIA properties

  • MultiCascadeTree 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

<MultiCascadeTree>

Property Type(Default) Description
childrenKey string ('children') Set children key in data
classPrefix string ('multi-cascade-tree') The prefix of the component CSS class
columnHeight number Sets the height of the column
columnWidth number Sets the width of the column
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) => 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 Custom render column
renderTreeNode (node: ReactNode, item: ItemDataType) => ReactNode Custom render item
searchable boolean Whether to enable search
uncheckableItemValues string[] Set uncheckable items
value string Specifies the values of the selected items(Controlled)
valueKey string ('value') Set value key in data

ts: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