BlocksDashboardData Table 01

Data Table 01

Prosupabase

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.