Supabase · Data Table

React Data Table: Supabase-style

Part of Better Design's React component library. The dark, green-accented data table for DB / dev-platform admins: built on TanStack Table v8, ships as a shadcn-compatible registry item.

Install

npx shadcn@latest add https://better-design.com/registry/supabase/data-table.json

Lands in components/ui/data-table.tsx. Fully editable source, no SDK lock-in.

Live preview

Open the full Supabase showcase

Why this data table

•TanStack Table v8 engine: sorting, filtering, pagination, column visibility
•Dark surface, Supabase green primary: DB / dev-platform aesthetic
•Pairs with Supabase-style Sidebar + Command Palette for consistent platform admin
•Drops into any shadcn/ui project unchanged: `npx shadcn@latest add`

Usage

import { DataTable } from "@/components/ui/data-table";
import { columns } from "./columns";

export function RowsTable({ rows }) {
  return <DataTable columns={columns} data={rows} />;
}

FAQ

Best use case?

DB management UIs, dev-platform admins, any product where Supabase-feel signals technical / infrastructural focus.

Is it free?

Yes. MIT-licensed shadcn-compatible registry item.

Pairs with which Sidebar?

Supabase-style Sidebar: same DS, same surface treatment. Or Linear/Vercel if you want a different feel for the chrome.

Related component pages

React Data Table (all variants)

/components/data-table

Linear-style Data Table

/components/linear-data-table

Stripe-style Data Table

/components/stripe-data-table