How to get the total pages in AG Grid

In this article, we’ll show you how to get the total pages in AG Grid if we have a pagination. This will be used for the both client side and server side pagination.

Refer to the following article to implement pagination

Here, we will add button to get the total pages from the AG Grid on button click event.

Demo Application

Output - How to get the total pages in AG Grid - Clue Mediator

Package Version

ag-grid-react

^25.2.0

ag-grid-community

^25.2.1

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 pages

Here, we will use the `gridApi.paginationGetTotalPages()` function to get the total pages on 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 totalPages = gridApi.paginationGetTotalPages();
    console.log('Total pages: ', totalPages);
  }

  // ...
  // ...

  return (
    <div class="App">
      <h2>Get the total pages in AG Grid - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h2>
      <button class="btn-action" onclick={handleBtnAction}>Get Total Pages</button>
      <div class="ag-theme-alpine ag-style">
        <aggridreact ...="" pagination={true} paginationpagesize={5} ongridready={onGridReady}>
          ...
          ...
        </aggridreact>
      </div>
    </div>
  );
}

export default App;

Here, we have added the total pages log in the console window.

4. Output

Run the React application and check the output in the browser.

Demo & Source Code

GitHub Repository StackBlitz Project