A tree component with on-demand lazy-loaded children. Nodes with children: true (a boolean sentinel instead of an array) fetch their children asynchronously when expanded.
Basic Example
Set children: true on nodes that should load children on demand, and provide an onlazyload callback that returns a promise resolving to an array of child items. A loading
spinner appears while children are being fetched.
Highlighting code...
Highlighting code...
No preview available
Example
Nested Lazy Loading
Children returned by onlazyload can themselves have children: true,
enabling progressive lazy loading at any depth. Here, expanding "Documents" reveals a "Projects"
folder that also loads lazily.
No preview available
Example
How it Works
LazyTree extends Tree with a LazyProxyItem that intercepts expansion. When a node
with children: true is expanded:
- The node shows a loading spinner (
data-tree-loading,aria-busy) onlazyload(item)is called with the node's raw item- The returned children replace the sentinel and the node expands
- Subsequent expansions use the cached children (no re-fetch)
Props
- items: Array of nested objects
- fields: Remap your data keys to component fields
- value (bindable): Currently selected item value
- lineStyle: Tree line style —
'none','solid'(default),'dashed','dotted' - icons: Override the expand/collapse icons
- size: Size variant (
sm,md,lg) - onlazyload: Async callback to fetch children
- hasMore: Show a "Load More" button for root-level pagination
- class: Additional CSS classes
Data Attributes
- data-tree-loading: Present while children are being fetched
- aria-busy: Set to true during loading
- data-tree-spinner: The loading spinner element
Events
- onselect(value, proxy): Fired when a node is selected
- onlazyload(item): Async callback — receives the node's raw item, must return a Promise resolving to an array of child items. Called with no args for root-level "Load More" pagination.