data-table-filters
用于React的声明式、可过滤数据表格构建工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：data-table-filters。 它的用途是：用于React的声明式、可过滤数据表格构建工具 完整的 Skill 内容见：https://321skill.com/skills/data-table-filters/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“在我的Next.js项目中，添加一个可以按状态、时间过滤，并且能无限滚动的日志查看表格。” AI Skill 会分析你的项目结构，通过 shadcn 安装 `data-table`、`data-table-query`（无限滚动）等必要的模块，并生成一个包含 `level`（日志等级）、`timestamp` 等列的定义模式（schema）文件，帮你快速搭建出功能完整的表格。
介绍
data-table-filters 是一个专为 React 应用设计的声明式数据表格构建工具。它解决了开发者需要手动处理表格状态管理、过滤逻辑、排序和分页等复杂交互的痛点，通过一套统一的 API 和预置组件，让构建功能强大的数据表格变得简单高效。
该工具的核心是“表模式（Table Schema）”构建器，允许开发者在一个地方集中定义表格的所有行为，包括列定义、过滤器类型、排序规则和行详情面板。配合“自带状态管理（BYOS）”的理念，它可以无缝集成到你现有的 Zustand、React Query 或 URL 状态管理方案中，提供了极大的灵活性。
它非常适合需要构建复杂数据展示界面的前端开发者、全栈工程师以及项目团队。无论是构建内部管理后台、数据分析仪表盘，还是需要高级过滤和搜索功能的用户界面，都可以利用它来快速搭建。其模块化设计（通过 shadcn 块安装）也使得开发者可以按需引入功能，保持项目轻量。
与许多需要绑定特定 UI 库或状态管理方案的数据表格组件不同，data-table-filters 的核心优势在于其声明式模式和强大的解耦能力。它不强制你使用特定的 UI 组件，而是提供构建逻辑和基础组件，让你可以自由搭配喜欢的 UI 库（如 shadcn/ui）。同时，其丰富的适配器（如 nuqs 用于 URL 状态、Zustand、React Query、Drizzle ORM）使其能轻松融入现代 React 技术栈，而同类工具往往在这些集成上需要更多定制工作。
核心特点
核心区别在于其“声明式表模式”与“自带状态管理（BYOS）”的架构设计。它通过 `createTableSchema` 和 `col.*` 工厂函数在单一位置定义整个表格的行为逻辑，并与 UI 和状态层完全解耦，允许开发者自由选择 Zustand、React Query 或 URL 同步等任何状态管理方案，而非强制绑定。
注意事项
主要面向 React 技术栈，不适用于 Vue、Svelte 等其他前端框架；对于极其简单、无需过滤或交互的静态表格，使用本工具可能显得过于重型。
常见问题
data-table-filters 和 Ant Design Table 有什么区别？
Ant Design Table 是完整的 UI 组件库一部分，样式和交互绑定较深。data-table-filters 更专注于提供表格的过滤、排序等核心逻辑构建器，UI 层可自由搭配（如 shadcn/ui），且状态管理方案可自选，更灵活。
需要安装所有模块吗？
不需要。它是模块化的，你可以通过 shadcn 只安装核心的 `data-table` 模块，然后按需添加过滤命令、单元格渲染器、状态适配器等特定功能块。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/data-table-filters/raw/index.md 读取 data-table-filters 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/data-table-filters/raw/index.md（查看排版版本）