VVibeFlui

Server Mode

Server mode sends query state to the host app, provider, or endpoint so the backend can search, filter, sort, and paginate.

Automatic list loading

FluiKit automatically loads list data when:

  • data is not provided.
  • response is not provided.
  • table.enabled is true or dashboard.enabled is true.

The list operation receives the current table query.

TS
export const usersSchema = {
  resource: "users",
  endpoint: {
    list: { url: "/api/users", method: "GET" }
  },
  table: {
    mode: "server",
    dataPath: "data",
    totalPath: "meta.total",
    search: {
      enabled: true,
      param: "q"
    },
    pagination: {
      enabled: true,
      pageParam: "page",
      pageSizeParam: "limit"
    },
    columns: ["name", "email", "status"]
  }
} as const;

Manual loading

If the host app passes data or response, FluiKit does not run automatic list loading. Use onTableQueryChange to fetch externally.

TSX
<FluiKit
  schema={usersSchema}
  response={usersResponse}
  loading={loading}
  error={error}
  onTableQueryChange={(query) => setTableQuery(query)}
/>

Expected response

Use table.dataPath and table.totalPath when rows and totals are nested.

JSON
{
  "data": [
    { "id": 1, "name": "Ada Lovelace", "email": "ada@example.test" }
  ],
  "meta": {
    "total": 42
  }
}

Refresh after mutations

Successful create, update, delete, row action, bulk action, and toolbar action flows can trigger reloadList(). Row, bulk, and toolbar actions can disable this with refreshOnSuccess: false.