前端UI组件【免费下载链接】table Headless UI for building powerful tables datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table项目地址https://gitcode.com/gh_mirrors/ta/table点击查看免费下载TanStack Table 是一款 Headless无头表格库它负责管理表格的状态与逻辑排序、过滤、分页、行选择等而标记markup与样式完全由你掌控。本文以当前仓库中 docs/framework/react/quick-start.md 为主线讲解如何在 React 应用中从零搭建一个可运行的数据表格并在此基础上按 v9 的「按需注册 Feature」模式添加排序能力。读完本文你将掌握tanstack/react-table的安装、tableFeatures特性注册机制、useTable表实例创建、table.FlexRender渲染管线以及如何用createTableHook沉淀可复用的应用级表格工厂。一、安装唯一必装的依赖在 React 项目中使用 TanStack Table只需要安装一个包npm install tanstack/react-table当前仓库中的 React 示例项目如 examples/react/basic-use-table/package.json还同时使用了tanstack/react-table-devtools表实例调试工具与tanstack/react-devtools并以 React 19 与 Vite 作为运行环境。如果你只想渲染一张基础表格tanstack/react-table一个包即可。二、你的第一张表格一个可直接粘贴运行的完整组件下面的组件是完整的。把它粘贴进任意 React 应用中即可看到一张可用的表格。它演示了 v9 中创建一个表格实例的全部关键步骤import { tableFeatures, useTable } from tanstack/react-table import type { ColumnDef } from tanstack/react-table // 1. 定义数据形状 type Person { firstName: string lastName: string age: number } // 2. 给数据一个稳定引用模块作用域、useState、useQuery 等均可 const data: ArrayPerson [ { firstName: tanner, lastName: linsley, age: 24 }, { firstName: tandy, lastName: miller, age: 40 }, { firstName: joe, lastName: dirte, age: 45 }, ] // 3. v9 新特性声明该表格使用的功能这里一个都不用 const features tableFeatures({}) // 4. 定义列 const columns: ArrayColumnDeftypeof features, Person [ { accessorKey: firstName, // accessorKey 简写 header: First Name, cell: (info) info.getValue(), }, { accessorFn: (row) row.lastName, // accessorFn 替代写法需配合自定义 id id: lastName, header: () spanLast Name/span, cell: (info) i{info.getValuestring()}/i, }, { accessorKey: age, header: () Age, }, ] export function PersonTable() { // 5. 创建表格实例 const table useTable({ key: person-table, // devtools 需要不使用 devtools 时可省略 features, columns, data, }) // 6. 用表格实例的 API 渲染标记 return ( table thead {table.getHeaderGroups().map((headerGroup) ( tr key{headerGroup.id} {headerGroup.headers.map((header) ( th key{header.id} {header.isPlaceholder ? null : ( table.FlexRender header{header} / )} /th ))} /tr ))} /thead tbody {table.getRowModel().rows.map((row) ( tr key{row.id} {row.getAllCells().map((cell) ( td key{cell.id} table.FlexRender cell{cell} / /td ))} /tr ))} /tbody /table ) }上述代码对应仓库中可运行的完整示例 examples/react/basic-use-table/src/main.tsx该示例还额外展示了tfoot页脚的渲染方式table.getFooterGroups()与table.FlexRender footer{header} /以及更完整的列定义。仓库中配套的端到端测试 examples/react/basic-use-table/tests/e2e/smoke.spec.ts 会启动示例服务器并断言表格成功渲染、无页面报错可作为本地验证的参考。需要留意的几个要点tableFeatures({})声明表格使用了哪些可选功能。只注册你真正需要的功能可以保持打包体积更小同时让 TypeScript 对表格实例给出精确的类型。在源码层面tableFeatures 是一个类型辅助函数它返回传入的 features 对象同时通过ValidateFeatureSlots对「特性模块」「行模型工厂如sortedRowModel、filteredRowModel」「函数注册表sortFns、filterFns、aggregationFns」以及tableMeta/columnMeta类型槽位做静态校验因此建议在组件外部以模块级常量方式静态声明。核心行模型始终自动包含。排序、过滤、分页等「功能行模型」则需要时以槽位slot形式注册到 features 对象上。table.FlexRender负责渲染列的header、cell与footer定义无论它们是普通值还是 React 组件。它由 packages/react-table/src/FlexRender.tsx 提供内部对 React 组件类组件、函数组件、memo/forwardRef等 exotic 组件执行flexRender(def, context)对普通值则直接返回同时它还会智能处理分组聚合aggregatedCell与占位单元格getIsPlaceholder场景。key选项仅在配合 TanStack Table Devtools 时必需。Devtools 通过key标识表格注册方式是在组件中调用useTanStackTableDevtools(table)来自tanstack/react-table-devtools详见 docs/devtools.md。若不用 devtools可省略key。三、useTable与 FlexRender 的底层机制表实例从何而来useTable 是 React 侧创建表格实例的入口。它内部调用tanstack/table-core的constructTable并自动注入coreReactivityFeature: reactReactivity()见 packages/react-table/src/useTable.ts把 React 响应式绑定接入核心表格。随后在useState初始化阶段一次性创建表实例与rootSource渲染期数据源每次渲染通过table_setOptions把最新选项合并进表实例syncExternalState: false不向响应式订阅者发布用useSelectorshallow比较订阅rootSource得到table.state在useIsomorphicLayoutEffect中提交渲染基线并发布受控外部状态最终通过useMemo返回{ ...table, options, state }这一结构对 React Compiler 友好源码注释明确说明这是为兼容 React Compiler 而做的取舍。useTable还支持可选的第二个参数——selectorconst table useTable( { features, columns, data }, (state) ({ pagination: state.pagination }), )传入 selector 后table.state只包含被选中的状态切片组件也只为这些切片重新渲染省略 selector 则订阅全部已注册的状态切片。配合table.Subscribe支持传入source原子或 selector可以在组件树更深层做精准订阅详见 docs/framework/react/guide/table-state.md。FlexRender 组件化封装除了独立的flexRender函数tanstack/react-table还导出了组件形态的FlexRender。在渲染列定义时优先使用组件形态table.FlexRender header{header} / table.FlexRender cell{cell} / table.FlexRender footer{footer} /它等价于手动调用flexRender(header.column.columnDef.header, header.getContext())等形式见 packages/react-table/src/FlexRender.tsx并且cell、header、footer三个 prop 只能传入其中一个。四、添加第一个功能排序Sortingv9 中所有功能都是**按需注册opt-in**的。要让列可排序需要在tableFeatures中注册rowSortingFeature与排序行模型然后为表头接入点击处理import { createSortedRowModel, rowSortingFeature, sortFns, tableFeatures, useTable, } from tanstack/react-table const features tableFeatures({ rowSortingFeature, // 启用排序 API 与状态 sortedRowModel: createSortedRowModel(), // 客户端排序 sortFns, }) export function PersonTable() { const table useTable({ key: person-table, features, columns, data, }) return ( table thead {table.getHeaderGroups().map((headerGroup) ( tr key{headerGroup.id} {headerGroup.headers.map((header) ( th key{header.id} {header.isPlaceholder ? null : ( div style{{ cursor: header.column.getCanSort() ? pointer : undefined, }} onClick{header.column.getToggleSortingHandler()} table.FlexRender header{header} / {{ asc: , desc: , }[header.column.getIsSorted() as string] ?? null} /div )} /th ))} /tr ))} /thead {/* tbody 与上文一致 */} /table ) }点击表头后排序会在「升序 → 降序 → 取消排序」之间循环。其余所有功能都遵循同一模式在tableFeatures中注册功能及其行模型工厂若有然后使用它给 table、column、row 增加的 API。关于sortFns的注册建议仓库中的排序指南 docs/framework/react/guide/sorting.md 指出整体展开内置注册表sortFns: { ...sortFns }虽然可用但会把所有内置排序函数打入产物。更推荐只注册实际用到的函数或在列上直接通过sortFn选项传入函数。列默认的sortFn: auto会根据列数据类型从注册表中解析出alphanumeric、text或datetime因此请注册你的列依赖的那些函数。对应的完整可运行示例见 examples/react/sorting/src/main.tsx其中还演示了自定义SortFn如按枚举顺序排序status列以及sortUndefined、sortDescFirst等按列排序选项。五、继续探索的路线图表格状态Table State。v9 中表格状态由 TanStack Store 原子atom支撑通常无需自行管理。可以设置initialState提供初始值然后调用table.setSorting(...)、table.nextPage()等功能 API。当应用需要拥有某段状态、或需要细粒度订阅时阅读 docs/framework/react/guide/table-state.md——它是理解其他一切指南的基础。该指南总结了 v9 的几类状态面table.baseAtoms内部可写原子、table.atoms按已注册状态切片暴露的只读派生原子、table.store由所有原子聚合的只读扁平 Store、以及table.stateReact 专用、由 selector 选出的状态。功能指南Feature Guides。每个功能都有独立指南例如 Column Filtering、Pagination、Row Selection、Column Visibility。可组合表格Composable Tables。当应用中的多张表格共享相同的功能、行模型与组件约定时用createTableHook一次性定义它们const features tableFeatures({ rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns, }) const { useAppTable, createAppColumnHelper } createTableHook({ features })其实现位于 packages/react-table/src/createTableHook.tsx。createTableHook是 TanStack Table 中与 TanStack Form 的createFormHook对应的概念它接收 features、默认表选项以及可选的tableComponents/cellComponents/headerComponents返回预绑定 features 的useAppTable与createAppColumnHelper并附带useTableContext、useCellContext、useHeaderContext三个上下文读取钩子以及AppTable/AppCell/AppHeader/AppFooter四个包装组件。其中的 wrapper 组件通过useMemo保持稳定引用再借助tableRef读取最新表实例从而避免受控输入如工具栏中的过滤框在每次状态更新后失焦。完整模式包括预绑定单元格与表头组件见 docs/framework/react/guide/composable-tables.md。示例Examples。浏览仓库中的可运行 React 示例从 examples/react/basic-use-table 到各类功能演示可以端到端看到每种功能的预期用法。各示例均包含package.json、vite.config.js与端到端测试可直接npm install npm run dev启动观察或用npm run test:e2e运行其 Playwright 冒烟测试。六、小结本文完整走通了 TanStack Table v9 在 React 中的起步链路安装 → 用tableFeatures声明功能 → 用useTable创建实例 → 用getHeaderGroups()/getRowModel()/FlexRender渲染标记 → 以「注册功能 绑定 API」的方式接入排序。核心心智模型是功能显式注册、行模型按需挂载、状态原子化订阅、标记完全归你。沿着 docs/framework/react/guide/table-state.md 深入状态管理再按需查阅各功能指南与示例即可构建从简单列表到复杂数据网格的任何 React 表格。赞分享前端UI组件【免费下载链接】table Headless UI for building powerful tables datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table项目地址https://gitcode.com/gh_mirrors/ta/table点击查看免费下载相关推荐TanStack Table v9 Preact 快速上手从安装到可排序表格的无头表格实战指南TanStack Table v9 Preact 快速上手从安装到可排序表格的无头表格实战指南 TanStack Table 是一款无头Headless表前端UI组件TanStack Table v9 Vue 快速上手从安装到可排序表格的 Headless 实践指南TanStack Table v9 Vue 快速上手从安装到可排序表格的 Headless 实践指南 TanStack Table 是一套 headless前端UI组件快速上手 tanstack/angular-table从安装到实现 Angular 表格排序功能快速上手 tanstack/angular table从安装到实现 Angular 表格排序功能 TanStack Table 是一款无头headless前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考