Uploaded June 2024 | Updated September 2026, 3 weeks ago

---

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.

If you want to have a closer look, here's the repo: github.com/Balastrong/tanstack-filtered-table-demo
(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!

TanStack Start Tutorial: youtube.com/playlist?list=PLOQjd5dsGSxIEKFg4dnSQ4zQkmTktfszp

_______________________________
Support my work: github.com/sponsors/Balastrong ❤️

Hit like and subscribe for more content! :D

Beginner-Friendly Open Source Projects: github.com/DevLeonardoCommunity
Join the Discord community! Here's the invite: discord.gg/bqwyEa6We6

You can also follow me on the other platforms:
Twitter: twitter.com/Balastrong
dev.to: dev.to/balastrong
GitHub: github.com/Balastrong
Home: https://leonardomontini.dev/
TikTok: tiktok.com/@balastrong
Instagram: instagram.com/devbalastrong

_______________________________
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