TreeView

yarn add @clayui/core

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

Beta 3.68.0 View in Lexicon CHANGELOG

TreeView

Property	Type	Required	Default	Description
displayType	'light' \| 'dark'	false	'light'	Flag to determine which style the TreeView will display.
dragAndDrop	boolean	false	false	Flag to enable Drag and Drop of Nodes over the Tree.
dragAndDropContext	Window & typeof globalThis	false	window	Optional drag and drop context: this is to avoid errors when using various drag and drop contexts on the same page.
expandDoubleClick	boolean	false	false	Flag to expand the node's children when double-clicking the node.
expandOnCheck	boolean	false	false	Flag to expand child nodes when a parent node is checked.
expanderClassName	string	false		Extra classes passed to the expander button.
expanderIcons	Icons	false		Flag to modify Node expansion state icons.
onItemMove	(item: T, parentItem: T) => void	false		Callback is called when an item is about to be moved elsewhere in the tree.
onLoadMore	(item: T) => Promise<unknown>	false		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	false		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>	false		Calback is called when the user presses the R or F2 hotkey.
selectionMode	'single' \| 'multiple' \| 'multiple-recursive' \| null	false	'single'	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.
showExpanderOnHover	boolean	false	true	Flag to indicate if the TreeView will show the expander in the hover in the Node.
nestedKey		false	'children'
selectionHydrationMode		false	'hydrate-first'

TreeView.Item

Property	Type	Required	Default	Description
active	boolean	false		Flag to set the node to the active state.
actions	React.ReactElement	false		Property for rendering actions on a Node.
children	React.ReactNode	true		Item content.
disabled	boolean	false		Flag indicating that the component is disabled.
noHover	boolean	false		Flag to remove the visual of the hover over the item.

TreeView.ItemStack

Property	Type	Required	Default	Description
active	boolean	false		Flag to set the node to the active state.
children	React.ReactNode	true		Item content.
disabled	boolean	false		Flag indicating that the component is disabled.
expanderDisabled	boolean	false		Flag indicating if Expander is disabled, by default it has the value of the disabled prop.
noHover	boolean	false		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.