Data Binding

Tables can receive rows from data, response, or provider-backed list operations.

Direct data

<FluiKit schema={usersSchema} data={users} />

When data is provided, VibeFlui uses it directly.

Direct response

<FluiKit schema={usersSchema} response={response} />

Use table.dataPath to resolve rows from a nested response.

export const usersSchema = {
  resource: "users",
  table: {
    dataPath: "data.items",
    totalPath: "data.total",
    columns: ["name", "email", "status"]
  }
} as const;

{
  "data": {
    "items": [
      { "id": "usr_001", "name": "Ada", "email": "ada@example.com" }
    ],
    "total": 1
  }
}

Provider-backed list

When neither data nor response is provided and the table is enabled, VibeFlui can load rows by executing the list operation through the configured provider, handler, or endpoint.

export const usersSchema = {
  resource: "users",
  mode: "server",
  endpoint: {
    list: "/api/users"
  },
  table: {
    mode: "server",
    dataPath: "data.items",
    totalPath: "data.total"
  }
} as const;

Total count

table.totalPath is used for server pagination and footer display.

If totalPath is missing, VibeFlui uses the resolved row count.

Row identity

Rows use schema.identity.key as the row id. If the identity value is missing, the row index is used.

identity: {
  key: "user.id",
  param: "userId"
}