Datatable with pagination in React
In this article, we will show you how to implement datatable with pagination in React. In the previous article, we have explained about the basic integration of the datatable in ReactJS.
We will create a demo to integrate the pagination at the client side only. Also look into the server side pagination in the upcoming article.
Steps to integrate pagination in datatable
1. Implement datatable in React
First, we have to implement the datatable in the react application. Basic integration is enough for the startup. Refer to the following link for step by step explanation.
How to implement DataTable in React
2. Add pagination component
To add the pagination, we must have a pagination attribute to the datatable component.
Here we will use a few attributes for pagination.
- paginationPerPage – This attribute is used to display the number of rows per page.
- paginationRowsPerPageOptions – The selection options to display records per page.
- paginationComponentOptions – It’s used to override the options for the built in pagination component such as
rowsPerPageText,rangeSeparatorTextand many more.
Check out more props for pagination.
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 46 47 48 | import React from 'react'; import DataTable from 'react-data-table-component'; import data from './data.json'; const columns = [ { name: 'Name', selector: 'name', sortable: true, }, { name: 'Phone', selector: 'phone', sortable: true, }, { name: 'Email', selector: 'email', sortable: true, }, { name: 'DOB', selector: 'dob', }, ]; function App() { return ( <div className="App"> <h3>Pagination in DataTable - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <DataTable title="Employees" columns={columns} data={data} highlightOnHover pagination paginationPerPage={5} paginationRowsPerPageOptions={[5, 15, 25, 50]} paginationComponentOptions={{ rowsPerPageText: 'Records per page:', rangeSeparatorText: 'out of', }} /> </div> ); } export default App; |
3. Output
Run the project and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
