columns

Defines the columns displayed on the board. Each entry represents a stage (e.g. "To Do", "In Progress", "Done") and the array order determines column order from left to right. Required.

Usage

columns: ColumnConfig[];

Field	Type	Description
id	string | number	Unique column identifier
label	string	Display text in the column header
css	string	CSS class name(s) applied to the column wrapper
metadata	Record<string, any>	Arbitrary data attached to the column, available in callbacks
cardLimit	number | boolean	Soft cap on cards; drives the overLimit flag for styling
addCard	boolean	Shows the per-column "add card" button in the header
collapsed	boolean	Initial collapsed state of the column

Columns are shallow-copied internally. Mutating the host array after passing it in has no effect - change the prop or dispatch update-column.

Example

import { Kanban } from "@svar-ui/react-kanban";

const columns = [
  { id: "todo", label: "To Do" },
  { id: "doing", label: "In Progress", cardLimit: 3, addCard: true },
  { id: "done", label: "Done" },
];
const cards = [];

<Kanban columns={columns} cards={cards} />

Related

• Columns guide - layout, grouping, card limits, and column styling
• cards - the card data displayed within columns
• update-column - patch column config at runtime
• columnAccessor - controls card-to-column membership