Tree

Displays hierarchical data with support for selection, expansion, multi-select, lazy loading, and node drag-and-drop.

Basic Usage

Hierarchical tree

Example

Click the expand arrow to show / hide child nodes; click a node label to select it.

Controlled Expansion and Selection

Initial expansion and selection

Example

expanded controls the expanded nodes, selected controls the selected node.

Multi-Select

Checkable tree

Example

Disabled Nodes

Disabled nodes

Example

Lazy Loading

Lazy loading (async child fill-in on expand)

Click the expand arrow before "Folder A" to trigger loading

Example

With lazy, nodes without children and not marked isLeaf / loaded are considered "not loaded": clicking the expand arrow emits oas-load (detail: { key }) and calls the load callback, and the host refills the child nodes and resets the data attribute. During loading, a loading placeholder is shown in place of the expand arrow; after the fill-in completes, the node auto-expands and the placeholder is removed. Nodes marked isLeaf: true do not show an expand arrow.

Node Drag and Drop

Draggable (reorder / reparent)

Drag a node to the upper / lower / middle of a target row to insert before / after / inside it

Example

With draggable, nodes can be dragged to reorder or reparent: dropping on the upper half of a target row inserts before it (before), the lower half inserts after it (after), and the middle (when the target is expandable) moves it inside (inner). An insertion line and highlight feedback are shown during the drag; on release, oas-node-drop is emitted (detail: { dragKey, dropKey, position }), and the host updates the data and resets the data attribute. Dropping on empty tree space moves the node to the root (dropKey empty string, position: 'inner').

Large Data Sets (Virtual Scroll)

Virtual scroll with 10k nodes

Example

Setting height enables virtualization (with a fixed row-height): the tree reuses oas-virtual-list to render only the nodes in the visible window. The expanded state is kept in the expanded attribute and survives scrolling and re-renders.

Events

Selection and check events

Selected: — · Checked: —

Example

API

Attributes

Attribute	Description	Type	Default
checkable	Whether to show checkboxes	boolean	—
checked	Set of checked node keys (comma-separated)	string	—
data	Node data [{ key, label, children?, disabled?, isLeaf?, loaded? }], JSON string	TreeNode[] | string	[]
draggable	Nodes can be dragged to reorder / reparent; drop shows insertion line / highlight; release emits oas-node-drop	boolean	—
expanded	Set of expanded node keys (comma-separated)	string	—
height	Virtual scroll viewport height (px); setting it enables virtualized rendering for large data	string	360
lazy	Lazy loading: nodes without children and not marked isLeaf / loaded trigger loading on expand	boolean	—
load	Lazy loading callback (payload: { key }) => void, coexists with the oas-load event; the host refills child nodes and resets the data attribute	(payload: { key: string }) => void	—
row-height	Fixed row height when virtualized (px)	string	32
selected	Key of the selected node	string	—

Events

Event	Description
oas-check	Check state change, detail: { key, checked }
oas-load	Lazy loading triggered, detail: { key }; the host refills children and resets the data attribute
oas-node-drop	Node dropped, detail: { dragKey, dropKey, position }; position is before / after / inner; an empty-string dropKey means moved to the root
oas-select	Node selected, detail: { key, selected }

Node field notes: isLeaf: true marks an explicit leaf (no expand arrow under lazy loading); loaded: true marks a node as fully loaded (used with children to avoid triggering loading repeatedly).