Dynamic table with Shadcn + Tanstack Query + Tanstack Router
Hi everyone
Anyone already did a dynamic table with Tanstack and Shadcn?
I'm trying to build a hook to handle everything, filters, etc, but I'm facing some issues.
If some one can share tips or suggestions of content please 🙏
7 Replies
conscious-sapphire•13mo ago
Shadcn docs has page for using TanStack table.
https://ui.shadcn.com/docs/components/data-table
Data Table
Powerful table and datagrids built using TanStack Table.
deep-jadeOP•13mo ago
Yes I know, but I want to do something dynamic and using server
they are using filters on the frontend
conscious-sapphire•13mo ago
For server side filters use keys on TanStack Query.
queryKey: ['key', {filter: ''}]
That updates table data. You don't need anything extra.
deep-jadeOP•13mo ago
https://github.com/Balastrong/tanstack-filtered-table-demo/blob/main/src/hooks/useFilters.ts
I'm trying to following this example
GitHub
tanstack-filtered-table-demo/src/hooks/useFilters.ts at main · Bala...
Managing table pagination, filtering and sorting on query parameters with the TanStack - Balastrong/tanstack-filtered-table-demo
deep-jadeOP•13mo ago
But the search give me this erro
conscious-sapphire•13mo ago
You don't need the table to set filters...
If it's a server side call, change the url params. Include them as query keys.
Track the params as state. Forget the client side helpers.
deep-jadeOP•13mo ago
Yes I know, but I'm trying to set the filters and the pagination on the url as query parameters
but I have that error