Table Schema

table describes a list UI generated by FluiKit.

Table schema controls columns, server or static data mode, row numbers, search, filters, sorting, pagination, row selection, action grouping, states, and styling hooks.

Table shape

schemas/users/user-table.schema.ts

export const userTableSchema = {
  version: "1.0.0",
  resource: "users",
  endpoint: "/api/users",
  table: {
    enabled: true,
    mode: "server",
    engine: "tanstack-table",
    dataPath: "data",
    totalPath: "pagination.total",
    minWidth: 960,
    rowNumber: {
      enabled: true,
      label: "#",
      width: "64px"
    },
    columns: [
      { key: "name", label: "Name", sortable: true, searchable: true, width: "25%" },
      { key: "email", label: "Email", type: "email", searchable: true, width: "30%" },
      { key: "role.name", label: "Role", width: "20%" },
      { key: "status", label: "Status", type: "badge", renderer: "users.statusBadge", width: "25%" }
    ],
    search: {
      enabled: true,
      placeholder: "Search users",
      param: "q"
    },
    filters: [
      {
        key: "status",
        label: "Status",
        type: "select",
        optionLoader: "users.statusOptions"
      }
    ],
    sort: {
      enabled: true,
      defaultKey: "name",
      defaultDirection: "asc"
    },
    pagination: {
      enabled: true,
      page: 1,
      pageSize: 10,
      pageSizeOptions: [10, 25, 50],
      pageParam: "page",
      pageSizeParam: "pageSize"
    },
    rowSelection: {
      enabled: true,
      mode: "multiple"
    },
    actionGrouping: true,
    states: {
      loading: { text: "Loading users..." },
      empty: { text: "No users found." },
      error: { text: "Users could not be loaded." }
    }
  }
} as const;

Table properties

Property	Type	Purpose
`enabled`	`boolean`	Enables or disables table rendering.
`mode`	`"static" \| "server"`	Controls static vs server-driven data.
`engine`	`"tanstack-table"`	Table engine.
`dataPath`	`string`	Path to rows inside a response.
`totalPath`	`string`	Path to total count inside a response.
`minWidth`	`string \| number`	Enables horizontal scrolling for wide tables.
`columns`	`array`	Column strings or column objects.
`search`	`object`	Search input behavior.
`filters`	`array`	Filter definitions.
`sort`	`object`	Sort behavior.
`pagination`	`object`	Pagination behavior.
`rowSelection`	`boolean \| object`	Row selection behavior.
`rowNumber`	`boolean \| object`	Row number behavior.
`actionGrouping`	`boolean`	Groups row actions when appropriate.
`actionIcon`	`object`	Hover shape and color for icon actions.
`columnVisibility`	`boolean \| object`	Column visibility behavior.
`export`	`boolean \| object`	Export and copy features.
`states`	`object`	Loading, empty, and error messages.
`className`	`string`	Styling hook.

Column object

schemas/users/user-table-columns.ts

const statusColumn = {
  key: "status",
  label: "Status",
  type: "badge",
  renderer: "users.statusBadge",
  sortable: true,
  filterable: true,
  headerClassName: "text-right",
  cellClassName: "text-right"
};

Use renderer, compute, and computed as registry string keys. Do not put render functions in the schema.

headerClassName and cellClassName are applied by the core table renderer to the column's <th> and <td> respectively — use them for per-column styling such as text alignment. Plain className (no header/cell prefix) and classNameWhen at the column level are schema metadata only; the core renderer does not apply them. See Columns for the full column property reference.

Server-side response

JSON

{
  "status": true,
  "code": 200,
  "message": "Users loaded",
  "data": [
    { "id": "1", "name": "Ava Stone", "email": "ava@example.com", "status": "active" }
  ],
  "pagination": {
    "page": 1,
    "pageSize": 10,
    "total": 1
  }
}