Skip to content
RevoGrid [Pro]

RevoGrid Kanban

KanbanPlugin turns canonical grid.source rows into workflow cards without creating a second data model. Configured workflow columns become RevoGrid columns and optional swimlanes expand into native card rows. Every workflow cell contains at most one card, so RevoGrid owns both horizontal and vertical virtualization.

Install

Section titled “Install”
Terminal window
pnpm add @revolist/revogrid @revolist/revogrid-pro @revolist/kanban
import '@revolist/revogrid-pro/dist/revogrid-pro.css';
import '@revolist/kanban/styles.css';

One source, multiple views

Keep cards in grid.source. Set grid.kanban to show the board and set it to false to restore the latest cards and table columns.

Provider-backed

RevoGrid providers own projected data, columns, dimensions, focus, viewport state, and plugin dependencies.

Workflow interaction

Reorder cards, move across columns or lanes, drag a multi-selection, validate transitions, and enforce WIP limits.

Product-owned content

Replace card, header, lane, empty-state, and drag-preview content while the managed shell preserves interaction and accessibility.

Minimal setup

Section titled “Minimal setup”
import { defineCustomElements } from '@revolist/revogrid/loader';
import { KanbanPlugin, type KanbanConfig } from '@revolist/kanban';
import '@revolist/revogrid-pro/styles.css';
import '@revolist/kanban/styles.css';


defineCustomElements();
await customElements.whenDefined('revo-grid');


const kanban: KanbanConfig = {
  columns: [
    { prop: 'todo', name: 'To do' },
    { prop: 'doing', name: 'In progress', wipLimit: 3 },
    { prop: 'done', name: 'Done' },
  ],
  card: { titleField: 'title', descriptionField: 'description' },
};


const grid = document.createElement('revo-grid');
grid.style.cssText = 'display:block;height:600px;width:100%';
grid.plugins = [KanbanPlugin];
grid.kanban = kanban;
document.body.append(grid);
grid.source = [
  { id: 'card-1', title: 'First card', status: 'todo', order: 1000 },
];


// Call when the host view unmounts.
export const destroy = () => grid.remove();

The packaged editor is installed automatically. Double-click a card to edit it; set grid.kanbanCardEditorDialog = false only when supplying your own editor.

Add packaged controls

Section titled “Add packaged controls”

Install KanbanToolbarPlugin alongside KanbanPlugin for card actions, search, field filters, undo/redo and board/table switching. The toolbar uses the same editor, canonical cards and persistence adapter as other interactions.

React starter

Section titled “React starter”

Add react, react-dom, their TypeScript types and @revolist/react-datagrid. Include the following JSX augmentation to type the kanban property in your application.

import { useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { KanbanPlugin, type KanbanConfig } from '@revolist/kanban';
import '@revolist/revogrid-pro/styles.css';
import '@revolist/kanban/styles.css';


declare module '@revolist/revogrid' {
  namespace JSX {
    interface RevoGrid {
      kanban?: KanbanConfig<any> | false;
    }
  }
}


type Card = { id: string; title: string; status: string; order: number };


export default function Board({ rows }: { rows: Card[] }) {
  const plugins = useMemo(() => [KanbanPlugin], []);
  const kanban = useMemo<KanbanConfig>(() => ({
    columns: [{ prop: 'todo', name: 'To do' }, { prop: 'done', name: 'Done' }],
    card: { titleField: 'title' },
  }), []);
  return <RevoGrid style={{ height: '600px', width: '100%' }}
    plugins={plugins} kanban={kanban} source={rows} />;
}

Pass rows={[]} for an empty board; replace rows when application data arrives. React owns mounting and unmounting the grid. The standalone Kanban showcase also includes Vue and Angular examples.

The default fields are id, status, and order. Configure idField, columnField, or orderField when your application uses other names.

columns is optional so Kanban can be enabled before workflow metadata or data loads. An empty configuration and empty source render a stable empty board. If cards arrive before columns, they remain visible in the managed Unmapped column until the workflow configuration is supplied.

How the projection works

Section titled “How the projection works”
canonical grid.source cards
        + KanbanConfig
              │
              ▼
  validated card and bucket indexes
              │
              ▼
RevoGrid columns + expandable swimlane card rows

Your application supplies card records and a save endpoint. Kanban manages projection, interaction, validation, and local updates. Configure the persistence adapter to save canonical changes with approval, rollback, retry, and conflict handling.

Section titled “Recommended path”
  1. Define stable card IDs and explicit workflow columns.
  2. Add swimlanes, WIP limits, and card rules if the workflow needs capacity or policy controls.
  3. Configure the packaged card editor or a replacement UI.
  4. Configure async approval and persistence for server-backed changes, and use events and public methods to connect application controls.
  5. Add custom card content and translations.
  6. Verify accessibility and performance with production-sized data.