cards

Array of card objects displayed on the board. Each card requires an id; all other fields are free-form and passed through to renderers, the editor, filters, and sort comparators.

Column membership is determined by columnAccessor (defaults to the column field).

Usage

cards: KanbanCard[];

Field	Type	Description
id	CardID (string | number)	Unique card identifier
[key: string]	any	Any additional fields - label, description, priority, progress, deadline, tags, users, attachments, comments, css, etc.

Example

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

const columns = [
  { id: "backlog", label: "Backlog" },
  { id: "done", label: "Done" },
];

const cards = [
  { id: 1, label: "Fix login bug", column: "backlog", priority: 3 },
  { id: 2, label: "Write tests", column: "done", priority: 1 },
];

export default function App() {
  return <Kanban cards={cards} columns={columns} />;
}

Related

• Cards guide - card data shape, sections, custom templates, and card actions
• columns - the column definitions that cards are distributed across
• columnAccessor - controls how cards map to columns
• add-card - add new cards to the board