DEV Community

Chandresh Patel
Chandresh Patel

Posted on

 

ReactJS Pagination Using Material UI

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

Importing material UI components and useState

Initializing React Hooks

Initializing React Hooks

Creating static data to display

Creating static data to display

Creating static data to display

Creating static data to display

Implement design using makeStyles

Creating static data to display

Creating static data to display

Create a method for handling the page click

Create a method for handling the page click

Create a method for handling the rows per page

Create a method for handling the rows per page

Now, it’s time to implement the UI.

Mapping over the columns

Mapping over the colums

Mapping over the rows and displaying static data

Mapping over the rows and displaying static data

Mapping over the rows and displaying static data

Implementing TablePagination tag

Implementing TablePagination tag

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

Implement code snippets

Implement code snippets

Implement code snippets

Implement code snippets

So, this was a step-by-step guide for implementing React Pagination using Material UI. I hope this tutorial has helped you understand React Pagination as you’ve expected.

Top comments (1)

Collapse
 
anilpank profile image
Anil

This is good Chandresh. Probably a link where this component can be demoed would have been awesome. We can try putting this in jsfiddle

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post