Skip to main content

sorting

Sort with rowSortingFeature, sortedRowModel, sortFns, multi-sort and removal options, sortUndefined, and manualSorting. Load for comparator direction, incoming server order, or product-specific sorting cycles.

跳到安装

来源信息

仓库
TanStack/table
最近来源活动
2026年8月28日 17:37
检测到的 SKILL.md 语言
英语
星标
28,448
分支
3,577

安装方式

默认使用会先检查来源的 Prompt;你也可以切换为直接命令,或下载本地副本。

检查来源文件

决定是否安装前,请先阅读 SKILL.md,以及 SkillsMP 当前展示的配套文件。

正在显示 SKILL.md

SKILL.md
来源说明 · 只读预览
name
sorting
description
Sort with rowSortingFeature, sortedRowModel, sortFns, multi-sort and removal options, sortUndefined, and manualSorting. Load for comparator direction, incoming server order, or product-specific sorting cycles.
metadata
{"type":"sub-skill","library":"@tanstack/table-core","library_version":"9.2.4"}
requires
["core","table-features","client-vs-server"]
sources
["TanStack/table:docs/framework/react/guide/sorting.md","TanStack/table:packages/table-core/src/features/row-sorting","TanStack/table:examples/react/sorting"]
This skill builds on `core`, `table-features`, and `client-vs-server`. Sorting state describes order; client processing requires a sorted model and server processing requires sorted input. ## Setup ```ts import { createSortedRowModel, rowSortingFeature, sortFn_alphanumeric, sortFn_text, tableFeatures, } from '@tanstack/table-core' export const features = tableFeatures({ rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text }, }) ``` Import individual `sortFn_*` built-ins and register only those your columns reference by string name or that `sortFn: 'auto'` should resolve for your data types. The full `sortFns` registry object still works but bundles every built-in; numeric columns fall back to a basic comparator without registration. ## Core Patterns ```ts const options = { enableSortingRemoval: false, enableMultiSort: true } const numericColumn = { sortUndefined: 'last' as const } ``` Configure sort cycles and undefined placement to match the product rather than relying on implicit defaults. ## Common Mistakes ### [CRITICAL] Expecting manual mode to reorder Wrong: `const options = { data: unsortedRows, manualSorting: true }` Correct: `const options = { data: serverSortedRows, manualSorting: true }` Manual sorting bypasses `sortedRowModel` and trusts incoming order. Source: `packages/table-core/src/features/row-sorting/rowSortingFeature.types.ts` ### [HIGH] Reversing inside the comparator Wrong: `const newest: SortFn<any, any> = (a, b, id) => b.getValue<number>(id) - a.getValue<number>(id)` Correct: `const numeric: SortFn<any, any> = (a, b, id) => a.getValue<number>(id) - b.getValue<number>(id)` Return ascending comparison only; Table reverses it when sorting is descending. Source: `docs/framework/react/guide/sorting.md#custom-sorting-functions` ### [MEDIUM] Leaving ambiguous sort policy Wrong: `const options = { enableSortingRemoval: true }` Correct: `const options = { enableSortingRemoval: false }; const rankColumn = { sortUndefined: 'last' as const }` Undefined placement and removal cycles can differ from expected product behavior unless configured. Source: `packages/table-core/src/features/row-sorting/rowSortingFeature.types.ts` ## API Discovery Inspect `node_modules/@tanstack/table-core/dist/features/row-sorting/` and `dist/features/row-sorting/sortFns.d.ts` for current names and comparator contracts.
在 GitHub 查看