How to add pagination to a long list using React MaterialUI?

user_7313425 0
Viewed 14726

I am using react + materialUI for implementing a list and filter functionality. The list is expected to be populated from an Http request and can have large number of list items. So for this reason, I was looking into pagination in MaterialUI documentation but no clear implementation is there. I want to provide my list and hope the pagination component to break the data and show over multiple pages.

This is the link to materialUI component: https://material-ui.com/components/pagination/

Any help on how to proceed with this?

Picture of the List view.

Edit: I want to implement list item as a clickable component so that on click it redirects to the a list item specific dashboard.

Update: I've implemented it using the material-ui pagination component. Works fine!

Demo: https://codesandbox.io/s/material-demo-g0xo5?file=/demo.js

material-ui reactjs pagination javascript
2 Answers

I think you should decide how many item should be showed on 1 page and store a page number in your state, then show items that should show in that page. Like yourItemList.subarray(((pageNumber - 1)*(numberOfItemsForPage)), ((pageNumber)*(numberOfItemsForPage) - 1)) You can combine this with material ui pagination, should work fine!

user_86814160

I recently dealt with this issue with the following snippet (consider that my example required handling a complex object):

<Pagination count={data.sub.length%10===0 ? data.sub.length/10 : data.sub.length/10 +1} page={page} onChange={(event,val)=> setPage(val)}  />

For my example I wanted 10 items rendered per page (hence the division by 10) and I calculated whether there would be trailing elements that should be rendered using the modulo and ternary operators. Following this, presenting a reference to the current page and hook to change the current page will achieve the desired result. Remember that what is most relevant is the amount of elements rendered at each page on the DOM.

Admin1
Related