Labels and Language

Translate visible labels and assistive announcements together. locale controls locale-aware behavior; it does not download a translation pack or rename your application’s card values.

Interactive example

Translate board labels

Translate workflow names and interface messages independently of card data.

Try it: Switch to French labels, then return to English.

Reset

Loading example…

What to notice: Workflow labels change while the four tasks keep their IDs and status values.

TypeScript source

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

board-actions.ts

board-actions.ts

import type { KanbanPlugin, KanbanConfig } from '@revolist/kanban';
import type { WorkCard } from './first-board';

export function moveResearch(
  kanban: KanbanPlugin<WorkCard>,
  columnProp: string,
) {
  return kanban.moveCards(['task-1'], { columnProp });
}
export function moveResearchToPlatform(kanban: KanbanPlugin<WorkCard>) {
  return kanban.moveCards(['task-1'], {
    columnProp: 'todo',
    swimlaneId: 'platform',
  });
}
export function selectTodoCards(kanban: KanbanPlugin<WorkCard>) {
  kanban.setSelectedCardIds(
    kanban
      .getCards()
      .filter((card) => card.status === 'todo')
      .map((card) => card.id),
  );
}
export const workInProgress: Partial<KanbanConfig<WorkCard>> = {
  columns: [
    { prop: 'todo', name: 'To do' },
    { prop: 'doing', name: 'In progress', wipLimit: 1 },
    { prop: 'done', name: 'Done' },
  ],
  wipBehavior: 'block',
};
export const startBeforeDone: Partial<KanbanConfig<WorkCard>> = {
  rules: {
    canDrop: ({ cards, targetColumn }) =>
      targetColumn.prop === 'done' &&
      cards.some((card) => card.status === 'todo')
        ? 'Start the task before marking it done.'
        : true,
  },
};
export function frenchBoard(
  config: KanbanConfig<WorkCard>,
): KanbanConfig<WorkCard> {
  return {
    ...config,
    locale: 'fr-FR',
    columns: config.columns?.map((column) => ({
      ...column,
      name:
        (
          { todo: 'À faire', doing: 'En cours', done: 'Terminé' } as Record<
            string,
            string
          >
        )[String(column.prop)] ?? column.name,
    })),
    labels: {
      ...config.labels,
      emptyColumn: 'Aucune carte',
      dropCardHere: 'Déposer une carte ici',
      moveCancelled: 'Déplacement annulé',
      editCard: 'Modifier la carte',
      deleteCard: 'Supprimer la carte',
    },
  };
}

Download board-actions.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: change the example language, then move or select a card. The board should describe the action in the selected language without changing stored status values.

Labels and locale

English labels are bundled. Pass a partial labels object to replace every visible or assistive string used by your product:

grid.kanban = {
  ...config,
  locale: 'pt-PT',
  labels: {
    emptyColumn: 'Sem cartões',
    addCard: (column, lane) =>
      `Adicionar cartão em ${column}${lane ? `, ${lane}` : ''}`,
    newCard: 'Novo cartão',
    editCard: 'Editar cartão',
    addCardHere: 'Adicionar cartão aqui',
    deleteCard: 'Eliminar cartão',
    cardContextMenu: 'Ações do cartão Kanban',
    cardCount: (visible, total) => `${visible} de ${total} cartões`,
    moveBlocked: (reason) => `Movimento bloqueado: ${reason}`,
  },
};

locale controls locale-aware query normalization for built-in card search and the default date-range component. Other number and product-specific display formatting remains template-owned. Kanban does not automatically download a translation pack.

Toolbar and editor text

The toolbar has its own KanbanToolbarLabels. The editor accepts its documented field and action labels. Translate adapter-returned error messages in your application; Kanban cannot infer a translation for arbitrary server text.

Next steps

See themes, keyboard announcements and managed saving feedback. See the Kanban API for exact types and signatures.