TanStack Table with Convex pagination
oh it would be a life saver. i've spent past 8 hours using tankstack table with react query and also with useEffect, i keep running into to weird errors.
9 Replies
The general pattern is usePaginatedQuery on a Convex query and passing that data to the Table. There's a lot of extra stuff that can be added here, are you using usePaginatedQuery?
i moved to use manual pagination from convex-helpers
i did successfully made it to the first page and can move to next page to by just using the lastIndex i can get from the first
right now what i don't understand is how can i move to previous page and next page back and forth.
the correct way to settle indexes and using the tanstack table api?
i am trying to follow this guide here
https://tanstack.com/table/latest/docs/guide/pagination#page-count-and-row-count
it asks to provide pageIndex and pageSize only and state to manage those.
reading #manual pagination here
https://www.npmjs.com/package/convex-helpers
if you think i should go back to use usePaginatedQuery then that provides the cursors which i totally don't get how i can manage.
i know somehow i'm not thinking hard enough.
glad if you could help
npm
convex-helpers
A collection of useful code to complement the official convex package.. Latest version: 0.1.49, last published: 9 days ago. Start using convex-helpers in your project by running
npm i convex-helpers. There are no other projects in the npm registry using convex-helpers.Pagination Guide | TanStack Table Docs
Examples
Want to skip to the implementation? Check out these examples:
hey @Hmza did you manage to figure this out? we're trying to do something similar but @Tom mentioned we're able to use the usePaginatedQuery hook directly with Tanstack
depending on how large your dataset is I think you want to use the Convex usePaginatedQuery and call loadMore as necessary to move forward, but just adjust the view back for viewing previous pages. Or you can do manual pagination (again with normal Convex hooks) and pass that data into the table.
I'd love to hear about problems filks are facing with this approach, it's the most "going with the flow" approach with Convex but lots of things are possible.
if you can't keep already-loaded pages in memory via usePaginatedQuery (e.g. if this is more than a few hundred MB of data of data that will be viewed from have loaded in the table) then you may want something else. I'll think about what a nice demo app could be to show this off.
This pattern is called "client-side pagination" in TabStack Table, but you can still load more data (paginate) by calling loadMore
Could you provide a snippet for how to achieve this for usePaginatedQuery and how to access the return args?
is it as simple as
@punn took me some time to understand but i had to write a little of my own
usePaginatedQuery to make the pagination work with the tanstack table.
live: https://convex-tanstack-table.vercel.app/
this is just basic verison rn with pageSize selector and nextPage previousPage buttons but i'll actually extend on top of it to add server side sorting, filtering and whatever i initially planned.
you're welcome to check it out and use it as you like
github: https://github.com/hamzasaleem2/convex-tanstack-table/tree/main
you'll find useSimplePaginatedQuery.ts in /src.
thanks @tom for your help.GitHub
GitHub - hamzasaleem2/convex-tanstack-table
Contribute to hamzasaleem2/convex-tanstack-table development by creating an account on GitHub.
@punn even simpler, just usePaginatedQuery — don't wrap it with useQuery
Hm just usePaginatedQuery normally?
Yeah, the TanStack Query hooks and be used alongside normal Convex hooks.