Implement client side pagination in React AG Grid
Today we’ll show you how to implement client side pagination in React AG Grid.
Adding client side pagination in AG Grid is very easy. We will use the previously implemented article where we have loaded data from the API in React AG Grid. In addition, we need to use the pagination=true property.
You may also check the several articles on Table.
Demo Application
Steps to implement client side pagination in React AG Grid
1. Load data from the API in React AG Grid
First of all, we have to implement the React AG Grid and load data from the API. Check the following article for more information.
Load data from the API in React AG Grid
2. Add client side pagination
Here, we have to simply add the pagination property to enable the client side pagination.
We have two different options to manage the pagination.
paginationAutoPageSize– If you setpaginationAutoPageSize=truethe grid will automatically show as many rows in each page as it can fit.12345678<AgGridReact......pagination={true}paginationAutoPageSize={true}>......</AgGridReact>paginationPageSize– Using this attribute, we can set the size of the pagination.12345678<AgGridReact......pagination={true}paginationPageSize={3}>......</AgGridReact>
In the following example, we have set the auto page size in a previously implemented grid.
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 | import { 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 [rowData, setRowData] = useState([]); useEffect(() => { fetch('https://reqres.in/api/users?per_page=12') .then(res => res.json()) .then(result => setRowData(result.data)); }, []); const avatarFormatter = ({ value }) => { return <img src={value} width="50px" height="50px" /> } return ( <div className="App"> <h2>Client 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} paginationAutoPageSize={true} defaultColDef={{ flex: 1 }} rowHeight={60} rowData={rowData}> <AgGridColumn field="first_name" headerName="First Name" sortable={true} filter={true} cellClass="vertical-middle" /> <AgGridColumn field="last_name" headerName="Last Name" sortable={true} filter={true} cellClass="vertical-middle" /> <AgGridColumn field="email" headerName="Email" sortable={true} filter={true} cellClass="vertical-middle" /> <AgGridColumn field="avatar" headerName="Avatar" sortable={true} filter={true} cellRendererFramework={avatarFormatter} cellClass="vertical-middle" /> </AgGridReact> </div> </div> ); } export default App; |
We can also customize the pagination controls. Refer to this link for more information.
3. Output
Run the application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
