❔ Blazor Hosted - Client datatable with large dataset
I have a table component (using MudBlazor) which accesses the server-side API endpoint and pulls (currently) around 130k records. As you can imagine, too much for a client. 🙂
I need help and examples if possible on how I can implement client/server table pagination.
Any help is appreciated, thanks!
https://mudblazor.com/components/table#server-side-filtering,-sorting-and-pagination
(I followed this, but I don't quite understand its implementation for server-side, it seems all client-side to me.)
12 Replies
do u have api for pagination in the first place? if not then u need to make them first
I have an endpoint, but it's just a simple fetch and return all.
I think that's my main question, how do I go about doing that on the server-side endpoint?
do you know how to query your database to return n items from x?
return 10 items from 100th entry for example
MudBlazor has documentation for the table component. It has a specific section for "Server Side Filtering, Sorting and Pagination"
Solution: work off that, and you pass the
TableState's Page and PageSize as query parameters. Your server will then skip Page * PageSize and take PageSize. Adjust as needed.
Assuming you use EntityFramework, skip and take are the exact methods you need
Regular SQL expressions are basically the same thoughIf you want my tip: the .NET team is working on their own table variant called quickgrid. I like this better.
https://aspnet.github.io/quickgridsamples/
Intro
Samples using the QuickGrid component for Blazor.
Okay thanks both. 🙂
Should the skip/take reference be passed via url query? How do other people handle this?
url query is usually used
This is typescript, but you get the idea. This is how my methods usually look like.
PaginationRequest on the client. I defaulted to the first page, and 3 per page.
Usually your API will then return the total items in the database, and the actual result. Your paginator can then define the amount of pages by checking
ceil(totalItems / itemsPerPage)Much appreciated for the complete answer. 🙂
I'll give this a go, thanks for your time!
Was this issue resolved? If so, run
/close - otherwise I will mark this as stale and this post will be archived until there is new activity.