Styling and Renderers

Tables use theme slots, column class hooks, registry renderers, computed resolvers, and class name resolvers.

Theme slots

Common table slots:

tableWrapper
table
tableHeader
tableBody
tableRow
tableCell
search
filter
emptyState
loadingState
actionButton

theme: {
  classNames: {
    tableWrapper: "overflow-hidden rounded-lg border",
    tableCell: "px-4 py-3 text-sm",
    search: "h-10 rounded-md border px-3 text-sm"
  }
}

Cell class hook

table: {
  columns: [
    {
      key: "email",
      label: "Email",
      cellClassName: "font-medium"
    }
  ]
}

Custom renderer

components/vibeflui/renderers/status/StatusBadge.tsx

TSX

export function StatusBadge({ value }: { value?: unknown }) {
  return (
    <span className="rounded-full px-2 py-1 text-xs">
      {String(value)}
    </span>
  );
}

TSX

import { createRegistry } from "@vibeflui/core";
import { StatusBadge } from "@/components/vibeflui/renderers/status/StatusBadge";

export const registry = createRegistry({
  renderers: {
    StatusBadge
  }
});

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

Empty cell rendering

When a cell value is undefined, null, or an empty string, VibeFlui renders - with muted text.

Boolean values render as Yes or No.

Row class behavior

Rows emit rowClicked when clicked.

tableRow and tableCell theme resolution can receive row and column context.