wenchblitz / shadcn-table

Shadcn table component with server-side sorting, filtering, and pagination.

Shadcn Table

This is a Shadcn table component with server-side sorting, filtering, and pagination. It is bootstrapped with create-t3-app.

Tech Stack

• Framework: Next.js
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Table package: TanStack/react-table
• Database: PlanetScale
• ORM: Drizzle ORM

Features

• Server-side pagination
• Server-side sorting
• Server-side filtering
• Dynamic debounced search based on the searchable columns provided
• Dynamic faceted-filtering based on the filterable columns provided

Running Locally

1. Clone the repository

   git clone https://github.com/sadmann7/shadcn-table-v2.git

2. Install dependencies using pnpm

   pnpm install

3. Copy the .env.example to .env and update the variables.

   cp .env.example .env

4. Start the development server

   pnpm run dev

5. Push the database schema

   pnpm run db:push

Codebase Overview

Watch the codebase overview video on YouTube.

Consider subscribing to Kavin's YouTube channel for more videos.

How do I deploy this?

Follow the deployment guides for Vercel, Netlify and Docker for more information.