TaskCardBoard.tsx

My CRM-style trello task board I built in React — configurable cards, swimlanes, with drag-and-drop.

A React task board I built for CRM-style workflows — draggable cards, swimlanes, deal metadata, and meeting invitees. The TaskCard is portable: drop it into any Next.js or React app and wire up props instead of forking markup.

The live board below is fully interactive. Drag cards within or across columns, click a title to see the onTaskClick payload, or open the large board in full screen for seven swimlanes and a heavier task load.

Live board

4 swimlanes · 32 tasks · drag within or across columns

Loading board…

Configuration reference

Props and data fields supported in this demo, with allowed values and defaults where they apply.

TaskCard props

Per-card behavior and presentation.

task
Task object rendered on the card.
Options: See task data fields below
index
Zero-based position inside a droppable lane (required for drag-and-drop).
Options: 0 … n−1 within the lane
compact
Dense layout for portfolio embeds or crowded boards.
Options: true | false
Default: false
locale
Intl locale for currency formatting on opportunity pills.
Options: Any BCP 47 tag, e.g. en, en-CA, fr-CA, de-DE
Default: en-CA
visible
Controls enter/leave transition independent of filter state.
Options: true | false
Default: true
isDragDisabled
Disables dragging while keeping the card in the board.
Options: true | false
Default: false
onTaskClick
Called when the task title is clicked. The demo surfaces the full event payload (task, laneId, laneName) in the panel above the board.
Options: (taskId: string) => void · event shape: { type, taskId, laneId, laneName, task }
Default: undefined
opportunityHref
Builds the link target for the deal name pill.
Options: (opportunityId: string) => string
Default: () => "#"
inviteesLabel
Label shown before meeting attendee avatars.
Options: string
Default: "Invitees"

Board props

Composes lanes, drag context, and multiple TaskCards.

preset
Demo data density for this showcase.
Options: compact (4 lanes × 8 tasks) | fullscreen (7 lanes × 18 tasks)
Default: compact
layout
How swimlanes are arranged on screen.
Options: fit (equal-width flex, 4-up on wide screens) | scroll (horizontal scroll)
Default: scroll
compact
Passed through to every TaskCard in the board.
Options: true | false
Default: false
onTaskSelect
Optional board-level handler with the full selection event object.
Options: (event: SelectedTaskEvent) => void | undefined
showSelectionPanel
Show or hide the onTaskClick event payload panel.
Options: true | false
Default: true

Task data fields

Shape your API or mock data to match what the card reads.

task.id
Stable unique id; also used as react-beautiful-dnd draggableId.
Options: string (unique across the board)
task.name
Primary title shown on the card.
Options: string
task.show
When false, card animates out (pair with filters or toggles).
Options: boolean
Default: true
task.dueDate
Due date row with overdue styling when past today.
Options: Date | undefined
task.taskType
Drives accent bar colour, icon, type pill, and time format.
Options: taskTypeName: todo | calendar | email · label · icon URL · colour (hex/CSS)
task.tags
Extra colored pills below the type pill.
Options: Array<{ label: string; variant: PillVariant }> · 0–n per card
task.invitees
Avatar stack on calendar-type tasks only.
Options: Array<{ id: string; name: string }> · 0–n (overflow shows +N)
task.opportunity
Forecast and deal pills at the bottom of the card.
Options: { name: string; forecastValue: number } + optional opportunityId for links

Pill variants (tags & styling)

Use on task.tags or match built-in type/opportunity pills.

PillVariant
Color theme for tag and metadata pills.
Options: default · money · deal · meeting · email · task · urgent · stage · account
Built-in mapping
Type pill variant is chosen automatically from taskTypeName.
Options: calendar → meeting · email → email · todo → task