Data Table 01

About this block

Data Table 01 is a paginated, sortable, and searchable data table with two rendering modes: client-side (pass a data array) and server-side (pass a Supabase table name for automatic server-side pagination, sorting, and search). Built with TanStack Table and shadcn/ui Table components, it supports text, date, badge, tags, and status cell types configurable per column. In server-side mode, a Next.js Server Action handles all Supabase queries — no API route needed.

When to use it

• Admin panels and dashboards that need to display and navigate large datasets from a Supabase database
• SaaS back-offices where sorting and searching table data are core user workflows
• Internal tools where a production-ready data table saves days of TanStack Table configuration
• Any Next.js 15 project that needs server-side pagination without writing a custom data-fetching layer

Notes

In server-side mode, pass your Supabase table name and column definitions — the Server Action handles count queries, range pagination, and search filters automatically. For client-side mode, pass the full dataset as a prop and pagination happens in the browser.

Frequently asked questions

Do I need Supabase to use this block?

No, it supports a client-side mode where you pass a plain data array. Supabase is only required for the server-side pagination mode.

How does server-side pagination work?

Pass your Supabase table name and column definitions — a Next.js Server Action handles count queries, range pagination, and search filters automatically, no API route needed.

What column types does it support?

Text, date, badge, tags, and status cell types, configurable per column.