SuperAPI AI 工具集

table-builder

数据与分析

查看项目

更新于 10-16 03:16

技能介绍

Table Builder 用于生成生产级数据表格,核心工作流包括:定义列配置(含类型)、选择服务端或客户端渲染模式、添加排序/筛选/分页/搜索、行操作(编辑、删除、查看)、空状态与错误视图、加载骨架屏与 suspense、移动端响应式(堆叠列或横向滚动)。

列配置基于 @tanstack/react-table 的 ColumnDef,可定义 accessorKey、header、cell 及操作列。React 实现使用 useReactTable 配合 getCoreRowModel、getPaginationRowModel、getSortedRowModel、getFilteredRowModel 与 flexRender,管理 sorting、columnFilters、pagination 状态。服务端模式通过 searchParams 读取 page、search 等参数,调用 API 获取数据与 totalPages。分页组件提供每页行数选择与上一页/下一页按钮。行操作使用 DropdownMenu 提供复制 ID、查看详情、编辑、删除。空状态与加载骨架屏分别提供无数据提示和占位。

最佳实践:复杂功能用 TanStack Table;大数据集用服务端分页;搜索输入防抖;排序/筛选持久化到 URL 参数;移动端横向滚动或卡片视图;注意键盘导航与 ARIA 无障碍。输出清单涵盖列定义、排序、筛选/搜索、分页控件、行操作菜单、空状态、加载骨架、移动端响应式、URL 状态持久化与无障碍属性。

限制:资料未提供安装命令、具体依赖版本、收费信息或平台支持范围,暂未提供。