Custom Provider

A custom provider lets application code own data loading and mutations while schemas stay declarative.

Provider type

import type { FluiKitDataProvider } from "@vibeflui/core";

export const adminProvider: FluiKitDataProvider = {
  list: async ({ query }) => {
    return fetchUsers(query);
  },
  detail: async ({ params }) => {
    return fetchUser(params.id);
  },
  create: async ({ values }) => {
    return createUser(values);
  },
  update: async ({ params, values }) => {
    return updateUser(params.id, values);
  },
  delete: async ({ params }) => {
    return deleteUser(params.id);
  },
  action: async ({ operation, params, values }) => {
    return runUserAction(operation, params, values);
  }
};

Provider registration

TSX

import { FluiKitProvider } from "@vibeflui/core";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <FluiKitProvider providers={{ admin: adminProvider }}>
      {children}
    </FluiKitProvider>
  );
}

Schema selection

export const usersSchema = {
  resource: "users",
  provider: {
    type: "custom",
    name: "admin"
  },
  table: {
    mode: "server",
    dataPath: "data",
    totalPath: "meta.total",
    columns: ["name", "email", "status"]
  }
} as const;

Context fields

Provider methods receive:

schema
action
operation
row
values
query
endpoint
fetcher
identityValue
params
permissionContext

Response shape

Providers may return any shape, but table rendering and feedback need predictable data.

return {
  status: true,
  data: rows,
  meta: {
    total
  }
};

Common mistakes

Pass provider functions to FluiKitProvider, not inside the schema object.
Use provider.name when more than one provider exists.
Pair nested row responses with a matching table.dataPath.