tanstack-table-sorting-filtering-and-pagination

TanStack Table Sorting, Filtering, and Pagination

Use this skill when the table problem is about reducing, ordering, or paging the current row set.

Scope

• sorting and multi-sorting
• column filtering and global filtering
• fuzzy filtering with ranking metadata
• column and global faceting
• client-side pagination and manual pagination
• controlled feature slices for the query pipeline

Routing cues

• "multi-sort", "custom sortingFn", "sort undefined", "manualSorting" -> this skill
• "column filters", "global search box", "filterFn", "faceted filter" -> this skill
• "fuzzy search", "rankItem", "search suggestions from values" -> this skill
• "manualPagination", "rowCount", "pageCount", "pagination-controlled" -> this skill
• grouping, aggregation, expanding, row selection, or row pinning -> tanstack-table-grouping-and-row-features
• virtualization or fully controlled performance work -> tanstack-table-advanced-patterns

Workflow

1. Read references/query-pipeline-features.md first.
2. Decide whether each feature is client-side or manual/server-side.
3. Wire the matching row models only for the client-side stages you want TanStack Table to own.
4. Keep controlled slices in state and avoid mixing state with initialState for the same feature.

Quick example

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
});

Guardrails

• manualSorting, manualFiltering, and manualPagination mean the incoming data is already processed for that stage.
• Do not mix client-side sorting with server-side pagination or filtering unless you explicitly want to sort only the loaded page.
• Faceting needs getFacetedRowModel() before getFacetedUniqueValues() or getFacetedMinMaxValues().
• Fuzzy filtering usually pairs with @tanstack/match-sorter-utils and ranking-aware sorting metadata.
• state overrides initialState for the same slice.
• Pagination is not always the right UX for large tables; the official docs explicitly point people toward virtualization for some cases.

Maintenance

• Snapshot date: 2026-03-24
• Stable package snapshot: @tanstack/react-table@8.21.3
• Stable docs branch: v8

References

• Query pipeline features