VVibeFlui

Class Name Conditions

theme.classNameWhen adds classes when a condition matches the current row or values context.

Example

TS
export const usersSchema = {
  resource: "users",
  theme: {
    classNameWhen: [
      {
        slot: "tableRow",
        when: { key: "status", operator: "equals", value: "suspended" },
        className: "bg-red-50 hover:bg-red-50"
      },
      {
        slot: "tableCell",
        when: { key: "status", operator: "equals", value: "pending" },
        className: "text-orange-700"
      }
    ]
  },
  table: {
    columns: ["name", "email", "status"]
  }
} as const;

Source context

The condition source is:

  1. values when the renderer passes form values.
  2. row when the renderer passes a table row.
  3. An empty object when neither exists.

This means row-driven styling works for tableRow and tableCell, and value-driven styling can work where form value context is provided.

Operators

classNameWhen uses the same condition operators as other VibeFlui conditions:

  • equals
  • notEquals
  • contains
  • notContains
  • exists
  • notExists
  • in
  • notIn
  • gt
  • gte
  • lt
  • lte

Slot matching

If slot is omitted, the condition can apply to any resolved slot. Prefer setting slot to keep styling predictable.

Common mistakes

  • Table column visibleWhen controls column visibility, not per-row styling. Use theme.classNameWhen for row or cell styling.
  • Conditions can match row data only on slots that receive row context.