How to get the number of rows present on the current page in AG Grid

We’ll demonstrate the process to get the number of rows present on the current page in AG Grid. This will be used for the both client side and server side pagination.

Refer to the following article to implement pagination

• Implement client side pagination in React AG Grid
• Implement server side pagination in React AG Grid

Here, we will add button to get the number of rows present on the current page in AG Grid on button click event.

Demo Application

Output - How to get the number of rows present on the current page in AG Grid - Clue Mediator

Package Version

ag-grid-react

^25.2.0

ag-grid-community

^25.2.1

Steps to get the number of rows present on the current page

1. Add AG Grid in React component
2. Get the Grid API
3. Render the button to get the number of rows present on the page
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 number of rows present on the page

Here, we will use several pagination functions to retrieve information from a paginated grid at a button click. Refer the following code for the more information.

function App() {

  const [gridApi, setGridApi] = useState(null);

  const onGridReady = (e) => {
    setGridApi(e.api);
  }

  const handleBtnAction = () => {
    const currentPage = gridApi.paginationGetCurrentPage();
    const totalResults = gridApi.paginationGetRowCount();
    const pageSize = gridApi.paginationGetPageSize();
    const startResult = currentPage * pageSize + 1;
    const endResult = Math.min(startResult + pageSize - 1, totalResults);
    const currentPageRowCount = endResult - startResult + 1;

    console.log("Number of rows in this page:", currentPageRowCount);
  }

  // ...
  // ...

  return (
    <div class="App">
      <h2>Get the number of rows present on the current page in AG Grid - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h2>
      <button class="btn-action" onclick={handleBtnAction}>Get row count</button>
      <div class="ag-theme-alpine ag-style">
        <aggridreact ...="" pagination={true} paginationpagesize={5} ongridready={onGridReady}>
          ...
          ...
        </aggridreact>
      </div>
    </div>
  );
}

export default App;

You will get the result in the console window.

4. Output

Run the React application 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