Kanban Board

A drag-and-drop Kanban board view that groups entities into columns by status. An alternative to the table listing view. Powered by KanbanListingContext.

Import


import { KanbanBoard } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/KanbanBoard";

How It Works

KanbanBoard reads column definitions and entity data from KanbanListingContext. Each column represents a status value, and cards represent entities in that status.


KanbanListingContext
  ├── fetches entities grouped by status column
  ├── handles drag-and-drop status updates (PATCH to API)
  └── provides columns and cards to KanbanBoard

Usage


import { KanbanListingContext } from "...";
import { KanbanBoard } from "...";
 
<KanbanListingContext
  entityConfig={entityConfig}
  statusField="status"
  statusOptions={statusOptions}
>
  <KanbanBoard />
</KanbanListingContext>

Enabling Kanban

In the entity config, set kanban: true and specify the status column:


export const entityConfig = {
  kanban: {
    enabled: true,
    statusField: "status",
    statusOptions: [
      { value: "draft", label: "Draft", color: "gray" },
      { value: "active", label: "Active", color: "green" },
      { value: "closed", label: "Closed", color: "red" },
    ],
  },
};

Drag-and-drop triggers a PATCH request to update the entity’s status field. The optimistic update is applied immediately on drag.