table

binds state

Rows of a list of records, one table-column per field, for things like inventory, orders or expenses. With sort= and direction=, pressing a header sorts by it; with bind= and key=, pressing a row selects it; columns too wide for the space scroll sideways, the first one staying in view.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props

Props

"text"textA title above the table.optional

itemsexpressionThe list of records, e.g. items=equipment. At most 200 rows; show a page of a longer list with slice() and pagination.required

keynameThe field that identifies each row, e.g. key=id. Needed for bind=.—

bindstateState that holds the selected row's key. Pressing a row sets it.—

sortstateState that holds the field to sort by. Pressing a header sets it; missing values sort last.—

directionstateState that holds asc or desc. Pressing the sorted header again flips it.—

onactionActions to run after a row 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.—

Children: table-column

For your model

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

  table "<text>"  — Rows of a list of records, one table-column per field, for things like inventory, orders or expenses. With sort= and direction=, pressing a header sorts by it; with bind= and key=, pressing a row selects it; columns too wide for the space scroll sideways, the first one staying in view.
    "<text>"  A title above the table.
    items=<expression, required>  The list of records, e.g. items=equipment. At most 200 rows; show a page of a longer list with slice() and pagination.
    key=<name>  The field that identifies each row, e.g. key=id. Needed for bind=.
    bind=<state>  State that holds the selected row's key. Pressing a row sets it.
    sort=<state>  State that holds the field to sort by. Pressing a header sets it; missing values sort last.
    direction=<state>  State that holds asc or desc. Pressing the sorted header again flips it.
    on=<action>  Actions to run after a row is selected, with bind= already set, e.g. emit:changed. Separate several with ;
    children: table-column
    example:
      state gear=[{id: "tent", name: "Tent", price: 180}, {id: "stove", name: "Stove", price: 45}] picked="" by="name" dir="asc"
      table items=gear key=id bind=picked sort=by direction=dir
        table-column "Item" field=name
        table-column "Price" field=price format=money

  table-column "<text>"  — One column of a table: its header and the field it shows.
    "<text>"  The header. Defaults to the field name.
    field=<name, required>  The field of each record to show, e.g. field=price.
    format=<text|number|money>  text, number (1,200.5) or money ($1,200.00, US dollars). number and money show only numbers; other values show —.
    align=<left|right>  left or right. Default: right for number and money, left for text.
    only inside: table
    example:
      table-column "Price" field=price format=money

More data

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

All data elements on one page →