columnCss

Callback that returns CSS class name(s) for a column wrapper. Runs once per visible column whenever the projected view data changes. The returned string is appended alongside the built-in state classes (wx-collapsed, wx-over-limit) and any static column.css value.

Usage

columnCss?: (cards: KanbanCard[], column: ColumnView) => string;

Default: undefined

Parameter	Type	Description
cards	KanbanCard[]	Filtered and sorted card list for this column
column	ColumnView	Projected column with id, overLimit, dataStatus, collapsed, cardLimit

Returns a space-separated string of CSS class names, or an empty string.

Example

import { Kanban } from "@svar-ui/react-kanban";

const columnCss = (cards, column) => {
  if (column.dataStatus === "loading") return "col-loading";
  if (column.overLimit) return "col-wip-exceeded";
  if (cards.length === 0) return "col-empty";
  return "";
};

<Kanban cards={cards} columns={columns} columnCss={columnCss} />

.col-wip-exceeded {
  border-color: var(--wx-color-danger);
}
.col-empty {
  opacity: 0.6;
}
.col-loading {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(0,0,0,0.03) 8px,
    rgba(0,0,0,0.03) 16px
  );
}

Related

• Themes guide - CSS variables, per-card and per-column styling
• cardCss - per-card dynamic CSS classes
• columns - static css field on column definitions