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.

Custom Node Rendering

Custom nodes (icon + rich text)

Example

Node content can be provided as a static skeleton via template[slot="node"] (the [data-node-label] node is bound to the node label automatically), and template[slot="toggle"] replaces the default expand arrow. After each node row renders, oas-node-render is emitted (detail: { node, element }); the host can listen and rewrite element into any icon / rich text. In this example the task-count badge is written by that event. Keyboard access and ARIA (treeitem / aria-expanded / aria-level) stay intact under custom rendering.

Directory Mode (File Browser)

Directory mode (file browser style)

Example

With directory, the tree renders in a file-browser style: nodes with children (or not yet loaded under lazy) show a folder icon, nodes with isLeaf / no children show a file icon; the folder icon switches between collapsed / expanded, and the depth-based indent and hover row highlight follow the row styles.

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	[]
directory	Directory mode: nodes with children (or not yet loaded under lazy) show a folder icon, nodes with isLeaf / no children show a file icon; the folder icon switches on expand / collapse	boolean	—
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-node-render	Dispatched for each rendered node row, detail: { node, element } (element is the node label container; the host can rewrite it into icon / rich text)
oas-select	Node selected, detail: { key, selected }

Slots

Name	Description
template[slot="node"]	Static row template cloned into each node label container; the [data-node-label] node is bound to the node label automatically
template[slot="toggle"]	Static expand button template cloned into each expandable node's toggle button (replaces the default › icon)

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).