Please help with server side pagination useVueTable parameters (shadcn-vue)
I have a fairly simple table, although my problem is that I have millions of rows which I cannot load all at once. I have been searching this for hours but everything that I see is for React and I couldn't come across anyone who has done server side pagination in Vue/Nuxt version. :grrrr:
First of all,
rowCount, does not exist in TableOptions, second of all, even though I provide pageSize & pageIndex accordingly based on my data, the row count display at the bottom is always 10 (0 of 10 row(s) selected.) 😢
Dependencies are as follows:
2 Replies
afraid-scarlet•8mo ago
Hi. We've encountered a similiar challenge, and solved it by extending the tanstack table state with custom state. We have made some custom filters that were filtering data before it was beeing sent to the table, and wanted to take these into account when displaying how many rows were actually in the table.
I guess you could do something similar, but fetch total-rows count from the server as meta-data to your query?
Ill show how we set up the
1. Create the interface 2. Extend
customAllRowCount1. Create the interface 2. Extend
@tanstack/vue-table typescript module with the new state
3. Inside useVueTable params > state > add the new customAllRowCount state. Make a ref holding the total row count which you fetch from the server
4. Use the new state retrieved from table.getState().customAllRowCount
Not sure if this solves your problem, but im hoping it can be an inspiration of a similar problem
rising-crimsonOP•8mo ago
Today I finally managed to get something working, but my approach was a bit different due to my use case.
Since my users don't really paginate beyond a few times, and usually want to select all rows just to export them as CSV, I simply made the illusion of loading everything at once (1000 rows, 100 pages), and send the backend a special flag when everything is selected via an emit from
<DataTable/>
It could be further improved by loading another 1K once they reach the last page as well.
I'm definitely saving your answer for the future, thanks a lot ❤️