SuperAPI AI 工具集

niko-table-best-practices

前端与建站

查看项目

更新于 10-16 01:48

技能介绍

Niko Table 用于搭建和配置数据表格及其可编辑 Data Grid,基于 shadcn 与 TanStack Table。用途是帮助判断当前需求:新建表格、添加筛选/拖拽/分组、修正导入、接入服务端、URL 状态、行展开、树形表、行选择或可编辑网格,并给出结构与导入方式。

主要能力:表格结构为 DataTableRoot → 可选 ToolbarSection → DataTable(Header + Body,含 Skeleton、EmptyBody)→ Pagination;筛选支持工具栏全局搜索、分面筛选、规则式高级筛选、滑块/日期筛选,以及列头分面/滑块/日期菜单;支持行与列拖拽、分组与聚合、行选择、展开、树形数据、虚拟化大列表(1 万行以上用 DataTableVirtualizedBody)和侧边详情面板;服务端模式通过 manualPagination/manualSorting/manualFiltering、pageCount 与 totalCount 配合,并可基于可序列化查询契约接入任意后端;还支持用 nuqs 将分页、排序、筛选与搜索同步到 URL。

使用方式:只使用直接文件路径导入,禁用 barrel/index 再导出;核心安装 @niko-table/data-table,自管 TanStack 实例时安装 @niko-table/data-table-core;在 components.json 中配置 registries["@niko-table"] 为 https://niko-table.com/r/{name}.json;在 Next.js App Router 等环境渲染相关组件的文件顶部加 "use client"。DataTableRoot 大多配置可自动探测,仅在覆盖默认或服务端/手动模式时显式传入 config 与 state。

限制与注意:行拖拽必须提供稳定 getRowId(如 (row) => row.id),且不可与排序或筛选同时启用;分组不可与行拖拽或 getSubRows 树形模式混用;DataTableRowDndProvider 需放在 DataTable 之外;行拖拽需使用 DataTableDndBody 与拖拽手柄。使用 nuqs 时需在应用根包裹 NuqsAdapter;使用高级筛选菜单时需在 URL 形状与 TanStack ColumnFiltersState 间转换。若项目使用其他表格库(如 AG Grid、MUI Data Grid 或未接入本注册表的 TanStack Table),不建议强行改用 Niko Table。完整文档与示例暂未在资料中提供,需参考 https://niko-table.com。