KanbanBoard
Data Display

KanbanBoard

Horizontal board of KanbanColumn lanes; scrolls sideways when columns overflow.

Component behavior

KanbanBoard, KanbanColumn, and KanbanCard render workflow columns and report drops. The application owns card order and column membership and must update them in response to drop events.

Use cases
  • Records organized into a fixed set of workflow stages.
  • Stage changes and reordering through drag-and-drop.
  • Small card collections; every card is rendered.
Alternatives

DataGrid: records require comparison, sorting, or bulk editing.

List: the content forms one list without workflow columns.

TransferList: items move between two fixed groups.

Timeline: the view displays event history.

Stepper: one item progresses through ordered stages.

KanbanBoard

KanbanBoard renders columns in a horizontally scrolling flex row. Columns share available width with a minimum of 208px. Standard div attributes are forwarded. Set a board height to constrain scrolling within columns.

KanbanBoardProps props
PropTypeDefaultDescription
childrenReactNode—KanbanColumn elements. Anything else is rendered as-is but will not take part in drag and drop.

KanbanColumn

KanbanColumn displays a header, scrolling card list, and optional fixed footer. Internal state tracks the insertion indicator during dragging. Card membership and counts come from props.

KanbanColumnProps props
PropTypeDefaultDescription
titleReactNode—Column heading. Rendered uppercase and dim.
countnumber—Count beside the title. Supplied by the application rather than derived from children.
metaReactNode—Right-aligned header content. Pointer presses in this area do not start dragging.
onDropCard(cardId: string, index: number) => void—Called with the card ID and insertion index. When omitted, the column does not accept drops.
footerReactNode—Footer content below the card list.

KanbanCard

cardId enables dragging. Drop handlers receive the card ID; application data must resolve that ID to a card. The dragged card renders at 40% opacity. Application code updates its position.

KanbanCardProps props
PropTypeDefaultDescription
cardIdstring—Card ID passed to onDropCard. Omit to disable dragging.
childrenReactNode—Card content. Nothing is imposed: a line of text, a Tag row, an avatar and a due date.

Examples

Dragging between lanes

Each column callback captures its destination key. onDropCard supplies the card and insertion index. The reducer removes the card from its source before inserting it, including for same-column reordering.

Kanban board

Header meta and pinned footers

count displays a value beside the column title. meta displays content on the right. footer remains below the scrolling card list. Cards without cardId cannot be dragged. Columns without onDropCard do not accept drops.

Kanban column chrome

More lanes than fit

Columns use flex: 1 with a minimum width of 208 pixels. When the minimum widths exceed the container, the board scrolls horizontally.

Kanban overflow
ImportTSX
import { KanbanBoard, KanbanColumn, KanbanCard } from "@solarius/onset";

<KanbanBoard>
  <KanbanColumn
    title="To Do"
    count={2}
    onDropCard={(cardId, index) => move(cardId, "todo", index)}
  >
    <KanbanCard cardId="c1">Update billing docs</KanbanCard>
    <KanbanCard cardId="c2">Fix login redirect</KanbanCard>
  </KanbanColumn>
</KanbanBoard>;