sadmann7/tablecn

sadmann7/tablecn has 6,377 GitHub stars and 563 forks. GitHot measured +2 stars in 24 hours and +11 in 7 days. Last checked 2026-11-05 20:09 UTC. Last push 2026-11-02.

この数値の測り方

shadcn/ui で構築したデータテーブルおよびデータグリッドのコンポーネントで、並べ替え、フィルタリング、ページネーション、無限スクロール、リアルタイム共同作業に対応しています。

6,377 スター 563 forks +2 24時間

できること

Server-side pagination, sorting, and filtering
Customizable columns
Auto generated filters from column definitions
Notion/Airtable like advanced filtering

計測したスター増加

24時間: +2
7日間: +11
15日間: 更新が遅れています
1か月: 更新が遅れています

期間ごとの純増数です。期間は重複しており、日別の値ではありません。未計測の値は空欄です。スター数は注目度の指標であり、品質の保証ではありません。

README.md

オリジナル

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: PartyServer on Cloudflare Durable Objects

Features

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

Running Locally

Quick Setup (with Docker)

Clone the repository

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

Copy the environment variables
```
cp .env.example .env
```
Run the setup
```
pnpm ollie
```
This installs dependencies, starts the Docker PostgreSQL instance, pushes the schema, and seeds sample data.

Manual Setup

Clone the repository

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

Install dependencies
```
pnpm install
```
Set up environment variables
```
cp .env.example .env
```
Update .env with your database credentials.

Start the database and dev server

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 the Next.js dev server and the PartyServer worker (via wrangler dev) concurrently. Each room keeps its rows in its Durable Object's storage and seeds them the first time it's opened, so no database is needed.

Rooms are temporary: each one resets to fresh seed rows 10 minutes after its last user leaves. When two people edit the same cell at once, the last write wins.

Deployment

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

The multiplayer demo runs on PartyServer as a Cloudflare Worker with Durable Objects, deployed separately to your Cloudflare account:

pnpm deploy:multiplayer

Set NEXT_PUBLIC_PARTYKIT_HOST in your deployment environment variables to the worker's host (for example tablecn.<your-subdomain>.workers.dev) after deploying.

Credits

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