[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73943":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":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":36,"discoverSource":37},73943,"data-table-filters","openstatusHQ\u002Fdata-table-filters","openstatusHQ","Faceted filters, sorting & infinite scroll for React data tables - shadcn\u002Fui + TanStack Table","https:\u002F\u002Flogs.run",null,"TypeScript",2043,120,8,9,0,2,13,60.55,"MIT License",false,"main",true,[25,26,27,28,29,30,31,32],"cmdk","data-table","nextjs","nuqs","react","shadcn","tanstack-react-query","tanstack-table","2026-06-12 04:01:12","## About The Project\n\nA **Table Schema builder**, **BYOS (Bring Your Own Store)** state management, and a set of pre-built **components** for building powerful, filterable data-tables with React.\n\n![Data Table with Infinite Scroll](https:\u002F\u002Fdata-table.openstatus.dev\u002Fassets\u002Fdata-table-infinite.png)\n\nVisit [data-table.openstatus.dev](https:\u002F\u002Fdata-table.openstatus.dev) to learn more. Read the [Docs](https:\u002F\u002Fdata-table.openstatus.dev\u002Fdocs) for full documentation.\n\n## Install\n\nInstall blocks via the shadcn registry:\n\n```bash\nnpx shadcn@latest add https:\u002F\u002Fdata-table.openstatus.dev\u002Fr\u002Fdata-table.json\n```\n\n| Block                          | Install URL                               | What it adds                                                                                   |\n| ------------------------------ | ----------------------------------------- | ---------------------------------------------------------------------------------------------- |\n| `data-table`                   | `...\u002Fr\u002Fdata-table.json`                   | Core: table engine, store, 4 filter types, memory adapter                                      |\n| `data-table-filter-command`    | `...\u002Fr\u002Fdata-table-filter-command.json`    | Command palette with history + keyboard shortcuts                                              |\n| `data-table-cell`              | `...\u002Fr\u002Fdata-table-cell.json`              | 8 cell renderers (text, code, badge, boolean, number, status-code, level-indicator, timestamp) |\n| `data-table-sheet`             | `...\u002Fr\u002Fdata-table-sheet.json`             | Row detail side panel                                                                          |\n| `data-table-nuqs`              | `...\u002Fr\u002Fdata-table-nuqs.json`              | nuqs URL state adapter                                                                         |\n| `data-table-zustand`           | `...\u002Fr\u002Fdata-table-zustand.json`           | zustand state adapter                                                                          |\n| `data-table-schema`            | `...\u002Fr\u002Fdata-table-schema.json`            | Declarative schema system with `col.*` factories                                               |\n| `data-table-drizzle`           | `...\u002Fr\u002Fdata-table-drizzle.json`           | Drizzle ORM server-side helpers                                                                |\n| `data-table-query`             | `...\u002Fr\u002Fdata-table-query.json`             | React Query infinite query integration                                                         |\n| `data-table-filter-command-ai` | `...\u002Fr\u002Fdata-table-filter-command-ai.json` | AI-powered natural language → filter inference                                                 |\n| `data-table-mcp`               | `...\u002Fr\u002Fdata-table-mcp.json`               | MCP server endpoint for AI agents                                                              |\n\nAll URLs use base `https:\u002F\u002Fdata-table.openstatus.dev`.\n\n## Agent Skill\n\nInstall the agent skill to let Claude Code (or any compatible AI coding tool) set up data-table-filters in your project:\n\n```bash\nnpx skills add https:\u002F\u002Fgithub.com\u002Fopenstatushq\u002Fdata-table-filters --skill data-table-filters\n```\n\nThen just say \"add a filterable data table\" — the skill detects your stack, installs the right blocks, generates a schema, and wires everything up.\n\n## Table Schema\n\nDefine your entire table — columns, filters, display, sorting, row details — in one place with `createTableSchema` and `col.*` factories.\n\n```tsx\nimport {\n  col,\n  createTableSchema,\n  type InferTableType,\n} from \"@\u002Flib\u002Ftable-schema\";\n\nconst LEVELS = [\"error\", \"warn\", \"info\", \"debug\"] as const;\n\nexport const tableSchema = createTableSchema({\n  level: col.presets.logLevel(LEVELS),\n  date: col.presets.timestamp().label(\"Date\").size(200).sheet(),\n  latency: col.presets\n    .duration(\"ms\")\n    .label(\"Latency\")\n    .sortable()\n    .size(110)\n    .sheet(),\n  status: col.presets.httpStatus().label(\"Status\").size(60),\n  host: col.string().label(\"Host\").size(125).sheet(),\n});\n\nexport type ColumnSchema = InferTableType\u003Ctypeof tableSchema.definition>;\n```\n\n**Generators** produce everything the table components need from a single schema:\n\n```tsx\nconst columns = generateColumns\u003CColumnSchema>(tableSchema.definition);\nconst filterFields = generateFilterFields\u003CColumnSchema>(tableSchema.definition);\nconst sheetFields = generateSheetFields\u003CColumnSchema>(tableSchema.definition);\n```\n\n**Presets** cover common patterns: `logLevel`, `httpStatus`, `httpMethod`, `duration`, `timestamp`, `traceId`, `pathname`.\n\n## Examples\n\n- [`\u002Fdefault`](https:\u002F\u002Fdata-table.openstatus.dev\u002Fdefault) — client-side pagination (nuqs or zustand)\n- [`\u002Finfinite`](https:\u002F\u002Fdata-table.openstatus.dev\u002Finfinite) — infinite scroll with server-side filtering, live mode, row details\n- [`\u002Fdrizzle`](https:\u002F\u002Fdata-table.openstatus.dev\u002Fdrizzle) — Drizzle ORM + Supabase PostgreSQL with cursor-based pagination, faceted search, and live data via Vercel cron\n- [`\u002Flight`](https:\u002F\u002Fdata-table.openstatus.dev\u002Flight) — OpenStatus Light Viewer (UI for [`vercel-edge-ping`](https:\u002F\u002Fgithub.com\u002FOpenStatusHQ\u002Fvercel-edge-ping))\n- [`\u002Fbuilder`](https:\u002F\u002Fdata-table.openstatus.dev\u002Fbuilder) — interactive schema builder (paste JSON\u002FCSV, live table preview, export TS)\n\n## BYOS (Bring Your Own Store)\n\nA pluggable adapter pattern for filter state management. Three built-in adapters:\n\n- **nuqs** — URL-based state (shareable URLs, browser history)\n- **zustand** — client-side state (existing store integration)\n- **memory** — ephemeral in-memory state (embedded tables, builder)\n\nOr implement the `StoreAdapter` interface for a custom solution. See the [Docs](https:\u002F\u002Fdata-table.openstatus.dev\u002Fdocs) for details.\n\n## Built With\n\n- [nextjs](https:\u002F\u002Fnextjs.org)\n- [tanstack-query](https:\u002F\u002Ftanstack.com\u002Fquery\u002Flatest)\n- [tanstack-table](https:\u002F\u002Ftanstack.com\u002Ftable\u002Flatest)\n- [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com)\n- [cmdk](http:\u002F\u002Fcmdk.paco.me)\n- [nuqs](http:\u002F\u002Fnuqs.47ng.com)\n- [zustand](https:\u002F\u002Fzustand.docs.pmnd.rs)\n- [drizzle-orm](https:\u002F\u002Form.drizzle.team)\n- [zod](https:\u002F\u002Fzod.dev)\n- [superjson](https:\u002F\u002Fgithub.com\u002Fflightcontrolhq\u002Fsuperjson)\n- [date-fns](https:\u002F\u002Fdate-fns.org)\n- [recharts](https:\u002F\u002Frecharts.org)\n- [dnd-kit](https:\u002F\u002Fdndkit.com)\n\n## Getting Started\n\nNo environment variable required for the default examples. For the Drizzle example, set `DATABASE_URL` to a PostgreSQL connection string.\n\n```bash\npnpm install\npnpm dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) with your browser to see the result.\n\n## Want more?\n\nIf you are looking for specific use-cases or like what we are building and want to hire us, feel free write us to [hire@openstatus.dev](mailto:hire@openstatus.dev) or book a call via [cal.com](https:\u002F\u002Fcal.com\u002Fteam\u002Fopenstatus\u002F30min).\n\n## Credits\n\n- [sadmann17](https:\u002F\u002Fx.com\u002Fsadmann17) for the dope `\u003CSortable \u002F>` component around `@dnd-kit` (see [sortable.sadmn.com](https:\u002F\u002Fsortable.sadmn.com))\n- [shelwin\\_](https:\u002F\u002Fx.com\u002Fshelwin_) for the draggable chart inspiration (see [zoom-chart-demo.vercel.app](https:\u002F\u002Fzoom-chart-demo.vercel.app))\n","该项目提供了一个强大的React数据表格解决方案，支持分面过滤、排序及无限滚动。它基于shadcn\u002Fui和TanStack Table构建，使用TypeScript编写。核心功能包括一个表结构生成器、BYOS（自带存储）状态管理以及一系列预构建组件，用于创建高度可配置的数据表格。此外，项目还提供了多种过滤类型、记忆适配器、命令面板等功能，并且可以与Zustand、Drizzle ORM等库集成，增强了其灵活性和实用性。适用于需要复杂数据展示和操作的Web应用开发场景，如后台管理系统、数据分析平台等。","2026-06-11 03:48:01","high_star"]