Tree

Hierarchical tree browser: expand/collapse, single/multi selection, server lazy load via data_source__thing_id.

HTML tag: c-e620a987dfff34c5aa83378d377aa4ef2

When to use

browse or select in a hierarchy on the page
lazy-loaded parent/child tree from data source
not a compact form dropdown picker

Props

Prop	Type	Default
`items`	Array	“
`display_path`	String	`label`
`selection_mode`	String	`single`
`expanded_keys`	String
`value_path`	String	`thing_id`
`children_path`	String	`children`
`has_children_path`	String	`has_children`
`child_count_path`	String
`is_leaf_path`	String	`is_leaf`
`has_children_condition`	String
`probe_children_on_expand`	String	`when_unknown`
`default_expand_level`	Number
`searchable`	Boolean
`min_search_chars`	Number	`2`
`search_param_path`	String	`search_term`
`server_debounce_ms`	Number	`250`
`data_source__thing_id`	String
`data_source_input_params`	Object	`[object Object]`
`parent_param_path`	String	`parent_thing_id`
`indent_size`	Number	`10`
`text_align`	String	`left`
`row_guides`	Boolean
`selected_items`	Array	“

Rules

Configure value_path, display_path, children_path (defaults thing_id/label/children).
selection_mode single|multiple; bind selected_items or listen item-selected / selected-items-changed.
Lazy trees: data_source_input_params + parent_param_path on expand; source-data-loaded / source-data-load-failed.
For form field picking one path use ab-tree-input, not this bare tree.

Events

Event	Detail
`item-selected`
`selected-items-changed`
`expand`	id: String, item: Object
`collapse`	id: String, item: Object
`selection-path-changed`	value: String, item: Object, path_keys: Array, path_labels: Array, path_items: Array
`filter`	text: String

Methods

Signature	Description
`expand(key: String)`
`collapse(key: String)`
`toggle(key: String)`
`setSelection(keys: Array	String, options: Object)`
`ensurePathVisible(pathKeys: Array, options: Object)`

What to avoid

Do not use ab-select for deep hierarchies. Do not embed ab-data-grid expecting tree expand semantics.

Example

<c-e620a987dfff34c5aa83378d377aa4ef2 .items=${nodes} .selection_mode=${'single'} .data_source__thing_id=${src} @item-selected=${onNode} @expand=${loadChildren}></c-e620a987dfff34c5aa83378d377aa4ef2>