Board and Table Views

A board is useful for progress; a table is useful for inspecting fields. Both views use the current application card records.

Interactive example

Show only the controls you need

The toolbar starts with Add, Edit and Delete. Other actions are omitted.

Try it: Select a card to enable Edit and Delete, or switch to a search-only toolbar.

Reset

Loading example…

What to notice: Toolbar configuration limits the available controls without replacing the board.

TypeScript source

Install the packages from Getting Started, then use this source in your app.

toolbar.ts

toolbar.ts

import { KanbanToolbarPlugin, type KanbanToolbarOptions } from '@revolist/kanban';
import { configureBoard, boardConfig, demoCards } from './first-board';

export const editingToolbar: KanbanToolbarOptions = { actions: ['add', 'edit', 'delete'], search: false, workflowFilter: false, viewSwitcher: false, showLabels: true };
export const searchToolbar: KanbanToolbarOptions = { actions: [], search: true, workflowFilter: false, viewSwitcher: false };
export async function createBoardWithToolbar(grid: HTMLRevoGridElement) {
  grid.kanbanToolbar = editingToolbar;
  return configureBoard(grid, boardConfig, demoCards, [KanbanToolbarPlugin]);
}
// grid.kanbanToolbar = searchToolbar; // Only the search control remains.

Download toolbar.ts

first-board.ts

first-board.ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { KanbanPlugin, type KanbanConfig } from '@revolist/kanban';
import '@revolist/revogrid-pro/styles.css';
import '@revolist/kanban/styles.css';

export interface WorkCard {
  id: string; title: string; status: string; order: number;
  description?: string; team?: string; owner?: string; priority?: string;
  tags?: string[]; progress?: number; startDate?: string; endDate?: string;
}
export const demoCards: WorkCard[] = [
  { id: 'task-1', title: 'Research customer needs', description: 'Collect feedback for the next release.', status: 'todo', team: 'product', owner: 'Ana', priority: 'normal', order: 1000 },
  { id: 'task-2', title: 'Build onboarding', description: 'Make the first session useful.', status: 'doing', team: 'product', owner: 'Mia', priority: 'high', order: 1000 },
  { id: 'task-3', title: 'Improve API errors', description: 'Return actionable validation messages.', status: 'todo', team: 'platform', owner: 'Rui', priority: 'normal', order: 2000 },
  { id: 'task-4', title: 'Release checklist', description: 'Ready for the next deployment.', status: 'done', team: 'platform', owner: 'Sam', priority: 'normal', order: 1000 },
];
export const boardConfig: KanbanConfig<WorkCard> = {
  columns: [{ prop: 'todo', name: 'To do', size: 210 }, { prop: 'doing', name: 'In progress', size: 210 }, { prop: 'done', name: 'Done', size: 210 }],
  card: { titleField: 'title' }, cardRowHeight: 88,
  addCard: false, swimlaneColumn: false,
};

export async function configureBoard(
  grid: HTMLRevoGridElement,
  config: KanbanConfig<WorkCard> = boardConfig,
  cards: readonly WorkCard[] = demoCards,
  extraPlugins: HTMLRevoGridElement['plugins'] = [],
) {
  await defineCustomElements();
  grid.plugins = [KanbanPlugin, ...extraPlugins]; // The packaged editor and history install automatically.
  grid.columns = [{ prop: 'title', name: 'Title' }, { prop: 'status', name: 'Status' }, { prop: 'owner', name: 'Owner' }];
  // Cached remote data can hydrate immediately: finish initial grid setup first.
  grid.kanban = config.remote ? { ...config, remote: false } : config;
  grid.source = cards.map(card => ({ ...card }));
  await grid.componentOnReady();
  const plugins = await grid.getPlugins();
  const kanban = plugins.find((plugin): plugin is KanbanPlugin<WorkCard> => plugin instanceof KanbanPlugin);
  if (!kanban) throw new Error('Kanban could not start.');
  if (config.remote) grid.kanban = config;
  return kanban;
}

// Give your container a width and mount once after it exists in the DOM.
export async function createKanbanBoard(container: HTMLElement) {
  await defineCustomElements();
  const grid = document.createElement('revo-grid');
  grid.style.cssText = 'display:block;width:100%;height:400px';
  container.append(grid);
  try {
    const kanban = await configureBoard(grid);
    return { grid, kanban, destroy() { grid.remove(); } };
  } catch (error) { grid.remove(); throw error; }
}

Download first-board.ts

Try it: switch to the table and back. Move or edit a card, then switch again: the latest values remain available.

Switching views

// Table to Kanban
grid.kanban = kanbanConfig;

// Kanban to table
grid.kanban = false;

Disabling Kanban restores the latest canonical source, latest host column definitions, and relevant table state. Sorting is not used for card order while the board is active; orderField remains authoritative. Re-enabling projects the current source again.

Add the view switcher

Install KanbanToolbarPlugin and enable viewSwitcher:

grid.kanbanToolbar = {
  actions: [], search: false, workflowFilter: false, viewSwitcher: true,
};

Keep your table columns in grid.columns. Kanban’s workflow columns belong in grid.kanban.columns; they describe statuses, not table fields.

Next steps

See card data, toolbar and save state. See the Kanban API for exact types and signatures.