A hierarchical tree component for navigating nested data. Supports tree-line connectors, expand/collapse, field mapping, keyboard navigation, and custom item rendering via snippets.
Basic Example
Pass a nested array of objects with text, value, and optional icon and children fields. Nodes with children arrays are rendered
as expandable branches.
No Lines
Set lineStyle="none" to use simple indentation instead of tree-line connectors.
Other options are "solid" (default), "dashed", and "dotted".
Field Mapping
Use the fields prop to remap your data keys — for example, mapping name → text and id → value without altering your data.
Custom Icons
Override the default expand/collapse chevrons with any icon via the icons prop. Here
we use folder icons for a file-manager style tree.
Custom Item Rendering
Use the itemContent snippet to control what appears inside each tree node. The
snippet receives a ProxyItem — use proxy.label, proxy.icon, and proxy.get('fieldName') to access any field.
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) - class: Additional CSS classes
Snippets
- itemContent(proxy): Custom rendering for tree nodes
- [name](proxy): Per-item snippet — set
item.snippet = 'name'
ProxyItem API
Snippets receive a ProxyItem instance:
- proxy.label: Mapped display text
- proxy.icon: Mapped icon class
- proxy.href: Mapped href (renders an
<a>) - proxy.value: The original raw item (object or primitive)
- proxy.disabled: Whether the item is disabled
- proxy.expanded: Expand state for branch nodes
- proxy.hasChildren: Whether the node has children
- proxy.get('field'): Read any field by name
Events
- onselect(value, proxy): Fired when a node is selected — receives the raw item value and its ProxyItem