前端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点击查看免费下载getSortedRowModel()是 TanStack Table v9 在 React 适配层react-table中为兼容 v8 API 而保留的废弃桩函数stub function。它的核心职责并非自行实现排序而是作为一个标记marker传递给useLegacyTable告知兼容层需要启用排序行模型真正的排序逻辑由 v9 的createSortedRowModel()在底层完成。本文基于 getSortedRowModel 参考文档 及其对应源码 packages/react-table/src/useLegacyTable.ts完整说明该函数的签名、工作原理、底层排序实现细节并给出从 v8 写法平滑迁移到 v9useTable新 API 的实战方案帮助仍在使用useLegacyTable的项目理解其行为并规划升级路径。一、函数签名与返回值getSortedRowModel()是一个泛型工厂函数位于 useLegacyTable.ts 第 67 行function getSortedRowModelTData(): RowModelFactoryTData;类型参数TDataTData extends RowData表数据的行类型约束。RowData是 TanStack Table 的类型基础约束任何业务行数据类型如Person、User接口都必须满足该约束。返回值返回类型为RowModelFactoryTData即一个接收表格实例、返回行模型获取函数的工厂类型。在LegacyFeatures特性集下其完整类型定义为type RowModelFactoryTData ( table: TableLegacyFeatures, TData, ) () RowModelLegacyFeatures, TData;也就是说一个合法的RowModelFactory接受TableLegacyFeatures, TData返回一个闭包函数调用该闭包才得到实际的RowModelLegacyFeatures, TData包含rows、flatRows、rowsById三要素的行模型对象。实际返回值一个空操作闭包从源码看该函数并未真正构造行模型而是返回了一个不做任何事的闭包再通过类型断言伪装成RowModelFactoryexport function getSortedRowModel TData extends RowData, (): RowModelFactoryTData { return (() () {}) as unknown as RowModelFactoryTData }这正是标记函数设计的关键调用它不产生任何排序副作用仅在 v8 迁移代码中占据getSortedRowModel选项的位置由useLegacyTable检测其存在性来决定是否启用sortedRowModel特性槽位。二、标记机制useLegacyTable 如何消费该函数getSortedRowModel作为 v8 风格的选项出现在LegacyTableOptions中对应接口属性定义于LegacyRowModelOptions/** * Returns the sorted row model for the table. * deprecated Use the sortedRowModel/sortFns slots on the features option * with createSortedRowModel() instead. */ getSortedRowModel?: RowModelFactoryTData在 useLegacyTable 的实现 中该选项被从options中解构出来并在初始化特性集时被检测const { getSortedRowModel, // ... 其他 legacy row model 选项 ...restOptions } options // 首次渲染时构建特性集 if (getSortedRowModel) { legacyFeatures.sortedRowModel createSortedRowModel() }关键行为可以归纳为三点存在性即启用只要传入了getSortedRowModel: getSortedRowModel()useLegacyTable就会把 v9 真实的createSortedRowModel()实例挂到legacyFeatures.sortedRowModel槽位上不传则排序行模型不被启用。仅首次渲染生效features通过useState(() {...})惰性初始化setup-only——后续渲染传入不同的选项也不会改变已注册的特性。这意味着 legacy 行模型选项应视为表格生命周期内的静态配置。内部包装 v9 APIuseLegacyTable最终把组装好的features连同其余选项一起转交给 v9 的useTable并全量订阅状态(state) state再对外暴露 v8 风格的getState()/setState()方法使旧代码无需大幅改动即可运行。三、底层真相真正干活的 createSortedRowModel()getSortedRowModel标记一旦生效真正执行排序的是createSortedRowModel()位于packages/table-core核心包。理解它才能明白 legacy 路径下排序的完整语义。3.1 工厂与记忆化createSortedRowModel()返回一个接收table的函数内部通过tableMemo包裹形成记忆化的行模型管线节点return tableMemo({ feature: rowSortingFeature, table, fnName: table.getSortedRowModel, memoDeps: () [ table.atoms.sorting?.get(), table.getPreSortedRowModel(), ], fn: () _createSortedRowModel(table), onAfterUpdate: skipFirstRun(() table_autoResetPageIndex(table)), })记忆化依赖为sorting状态原子与排序前行模型即过滤后的行模型getPreSortedRowModel()排序结果变化后会自动执行table_autoResetPageIndex将分页索引重置避免排序后停留在越界页码。3.2 排序主流程_createSortedRowModel的核心步骤空态短路若前置行模型无行或sorting状态为空数组直接原样返回preSortedRowModel过滤无效排序项剔除指向不存在列、或column_getCanSort判定为不可排序的列剩下才是availableSorting若过滤后为空同样直接返回前置行模型解析排序配置对每个有效排序项解析出desc降序、sortUndefined未定义值策略取值false | -1 | 1 | first | last、invertSorting反转排序结果以及由column_getSortFn(column)解析出的排序函数多列比较compareRows按resolvedSorting顺序逐列比较先处理undefined值的定位策略再调用列的sortFn得到排序整数若该列排序相等则进入下一列最终平局时按rowA.index - rowB.index保证稳定性降序与反转当sortInt ! 0时desc和invertSorting都会对结果取反sortInt * -1两者独立叠加子行递归排序sortData递归处理subRows仅在子行顺序变化时才克隆行对象Object.create(Object.getPrototypeOf(row))copyInstancePropertiesWithoutMemos避免污染源行模型并保留原型链上的方法如getValue()产出结果最终返回{ rows, flatRows, rowsById }其中flatRows保证父行排在自身子行之前。3.3 排序函数的解析规则排序函数解析由 rowSortingFeature.utils.ts 的 column_getSortFn 完成优先级为columnDef.sortFn为函数时直接使用columnDef.sortFn auto时通过column_getAutoSortFn从过滤后行模型中抽样前 10 行自动推断Date值用datetime含字母数字混合的字符串用alphanumeric纯字符串用text未知类型回退basiccolumnDef.sortFn为字符串时从_rowModelFns.sortFns注册表中查找未注册时在开发环境输出console.warn并回退到sortFn_basic。在 legacy 模式下useLegacyTable会将内置sortFns与用户通过sortFns选项传入的扩展函数合并进特性集注册表sortFns: { ...sortFns, ...(options.sortFns as SortFns) }因此 v8 中声明合并declaration merging自定义排序函数名的用法仍然可用。四、实战用法v8 风格下的完整示例以下示例来自仓库测试 packages/react-table/tests/useLegacyTable.test.tsx可直接验证getSortedRowModel的实际行为import { getCoreRowModel, getSortedRowModel, legacyCreateColumnHelper, useLegacyTable, } from ../src/useLegacyTable type Person { firstName: string age: number } const columnHelper legacyCreateColumnHelperPerson() const columns columnHelper.columns([ columnHelper.accessor(firstName, { filterFn: includesString }), columnHelper.accessor(age, { aggregationFn: mean, sortFn: basic }), ]) const data: ReadonlyArrayPerson [ { firstName: Tanner, age: 20 }, { firstName: Kevin, age: 40 }, ] // 在测试中 useLegacyTable({ columns, data, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), initialState: { sorting: [{ id: age, desc: true }] }, }) // 期望排序结果age 列降序 → [40, 20]要点说明getCoreRowModel在 v9 中已不再是必需的选项核心行模型始终自动创建传它仅为保持 v8 代码习惯initialState.sorting采用 v8 的SortingState结构Array{ id: string; desc?: boolean }其中id必须与列定义中的 accessor id 一致自定义排序函数可通过sortFns选项注册并配合 TypeScript 声明合并使用 v8 风格的字符串函数名测试中的byNameLength即为一例。五、废弃原因与迁移到 v9 useTable官方在文档中将getSortedRowModel明确标记为Deprecated请改用新useTablehook 的sortedRowModel特性槽位配合createSortedRowModel()。废弃的根本原因是 v9 引入了特性可摇树tree-shakeable的架构——行模型与函数注册表必须显式声明在features选项上而不是依赖一组散落的get*RowModel标记函数。5.1 新 API 等价写法import { useTable, tableFeatures } from ./useTable import { columnFilteringFeature, rowSortingFeature, createFilteredRowModel, createSortedRowModel, filterFns, sortFns, } from tanstack/table-core const features tableFeatures({ columnFilteringFeature, rowSortingFeature, filteredRowModel: createFilteredRowModel(), sortedRowModel: createSortedRowModel(), filterFns, sortFns, }) const table useTable({ features, columns, data, })5.2 v8 与 v9 的关键差异维度v8useLegacyTable 兼容层v9useTable行模型启用方式传入getSortedRowModel()标记函数features选项上的sortedRowModel: createSortedRowModel()函数注册表内置注册表自动合并 声明合并扩展sortFns/filterFns显式传入按需导入单个sortFn_*函数以控制打包体积特性体积兼容层会拉起整套 legacy 特性仅引入用到的 feature可摇树优化渲染订阅全量订阅所有状态变化table.Subscribe细粒度订阅按需选择状态状态访问getState()/setState()通过useTable第二参数选择后访问table.state5.3 迁移建议排序函数直接传给列的sortFn选项函数形式时无需任何注册只有按名称引用时才依赖sortFns注册表按名称导入内置排序函数如sortFn_alphanumeric只打包实际使用部分这是 v9 推荐做法createSortedRowModel()的fnName为table.getSortedRowModel在 DevTools 中排查排序性能时可按此标识定位记忆化节点。六、总结getSortedRowModel()是 v8 到 v9 过渡期的占位标记它自身不排序却负责向useLegacyTable传递启用排序行模型的意图最终由核心包 createSortedRowModel() 完成记忆化的多列排序。理解这一层包装关系既能帮助旧项目在迁移期间平稳运行测试见 useLegacyTable.test.tsx也能为新项目指明方向直接使用useTablesortedRowModel槽位拥抱 v9 可摇树、显式特性的架构。全部相关 API 索引可查阅 legacy 参考文档首页 与 useLegacyTable 文档。赞分享前端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 Angular 迁移指南从 V8 升级到 tanstack/angular-table V9 的完整实战手册TanStack Table V9 Angular 迁移指南从 V8 升级到 tanstack/angular table V9 的完整实战手册 本文以仓库前端UI组件TanStack Table V9Lit迁移完全指南从 V8 Controller 到 V9 Features 架构TanStack Table V9Lit迁移完全指南从 V8 Controller 到 V9 Features 架构 本文档基于本仓库中 Lit 框架迁移前端UI组件从v7到v8TanStack Table迁移指南与兼容性处理从v7到v8TanStack Table迁移指南与兼容性处理 本文全面分析了TanStack Table从v7到v8版本的重大变更包括API架构重构、插件系前端UI组件上一篇Activepieces 快速上手5 分钟部署并搭出第一个 AI 自动化流程下一篇终极ViVeTool指南10分钟学会Windows功能配置工具 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考