TanStack Table 自定义排序函数实战SortFn 接口契约与行排序比较器原理剖析【免费下载链接】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 行排序Row Sorting功能的核心接口SortFn展开深入讲解这一比较器契约的类型签名、返回值语义以及resolveDataValue值规范化钩子在constructSortFn工厂中的实际作用。读完本文你将掌握如何基于内置排序函数编写自定义排序函数、理解排序行模型如何消费比较结果并能直接在当前仓库的table-core源码与测试中找到依据。SortFn 是什么行排序功能的比较器契约在 TanStack Table 中行排序Row Sorting由rowSortingFeature这一 feature 提供见 rowSortingFeature.ts它定义了排序状态、列级排序 API 以及用于比较两行大小的比较器类型。SortFn就是这个比较器的类型契约定义于 rowSortingFeature.types.tsexport interface SortFn in out TFeatures extends TableFeatures, in out TData extends RowData, { ( rowA: RowTFeatures, TData, rowB: RowTFeatures, TData, columnId: string, ): number resolveDataValue?: TransformDataValueFn }它本质上是一个接收两行与一个列 ID、返回数值比较结果的函数类型并附带一个可选的resolveDataValue属性。由于该类型定义在table-core包中因此所有框架适配器React、Vue、Solid、Svelte、Angular、Preact 等共享同一套排序契约。SortFn是columnDef.sortFn可接受的三类取值之一。相关类型 SortFnOption 定义为export type SortFnOption TFeatures extends TableFeatures, TData extends RowData, auto | ExtractSortFnKeysTFeatures | SortFnTFeatures, TData即每个列既可以使用auto自动推断也可以引用内置排序函数的注册名字符串还可以直接传入一个自定义的SortFn函数对象。接口签名逐项解析类型参数类型参数约束说明TFeaturesextends TableFeatures表格启用的功能特性集合用于类型层面约束Row上可用的 API 与类型字典TDataextends RowData表格数据行的类型决定RowTFeatures, TData中original等字段的具体类型函数参数rowA类型为RowTFeatures, TData参与比较的第一个行实例rowB类型为RowTFeatures, TData参与比较的第二个行实例columnIdstring类型当前正在排序的列 ID。排序函数通过它调用row.getValue(columnId)取到该列的实际数据值。返回值number类型表示两行的相对顺序。返回值的约定与 JavaScript 原生Array.prototype.sort的比较器一致负值表示rowA排在rowB之前0表示两者相等正值表示rowA排在rowB之后。注意所有内置排序函数与constructSortFn构建的函数均按升序语义返回结果降序方向并不由排序函数本身负责而是在行模型层统一反转详见下文。可选属性 resolveDataValueresolveDataValue?: TransformDataValueFnTransformDataValueFn定义于 type-utils.ts即(dataValue: any) any在正式比较前对每行取出的数据值做一次规范化转换。它只被constructSortFn构建出的排序函数包括全部内置排序函数所遵守如果直接手写一个普通函数并赋给sortFnresolveDataValue不会被行模型自动调用。返回值语义与排序行模型的配合理解SortFn最关键的一点是它只负责给出升序比较结果方向处理全部收口在排序行模型。createSortedRowModel在 createSortedRowModel.ts 中实现了一个compareRows函数遍历已解析的排序条目resolvedSorting逐列比较若某列配置了sortUndefined则先处理undefined值的优先级first、last、-1、1等返回非零结果则提前结束调用sortEntry.sortFn(rowA, rowB, sortEntry.id)得到基础比较值sortInt若desc为真则sortInt * -1若列配置了invertSorting则再次sortInt * -1多列排序时若当前列比较结果为0继续用下一个排序列比较全部相等时退回rowA.index - rowB.index以保持原始相对顺序。因此自定义排序函数只需要实现升序怎么比这一个语义降序、反转invertSorting适用于排名类数值越小越好的列都由行模型统一处理不会出现方向逻辑分散在各自定义函数中的问题。解析排序函数的具体过程在 column_getSortFn 中函数类型的sortFn直接返回auto委托给column_getAutoSortFn按采样值推断字符串则查表注册的排序函数字典未命中时回退到sortFn_basic并在开发环境输出警告。resolveDataValue比较前的值规范化钩子resolveDataValue解决了同一套比较逻辑、不同的取值预处理场景下的代码复用问题。以 sortFns.ts 中的constructSortFn工厂实现为例export function constructSortFn TFeatures extends TableFeatures any, TData extends RowData any, (def: SortFnDefTFeatures, TData): CreatedSortFnTFeatures, TData { const sortFn: CreatedSortFnTFeatures, TData Object.assign( (rowA, rowB, columnId): number { let dataValueA rowA.getValue(columnId) let dataValueB rowB.getValue(columnId) const resolveDataValue sortFn.resolveDataValue if (resolveDataValue) { dataValueA resolveDataValue(dataValueA) dataValueB resolveDataValue(dataValueB) } return sortFn.sort(dataValueA, dataValueB, rowA, rowB, columnId) }, def, ) return sortFn }工厂接受的SortFnDef见 rowSortingFeature.types.ts把值级比较器sort只接收两行已解析的数据值与取值规范化器resolveDataValue分离。构造出的函数会把def整个挂载到自身属性上因此派生一个变体只需展开既有排序函数并覆盖差异字段而不必重写比较逻辑——官方源码注释中给出的例子是去除变音符diacritics的字母数字排序const stripDiacritics (value: string) value.normalize(NFD).replace(/\p{Diacritic}/gu, ) const alphanumericIgnoreDiacritics constructSortFn({ ...sortFn_alphanumeric, resolveDataValue: (value) stripDiacritics(sortFn_alphanumeric.resolveDataValue!(value)), })内置排序函数家族全部由 constructSortFn 构建所有内置排序函数都定义在 sortFns.ts 中逐一由constructSortFn构建因此它们都携带resolveDataValue属性函数resolveDataValue 规范化比较器特点sortFn_alphanumerictoString(value).toLowerCase()compareAlphanumeric自然排序忽略大小写兼容item2排在item10前sortFn_alphanumericCaseSensitivetoString(value)compareAlphanumeric自然排序大小写敏感sortFn_texttoString(value).toLowerCase()compareBasic基础文本比较更快、数值支持更少sortFn_textCaseSensitivetoString(value)compareBasic基础文本比较大小写敏感sortFn_datetimeDate实例转为getTime()数值直接/比较可处理 nullish 值sortFn_basic无compareBasic最通用的兜底比较器其中compareAlphanumeric是 自然排序natural sort 实现用正则/([0-9])/gmreSplitAlphaNumeric的思想把字符串按数字块 / 非数字块切分逐块比较数字块先去掉前导零再按有效长度与数值比较长度不超过 15 位走手写的parseSmallInt以避免大数精度问题非数字块按 charCode 逐字符比较数字块与非数字块相遇时字符串块优先。toString工具函数对NaN、±Infinity会返回空字符串从而保证这类边缘值可被稳定排序。column_getAutoSortFn见 rowSortingFeature.utils.ts会在sortFn: auto时采样前 10 行过滤后的数据自动选择Date 值选datetime含数字块的字符串选alphanumeric纯字符串选text其余回退basic。在列上配置与编写自定义排序函数在columnDef中启用自定义排序有三种方式以 column-defs 指南 与类型定义 ColumnDef_RowSorting 为准方式一直接传入函数无需注册const columns: ColumnDeftypeof features, Person, any[] [ { id: name, accessorKey: name, sortFn: (rowA, rowB, columnId) { const a rowA.getValuestring(columnId) const b rowB.getValuestring(columnId) return a.localeCompare(b, zh-Hans-CN) }, }, ]方式二基于内置函数派生复用 resolveDataValueimport { constructSortFn, sortFn_alphanumeric } from tanstack/table-core const sortFn_size constructSortFn({ ...sortFn_alphanumeric, resolveDataValue: (v) String(v ?? ).toLowerCase().replace(/(\d)(kb|mb|gb)/, $1$2), })方式三注册到 sortFns 注册表支持字符串引用在tableFeatures的sortFns插槽中注册自定义函数之后即可用字符串名引用且能参与ExtractSortFnKeys的类型推导const features tableFeatures({ rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns: { size: sortFn_size, // 自定义 text: sortFn_text, // 按需引入内置函数有利于 tree-shaking }, })该注册机制与createSortedRowModel工厂的文档说明一致见 createSortedRowModel.ts只注册实际用到的内置函数可避免把全部内置排序函数打包进产物直接传给列级sortFn的函数则完全不需要注册。测试验证仓库测试 createSortedRowModel.test.ts 覆盖了排序行模型对SortFn结果的消费行为可作为实现事实的依据排序状态引用不存在的列时不会崩溃且回退到排序前的行序多个排序条目中混有未知列时仍按剩余已知列正确排序排序后getDisplayIndex()始终按最终显示顺序从 0 递增验证了行索引在排序后重新分配。最佳实践小结保持升序语义自定义SortFn只需返回升序比较结果desc、invertSorting交由行模型统一反转避免方向逻辑重复实现优先复用resolveDataValue当只需要改取值预处理时用constructSortFn({ ...builtIn, resolveDataValue })派生而不是重写比较器按需注册通过sortFns插槽只注册用到的内置函数以利于 tree-shaking列级直接传函数则无需注册善用auto默认的sortFn: autorowSortingFeature.ts 中列默认值为auto已能按采样值推断datetime/alphanumeric/text/basic多数场景无需显式指定。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TanStack Table 自定义排序函数实战：SortFn 接口契约与行排序比较器原理剖析
TanStack Table 自定义排序函数实战SortFn 接口契约与行排序比较器原理剖析【免费下载链接】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 行排序Row Sorting功能的核心接口SortFn展开深入讲解这一比较器契约的类型签名、返回值语义以及resolveDataValue值规范化钩子在constructSortFn工厂中的实际作用。读完本文你将掌握如何基于内置排序函数编写自定义排序函数、理解排序行模型如何消费比较结果并能直接在当前仓库的table-core源码与测试中找到依据。SortFn 是什么行排序功能的比较器契约在 TanStack Table 中行排序Row Sorting由rowSortingFeature这一 feature 提供见 rowSortingFeature.ts它定义了排序状态、列级排序 API 以及用于比较两行大小的比较器类型。SortFn就是这个比较器的类型契约定义于 rowSortingFeature.types.tsexport interface SortFn in out TFeatures extends TableFeatures, in out TData extends RowData, { ( rowA: RowTFeatures, TData, rowB: RowTFeatures, TData, columnId: string, ): number resolveDataValue?: TransformDataValueFn }它本质上是一个接收两行与一个列 ID、返回数值比较结果的函数类型并附带一个可选的resolveDataValue属性。由于该类型定义在table-core包中因此所有框架适配器React、Vue、Solid、Svelte、Angular、Preact 等共享同一套排序契约。SortFn是columnDef.sortFn可接受的三类取值之一。相关类型 SortFnOption 定义为export type SortFnOption TFeatures extends TableFeatures, TData extends RowData, auto | ExtractSortFnKeysTFeatures | SortFnTFeatures, TData即每个列既可以使用auto自动推断也可以引用内置排序函数的注册名字符串还可以直接传入一个自定义的SortFn函数对象。接口签名逐项解析类型参数类型参数约束说明TFeaturesextends TableFeatures表格启用的功能特性集合用于类型层面约束Row上可用的 API 与类型字典TDataextends RowData表格数据行的类型决定RowTFeatures, TData中original等字段的具体类型函数参数rowA类型为RowTFeatures, TData参与比较的第一个行实例rowB类型为RowTFeatures, TData参与比较的第二个行实例columnIdstring类型当前正在排序的列 ID。排序函数通过它调用row.getValue(columnId)取到该列的实际数据值。返回值number类型表示两行的相对顺序。返回值的约定与 JavaScript 原生Array.prototype.sort的比较器一致负值表示rowA排在rowB之前0表示两者相等正值表示rowA排在rowB之后。注意所有内置排序函数与constructSortFn构建的函数均按升序语义返回结果降序方向并不由排序函数本身负责而是在行模型层统一反转详见下文。可选属性 resolveDataValueresolveDataValue?: TransformDataValueFnTransformDataValueFn定义于 type-utils.ts即(dataValue: any) any在正式比较前对每行取出的数据值做一次规范化转换。它只被constructSortFn构建出的排序函数包括全部内置排序函数所遵守如果直接手写一个普通函数并赋给sortFnresolveDataValue不会被行模型自动调用。返回值语义与排序行模型的配合理解SortFn最关键的一点是它只负责给出升序比较结果方向处理全部收口在排序行模型。createSortedRowModel在 createSortedRowModel.ts 中实现了一个compareRows函数遍历已解析的排序条目resolvedSorting逐列比较若某列配置了sortUndefined则先处理undefined值的优先级first、last、-1、1等返回非零结果则提前结束调用sortEntry.sortFn(rowA, rowB, sortEntry.id)得到基础比较值sortInt若desc为真则sortInt * -1若列配置了invertSorting则再次sortInt * -1多列排序时若当前列比较结果为0继续用下一个排序列比较全部相等时退回rowA.index - rowB.index以保持原始相对顺序。因此自定义排序函数只需要实现升序怎么比这一个语义降序、反转invertSorting适用于排名类数值越小越好的列都由行模型统一处理不会出现方向逻辑分散在各自定义函数中的问题。解析排序函数的具体过程在 column_getSortFn 中函数类型的sortFn直接返回auto委托给column_getAutoSortFn按采样值推断字符串则查表注册的排序函数字典未命中时回退到sortFn_basic并在开发环境输出警告。resolveDataValue比较前的值规范化钩子resolveDataValue解决了同一套比较逻辑、不同的取值预处理场景下的代码复用问题。以 sortFns.ts 中的constructSortFn工厂实现为例export function constructSortFn TFeatures extends TableFeatures any, TData extends RowData any, (def: SortFnDefTFeatures, TData): CreatedSortFnTFeatures, TData { const sortFn: CreatedSortFnTFeatures, TData Object.assign( (rowA, rowB, columnId): number { let dataValueA rowA.getValue(columnId) let dataValueB rowB.getValue(columnId) const resolveDataValue sortFn.resolveDataValue if (resolveDataValue) { dataValueA resolveDataValue(dataValueA) dataValueB resolveDataValue(dataValueB) } return sortFn.sort(dataValueA, dataValueB, rowA, rowB, columnId) }, def, ) return sortFn }工厂接受的SortFnDef见 rowSortingFeature.types.ts把值级比较器sort只接收两行已解析的数据值与取值规范化器resolveDataValue分离。构造出的函数会把def整个挂载到自身属性上因此派生一个变体只需展开既有排序函数并覆盖差异字段而不必重写比较逻辑——官方源码注释中给出的例子是去除变音符diacritics的字母数字排序const stripDiacritics (value: string) value.normalize(NFD).replace(/\p{Diacritic}/gu, ) const alphanumericIgnoreDiacritics constructSortFn({ ...sortFn_alphanumeric, resolveDataValue: (value) stripDiacritics(sortFn_alphanumeric.resolveDataValue!(value)), })内置排序函数家族全部由 constructSortFn 构建所有内置排序函数都定义在 sortFns.ts 中逐一由constructSortFn构建因此它们都携带resolveDataValue属性函数resolveDataValue 规范化比较器特点sortFn_alphanumerictoString(value).toLowerCase()compareAlphanumeric自然排序忽略大小写兼容item2排在item10前sortFn_alphanumericCaseSensitivetoString(value)compareAlphanumeric自然排序大小写敏感sortFn_texttoString(value).toLowerCase()compareBasic基础文本比较更快、数值支持更少sortFn_textCaseSensitivetoString(value)compareBasic基础文本比较大小写敏感sortFn_datetimeDate实例转为getTime()数值直接/比较可处理 nullish 值sortFn_basic无compareBasic最通用的兜底比较器其中compareAlphanumeric是 自然排序natural sort 实现用正则/([0-9])/gmreSplitAlphaNumeric的思想把字符串按数字块 / 非数字块切分逐块比较数字块先去掉前导零再按有效长度与数值比较长度不超过 15 位走手写的parseSmallInt以避免大数精度问题非数字块按 charCode 逐字符比较数字块与非数字块相遇时字符串块优先。toString工具函数对NaN、±Infinity会返回空字符串从而保证这类边缘值可被稳定排序。column_getAutoSortFn见 rowSortingFeature.utils.ts会在sortFn: auto时采样前 10 行过滤后的数据自动选择Date 值选datetime含数字块的字符串选alphanumeric纯字符串选text其余回退basic。在列上配置与编写自定义排序函数在columnDef中启用自定义排序有三种方式以 column-defs 指南 与类型定义 ColumnDef_RowSorting 为准方式一直接传入函数无需注册const columns: ColumnDeftypeof features, Person, any[] [ { id: name, accessorKey: name, sortFn: (rowA, rowB, columnId) { const a rowA.getValuestring(columnId) const b rowB.getValuestring(columnId) return a.localeCompare(b, zh-Hans-CN) }, }, ]方式二基于内置函数派生复用 resolveDataValueimport { constructSortFn, sortFn_alphanumeric } from tanstack/table-core const sortFn_size constructSortFn({ ...sortFn_alphanumeric, resolveDataValue: (v) String(v ?? ).toLowerCase().replace(/(\d)(kb|mb|gb)/, $1$2), })方式三注册到 sortFns 注册表支持字符串引用在tableFeatures的sortFns插槽中注册自定义函数之后即可用字符串名引用且能参与ExtractSortFnKeys的类型推导const features tableFeatures({ rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns: { size: sortFn_size, // 自定义 text: sortFn_text, // 按需引入内置函数有利于 tree-shaking }, })该注册机制与createSortedRowModel工厂的文档说明一致见 createSortedRowModel.ts只注册实际用到的内置函数可避免把全部内置排序函数打包进产物直接传给列级sortFn的函数则完全不需要注册。测试验证仓库测试 createSortedRowModel.test.ts 覆盖了排序行模型对SortFn结果的消费行为可作为实现事实的依据排序状态引用不存在的列时不会崩溃且回退到排序前的行序多个排序条目中混有未知列时仍按剩余已知列正确排序排序后getDisplayIndex()始终按最终显示顺序从 0 递增验证了行索引在排序后重新分配。最佳实践小结保持升序语义自定义SortFn只需返回升序比较结果desc、invertSorting交由行模型统一反转避免方向逻辑重复实现优先复用resolveDataValue当只需要改取值预处理时用constructSortFn({ ...builtIn, resolveDataValue })派生而不是重写比较器按需注册通过sortFns插槽只注册用到的内置函数以利于 tree-shaking列级直接传函数则无需注册善用auto默认的sortFn: autorowSortingFeature.ts 中列默认值为auto已能按采样值推断datetime/alphanumeric/text/basic多数场景无需显式指定。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考