Customization And i18n

Managed card shell

Kanban owns the outer card shell, focus target, selection state, whole-card drag behavior, rule classes, and accessibility attributes. customization.cardContent replaces everything visible inside it.

customization: {
  cardContent: (h, { card, selected, badges }) =>
    h('div', { class: 'issue-card' }, [
      h('strong', null, card.summary),
      h('small', null, `${card.owner} · ${card.points} points`),
      selected ? h('span', null, 'Selected') : null,
      ...badges.map((badge) => h('span', { class: badge.className }, badge.label)),
    ]),
  cardProps: ({ card }) => ({
    class: card.blocked ? 'issue-card-shell--blocked' : '',
    title: card.summary,
  }),
}

The same customization object supports dragPreview, swimlaneHeader, swimlaneColumnHeader, and emptyState templates. The swimlane-header context reports swimlaneColumnCollapsed; compact mode keeps a managed vertical title badge so labels remain readable. Template contexts use canonical cards and projected metadata; do not query card DOM to recover product state.

Workflow header templates

Set columnTemplate and columnProperties directly on a workflow definition, using the same shape as a RevoGrid column:

grid.kanban = {
  ...config,
  columns: [
    {
      prop: 'active',
      name: 'Active',
      size: 280,
      wipLimit: 4,
      columnProperties: () => ({
        class: 'workflow-header-cell',
        style: { backgroundColor: 'var(--active-header)' },
      }),
      columnTemplate: (h, props, additionalData) => {
        const { column, visibleCount, totalCount, overWipLimit, toggleCollapsed } = props.kanban;
        const name = column.name ?? String(column.prop);
        return h('div', { class: overWipLimit ? 'workflow-header workflow-header--over' : 'workflow-header' }, [
          h('strong', null, name),
          h('span', null, `${visibleCount} / ${totalCount}`),
          h('button', { type: 'button', onClick: toggleCollapsed }, 'Toggle'),
          additionalData?.workspaceName
            ? h('small', null, additionalData.workspaceName)
            : null,
        ]);
      },
    },
  ],
};

columnTemplate fully replaces the inner managed workflow header. Kanban does not append its default name, count, WIP badge, or collapse button, so render the pieces your product needs and call props.kanban.toggleCollapsed() when the custom header exposes collapse. Application additionalData is passed through unchanged. RevoGrid’s outer resizable header remains managed.

columnProperties is composed with Kanban’s required header properties through the shared Pro merging behavior: classes and styles combine, while required workflow identity and interaction attributes win conflicts. Collapsed body rails deliberately render name (or String(prop)) instead of invoking the header template.

Default content

Configure card.titleField and card.descriptionField, or provide formatter callbacks. The title defaults to the title field and falls back to the card ID.

Default cards can also render shared progress and assignee content without a custom template:

grid.kanban = {
  ...config,
  card: {
    titleField: 'name',
    startDateField: 'startDate',
    endDateField: 'endDate',
    dateTimeZone: 'UTC',
    progressField: 'percentDone',
    assigneeField: 'owners',
    assigneeAvatarField: 'ownerAvatars',
  },
};

Assignee and avatar fields accept either scalar values or parallel arrays. For The default date range appears directly after the card title and uses the configured Kanban locale and optional dateTimeZone. For fully custom cards, import renderKanbanDateRange, renderKanbanProgress, and renderKanbanAssignees and compose them inside customization.cardContent; the managed shell continues to own focus, selection, accessibility, and drag behavior.

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',
    dropCardHere: 'Soltar um cartão aqui',
    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.

CSS

Import the Enterprise stylesheet once:

import '@revolist/revogrid-enterprise/dist/revogrid-enterprise.css';

Prefer Kanban CSS variables and classes returned by card rules or customization hooks. Avoid changing managed-shell focus, selection, and drag-state elements in ways that hide their state.

Kanban follows the grid’s material, compact, darkMaterial, and darkCompact themes automatically. Its defaults derive from RevoGrid’s public --revo-grid-* tokens, while the semantic --kanban-board-background, --kanban-surface, --kanban-card-background, --kanban-border, --kanban-text, --kanban-muted, --kanban-accent, and --kanban-accent-strong variables let the host tune either theme without replacing component styles. Drag previews copy the resolved Kanban tokens, so a body-mounted preview retains the active dark theme.