Kanban Toolbar

Add the toolbar

Install KanbanToolbarPlugin alongside KanbanPlugin. The toolbar renders in its own grid header slot and preserves other header content. Without the plugin, Kanban does not render a toolbar.

import { KanbanPlugin, KanbanToolbarPlugin } from '@revolist/kanban';
import '@revolist/revogrid-pro/styles.css';
import '@revolist/kanban/styles.css';

grid.plugins = [KanbanPlugin, KanbanToolbarPlugin];
grid.kanban = {
  columns: [
    { prop: 'todo', name: 'To do' },
    { prop: 'doing', name: 'In progress' },
    { prop: 'done', name: 'Done' },
  ],
  card: { titleField: 'title', priorityField: 'priority' },
};
grid.kanbanToolbar = {
  filters: [{ id: 'priority', field: 'priority', label: 'Priority' }],
};

The compact command bar includes icon buttons for Add card, Filters, Undo/Redo, and Board/Table, alongside search and a card count. Edit and Delete appear when cards are selected. Buttons use Font Awesome SVGs with localized tooltips and accessible names. The view selector uses the shared Pro SegmentedSwitch component and its theme styles. An empty board includes Create first card, using the same packaged editor.

Card actions and permissions

Actions call Kanban’s existing request APIs, so configured editor fields, request interception, delete confirmation, rules and persistence behavior still apply. Edit requires one editable selection. Delete requires every selected card to be editable. Read-only boards disable mutation actions. Indexed remote loading also disables create/delete because those operations require server refresh.

Undo and redo use the installed shared history service. Their availability tracks its current state, including pending replay. If you disable the packaged editor, handle card request events in your application.

Search and filters

Search uses Kanban’s configured query fields, defaulting to the title field. Open Filters to choose a workflow or field value. Changes apply immediately; use Done, Escape, or a click outside to close the popover. The workflow selector filters by the canonical workflow field. Additional filters accept a canonical field and either explicit options or options derived from the loaded cards. Array-valued fields match when they contain the selected value. Numbers, strings and booleans retain their identity.

grid.kanbanToolbar = {
  filters: [
    {
      id: 'priority', field: 'priority', label: 'Priority',
      options: [
        { value: 'high', label: 'High' },
        { value: 'low', label: 'Low' },
      ],
    },
    { id: 'owner', field: 'assigneeIds', label: 'Assignee' },
  ],
};

Clear filters clears the toolbar query and field choices. The application’s existing predicate and core RevoGrid filters continue to apply. Search updates projection without resetting column order, collapsed groups, history or pending saves. Filtered-out cards are removed from the active selection.

For application-controlled search, call kanbanPlugin.setFilter(filter); the mounted toolbar reflects that filter. With remote loading, filtering and derived options apply to loaded cards. They do not perform server-wide queries.

Switch views

The view buttons set grid.kanban using the current board configuration. Returning to the board restores its order, collapsed columns/swimlanes, filters and selected cards while using the current canonical source, including edits made in table view. Card actions and board filters are disabled while table view is active; shared history controls remain available.

View switching is disabled while saves or approvals are unsettled, a conflict or unknown outcome needs resolution, or a history replay is pending. Resolve or retry that activity before leaving the board. Searching remains available during saves.

Customize controls and translations

grid.kanbanToolbar = {
  actions: ['add', 'edit', 'undo', 'redo'],
  workflowFilter: false,
  viewSwitcher: true,
  labels: {
    toolbar: 'Barra Kanban',
    add: 'Adicionar cartão', edit: 'Editar cartão',
    search: 'Pesquisar cartões', clear: 'Limpar filtros',
    board: 'Quadro', table: 'Tabela',
    count: (visible, total) => `${visible} de ${total} cartões`,
  },
};

All toolbar text is exposed through KanbanToolbarLabels, including control/group names, counts, selection, first-card guidance and pending-save text. Translate custom filter labels and options in their definitions. Count callbacks can use Intl.NumberFormat and application plural rules.

Set search, workflowFilter or viewSwitcher to false to hide that control. Set actions: [] to hide card and history action buttons. Set grid.kanbanToolbar = false to hide the entire toolbar; it does not clear active filters or change the view. Assign an options object to show it again.

Controls use native buttons, search input and selects with accessible names, visible focus and normal keyboard operation. Toolbar interactions are isolated from grid shortcuts. Controls wrap within narrow headers and follow shared Pro light/dark theme tokens.

Customize the panel

KanbanToolbarPlugin is installed separately from KanbanPlugin. Its TSX components own presentation; board APIs continue to own card changes and history. You can replace the toolbar with your own UI by omitting this optional plugin.

The default is icon-only. Enable showLabels to show translated action and view names beside icons. Both modes retain tooltips and accessible names from labels. Partial label overrides fall back to the defaults; count and selection labels accept functions for your language’s plural rules.

import { h } from 'preact';

grid.kanbanToolbar = {
  showLabels: true,
  className: 'project-toolbar',
  count: false,
  emptyState: false,
  actions: ['add', 'edit', 'delete'],
  labels: {
    add: 'New task',
    board: 'Cards',
    table: 'Rows',
    selection: count => `${count} selected`,
  },
  renderIcon: name => <ProjectIcon name={name} />,
  renderStart: state => <span>{state.visible} visible tasks</span>,
  renderEnd: state => <ProjectActions disabled={state.pending} />,
};

ProjectIcon and ProjectActions are your own components. Icon renderers return decorative Preact content; the toolbar supplies the accessible button name. Start/end renderers receive current active, pending, selected, visible, total, and enabled action flags. These are presentation snapshots; use the existing Kanban plugin APIs to change board data.

Replace grid.kanbanToolbar with a new options object to update these settings without reinstalling the plugin. search, workflowFilter, and viewSwitcher can each be disabled independently. filters configure labeled fields/options; actions controls action order and visibility. Excluding add also removes the first-card button. Shared Pro tokens style controls; className scopes your own panel styling.

Add a card inside a column

The plus button at the end of each column/swimlane opens the card editor with that location selected. It works independently of the toolbar plugin.

grid.kanban = {
  ...grid.kanban,
  addCard: { mode: 'dialog' },
};

To create immediately, use mode: 'create'. The default card receives a unique ID and the localized labels.newCard title. Supply additional values with createCard; the clicked column and swimlane determine the final placement.

grid.kanban = {
  ...grid.kanban,
  addCard: {
    mode: 'create',
    createCard: ({ draft, columnProp, swimlaneId }) => ({
      ...draft,
      title: 'New task',
      priority: 'medium',
    }),
  },
  labels: {
    addCard: (column, lane) => `Add task to ${column}${lane ? `, ${lane}` : ''}`,
    newCard: 'New task',
  },
};

Set addCard: false to hide the plus button. Read-only boards and indexed remote loading hide it automatically. Creation uses the existing rules, WIP limits, cancellable create event, and history. A custom customization.emptyState renderer still owns empty buckets when provided. Drag targets remain available when the plus button is hidden.