board

binds state

Columns of cards by stage, from a list: a sales pipeline, a task board, hiring stages, support tickets. Each column shows its count and an optional total; move=true lets people drag a card to another stage.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"stages

format

move

Props

"text"textThe title above the board, e.g. Sales pipeline.optional

itemsexpressionThe list of records, e.g. items=deals. At most 500.required

stagenameField with each record's stage, e.g. stage=status.required

stagesstringThe columns in order, separated by commas, e.g. stages="Lead,Qualified,Proposal,Won". At most 12. Default: the stages in the records, in the order they first appear.—

titlenameField with each card's title, e.g. title=name.title

detailnameField with a quieter line under the title, e.g. detail=company.—

valuenameField with a short value on the card's right, e.g. value=amount.—

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

sumnameField to total in each column's header, e.g. sum=amount, written with format=.—

tonenameField that colors each card's edge: a value good, warn, bad, accent or muted uses that tone; other values each get their own color.—

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

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

movebooleantrue lets people move a card to another stage: drag it to another column, or focus it and press Left or Right. It changes the record's stage field, so items= must be a list in state (or worked out from one).false

onactionActions to run after a card is pressed or moved, 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 board, generated from the same definition.

  board "<text>"  — Columns of cards by stage, from a list: a sales pipeline, a task board, hiring stages, support tickets. Each column shows its count and an optional total; move=true lets people drag a card to another stage.
    "<text>"  The title above the board, e.g. Sales pipeline.
    items=<expression, required>  The list of records, e.g. items=deals. At most 500.
    stage=<name, required>  Field with each record's stage, e.g. stage=status.
    stages=<string>  The columns in order, separated by commas, e.g. stages="Lead,Qualified,Proposal,Won". At most 12. Default: the stages in the records, in the order they first appear.
    title=<name>  Field with each card's title, e.g. title=name.
    detail=<name>  Field with a quieter line under the title, e.g. detail=company.
    value=<name>  Field with a short value on the card's right, e.g. value=amount.
    format=<text|number|money>  How value= and sum= read: text as is, number (1,200) or money ($1,200, US dollars).
    sum=<name>  Field to total in each column's header, e.g. sum=amount, written with format=.
    tone=<name>  Field that colors each card's edge: a value good, warn, bad, accent or muted uses that tone; other values each get their own color.
    key=<name>  The field that identifies each record, e.g. key=id. Needed for bind=.
    bind=<state>  State that holds the selected card's key. Pressing a card sets it.
    move=<boolean>  true lets people move a card to another stage: drag it to another column, or focus it and press Left or Right. It changes the record's stage field, so items= must be a list in state (or worked out from one).
    on=<action>  Actions to run after a card is pressed or moved, with bind= already set, e.g. emit:changed. Separate several with ;
    example:
      state picked=0 deals=[{id: 1, name: "Fleet renewal", company: "Harbor Freight Co", status: "Lead", amount: 48000}, {id: 2, name: "Claims portal", company: "Northwind Mutual", status: "Proposal", amount: 125000}, {id: 3, name: "Warehouse sensors", company: "Larkspur Logistics", status: "Qualified", amount: 36500}]
      board "Pipeline" items=deals stage=status stages="Lead,Qualified,Proposal,Won" title=name detail=company value=amount format=money sum=amount bind=picked

More data

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

All data elements on one page →