Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProColumns of options where choosing one opens its children in the next column, with keyboard navigation, lazy loading, hover expansion and a path value.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for hierarchies people navigate by drilling down: country, region, city; category, subcategory; folder paths. For picking from a dropdown see CascaderSelect; for several leaves see CascaderMulti.
resolvePath(options, value) is exported: it returns the option objects along a value path.
| Prop | Type | Default | Description |
| ------------------------ | --------------------------------------------------- | ------------ | ---------------------------------------------- | ----------------------------------------- |
| options | { value; label; children?; disabled?; isLeaf? }[] | - | The tree. |
| value / defaultValue | string[] | [] | The chosen path of values. |
| onValueChange | (value: string[], path: Option[]) => void | - | Runs when a path is chosen. |
| loadChildren | (path: Option[]) => Promise<Option[]> | - | Loads children the first time an option opens. |
| expandTrigger | "click" \\ | "hover" | click | When the next column opens for a pointer. |
| changeOnSelect | boolean | false | Also choose parent options. |
| emptyText | string | No options | Text for an empty column. |
The component is a tree; each column is a group named Level n and each row a treeitem with aria-level, aria-posinset, aria-setsize, aria-selected and, for parents, aria-expanded. Only one row is in the tab order. Disabled rows are skipped by the arrow keys. A spinner marks a row whose children are loading (aria-busy).