TreeView

yarn add @clayui/core

A tree view is a component based on nodes that are shown in a hierarchical structure.

Beta 3.91.0 View in Lexicon CHANGELOG

TreeView

Property	Description
`displayType` `'light' \| 'dark'`	Flag to determine which style the TreeView will display. The default value is 'light'
`dragAndDrop` `boolean`	Flag to enable Drag and Drop of Nodes over the Tree. The default value is false
`dragAndDropContext` `Window & typeof globalThis`	Optional drag and drop context: this is to avoid errors when using various drag and drop contexts on the same page. The default value is window
`expandDoubleClick` `boolean`	Flag to expand the node's children when double-clicking the node. The default value is false
`expandOnCheck` `boolean`	Flag to expand child nodes when a parent node is checked. The default value is false
`expanderClassName` `string`	Extra classes passed to the expander button.
`expanderIcons` `Icons`	Flag to modify Node expansion state icons.
`itemNameKey` `string`	Flag to indicate which key name matches the item name to be displayed in drag preview. The default value is 'name'
`messages` `DragAndDropMessages`	Messages that the TreeView uses to announce to the screen reader. Use this to handle internationalization.
`onItemHover` `(item: T, parentItem: T, index: MoveItemIndex) => void`	The callback is called whenever there is an item dragging over another item.
`onItemMove` `(item: T, parentItem: T, index: MoveItemIndex) => boolean`	Callback is called when an item is about to be moved elsewhere in the tree.
`onLoadMore` `OnLoadMore<T>`	When a tree is very large, loading items (nodes) asynchronously is preferred to decrease the initial payload and memory space. The callback is called every time the item is a leaf node of the tree.
`onSelect` `(item: T) => void`	Callback called whenever an item is selected. Similar to the `onSelectionChange` callback but instead of passing the selected keys it is called with the current item being selected.
`onRenameItem` `(item: T) => Promise<T>`	Calback is called when the user presses the R or F2 hotkey.
`selectionMode` `'single' \| 'multiple' \| 'multiple-recursive' \| null`	Flag changes the Node selection behavior when a checkbox is rendered on the Node. - single: select only node. - multiple: select multiple nodes. - multiple-recursive: selects multiple nodes and recursively. The default value is 'single'
`showExpanderOnHover` `boolean`	Flag to indicate if the TreeView will show the expander in the hover in the Node. The default value is true
`indeterminate`	The default value is true
`nestedKey`	The default value is 'children'
`selectionHydrationMode`	The default value is 'hydrate-first'

TreeView.Item

Property	Description
`active` `boolean`	Flag to set the node to the active state.
`actions` `React.ReactElement`	Property for rendering actions on a Node.
`children` `React.ReactNode`	Item content.
`draggable` `boolean`	Flag to define if the item is draggable and dropable.
`disabled` `boolean`	Flag indicating that the component is disabled.
`expandable` `boolean`	Flag to indicate if the item is expandable. This renders the arrow button on the item.
`noHover` `boolean`	Flag to remove the visual of the hover over the item.

TreeView.ItemStack

Property	Description
`active` `boolean`	Flag to set the node to the active state.
`children` `React.ReactNode`	Item content.
`draggable` `boolean`	Flag to define if the item is draggable and dropable.
`disabled` `boolean`	Flag indicating that the component is disabled.
`expanderDisabled` `boolean`	Flag indicating if Expander is disabled, by default it has the value of the disabled prop.
`expandable` `boolean`	Flag to indicate if the item is expandable. This renders the arrow button on the item. The default value is false
`noHover` `boolean`	Flag to remove the visual of the hover over the item.

TreeView.Group

Property	Type	Required	Default	Description
children	React.ReactNode \| (item: T) => React.ReactElement	true		Group content.
items	Array<T>	false		Property to inform the dynamic data of the tree.