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

•

[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

Clone the repository

bash

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

Install dependencies using pnpm

bash

1pnpm install

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

bash

1cp .env.example .env

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

bash

1docker compose up

Push the database schema

bash

1pnpm run db:push

Seed the database

bash

1pnpm run db:seed

Start the development server

bash

1pnpm run dev

How do I deploy this?

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

Credits

•

shadcn/ui/examples/tasks) - For the initial implementation of the data table.