How to implement pagination in ReactJS
Today we’ll show you how to implement pagination in ReactJS. For beginners, there is always the question of how to put the pagination in the website. So in this article, we’ll step by step learn you how to add pagination for records.
How to implement pagination in reactjs, Pagination in ReactJs, React – Pagination Example with example, react js pagination codepen, react-js-pagination css not working, react pagination with api, simple reactstrap pagination, how to create custom pagination in reactjs.
Checkout more articles on ReactJS
Here we’ll implement pagination with the help of npm package. In an alternative way, we can implement custom pagination based on our requirement.
Way to implement pagination in ReactJS
- Create a simple react application
- Install npm package for pagination
- Integrate package in react app
- Add style for pagination
- Output
1. Create a simple react application
Let’s start with creating a simple react application using create-react-app. Run the following command to create a react app.
1 | npx create-react-app pagination-reactjs |
2. Install npm package for pagination
Now we will install react-js-pagination npm package to implement pagination in react application.
Run the following command to install the package.
1 | npm i react-js-pagination |
3. Integrate package in react app
Let’s integrate a pagination package in react application. We’ll pass the different params for pagination. Check the following code to implement.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import React, { useState } from 'react'; import Pagination from "react-js-pagination"; function App() { // current page const [currentPage, setCurrentPage] = useState(1); // total records per page to display const recordPerPage = 10; // total number of the records const totalRecords = 850; // range of pages in paginator const pageRange = 10; // handle change event const handlePageChange = pageNumber => { setCurrentPage(pageNumber); // call API to get data based on pageNumber } return ( <div className="App"> <h3>Pagination in ReactJS - <a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></h3> <Pagination activePage={currentPage} itemsCountPerPage={recordPerPage} totalItemsCount={totalRecords} pageRangeDisplayed={pageRange} onChange={handlePageChange} /> </div> ); } export default App; |
4. Add style for pagination
If you run the above project and check it in the browser then style does not appear for pagination.
Add Bootstrap 3 link to make it work. For that you can directly add the Bootstrap 3 styles in index.html page.
If you are working with the Bootstrap 4 then you have to add the following params to add style.
1 2 3 4 5 6 7 8 9 | <Pagination itemClass="page-item" // add it for bootstrap 4 linkClass="page-link" // add it for bootstrap 4 activePage={currentPage} itemsCountPerPage={recordPerPage} totalItemsCount={totalRecords} pageRangeDisplayed={pageRange} onChange={handlePageChange} /> |
5. Output
After implementing the pagination, your code should look like this.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Pagination - Clue Mediator</title> <!-- Bootstrap 4 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html> |
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | import React, { useState } from 'react'; import Pagination from "react-js-pagination"; function App() { // current page const [currentPage, setCurrentPage] = useState(1); // total records per page to display const recordPerPage = 10; // total number of the records const totalRecords = 850; // range of pages in paginator const pageRange = 10; // handle change event const handlePageChange = pageNumber => { setCurrentPage(pageNumber); // call API to get data based on pageNumber } return ( <div className="App"> <h3>Pagination in ReactJS - <a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></h3> <div className="mt-5 mb-3"> <b>Current Page:</b><span className="ml-2">{currentPage}</span> </div> <Pagination itemClass="page-item" // add it for bootstrap 4 linkClass="page-link" // add it for bootstrap 4 activePage={currentPage} itemsCountPerPage={recordPerPage} totalItemsCount={totalRecords} pageRangeDisplayed={pageRange} onChange={handlePageChange} /> </div> ); } export default App; |
Run the project and check output.
That’s it for today.
Thank you for reading. Happy Coding!
Can you Make A video On pagination with Search and filter by in react using hooks in react ,Custom
Sure Aman, We will do it.
Subscribe us for weekly updates or like and follow us for regular updates.
This is a nice place that has been helping me.
Good evening, Please can you make a video tutorial on how to use checkbox and Radio button with event handle that once a user clicked on either the checkbox or Radio button, the action can allow the user to edit, delete and view record and by the time the user unchecked, those operations can’t be thank you.
Sure, will do it. Please stay in touch.
Thanks