Sorting, Filtering, and Pagination
Enable column sorting, global and column filtering, and client-side pagination with TanStack Table features.
Enabling Sorting
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.
Toggling Sort on a Column Header
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.
All lessons in this course
- TanStack Table Philosophy and Headless Design
- Defining Columns and Rendering Rows
- Sorting, Filtering, and Pagination
- Row Selection and Virtualized Tables