Sorting, Filtering, and Pagination

To add sorting, import getSortedRowModel and add it to your useReactTable config. You also need a sorting state (an array of {id, desc} objects) and an onSortingChange handler wired to React state.

The sorted row model wraps the core row model, reordering rows based on the current sorting state.

Each column header exposes column.getToggleSortingHandler(), which you attach to the onClick of your th element. Clicking cycles through ascending, descending, and unsorted states.

column.getIsSorted() returns 'asc', 'desc', or false, letting you render the appropriate sort indicator arrow.

TanStack Table supports sorting by multiple columns simultaneously. Users hold the Shift key while clicking a second column header to add it to the sort array without removing the first.

The sortingState array contains all active sort columns in priority order, and the sorted row model applies them sequentially.

Enable global filtering by importing getFilteredRowModel and adding globalFilter state plus an onGlobalFilterChange handler. Connect an input element to the state to filter across all columns at once.

The global filter uses a fuzzy-match or includes strategy by default, configurable via filterFns.

Individual columns can expose their own filters via column.getFilterValue() and column.setFilterValue(). Add a filter input below each column header and wire it to these methods.

Column filters and global filters stack: rows must pass all active filters to appear in the filtered row model.

Import getPaginationRowModel and add it to the useReactTable config along with a pagination state object (pageIndex and pageSize) and an onPaginationChange handler.

The pagination row model slices the filtered (and sorted) rows to only the current page's slice.

The table instance exposes table.nextPage(), table.previousPage(), table.firstPage(), and table.lastPage() for navigation. Use table.getCanNextPage() and table.getCanPreviousPage() to disable buttons at the boundaries.

table.setPageIndex(n) jumps directly to a specific page; table.setPageSize(n) changes how many rows appear per page.

table.getPageCount() returns the total number of pages based on the filtered row count divided by pageSize. table.getState().pagination.pageIndex gives the current zero-based page index.

Use these values to build a page counter like "Page 3 of 12" in your pagination UI.

Row models compose: getCoreRowModel provides the base, getFilteredRowModel wraps it applying filters, getSortedRowModel wraps filtered data applying sort, and getPaginationRowModel slices the result for the current page.

The order matters: sorting happens after filtering, pagination happens last.

TanStack Table memoizes row model computations internally. Sorting and filtering large datasets is efficient because only changed row models are recomputed.

For extremely large datasets (100,000+ rows), combine pagination with virtualization (react-virtual) to avoid rendering all page rows at once.

Wire getSortedRowModel with sorting state, getFilteredRowModel with globalFilter and column filter states, and getPaginationRowModel with pagination state. Each feature is opt-in and composes cleanly with the others.

Column headers drive sort via getToggleSortingHandler; inputs drive filter via setFilterValue and onGlobalFilterChange; buttons drive pagination via nextPage, previousPage, setPageIndex.

Which object holds the current page index and page size in TanStack Table's pagination state?

Sorting requires getSortedRowModel, sorting state, and column header click handlers. Filtering uses getFilteredRowModel with global and per-column filter state. Pagination uses getPaginationRowModel with pageIndex and pageSize state.

All three row models compose automatically: filter first, sort second, paginate last.