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,432
포크
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에서 보기