TreeView, Asgard Docs

Data display

Navigate hierarchical data.

Hierarchical tree view for displaying and interacting with nested data structures.

Key features:

Selection modes: single, multiple, checkbox
Drag-and-drop reordering and inline label editing
Built-in showSearch and lazy-loaded children
virtualScroll for large datasets
Expand/collapse animations: fade, scroll, none

Loading preview…

When to use it

File and folder explorers
Navigation sidebars
Category / taxonomy browsers
Permission trees (checkbox selection)

Properties

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	—	Array of tree nodes with id, label, icon, children, etc.
`selectionMode`	`'none' \| 'single' \| 'multiple' \| 'checkbox'`	`'none'`	How nodes can be selected
`selectedIds`	`string[]`	—	Controlled set of selected node IDs
`onSelectionChange`	`(ids: string[]) => void`	—	Called when selection changes
`expandedIds`	`string[]`	—	Controlled set of expanded node IDs
`defaultExpandedIds`	`string[]`	—	Initially expanded nodes (uncontrolled)
`expandAll`	`boolean`	`false`	Expand all nodes initially
`size`	`'compact' \| 'normal' \| 'large'`	`'normal'`	Row height and font size
`semantic`	`'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning' \| 'info'`	—	Accent color
`showSearch`	`boolean`	`false`	Show a search bar above the tree
`allowDragDrop`	`boolean`	`false`	Enable drag-and-drop reordering
`allowLabelEdit`	`boolean`	`false`	Enable inline label editing (double-click)
`virtualScroll`	`boolean`	`false`	Enable virtual scrolling for large trees
`animation`	`'none' \| 'fade' \| 'scroll'`	`'none'`	Expand/collapse animation style
`onNodeClick`	`(node: TreeNode) => void`	—	Fired on single click
`onNodeMove`	`(nodeId, targetId, position) => void`	—	Called after drag-and-drop reorder

Notes

TreeNode supports lazyLoad + onLoad for async child loading.
Virtual scrolling requires containerHeight and itemHeight props.
Drag-and-drop fires onNodeMove with before/after/child position.

Presets