Implement server side pagination in React AG Grid
Today we’ll show you how to implement server side pagination in React AG Grid.
In the previous article, we have implemented client side pagination using React AG Grid but now we will add server side pagination.
Checkout more articles on ReactJS
Demo Application
Steps to implement server side pagination using React AG Grid
- Add AG Grid and define columns
- Configure the pagination option
- Place an API with server side pagination
- Output
1. Add AG Grid and define columns
First of all, we will simply add the AG Grid by installing the ag-grid-community and ag-grid-react packages.
Check the following article to implement AG Grid with static data.
How to implement AG Grid in React
Use the following CSS file and React component without data binding for startup.
App.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .ag-style { height: 280px; width: 100%; } .vertical-middle { display: flex; align-items: center; } .vertical-middle img { display: block; border: 1px solid #ddd; border-radius: 3px; } |
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 | import React from 'react'; import { AgGridColumn, AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-alpine.css'; import './App.css'; function App() { const avatarFormatter = ({ value }) => { return <img src={value} width="50px" height="50px" /> } return ( <div className="App"> <h2>Server side pagination in the React AG Grid - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h2> <div className="ag-theme-alpine ag-style"> <AgGridReact defaultColDef={{ flex: 1 }} rowHeight={60} > <AgGridColumn field="first_name" headerName="First Name" cellClass="vertical-middle" /> <AgGridColumn field="last_name" headerName="Last Name" cellClass="vertical-middle" /> <AgGridColumn field="email" headerName="Email" cellClass="vertical-middle" /> <AgGridColumn field="avatar" headerName="Avatar" cellRendererFramework={avatarFormatter} cellClass="vertical-middle" /> </AgGridReact> </div> </div> ); } export default App; |
2. Configure the pagination option
Let’s configure the pagination option by adding the following properties in the grid. Here, we have set perPage = 3 to capture the 3 records per page.
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 | function App() { const perPage = 3; ... ... return ( ... ... <AgGridReact ... ... pagination={true} rowModelType={'infinite'} paginationPageSize={perPage} cacheBlockSize={perPage} > ... ... </AgGridReact> ... ... ); } export default App; |
3. Place an API with server side pagination
Now, we will use the onGridReady event callback to get the grid API and column API. Set the Datasource after the grid is initialised.
Here, we will use the getRows function to call an API with pagination parameters such as startRow, endRow, etc.
Look at the following code, where we have used the reqres.in fake API for pagination.
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 | function App() { const [gridApi, setGridApi] = useState(null); const perPage = 3; const onGridReady = (params) => { setGridApi(params.api); }; useEffect(() => { if (gridApi) { const dataSource = { getRows: (params) => { // Use startRow and endRow for sending pagination to Backend // params.startRow : Start Page // params.endRow : End Page const page = params.endRow / perPage; fetch(`https://reqres.in/api/users?per_page=${perPage}&page=${page}`) .then(resp => resp.json()) .then(res => { params.successCallback(res.data, res.total); }).catch(err => { params.successCallback([], 0); }); } } gridApi.setDatasource(dataSource); } }, [gridApi]); ... ... return ( <AgGridReact ... ... onGridReady={onGridReady} > ... ... </AgGridReact> ); } export default App; |
4. Output
Let’s pull all the code together and see how it looks.
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 64 65 66 67 | import React, { useEffect, useState } from 'react'; import { AgGridColumn, AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-alpine.css'; import './App.css'; function App() { const [gridApi, setGridApi] = useState(null); const perPage = 3; const onGridReady = (params) => { setGridApi(params.api); }; useEffect(() => { if (gridApi) { const dataSource = { getRows: (params) => { // Use startRow and endRow for sending pagination to Backend // params.startRow : Start Page // params.endRow : End Page const page = params.endRow / perPage; fetch(`https://reqres.in/api/users?per_page=${perPage}&page=${page}`) .then(resp => resp.json()) .then(res => { params.successCallback(res.data, res.total); }).catch(err => { params.successCallback([], 0); }); } } gridApi.setDatasource(dataSource); } }, [gridApi]); const avatarFormatter = ({ value }) => { return <img src={value} width="50px" height="50px" /> } return ( <div className="App"> <h2>Server side pagination in the React AG Grid - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h2> <div className="ag-theme-alpine ag-style"> <AgGridReact pagination={true} rowModelType={'infinite'} paginationPageSize={perPage} cacheBlockSize={perPage} onGridReady={onGridReady} rowHeight={60} defaultColDef={{ flex: 1 }} > <AgGridColumn field="first_name" headerName="First Name" cellClass="vertical-middle" /> <AgGridColumn field="last_name" headerName="Last Name" cellClass="vertical-middle" /> <AgGridColumn field="email" headerName="Email" cellClass="vertical-middle" /> <AgGridColumn field="avatar" headerName="Avatar" cellRendererFramework={avatarFormatter} cellClass="vertical-middle" /> </AgGridReact> </div> </div> ); } export default App; |
Run the react app and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
how we can add sorting and filtering in it
When you apply the sorting, you will get the information in getRows > params. So use that and invoke an API.