FluiKitTable

FluiKitTable renders schema rows through TanStack Table.

Most pages use it through FluiKit. Direct usage requires a NormalizedFluiKitConfig.

Props

type FluiKitTableProps = {
  schema: NormalizedFluiKitConfig;
  data?: Record<string, unknown>[];
  response?: unknown;
  loading?: boolean;
  error?: unknown;
  className?: string;
  onCreate?: () => void;
  onEdit?: (row) => void;
  onDelete?: (row, result?) => unknown | Promise<unknown>;
  onView?: (row) => void;
  onRowAction?: (action, row, result?) => unknown | Promise<unknown>;
  onBulkAction?: (action, rows, result?) => unknown | Promise<unknown>;
  onActionError?: (action, row, error) => void | Promise<void>;
  onBulkActionError?: (action, rows, error) => void | Promise<void>;
  onQueryChange?: (query) => void;
  executeDeleteAction?: boolean;
  executeRowActions?: boolean;
  executeBulkActions?: boolean;
};

Minimal example

schemas/users/users.schema.ts

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  table: {
    columns: ["name", "email", "status"]
  },
  actions: false
} as const;

app/users/users-table.tsx

"use client";

import { FluiKitTable, normalizeSchema } from "@vibeflui/core";
import { usersSchema } from "@/schemas/users/users.schema";

const schema = normalizeSchema(usersSchema);

const users = [
  { id: "usr_1", name: "Ada Lovelace", email: "ada@example.test", status: "active" },
  { id: "usr_2", name: "Grace Hopper", email: "grace@example.test", status: "pending" }
];

export function UsersTable() {
  return <FluiKitTable schema={schema} data={users} />;
}

This example does not need FluiKitProvider because it uses no custom renderers, adapters, or handlers. Add one when the schema references registry keys.

Data resolution

Rows are resolved in this order:

1. data, when provided
2. response at schema.table.dataPath, when configured
3. response, when it is already an array
4. empty array

schema.table.totalPath reads the total count from response for server-mode pagination display.

Table modes

In static mode, TanStack Table performs filtering, sorting, and pagination client-side.

In server mode, FluiKitTable emits query state through onQueryChange and expects the host, provider, or parent FluiKit flow to return the matching rows.

Rendered controls

The toolbar appears when any of these are present:

• table export or column visibility controls
• search
• filters
• bulk actions
• create action

table.export defaults to enabled unless it is explicitly false. The default export controls are copy, CSV, XLS, and column visibility when column visibility is not disabled.

Row actions

The row action column can include:

• view action, when detail and view action are enabled
• edit action
• delete action
• custom row actions

When table.actionGrouping is true and there are more than three row actions, the table keeps up to two priority actions visible and moves the rest into an overflow menu.

Selection and bulk actions

Row selection is enabled when:

• table.rowSelection is true, or
• table.rowSelection is an object with enabled not set to false, or
• table.rowSelection is not configured and actions.bulk has at least one action

Bulk action execution can be controlled with executeBulkActions.

Theme slots

The table uses these theme slots:

• tableWrapper
• search
• filter
• table
• tableHeader
• tableBody
• tableRow
• tableCell
• emptyState
• loadingState
• actionButton