skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

sorting

Configure TanStack Table sorting with custom sortFn and manualSorting.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#tanstack table#sorting state#row sorting#sortFn#multi-sort#server-side sorting
One-click install
npx skills add https://github.com/TanStack/table --skill sorting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sorting
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/sorting
Command: npx skills add https://github.com/TanStack/table --skill sorting

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build datagrids that can sort rows correctly and consistently across UI interactions and state updates, including custom and fuzzy ordering.

Core Features & Use Cases

  • Clickable header sorting & multi-sort: Use header toggle handlers (including Shift+click multi-sort) to update state.sorting reliably.
  • Custom sort logic: Register or author sortFn (including sortFns built-ins) for domain-specific ordering like enums and ranks.
  • Correct edge-case handling: Control sortDescFirst, sortUndefined (first/last/absolute end), and invertSorting without breaking direction toggles.
  • Server-side friendly sorting: Enable manualSorting so your backend owns the ordering while the UI still drives sorting state.

Quick Start

Use the sorting skill to configure sortedRowModel with createSortedRowModel(sortFns) and connect sorting state with onSortingChange so clicking column headers updates the correct row order for your dataset.

Frequently Asked Questions about sorting

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement multi-sort with Shift+click in a TanStack Table?▼

Multi-sort in TanStack Table is configured by connecting header toggle handlers to `state.sorting`, allowing Shift+click interactions to update multiple column sort states reliably.

How does server-side sorting work with manualSorting?▼

Server-side sorting uses `manualSorting` to delegate row ordering to your backend queries while the UI maintains and drives the `sorting` state during user interactions.

How do I handle undefined values and control sort direction in TanStack Table?▼

Control undefined values and initial sort direction using `sortUndefined` (first/last/absolute end), `sortDescFirst`, and `invertSorting` properties to manage edge cases without breaking toggles.

Can I use custom sort functions for enum or rank ordering?▼

Custom sort functions can be registered or authored via `sortFn`, including built-in `sortFns`, to apply domain-specific ordering logic like enums, ranks, or fuzzy comparison patterns.

How do I pair fuzzy filters with a custom sort function?▼

Pair fuzzy filters with a fuzzy-aware `sortFn` that utilizes a `compareItems`-based approach to ensure rows remain consistently ordered after fuzzy filtering is applied.

What is the best way to manage row sorting state across UI updates?▼

Managing row sorting state requires binding `onSortingChange` to `state.sorting` as `SortingState`, driving the `sortedRowModel` to reflect correct row order across dataset updates.

Related Skills

Explore More Software Engineering Skills→
danghungtb26danghungtb26
3

tanstack-table-guide

Implement TanStack Table data tables with sorting, filtering, pagination, and row selection in React.

Community
Intermediate
laravellaravel
3.6k

tailwindcss-development

Apply Tailwind CSS v4 utilities for styling and responsive layouts.

Official
Intermediate
Montte-erpMontte-erp
6

tanstack-table

Manage sorting, filtering, pagination, grouping, and row state for dynamic data grids.

Official
Advanced
vercel-labsvercel-labs
609

csv

Analyze and transform CSV data using standard Unix utilities.

Official
Basic