tree

binds state

A hierarchy from a flat list where each record names its parent: an org chart, folders, a budget by department. kind=list (default) is indented rows that open and close; kind=org is a top-down chart of boxes.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"

format

kind

open

Props

"text"textThe title above the tree, e.g. Org chart.optional

itemsexpressionThe list of records, e.g. items=people. At most 300.required

idnameThe field that identifies each record, e.g. id=id.id

parentnameThe field with the parent's id, e.g. parent=manager. Empty for the top.parent

labelnameThe field with what each item says, e.g. label=name.name

detailnameThe field with a quieter line, e.g. detail=role.—

valuenameThe field with a number on the right, e.g. value=headcount.—

formattext · number · moneyHow value= reads: text as is, number (1,200) or money ($1,200, US dollars).text

kindlist · orglist: indented rows that open and close. org: a top-down chart with boxes and lines, which scrolls sideways when wide.list

opennumberHow many levels of a list start open; 0 shows only the top.1

bindstateState that holds the selected item's id. Pressing an item sets it.—

onactionActions to run after an item is selected, with bind= already set, e.g. emit:changed. Separate several with ;—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

For your model

The exact guide entry a model gets for tree, generated from the same definition.

  tree "<text>"  — A hierarchy from a flat list where each record names its parent: an org chart, folders, a budget by department. kind=list (default) is indented rows that open and close; kind=org is a top-down chart of boxes.
    "<text>"  The title above the tree, e.g. Org chart.
    items=<expression, required>  The list of records, e.g. items=people. At most 300.
    id=<name>  The field that identifies each record, e.g. id=id.
    parent=<name>  The field with the parent's id, e.g. parent=manager. Empty for the top.
    label=<name>  The field with what each item says, e.g. label=name.
    detail=<name>  The field with a quieter line, e.g. detail=role.
    value=<name>  The field with a number on the right, e.g. value=headcount.
    format=<text|number|money>  How value= reads: text as is, number (1,200) or money ($1,200, US dollars).
    kind=<list|org>  list: indented rows that open and close. org: a top-down chart with boxes and lines, which scrolls sideways when wide.
    open=<number>  How many levels of a list start open; 0 shows only the top.
    bind=<state>  State that holds the selected item's id. Pressing an item sets it.
    on=<action>  Actions to run after an item is selected, with bind= already set, e.g. emit:changed. Separate several with ;
    example:
      state picked="" people=[{id: "e1", name: "Ana Ruiz", role: "COO"}, {id: "e2", name: "Ben Okafor", role: "Head of Claims", manager: "e1"}, {id: "e3", name: "Chloe Park", role: "Head of Operations", manager: "e1"}, {id: "e4", name: "Dev Malhotra", role: "Claims lead", manager: "e2"}]
      tree "Northwind Mutual" items=people parent=manager label=name detail=role bind=picked

More data

stat rating chart chart-line chart-rule chart-note meter table table-column compare compare-row details detail schedule board flow map pin

All data elements on one page →