[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71376":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},71376,"tablecn","sadmann7\u002Ftablecn","sadmann7","Shadcn table with server-side sorting, filtering, and pagination.","https:\u002F\u002Ftablecn.com",null,"TypeScript",6140,547,22,30,0,4,10,36,12,80.82,"MIT License",false,"main",true,[27,28,29,30,31,32],"drizzle-orm","nextjs","open-source","shadcn-ui","table","tanstack-table","2026-06-12 04:01:00","# [tablecn](https:\u002F\u002Ftablecn.com)\n\nThis is a shadcn table component with server-side sorting, filtering, and pagination. It is bootstrapped with `create-t3-app`.\n\n[![tablecn](.\u002Fpublic\u002Fimages\u002Fscreenshot.png)](https:\u002F\u002Ftablecn.com)\n\n[![Vercel OSS Program](https:\u002F\u002Fvercel.com\u002Foss\u002Fprogram-badge.svg)](https:\u002F\u002Fvercel.com\u002Foss)\n\n## Documentation\n\nSee the [documentation](https:\u002F\u002Fdiceui.com\u002Fdocs\u002Fcomponents\u002Fdata-table) to get started.\n\n## Tech Stack\n\n- **Framework:** [Next.js](https:\u002F\u002Fnextjs.org)\n- **Styling:** [Tailwind CSS](https:\u002F\u002Ftailwindcss.com)\n- **UI Components:** [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com)\n- **Table package:** [TanStack\u002Freact-table](https:\u002F\u002Ftanstack.com\u002Ftable\u002Flatest)\n- **Database:** [PlanetScale](https:\u002F\u002Fplanetscale.com)\n- **ORM:** [Drizzle ORM](https:\u002F\u002Form.drizzle.team)\n- **Validation:** [Zod](https:\u002F\u002Fzod.dev)\n\n## Features\n\n- [x] Server-side pagination, sorting, and filtering\n- [x] Customizable columns\n- [x] Auto generated filters from column definitions\n- [x] Dynamic `Data-Table-Toolbar` with search, filters, and actions\n- [x] `Notion\u002FAirtable` like advanced filtering\n- [x] `Linear` like filter menu for command palette filtering\n- [x] Action bar on row selection\n\n## Running Locally\n\n### Quick Setup (with docker)\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002Fsadmann7\u002Ftablecn\n   cd tablecn\n   ```\n\n2. **Copy the environment variables**\n\n   ```bash\n   cp .env.example .env\n   ```\n\n3. **Run the setup**\n\n   ```bash\n   pnpm ollie\n   ```\n\n   This will install dependencies, start the Docker PostgreSQL instance, set up the database schema, and seed it with sample data.\n\n### Manual Setup\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002Fsadmann7\u002Ftablecn\n   cd tablecn\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   pnpm install\n   ```\n\n3. **Set up environment variables**\n\n   ```bash\n   cp .env.example .env\n   ```\n\n   Update the `.env` file with your database credentials.\n\n4. **Choose your database approach:**\n\n   **Option A: Use Docker PostgreSQL**\n\n   ```bash\n   # Start PostgreSQL container\n   pnpm db:start\n   \n   # Set up database schema and seed data\n   pnpm db:setup\n   \n   # Start development server\n   pnpm dev\n   ```\n\n   **Option B: Use existing PostgreSQL database**\n\n   ```bash\n   # Update .env with your database URL\n   # Then set up database schema and seed data\n   pnpm db:setup\n   \n   # Start development server\n   pnpm dev\n   ```\n\n## How do I deploy this?\n\nFollow the deployment guides for [Vercel](https:\u002F\u002Fcreate.t3.gg\u002Fen\u002Fdeployment\u002Fvercel), [Netlify](https:\u002F\u002Fcreate.t3.gg\u002Fen\u002Fdeployment\u002Fnetlify) and [Docker](https:\u002F\u002Fcreate.t3.gg\u002Fen\u002Fdeployment\u002Fdocker) for more information.\n\n## Credits\n\n- [shadcn\u002Fui](https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui\u002Ftree\u002Fmain\u002Fapps\u002Fv4\u002Fapp\u002F(app)\u002Fexamples\u002Ftasks) - For the initial implementation of the data table.\n","tablecn 是一个基于 shadcn 的表格组件，支持服务器端排序、过滤和分页。项目使用 TypeScript 开发，集成了 Next.js 框架、Tailwind CSS 样式、shadcn\u002Fui 组件库以及 TanStack\u002Freact-table 表格包等技术栈，能够实现自定义列、动态生成的过滤器、高级过滤功能及行选择操作栏等功能。适合需要在 Web 应用中展示复杂数据表，并且对数据进行高效管理和操作的场景。通过 PlanetScale 数据库和 Drizzle ORM 进行数据处理，确保了数据操作的安全性和灵活性。",2,"2026-06-11 03:37:25","high_star"]