API Reference

Properties

data: KanbanData	Data container — columns, cards, and swimlanes (read-only).
settings: KanbanBoardSettings	Settings object — access theme and locale (read-only).
events: KanbanBoardEvents	Event emitters (read-only).
selectedCards: KanbanCard[]	Currently selected cards.
selectedCard: KanbanCard \| null	Last selected card (or null).
canEdit: boolean	Enable/disable editing. Default: true.
cardRendering: CardRenderFn \| null	Custom card rendering function.
cardTooltip: CardTooltipFn \| null	Custom tooltip content function.
assigneeResolver: AssigneeResolverFn \| null	Function to resolve assignee IDs to names and avatars.
canUndo$: BehaviorSubject<boolean>	Whether undo is available (observable, read-only).
canRedo$: BehaviorSubject<boolean>	Whether redo is available (observable, read-only).

Methods

load(json: string): void	Load board state from a JSON string.
save(): string	Serialize current state to a JSON string.
undo(): void	Undo the last action.
redo(): void	Redo the last undone action.
clearUndoHistory(): void	Clear the undo/redo history.
beginBatch(): void	Start batching operations into a single undo step.
endBatch(): void	End batching and commit the undo step.
copyCards(cards?: KanbanCard[]): void	Copy cards to clipboard (defaults to selected).
cutCards(cards?: KanbanCard[]): void	Cut cards to clipboard.
pasteCards(columnId: string, swimlaneId?: string \| null): void	Paste cards into a column.
scrollToCard(card: KanbanCard, options?: KanbanScrollOptions): void	Scroll to bring a card into view.
scrollToColumn(column: KanbanColumn, options?: KanbanScrollOptions): void	Scroll to bring a column into view.
scrollToSwimlane(swimlane: KanbanSwimlane, options?: KanbanScrollOptions): void	Scroll to bring a swimlane into view.

Data Methods

Accessed via board.data.

Column Methods

columnsLength: number	Number of columns.
getColumn(index: number): KanbanColumn	Get column by index.
getColumnById(id: string): KanbanColumn \| null	Get column by ID.
addColumn(column: KanbanColumn): void	Add a column at the end.
insertColumn(index: number, column: KanbanColumn): void	Insert a column at index.
removeColumn(column: KanbanColumn): void	Remove a column.
moveColumn(column: KanbanColumn, toIndex: number): void	Move a column to a new index.
assignColumns(columns: KanbanColumn[]): void	Replace all columns.

Card Methods

cardsLength: number	Total number of cards.
getCard(index: number): KanbanCard	Get card by global index.
getCardById(id: string): KanbanCard \| null	Get card by ID.
getCardsInColumn(columnId: string): KanbanCard[]	Get all cards in a column.
getCardsInSwimlane(swimlaneId: string \| null): KanbanCard[]	Get all cards in a swimlane.
getCardCountInColumn(columnId: string): number	Count cards in a column.
isWipLimitExceeded(columnId: string): boolean	Check if column exceeds its WIP limit.
getCardColor(card: KanbanCard): ColorValue	Resolve the effective color for a card (inherits from column if card color is null).
addCard(card: KanbanCard): void	Add a card at the end of its column.
insertCard(card: KanbanCard, indexInColumn: number): void	Insert a card at index within its column.
removeCard(card: KanbanCard): void	Remove a card.
moveCard(card: KanbanCard, toColumnId: string, toIndexInColumn: number): void	Move a card to a column at index.
assignCards(cards: KanbanCard[]): void	Replace all cards.
filter: KanbanCardFilterFn \| null	Filter function. Filtered-out cards are hidden.

Swimlane Methods

swimlanesLength: number	Number of swimlanes.
getSwimlane(index: number): KanbanSwimlane	Get swimlane by index.
getSwimlaneById(id: string): KanbanSwimlane \| null	Get swimlane by ID.
addSwimlane(swimlane: KanbanSwimlane): void	Add a swimlane at the end.
insertSwimlane(index: number, swimlane: KanbanSwimlane): void	Insert a swimlane at index.
removeSwimlane(swimlane: KanbanSwimlane): void	Remove a swimlane.
moveSwimlane(swimlane: KanbanSwimlane, toIndex: number): void	Move a swimlane to a new index.
assignSwimlanes(swimlanes: KanbanSwimlane[]): void	Replace all swimlanes.

