KanbanBoard

Drag cards between columns. The board renders whatever columns you pass and reports every move through onChange with the updated column array — persist it to keep state.

To do2

Design login screen

Write API spec

In progress1

Docs site

Done1

Set up repo


import { KanbanBoard } from '@gg-software/ui';
 
<KanbanBoard
    columns={[
        { id: 'todo', title: 'To do', cards: [{ id: 't1', content: 'Design login screen' }] },
        { id: 'doing', title: 'In progress', cards: [{ id: 't3', content: 'Docs site' }] },
        { id: 'done', title: 'Done', cards: [] },
    ]}
    onChange={(columns) => saveBoard(columns)}
/>;

Props

Prop	Type	Default
`columns`*	`KanbanColumn[]`	—
`onChange`	`((columns: KanbanColumn[]) => void)`	—
`className`	`string`	—

* required · generated from packages/ui/src/data/KanbanBoard/KanbanBoard.tsx

Types


type KanbanColumn = {
    id: string;
    title: ReactNode;
    cards: KanbanCard[];
};
 
type KanbanCard = {
    id: string;
    content: ReactNode;
};