Kanban
A Kanban board is a visual representation of work processes used to manage and optimize workflow.
- Beta
Buy Pro
- 0.40.0 (latest)
Import#
The Kanban board is composed of several key primitives:
Kanban
: The canvas or workspace that provides context.KanbanColumn
: Columns represent different stages or phases in your workflow.KanbanColumnHeader
: The header of a column.KanbanColumnBody
: The body of a column.KanbanColumnDragHandle
: Handle to allow sorting of columns.KanbanCard
: A card represents an individual work item or task.KanbanDragOverlay
: A drag overlay that can be used to provide visual feedback.KanbanTrash
: Allows cards to be dropped and removed.useKanbanContext
: A hook to access the Kanban context.
import {Kanban,KanbanColumn,KanbanColumnHeader,KanbanColumnHandle,KanbanCard,KanbanTrash,useKanbanContext,} from '@saas-ui-pro/kanban'
Usage#
These Kanban primitives can be used to build advanced workflows that allows items to be moved over different stages.
Basic#
This is a basic example showing a simple Kanban board with 3 columns.
Controlled#
You can control the items by passing the items
and onChange
props to the Kanban
component.
Draggable columns#
You can make columns draggable by using the KanbanColumnDragHandle
component.
Toggle columns#
You can toggle column visibility by using useState.
Removing items#
You can remove items by dragging them into the KanbanTrash
component.
Add event listeners#
The Kanban
component provides several event listeners that can be used to listen to drag events.
onCardDragEnd
: Called when a card drag ends.onColumnDragEnd
: Called when a column drag ends.
Was this helpful?