Search code examples
javascriptreactjsangulartypescriptag-grid

How to retrieve the current number of rows to the end row count in AG Grid


In Ag-Grid pagination, it provides the total row count and the row number, for example in the image below you can see 101 to 200 of 8,618. Where 8618 is the total row count which can be retrieved from gridApi.paginationGetRowCount(). But which parameter do I use to get the 101 to 200 count? I am unable to find it in the grid api.

enter image description here


Solution

  • By getting these info:

    , you can calculate the first item no. and last item no. for the selected page.

    For my use case, I am trying to calculate those values when the page is changed via (paginationChanged) event.

    <ag-grid-angular
      ...
      (paginationChanged)="onPaginationChanged($event)"
    ></ag-grid-angular>
    

    For firstItemNoForCurrentPage, you need to get the least value between currentPageIndex * pageSize + 1 and totalRowCount. This is aimed at handling when there is no record.

    For lastItemNoForCurrentPage, you need to get the least value between currentPageIndex * pageSize + pageSize and totalRowCount. This is aimed at handling when the current page doesn't contain the full number of items as pageSize.

    onPaginationChanged = (event: PaginationChangedEvent<IOlympicData>) => {
      if (!this.gridApi) return;
    
      // Get current page - 0-index based
      let currentPageIndex = this.gridApi.paginationGetCurrentPage();
    
      // Get total count
      let totalRowCount = this.gridApi.paginationGetRowCount();
    
      // Get page size
      let pageSize = this.gridApi.paginationGetPageSize();
    
      let firstItemNoForCurrentPage = Math.min(
        currentPageIndex * pageSize + 1,
        totalRowCount
      );
    
      let lastItemNoForCurrentPage = Math.min(
        currentPageIndex * pageSize + pageSize,
        totalRowCount
      );
    
      console.log('firstItemNoForCurrentPage:', firstItemNoForCurrentPage);
      console.log('lastItemNoForCurrentPage:', lastItemNoForCurrentPage);
    };
    

    Demo @ StackBlitz