Tree
Tree component with filtering, single/multi select, and expand controls.
Tree
Tree component with filtering, single/multi select, and expand controls.
Basic Usage
Demo loads on client.
API
TxTree Props
| Name | Type | Default | Description |
|---|---|---|---|
nodes | TreeNode[] | [] | Data source |
modelValue | string | number | Array<string | number> | - | Selected value |
multiple | boolean | false | Enable multi-select |
selectable | boolean | true | Selectable nodes |
checkable | boolean | false | Show checkboxes |
disabled | boolean | false | Disabled state |
defaultExpandedKeys | Array<string | number> | [] | Default expanded keys |
expandedKeys | Array<string | number> | - | Controlled expanded keys |
indent | number | 16 | Indent width |
filterText | string | '' | Filter text |
filterMethod | (node, query) => boolean | - | Custom filter function |
TreeNode
| Field | Type | Description |
|---|---|---|
key | string | number | Unique key |
label | string | Display label |
disabled | boolean | Disabled state |
children | TreeNode[] | Child nodes |
icon | TxIconSource | string | Node icon |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | (value) | Selection update |
select | ({ key, node }) | Node selected |
toggle | ({ key, expanded }) | Expand/collapse |
update:expandedKeys | (keys) | Expanded keys update |
Slots
| Name | Description |
|---|---|
item | Custom item renderer |
empty | Empty state |
Was this helpful?