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: 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

Answer

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!