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.

[lalaghoury]

assalamoalaikum!
Brother take a look at this: https://gist.github.com/nicostombros/fc9a16a67fc47a536cf84736d0b8cfd8

[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 🙏🙏🙏

[lalaghoury]

assalamoalaikum!
Brother take a look at this: https://gist.github.com/nicostombros/fc9a16a67fc47a536cf84736d0b8cfd8

[samchouse]

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

[BrendanC23]

Thanks for creating this gist! It worked great for implementing pagination. I noticed one issue with the <PaginationEllipsis /> component - your gist does not include a key prop, which causes issues when two ellipsis are rendered.

I did the following to add a key prop:

if (2 < currentPage && currentPage < totalPages - 1) {
    pages.push(<PaginationEllipsis key="ellipsis-before" />);
    // ...
}

pages.push(<PaginationEllipsis key="ellipsis-after" />);

[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

[pavan-kumarv]

https://tanstack.com/table/v8/docs/framework/react/examples/pagination-controlled
This documentation would be helpful.

[siemenliu]

It's worked for me, I merged this and official demo to a gist.
A simplest demo for network pagination with shadcnui data-table demo:
https://gist.github.com/siemenliu/97dd9a104d73ac0697b3ac960fba20a7