Columns

Columns are configured with table.columns.

String columns

table: {
  columns: ["name", "email", "status"]
}

String columns are normalized into objects. VibeFlui derives the label and infers the column type from the key.

Object columns

table: {
  columns: [
    { key: "user.profile.fullName", label: "Name", sortable: true, searchable: true },
    { key: "email", label: "Email", type: "email", searchable: true },
    { key: "status", label: "Status", type: "custom", renderer: "StatusBadge" }
  ]
}

Column properties

Property	Type	Purpose
`key`	`string`	Row value path and TanStack column id.
`label`	`string`	Header text. Defaults from `key`.
`type`	column type	Display hint. Defaults by inference.
`width`	`string \| number`	Column width for fixed table layout.
`sortable`	`boolean`	Enables header sorting.
`searchable`	`boolean`	Includes the column in global search.
`filterable`	`boolean`	Metadata flag for filterable columns.
`hidden`	`boolean`	Hides the column from rendering.
`visibleWhen`	condition	Schema-level column visibility condition. It is not evaluated per row.
`renderer`	`string`	Registry renderer key.
`computed`	`string`	Registry computed resolver key.
`compute`	`string`	Alias used by runtime for computed resolver lookup.
`className`	`string`	Schema metadata for integrations. The core table renderer does not apply it to cells or headers.
`headerClassName`	`string`	Header cell (`<th>`) class hook applied by the core table renderer.
`cellClassName`	`string`	Data cell (`<td>`) class hook applied by the core table renderer, merged with the `tableCell` theme slot.
`classNameWhen`	condition class rules	Schema metadata for integrations. Use theme class name resolvers for active conditional row/cell styling.

Runtime notes

Column visibleWhen is evaluated as column-level visibility, not row-level visibility. Use a custom renderer when a single cell needs conditional content.

The core table renderer applies headerClassName (to <th>) and cellClassName (to <td>, merged with the tableCell theme slot). Plain className and classNameWhen at the column level are accepted by the schema, but they are metadata for integrations unless an adapter or custom renderer uses them.

Use headerClassName/cellClassName for per-column styling such as text alignment:

{ key: "total", label: "Total", headerClassName: "text-right", cellClassName: "text-right" }

headerClassName merges directly with the header cell's base class — unlike cellClassName, it does not merge with a theme class name slot or react to classNameWhen/classNameResolver, since there is no dedicated header-cell theme slot.

Column types

Supported table column types:

text
number
date
datetime
boolean
badge
email
custom
computed

Computed column

export const ordersSchema = {
  resource: "orders",
  table: {
    columns: [
      { key: "total", label: "Total", type: "computed", computed: "orders.formatTotal" }
    ]
  },
  registry: {
    computedResolvers: ["orders.formatTotal"]
  }
} as const;

import { createRegistry } from "@vibeflui/core";

export const registry = createRegistry({
  computedResolvers: {
    "orders.formatTotal": ({ row }) => {
      const amount = Number(row.total ?? 0);
      return new Intl.NumberFormat("en", { style: "currency", currency: "USD" }).format(amount);
    }
  }
});

Custom renderer

table: {
  columns: [
    { key: "status", label: "Status", type: "custom", renderer: "StatusBadge" }
  ]
},
registry: {
  renderers: ["StatusBadge"]
}