Kanban board over the same $state

First-class board mode: Kanban board. Live in demo 343-kanban-board.

When

You want a Kanban board backed by the same rows your grid already shows - one source of truth, switchable between a table and a board.

How

Set the board prop. The grid buckets rows into lanes by a field and renders each row as a card; dragging a card between lanes fires onCardMove where you reassign that field on your own data.

<SvGrid {data} {columns}
  getRowId={(r) => String(r.id)}
  board={{
    groupBy: 'status',
    lanes: [
      { id: 'backlog',     title: 'Backlog' },
      { id: 'in_progress', title: 'In progress', wipLimit: 3 },
      { id: 'done',        title: 'Done' },
    ],
    onCardMove: (e) => { /* reassign e.row[status] = e.toLane on your data */ },
    card: taskCard,
  }} />

Key API surface:

• board.groupBy - the field that decides the lane.
• board.onCardMove({ row, fromLane, toLane, toIndex }) - controlled move; you own the data.
• board.card - a snippet for rich cards (avatars, chips, actions).

See the full walkthrough on the Kanban board page.

See also

• Kanban board (feature docs)
• Demo 343-kanban-board source
• Row dragging - the managed row-drag primitive.
• Recipes index