Actual pagination implementation with data-table?

[NathanGagne]

Hey, so I've been following the official docs for data-table and tried implementing the "reusable" pagination for it, works great, however while the pagination does work, there's no way to fetch only part of the data, so you have to fetch the entire table every time, which can really slow down the app with big databases.

My setup
API Route for data http://localhost:3000/api/users
I also have 2 search params setup as well
?page= is for the page number the table is requesting
?size= is for the size of the page the table is requesting

What I want
I want to know the size of the page and what page the user is on so I can fetch from the API without fetching the entire table

What is the easiest and cleanest way to do this in NextJS?

[Dan86de]

I would add also to this discussion. Is there any way to create an infinite scroll experience in this component?

So far I see it's not supported right now.

[MarkLyck]

Having the same problem... I've been trying for hours to make the DataTable useful for a paginated network request.

The only version I have gotten working was moving table to the level of the component, but that completely breaks the idea of making a re-useable DataTable component.

@shadcn can you please make a fully controlled example that's still re-useable 🙏🙏🙏

[Xenfo]

I would recommend taking a look at Tanstack Query's infinite query hook. Have some sort of state that keeps track of the page and on page switch, use that state in a function to make the next fetch call. Then merge that with the previous data array.

[huyouare]

Any updates here, now that there's a pagination component @shadcn? I assume these are meant to be compatible in some way. 😄

[JMRodriguez-work]

yeah, it would be very useful if the pagination component uses server side pagination, does anyone had a solution ?

[nicostombros]

I'm not sure if this is useful to the discussion here but I made a gist showing how to generate basic pagination control that's related to the DataTable since that's what I was initially looking for https://gist.github.com/nicostombros/fc9a16a67fc47a536cf84736d0b8cfd8

[sos0]

I think this might be what everyone is looking for: https://github.com/sadmann7/shadcn-table

[WassimYazbekk]

any one still have this issue i made it work without breaking reuseability of the data-table but i don't know how to share my code here

[voduchuy2001]

Could you share it with me. Path to your repository

[WassimYazbekk]

i don't know if this is how to share it but i pushed the code to a new repository: https://github.com/WassimYazbekk/shadcn-table-pagination i hope this helps