Server side pagination with React DataTable
Today we will show you how to implement server side pagination with React DataTable. In the previous article, we have explained about the client side pagination with DataTable in React.
For the demonstration, we’ll use the REQ | RES fake API to get the data for the table records.
Steps to implement server side pagination
1. Implement the datatable in React
Let’s implement the datatable in react with pagination. We will use react-data-table-component npm package for datatable and implement client side pagination. Refer to the below article for more information.
Datatable with pagination in React
2. Add axios for API call
Let’s install axios package for API call. You can use the window.fetch as an alternative way to manage the API call. Refer to the following article for step by step instruction.
Use following code to call REQ | RES API and manage the user data in state variables using React Hooks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const [users, setUsers] = useState({}); const [page, setPage] = useState(1); const countPerPage = 3; const getUserList = () => { axios.get(`https://reqres.in/api/users?page=${page}&per_page=${countPerPage}&delay=1`).then(res => { setUsers(res.data); }).catch(err => { setUsers({}); }); } useEffect(() => { getUserList(); }, [page]); |
3. Add server side pagination
To add the server side pagination, we have to slightly update the client side pagination attributes.
- pagination & paginationServer – Set the both attributes to enable the pagination for server pagination.
- paginationPerPage – The
paginationPerPageattribute is used to display the number of the rows per page. - paginationTotalRows – To set the total count of the user list.
- paginationComponentOptions – It’s used to override the options for the built in pagination component. To hide the rows per page dropdown, we will set the
noRowsPerPagetotrue. - onChangePage – To handle the onChange event of the pagination.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <DataTable title="Employees" columns={columns} data={users.data} highlightOnHover pagination paginationServer paginationTotalRows={users.total} paginationPerPage={countPerPage} paginationComponentOptions={{ noRowsPerPage: true }} onChangePage={page => setPage(page)} /> |
4. Output
Let’s combine all code together and see how it works in the browser.
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | import React, { useState, useEffect } from 'react'; import DataTable from 'react-data-table-component'; import axios from 'axios'; const columns = [ { name: 'Avatar', cell: row => <img height="30px" width="30px" alt={row.first_name} src={row.avatar} />, }, { name: 'First Name', selector: 'first_name', }, { name: 'Last Name', selector: 'last_name', }, { name: 'Email', selector: 'email', } ]; function App() { const [users, setUsers] = useState({}); const [page, setPage] = useState(1); const countPerPage = 3; const getUserList = () => { axios.get(`https://reqres.in/api/users?page=${page}&per_page=${countPerPage}&delay=1`).then(res => { setUsers(res.data); }).catch(err => { setUsers({}); }); } useEffect(() => { getUserList(); }, [page]); return ( <div className="App"> <h3>Server side pagination in DataTable - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <DataTable title="Employees" columns={columns} data={users.data} highlightOnHover pagination paginationServer paginationTotalRows={users.total} paginationPerPage={countPerPage} paginationComponentOptions={{ noRowsPerPage: true }} onChangePage={page => setPage(page)} /> </div> ); } export default App; |
That’s it for today.
Thank you for reading. Happy Coding..!!
