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.
64
76%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./packages/table-core/skills/sorting/SKILL.mdThis 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.
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.
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.
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
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
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
Inspect node_modules/@tanstack/table-core/dist/features/row-sorting/ and dist/features/row-sorting/sortFns.d.ts for current names and comparator contracts.
9e523bc
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.