Skip to content

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

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:

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!



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!