Shadcn Table

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

Documentation

See the documentation to get started.

Tech Stack

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

Features

• Server-side pagination, sorting, and filtering
• Customizable columns
• Auto generated filters from column definitions
• Dynamic Data-Table-Toolbar with search, filters, and actions
• Notion/Airtable like advanced filtering
• Linear like filter menu for command palette filtering
• Action bar on row selection

Running Locally

1. Clone the repository

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

2. Install dependencies using pnpm

   pnpm install

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

   cp .env.example .env

4. (Optional) Run database using docker-compose.yml file

   docker compose up

5. Push the database schema

   pnpm run db:push

6. Seed the database

   pnpm run db:seed

7. Start the development server

   pnpm run dev

How do I deploy this?

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

Credits

• shadcn/ui - For the initial implementation of the data table.