Shadcn Table

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

See the documentation to get started.

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

• 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

1. Clone the repository

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

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.

1. Clone the repository

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

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

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

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