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 ponent to break the data and show over multiple pages.
This is the link to materialUI ponent: /
Any help on how to proceed with this?
Picture of the List view.
Edit: I want to implement list item as a clickable ponent so that on click it redirects to the a list item specific dashboard.
Update: I've implemented it using the material-ui pagination ponent. Works fine!
Demo: =/demo.js
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 ponent to break the data and show over multiple pages.
This is the link to materialUI ponent: https://material-ui./ponents/pagination/
Any help on how to proceed with this?
Picture of the List view.
Edit: I want to implement list item as a clickable ponent so that on click it redirects to the a list item specific dashboard.
Update: I've implemented it using the material-ui pagination ponent. Works fine!
Demo: https://codesandbox.io/s/material-demo-g0xo5?file=/demo.js
Share Improve this question edited May 20, 2020 at 20:28 Manu Sharma asked May 13, 2020 at 12:00 Manu SharmaManu Sharma 7641 gold badge8 silver badges23 bronze badges 6- Its like a table or list view? – nmanikumar5 Commented May 13, 2020 at 12:13
- Its a List. I am getting an array in response and I am looping over it to generate <ListItem>s. I'm using material ponents. – Manu Sharma Commented May 13, 2020 at 12:16
-
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)))– acbay Commented May 13, 2020 at 12:17 - Yeah, that's what I would be doing, but I think angular material has a paginator ponent and I thought that must be the case with react material too and I'm missing something here. – Manu Sharma Commented May 13, 2020 at 12:38
- 2 Thanks for the code sandbox ! – ShashankAC Commented Jun 29, 2020 at 12:04
2 Answers
Reset to default 6I 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 bine this with material ui pagination, should work fine!
I recently dealt with this issue with the following snippet (consider that my example required handling a plex 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.