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

Output - Implement client side pagination in React AG Grid - Clue Mediator

Steps to implement client side pagination in React AG Grid

Load data from the API in React AG Grid
Add client side pagination
Output

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 set `paginationAutoPageSize=true` the grid will automatically show as many rows in each page as it can fit.

<aggridreact ...="" pagination={true} paginationautopagesize={true}>
  ...
  ...
</aggridreact>

`paginationPageSize` - Using this attribute, we can set the size of the pagination.

<aggridreact ...="" pagination={true} paginationpagesize={3}>
  ...
  ...
</aggridreact>

In the following example, we have set the auto page size in a previously implemented grid.

App.js

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 class="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 class="ag-theme-alpine ag-style">
        <aggridreact 1="" pagination={true} paginationautopagesize={true} defaultcoldef={{ flex: }} 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">
        </aggridcolumn></aggridcolumn></aggridcolumn></aggridcolumn></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..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project