tablecn

Data table and data grid components built with shadcn/ui, featuring sorting, filtering, pagination, infinite scrolling, and real-time collaboration.

Documentation

See the documentation to get started.

Tech Stack

• Framework: Next.js
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Table: TanStack Table
• Reactive store: TanStack DB
• Database: PostgreSQL
• ORM: Drizzle ORM
• Validation: Zod
• Multiplayer: PartyKit

Features

• [x] Server-side pagination, sorting, and filtering
• [x] Customizable columns
• [x] Auto generated filters from column definitions
• [x] Notion/Airtable like advanced filtering
• [x] Linear like filter menu for command palette filtering
• [x] Action bar on row selection
• [x] Infinite scrolling with virtualization
• [x] Real-time collaboration

Running Locally

Quick Setup (with Docker)

1. Clone the repository

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

1. Copy the environment variables

bash cp .env.example .env

1. Run the setup

bash pnpm ollie

This installs dependencies, starts the Docker PostgreSQL instance, pushes the schema, and seeds sample data.

Manual Setup

1. Clone the repository

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

1. Install dependencies

bash pnpm install

1. Set up environment variables

bash cp .env.example .env

Update .env with your database credentials.

1. Start the database and dev server

bash pnpm db:start # start the PostgreSQL container pnpm db:setup # push schema and seed data pnpm dev # start the Next.js dev server

Multiplayer

To run the multiplayer demo locally:

pnpm dev:multiplayer

This starts both the Next.js and PartyKit dev servers concurrently.

Deployment

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

The multiplayer demo uses PartyKit as a separate deployment:

pnpm deploy:multiplayer

Set NEXT_PUBLIC_PARTYKIT_HOST in your deployment environment variables after deploying.

Credits

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