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.

Demo Application

Output - Implement server side pagination in React AG Grid - Clue Mediator
Output – Implement server side pagination in React AG Grid – Clue Mediator

Steps to implement server side pagination using React AG Grid

  1. Add AG Grid and define columns
  2. Configure the pagination option
  3. Place an API with server side pagination
  4. 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
App.js

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.

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.

4. Output

Let’s pull all the code together and see how it looks.

App.js

Run the react app and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

2 Responses

  1. bilal says:

    how we can add sorting and filtering in it

    • Clue Mediator says:

      When you apply the sorting, you will get the information in getRows > params. So use that and invoke an API.

Leave a Reply

Your email address will not be published. Required fields are marked *