Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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