How to get the total number of rows in AG Grid

Today, we’ll show you how to get the toal number of rows in AG Grid. This will be used for the both client side and server side pagination.

Here, we will add button to get the total row count in the AG Grid on button click event.

Demo Application

Output - How to get the total number of rows in AG Grid - Clue Mediator
Output – How to get the total number of rows in AG Grid – Clue Mediator

Package Version

ag-grid-react
^25.2.0
ag-grid-community
^25.2.1

Step to get the total number of rows

  1. Add AG Grid in React component
  2. Get the Grid API
  3. Render the button to get the total row count
  4. Output

1. Add AG Grid in React component

Let’s create a react application using the create-react-app and implement AG Grid in React. Check the following article for more information.

How to implement AG Grid in React

2. Get the Grid API

In the next step, we need to fetch the Grid API to perform the action. Refer to the following article to get the Grid API & Column API.

How to get Grid API and Column API in AG Grid

3. Render the button to get the total row count

Here, we will use the gridApi.paginationGetRowCount() function to get the total number of rows from the paginated grid on a button click. Refer the following code for the more information.

Here, we have added the console log of the total number of rows.

4. Output

Run the React 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
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

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