TanStack Table: Backend Pagination, Filter & Sort with TanStack Query + TanStack Router

With server side pagination, the browser has to handle local state with filters and sorting. Wanna do that on query params to have shareable URLs?
TanStack provides such a great DX!

I created a React example using Query, Router and Table.

TanStack Query manages your async state. In this case it takes responsibility for providing fresh data every time your filters are changed.

TanStack Router is your local state manager. You can replace useState with the navigate function and make sure all parameters are stored in the URL.

TanStack Table is not only there to display your data, but also to collect the user input and trigger the required interactions for a smooth user experience.

(I'm happy if you also leave a star on GitHub ⭐️)

As mentioned in the outro, this was one possible way of connecting the dots, if you have suggestions for different approaches or improvements to what I presented, I'll be really happy to receive issues and PRs on the repo!
_______________________________

Hit like and subscribe for more content! :D

You can also follow me on the other platforms:

_______________________________
TIMESTAMPS
00:00 Demo
00:11 Fetch Data (Query)
01:25 Search Parameters (Router)
04:07 Table integration
05:03 Filtering
08:05 Sorting
11:12 Pagination

[KevinVandyTech]

Yo, let's get this example in the official docs