ReactJS Pagination Using Material UI
Tags: react, javascript, showdev, webdev
Published: 2021-03-26 12:00:05

Pagination provides a better way of handling when you are dealing with massive data. Here in this blog, I will help you develop a basic React Pagination demo using Material UI. You can get your hands on Material UI and explore more by visiting the official documentation.

Without further ado, let’s code!

**Steps to implement ReactJS Pagination using Material UI.**

Follow these instructions step-by-step to get started.

**Creating React App and Navigating to the project**

npx create-react-app react-pagination-demo
cd react-pagination-demo

**Installing Material UI**

For **yarn**-

yarn add @material-ui/core @material-ui/lab

For **npm**-

npm install @material-ui/core @material-ui/lab


Now, open your application react-pagination-demo and navigate to App.js and start coding with me step by step. For simplicity, I’ll write the entire code in App.js; you can split if you want.

**Importing Material UI components and useState**

![Importing material UI components and useState](https://cdn-images-1.medium.com/max/800/1*Qte8-FTZiESK18Ez43L2_Q.png)

![Importing material UI components and useState](https://cdn-images-1.medium.com/max/800/1*X59Pi-CTZIhcQS7R_LORng.png)

**Initializing React Hooks**

![Initializing React Hooks](https://cdn-images-1.medium.com/max/800/1*xt_WGIOi3WUHXD_Qqx30ew.png)

**Creating static data to display**

![Creating static data to display](https://cdn-images-1.medium.com/max/800/1*elDv1xUNKrwEts99XjTO5Q.png)

![Creating static data to display](https://cdn-images-1.medium.com/max/800/1*JqCjBlkOmjFkUrEqvQaOKA.png)

![Creating static data to display](https://cdn-images-1.medium.com/max/800/1*zt_PqOe547tc18qzSf_WDg.png)

**Implement design using makeStyles**

![Creating static data to display](https://cdn-images-1.medium.com/max/800/1*dGJ0f8ZdXAvl38657EZ2IA.png)

![Creating static data to display](https://cdn-images-1.medium.com/max/800/1*ZTg_MbYGQQYyVQNzMLPYhA.png)

**Create a method for handling the page click** 

![Create a method for handling the page click](https://cdn-images-1.medium.com/max/800/1*Ij8vO-3G0ruOjvzuSUAKNQ.png)

**Create a method for handling the rows per page**

![Create a method for handling the rows per page](https://cdn-images-1.medium.com/max/800/1*NmacsL1lwaUxDzkOFFT0Ag.png)

Now, it’s time to implement the UI.

**Mapping over the columns**

![Mapping over the colums](https://cdn-images-1.medium.com/max/800/1*W6meAW2y0OCaE0ZqeVWr2Q.png)

**Mapping over the rows and displaying static data**

![Mapping over the rows and displaying static data](https://cdn-images-1.medium.com/max/800/1*3mtVVj5ILjWHSTRJzrIqUg.png)

![Mapping over the rows and displaying static data](https://cdn-images-1.medium.com/max/800/1*tWcNlUqyxDQa-8tTYlyKmg.png)

**Implementing TablePagination tag**

![Implementing TablePagination tag](https://cdn-images-1.medium.com/max/800/1*r4iTBLwPf1UaWXVC6ZFn3g.png)

We will call handleChangePage function using onChangePage prop and handleChangeRowsPerPage function using OnChangeRowsPerPage. Whenever the user clicks to paginate or to change rows per page, these functions will execute respectively.

Once you are done implementing the above code snippets, your App.js would be like this-

![Implement code snippets](https://cdn-images-1.medium.com/max/800/1*9AEM5mA0JiAO71o94Xykcw.png)

![Implement code snippets](https://cdn-images-1.medium.com/max/800/1*QGgavDhTznR9mbvHWwOXgQ.png)

![Implement code snippets](https://cdn-images-1.medium.com/max/800/1*4l1_jkxDNAcjvaCrOHXdCA.png)

![Implement code snippets](https://cdn-images-1.medium.com/max/800/1*bKLCOU7Alb7F8jBn16IK3A.png)

![Implement code snippets](https://cdn-images-1.medium.com/max/800/1*zlm1OchwqRVkDQYXYj9DiA.png)

So, this was a step-by-step guide for [implementing React Pagination](https://www.bacancytechnology.com/blog/pagination-using-react-hooks) using Material UI. I hope this tutorial has helped you understand React Pagination as you’ve expected.