Components / Navigation

Tree

A keyboard-complete tree with tri-state checkboxes, lazy children, multi-select, virtualization, drag-and-drop moves and node menus.

@ruckc/truss-ui Navigation

Import

import { Tree } from '@ruckc/truss-ui';

Playground

API

Prop	Type	Default	Description
nodes required	TreeNode[]	—	The graph nodes. Bind it to keep positions in sync after dragging.
expanded bindable	string[]	[]	Ids of the expanded items. Bind it with `bind:expanded`.
selected bindable	string	—	The single selected id, or with `multiple` the most recently picked ("lead") node.
multiple	boolean	false	Multi-select: click, Ctrl/Cmd+click toggles, Shift+click or Shift+Arrow selects a range, Ctrl+A selects all visible nodes.
selectedIds bindable	string[]	[]	With `multiple`: the selected ids.
checkable	boolean	false	Tri-state checkboxes. `checked` holds leaf ids.
checked bindable	string[]	[]	Whether it is checked. Bind it with `bind:checked`.
loadChildren	(node: TreeNode) => Promise<TreeNode[]>	—	Lazy children for nodes with `hasChildren`.
label	string	'Tree'	Visible label shown above the control.
onselect event	(node: TreeNode) => void	—	Called when an item is chosen.
onactivate event	(node: TreeNode) => void	—	Enter or double-click on an enabled node ("open"). A double-click still toggles an expandable node as well.
nodeMenu	(node: TreeNode) => MenuEntry[]	—	Context menu for a node: right-click, the Menu key or Shift+F10. Return an empty list to keep the browser's menu.
nodeActions snippet	Snippet<[node: TreeNode]>	—	Trailing actions, revealed on hover and when the row is focused (Tab moves from the row into them).
virtual	boolean	false	Render only the rows in view (needs `height`; scrolls inside the tree).
height	string | number	—	Height of the scrolling area (CSS length or px number). Also enables scrolling without `virtual`.
rowHeight	number	—	({ node: TreeNode; depth: number; parent?: TreeNode; pos: number; size: number }) height in px (default: the `--tr-tree-row-h` density token).
overscan	number	8	Extra rows rendered above and below the visible window.
draggable	boolean	false	Move nodes by pointer drag, or by keyboard: Ctrl+X to cut, then Ctrl+V (inside), Ctrl+Shift+V (after) or Ctrl+Alt+V (before) on the target.
canDrop	(sources: TreeNode[], target: TreeNode, position: ('before' | 'after' | 'inside')) => boolean	—	Veto a drop. A node is never offered as a target of itself or its descendants.
ondrop event	(sources: TreeNode[], target: TreeNode, position: ('before' | 'after' | 'inside')) => void	—	The tree does not rearrange `nodes`: update your data here.