Kanban

Kanban uses the same records, query and mutation actions as the table. Group by a finite status field and show only the properties useful for scanning cards.

Card settings

Open View → Card settings to select the card title and visible properties. Properties and labels use checkboxes that remain open for multiple changes. The grouping field remains under View → Group. On mobile, choices stay inside the view drawer and Back restores the originating control. Short menus do not force a scrollbar; long lists remain scrollable.

Configuration example

Start from the React quick start or Vue quick start. The following file extends their product catalog. Pass this configuration through getTableConfig in React or config in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const pipelineConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    enableViews: true,
    allowViewSave: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["price", "stock"],
      showCardLabels: true,
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const pipelineConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    enableViews: true,
    allowViewSave: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["price", "stock"],
      showCardLabels: true,
    },
  },
});

Persist a card move

Moving a card between editable lanes updates its grouping field through update(id, patch). Supply the action and editing permissions. The server must validate allowed transitions and return a failed result when a transition is refused. Use stable option values such as draft, active, and archived; labels can be translated independently.

Keep the board understandable

titleColumn supplies the card title and cardColumnIds supplies its properties; without it, every data property except the title and the grouped column is shown. Search, filtering and saved views still apply. Paginated server data only represents the rows actually retrieved; do not treat a lane count as a database-wide workflow count without a matching server contract. See the pipeline recipe.

Build a status board

Keep the three status options as lanes and show only the title and stock. Connect editableActions so moving a card persists its status.

Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["stock"],
      showCardLabels: false,
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["stock"],
      showCardLabels: false,
    },
  },
});

Show labels on richer cards

Expose price and stock with their labels when the board is used for review. Table-only density and footer controls are hidden in Kanban.

Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["price", "stock"],
      showCardLabels: true,
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["price", "stock"],
      showCardLabels: true,
    },
  },
});

Server lanes

For a complete, read-oriented board, configure table.kanban.server. Its groups(signal) callback returns { value, label, totalCount }[]; counts cover the complete authorized query. rows(group, cursor, signal) returns { rows, nextCursor }, where null ends that lane. The first cursor is null. Each lane loads independently and retains its rows and cursor on failure.

Set queryKey to a stable serialization of filters, search, sorting, account scope and refresh revision. Capture that query in the callbacks and respect AbortSignal. Changing the key discards the old board. The server must enforce permissions for both counts and pages. Never derive totals from the loaded page.

Optional getRowId(row) defaults to String(row.id). onActivate(row) owns record navigation. labels can translate loading, retry, loadMore, and empty. Remote boards are read-oriented in both React and Vue: drag mutations, selection, bulk commands and grid pagination do not apply to incomplete lanes. Use the grid for bulk work. Existing local Kanban behavior remains unchanged.