Tables

Tables describe list and data-grid style UI generated from schema.

VibeFlui tables are powered by TanStack Table and can render static rows, provider-backed server rows, nested response data, search, filters, sorting, pagination, row selection, bulk actions, row actions, column visibility, export controls, persisted table state, custom renderers, computed columns, and loading/empty/error states.

Basic table

export const usersSchema = {
  resource: "users",
  identity: {
    key: "id",
    param: "id"
  },
  table: {
    columns: [
      { key: "name", label: "Name", sortable: true, searchable: true },
      { key: "email", label: "Email", type: "email", searchable: true },
      { key: "status", label: "Status", type: "custom", renderer: "StatusBadge" }
    ],
    search: {
      enabled: true,
      placeholder: "Search users..."
    },
    pagination: {
      enabled: true,
      pageSize: 10
    }
  },
  registry: {
    renderers: ["StatusBadge"]
  }
} as const;

Defaults

Feature	Default
`table.enabled`	`true`
`table.mode`	root mode; defaults to `"server"` unless `mode` or `dataMode` sets `"static"`
`table.engine`	`"tanstack-table"`
`table.actionGrouping`	`true`
`table.rowNumber`	enabled unless explicitly `false`
`table.states.loading.text`	`Loading...`
`table.states.empty.text`	`No data available.`
load error fallback	`messages.defaults.loadError`, defaulting to `Unable to load data.`
`table.export`	enabled by runtime when not `false`
export filename	`schema.resource` or `table-data`

Table modes

Mode	Behavior
`static`	VibeFlui filters, sorts, and paginates client-side.
`server`	VibeFlui builds query state and expects the provider/host to return filtered rows.

Rendered structure

The table can include:

export and column visibility controls
global search
filters
create action
selected-row count
bulk action buttons
row number column
row action column
row selection column
schema columns
pagination footer

Basic table

Defaults

Table modes

Rendered structure

Subpages