Next.js Data Tables with Sorting, Filtering & Pagination – Shadcn View Table

Shadcn View Table is a table component for React, featuring server-side sorting, pagination, filtering, and customizable views.

It uses Next.js for server-side rendering and TailwindCSS for styling. The integration with Tanstack/react-table ensures robust table functionalities, while Drizzle ORM and Supabase handle the backend operations. Zod is used for data integrity and consistency.

Features List

• Handles server-side sorting for backend-backed datasets.
• Adds pagination for large task and record lists.
• Filters table rows through server-controlled query state.
• Supports custom views for repeatable table layouts.
• Uses TanStack Table for core table behavior.
• Connects database logic through Drizzle ORM and Supabase.
• Validates data structures through Zod.
• Styles the interface with Tailwind CSS and shadcn/ui components.

Use Cases

• Build task dashboards with sortable backend data.
• Create admin tables for user and order management.
• Add paginated views to Supabase-backed apps.
• Prototype shadcn/ui table layouts for internal tools.

How To Use It

Shadcn View Table is a full Next.js project, not a drop-in npm table package. Clone the repository when you want to run the demo locally or study the table architecture.

# Clone the project source.
git clone https://github.com/nainglinnkhant/shadcn-view-table
# Move into the project directory.
cd shadcn-view-table

Install the dependencies with pnpm.

# Install all project dependencies.
pnpm install

Copy the sample environment file and add your own values.

# Create a local environment file.
cp .env.example .env

Push the database schema before starting the local app.

# Apply the Drizzle schema to the configured database.
pnpm db:push

Start the development server.

# Run the Next.js dev server.
pnpm dev

Alternatives

• Drag-and-Drop Form and Table Builder with shadcn/ui – TANCN
• Create Feature-Rich Data Tables with shadcn-table-view
• Server-Side Data Table Component for shadcn/ui & Next.js – Tablecn
• Enterprise-Grade Data Table Component with TanStack and Shadcn/ui

FAQs

Q: Is Shadcn View Table an npm component package?
A: No. It is a full Next.js project and reference implementation. Clone the repo when you want to run or adapt the table setup.

Q: What backend does it use?
A: The project uses Supabase with Drizzle ORM. Zod handles validation for data consistency.

Q: Can I use it in an existing shadcn/ui project?
A: Yes, but you need to adapt the project files manually. Review the table components, database schema, and validation logic before copying code into an existing app.

Q: Why does the local setup fail after installing dependencies?
A: Check the .env file first. The database commands need valid Supabase and database values before pnpm db:push can complete.

Q: Does it support server-side sorting and pagination?
A: Yes. The project focuses on server-side sorting, pagination, filtering, and custom table views.