cardContent
Replaces the built-in card template with a custom React render function. The wrapper element (selection state, drag affordances, data-id, CSS classes) stays intact - only the content inside it changes.
Usage
cardContent?: Component<{ card: KanbanCard; cardShape: CardShape }>;
The render function receives two props:
| Field | Type | Description |
|---|---|---|
card | KanbanCard | The source card data object |
cardShape | CardShape | The current section visibility map from card |
Example
<Kanban cards={cards} columns={columns}
cardContent={({ card, cardShape }) => (
<div className="my-card">
<strong>{card.label}</strong>
{card.owner && (
<span>{card.owner}</span>
)}
</div>
)}
/>
Related
- Cards guide - card data shape and custom card body
- card - CardShape controlling section visibility
- cardCss - per-card CSS classes