Ag Grid Server Side Pagination

After digging ag-grid Library for the whole day , I finally found the solution.

First Lets include the following options in our GridOptions;

GridOptions :

  gridOptions: GridOptions = {
    pagination: true,
    rowModelType: 'infinite',
    cacheBlockSize: 20, // you can have your custom page size
    paginationPageSize: 20 //pagesize
  };

GridReady CallBack

After the Grid is ready, Set a datasource e.g

onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridApi.setDatasource(this.dataSource) // replace dataSource with your datasource
  } 

Data Source Object : dataSource object is called by ag-grid when you go to next page and thus fetches data.

getRows functions provides you with start and end index of the particular page.

params.successCallback : It takes two arguments, first the data related to page and second is totalRecords. Ag-grid uses the second parameter to decide total pages.

dataSource: IDatasource = {
    getRows: (params: IGetRowsParams) => {

      // Use startRow and endRow for sending pagination to Backend
      // params.startRow : Start Page
      // params.endRow : End Page

      //replace this.apiService with your Backend Call that returns an Observable
      this.apiService().subscribe(response => {

        params.successCallback(
          response.data, response.totalRecords
        );

      })
    }
  }

Example Api Service : This is an example api service that i have used

apiService() {
    return this.httpclient.get(')
  }

I have uploaded this example on GitHub.

ag-grid (version 10 onwards) doesn't support server side pagination. If you want to implement server side pagination, you can use pagination with infinite scrolling