tablecn

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: PlanetScale
• ORM: Drizzle ORM
• Validation: Zod

Features

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

Running Locally

Quick Setup (with docker)

1. Clone the repository

   git clone https://github.com/sadmann7/tablecn
   cd tablecn
   

2. Copy the environment variables

   cp .env.example .env
   

3. Run the setup

   pnpm ollie
   

   This will install dependencies, start the Docker PostgreSQL instance, set up the database schema, and seed it with sample data.

Manual Setup

1. Clone the repository

   git clone https://github.com/sadmann7/tablecn
   cd tablecn
   

2. Install dependencies

   pnpm install
   

3. Set up environment variables

   cp .env.example .env
   

   Update the .env file with your database credentials.

4. Choose your database approach:

   Option A: Use Docker PostgreSQL

   # Start PostgreSQL container
   pnpm db:start
   
   # Set up database schema and seed data
   pnpm db:setup
   
   # Start development server
   pnpm dev
   

   Option B: Use existing PostgreSQL database

   # Update .env with your database URL
   # Then set up database schema and seed data
   pnpm db:setup
   
   # Start development server
   pnpm 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.