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

<script setup>
  import { Kanban } from "@svar-ui/vue-kanban";

  function 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 "";
  }
</script>

<template>
  <Kanban :cards="cards" :columns="columns" :columnCss="columnCss" />
</template>

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

Related

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