Integration with Supabase

[Kertsu]

Does anyone know of a library that integrates this with Supabase, or any implementation I could refer to for integrating it into my project?
I'm using the table from DiceUI in my Vite + React 19 project but I'm not using SSR.

Any form of help would be greatly appreciated. Thank you so much! @sadmann7

[Ultronen]

You can use Supabase as the data source without SSR or Drizzle. Keep the table UI/hooks, and supply the rows from supabase-js (optionally through React Query).

The important choice is where pagination happens:

• Client pagination: fetch the complete bounded result set, then let the table sort/filter/page it locally. Be aware that Supabase has a default response row limit; one fetch is not automatically the entire database.
• Remote pagination: fetch one page and the filtered total count from Supabase; sorting/filtering must also happen in that query. Don't apply client pagination again to those page rows.

A minimal remote-page fetch function is:

async function fetchItems(pageIndex: number, pageSize: number) {
  const from = pageIndex * pageSize;
  const { data, error, count } = await supabase
    .from("items")
    .select("id,name", { count: "exact" })
    .order("id", { ascending: true })
    .range(from, from + pageSize - 1);
  if (error) throw error;
  return { rows: data ?? [], pageCount: Math.ceil((count ?? 0) / pageSize) };
}

Replace items and the selected fields with your schema. range has an inclusive end index; select documents count and result limits. Add the same filters before pagination/counting, and keep the order deterministic.

In the current repository hook, mode: "server" means manual/remote data operations, even if your React app has no SSR; it takes data and pageCount. mode: "client" performs local operations. Older copied DiceUI hooks can have different options, so match the hook you've installed. If it uses nuqs, also install the adapter appropriate for your Vite router.

For React Query, put page, size, sorting, and filters in the query key, then feed the returned rows/count to the table. Use your browser-safe publishable/anon key with RLS configured; don't put a service-role key in the Vite bundle.