General

clear(): void

Remove all columns, cards, and swimlanes.

Events

All events are RxJS Subject instances. Subscribe via board.events.eventName$.subscribe(callback).

Data Events

columnAdded$: Subject<KanbanColumnEventArgs>	A column was added.
columnChanged$: Subject<KanbanColumnEventArgs>	A column property changed.
columnRemoved$: Subject<KanbanColumnEventArgs>	A column was removed.
columnMoved$: Subject<KanbanColumnMovedEventArgs>	A column was moved (fromIndex, toIndex).
cardAdded$: Subject<KanbanCardEventArgs>	A card was added.
cardChanged$: Subject<KanbanCardEventArgs>	A card property changed.
cardRemoved$: Subject<KanbanCardEventArgs>	A card was removed.
cardMoved$: Subject<KanbanCardMovedEventArgs>	A card was moved (fromColumnId, toColumnId, toIndex).
swimlaneAdded$: Subject<KanbanSwimlaneEventArgs>	A swimlane was added.
swimlaneChanged$: Subject<KanbanSwimlaneEventArgs>	A swimlane property changed.
swimlaneRemoved$: Subject<KanbanSwimlaneEventArgs>	A swimlane was removed.
swimlaneMoved$: Subject<KanbanSwimlaneMovedEventArgs>	A swimlane was moved (fromIndex, toIndex).

Card Interaction Events

cardClick$: Subject<CardClickArgs>	A card was clicked. Args: { card, domEvent }.
cardDblClick$: Subject<CardDblClickArgs>	A card was double-clicked. Args: { card, domEvent }.
cardContextMenu$: Subject<CardContextMenuArgs>	A card was right-clicked. Args: { card, domEvent }.

Column Interaction Events

columnClick$: Subject<ColumnClickArgs>	A column header was clicked. Args: { column, domEvent }.
columnDblClick$: Subject<ColumnDblClickArgs>	A column header was double-clicked. Args: { column, domEvent }.
columnContextMenu$: Subject<ColumnContextMenuArgs>	A column header was right-clicked. Args: { column, domEvent }.
columnEmptyClick$: Subject<ColumnEmptyClickArgs>	Empty column area was clicked. Args: { column, swimlane, domEvent }.
columnEmptyDblClick$: Subject<ColumnEmptyDblClickArgs>	Empty column area was double-clicked. Args: { column, swimlane, domEvent }.
columnEmptyContextMenu$: Subject<ColumnEmptyContextMenuArgs>	Empty column area was right-clicked. Args: { column, swimlane, domEvent }.

Swimlane Interaction Events

swimlaneClick$: Subject<SwimlaneClickArgs>	A swimlane header was clicked. Args: { swimlane, domEvent }.
swimlaneDblClick$: Subject<SwimlaneDblClickArgs>	A swimlane header was double-clicked. Args: { swimlane, domEvent }.
swimlaneContextMenu$: Subject<SwimlaneContextMenuArgs>	A swimlane header was right-clicked. Args: { swimlane, domEvent }.

Board Events

boardContextMenu$: Subject<BoardContextMenuArgs>

Board background was right-clicked. Args: { domEvent }.

Drag Events (Cancelable)

cardMoving$: Subject<CardMovingArgs>	A card is being moved by drag (before mutation). Args: { card, fromColumnId, toColumnId, toIndex, toSwimlaneId, cancel }.
cardMovedByDrag$: Subject<CardMovedArgs>	A card was moved by drag (after mutation). Args: { card, fromColumnId, toColumnId, toIndex }.
cardDeleting$: Subject<CardDeletingArgs>	A card is about to be deleted. Args: { card, cancel }.
columnMoving$: Subject<ColumnMovingArgs>	A column is being reordered by drag. Args: { column, fromIndex, toIndex, cancel }.
columnMovedByDrag$: Subject<ColumnMovedByDragArgs>	A column was reordered by drag. Args: { column, fromIndex, toIndex }.
swimlaneMoving$: Subject<SwimlaneMovingArgs>	A swimlane is being reordered by drag. Args: { swimlane, fromIndex, toIndex, cancel }.
swimlaneMovedByDrag$: Subject<SwimlaneMovedByDragArgs>	A swimlane was reordered by drag. Args: { swimlane, fromIndex, toIndex }.

