List

Hierarchical tree/list editor: nested items, folder expand/collapse, drag reorder, and row selection — not a flat data table.

HTML tag: c-ece048697d2ef4e21b154e45b9e45f369

When to use

• tree or nested outline with folders
• reorderable hierarchy (not a data table)
• builder or navigation tree

Props

Prop	Type	Default	Description
items	Array	“
allow_reorder	Boolean	true
disable_nesting	Boolean	false
item_display_path	String	“
item_value_path	String	“
item_actions_slot	Object
expand_all_folders	Boolean	true
icon_path	String	“
row_widget__thing_id	String	“

Rules

• Bind .items as a tree (children nested in item objects per component conventions).
• Use item_display_path / item_value_path / icon_path for field mapping on row objects.
• Set disable_nesting=true for flat lists only.
• Listen to items-changed after edits/reorder; item-selected for selection.

What to avoid

Do not use ab-list for large tabular datasets with column definitions. Do not manually compose many ab-list-item siblings instead of passing .items to ab-list.

Example

<c-ece048697d2ef4e21b154e45b9e45f369 .items=${treeItems} .allow_reorder=${true} .item_display_path=${'name'} .item_value_path=${'id'} @item-selected=${onSelect} @items-changed=${onTreeChange}></c-ece048697d2ef4e21b154e45b9e45f369>