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

<script>
  import { Kanban } from "@svar-ui/svelte-kanban";

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

<Kanban {columns} {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