Selection & State Events

selectedCardsChanged$: Subject<KanbanCard[]>	Card selection changed.
hoveredCardChanged$: Subject<KanbanCard \| null>	Hovered card changed.
undone$: Subject<void>	An undo operation was performed.
redone$: Subject<void>	A redo operation was performed.

Types & Enums

Core Types

CardPriority	'none' \| 'low' \| 'medium' \| 'high' \| 'critical'
KanbanCardFilterFn	(card: KanbanCard) => boolean
KanbanScrollOptions	{ behavior?: ScrollBehavior }
KanbanBoardSerialized	{ columns: any[]; cards: any[]; swimlanes: any[] }

Rendering & Resolver Types

CardRenderFn	(args: CardRenderArgs) => boolean \| void
CardRenderArgs	{ card: KanbanCard; element: HTMLElement; column: KanbanColumn; swimlane: KanbanSwimlane \| null; color: KanbanCardColor }
CardTooltipFn	(args: CardTooltipArgs) => CardTooltipContent \| null \| Promise<CardTooltipContent \| null>
CardTooltipArgs	{ card: KanbanCard }
CardTooltipContent	{ title: string; rows?: { label: string; value: string }[] }
AssigneeResolverFn	(id: string) => KanbanAssignee \| null
KanbanAssignee	{ name: string; imageUrl?: string; color?: string }

Data Event Args

KanbanColumnEventArgs	{ column: KanbanColumn }
KanbanCardEventArgs	{ card: KanbanCard }
KanbanSwimlaneEventArgs	{ swimlane: KanbanSwimlane }
KanbanColumnMovedEventArgs	{ column: KanbanColumn; fromIndex: number; toIndex: number }
KanbanCardMovedEventArgs	{ card: KanbanCard; fromColumnId: string; toColumnId: string; toIndex: number }
KanbanSwimlaneMovedEventArgs	{ swimlane: KanbanSwimlane; fromIndex: number; toIndex: number }

Interaction Event Args

CardClickArgs	{ card: KanbanCard; domEvent: MouseEvent }
CardDblClickArgs	{ card: KanbanCard; domEvent: MouseEvent }
CardContextMenuArgs	{ card: KanbanCard; domEvent: MouseEvent }
ColumnClickArgs	{ column: KanbanColumn; domEvent: MouseEvent }
ColumnDblClickArgs	{ column: KanbanColumn; domEvent: MouseEvent }
ColumnContextMenuArgs	{ column: KanbanColumn; domEvent: MouseEvent }
SwimlaneClickArgs	{ swimlane: KanbanSwimlane; domEvent: MouseEvent }
SwimlaneDblClickArgs	{ swimlane: KanbanSwimlane; domEvent: MouseEvent }
SwimlaneContextMenuArgs	{ swimlane: KanbanSwimlane; domEvent: MouseEvent }
ColumnEmptyClickArgs	{ column: KanbanColumn; swimlane: KanbanSwimlane \| null; domEvent: MouseEvent }
ColumnEmptyDblClickArgs	{ column: KanbanColumn; swimlane: KanbanSwimlane \| null; domEvent: MouseEvent }
ColumnEmptyContextMenuArgs	{ column: KanbanColumn; swimlane: KanbanSwimlane \| null; domEvent: MouseEvent }
BoardContextMenuArgs	{ domEvent: MouseEvent }

Drag Event Args

CardMovingArgs	{ card: KanbanCard; fromColumnId: string; toColumnId: string; toIndex: number; toSwimlaneId: string \| null; cancel: boolean }
CardMovedArgs	{ card: KanbanCard; fromColumnId: string; toColumnId: string; toIndex: number }
CardDeletingArgs	{ card: KanbanCard; cancel: boolean }
ColumnMovingArgs	{ column: KanbanColumn; fromIndex: number; toIndex: number; cancel: boolean }
ColumnMovedByDragArgs	{ column: KanbanColumn; fromIndex: number; toIndex: number }
SwimlaneMovingArgs	{ swimlane: KanbanSwimlane; fromIndex: number; toIndex: number; cancel: boolean }
SwimlaneMovedByDragArgs	{ swimlane: KanbanSwimlane; fromIndex: number; toIndex: number }