how to make serverSide pagination with grouping values in angular's ag-grid

I have datas i want to show with pagination. But the values must be grouped according to my API's response field. Besides this, we must call API's with page and size parameters each time we want to get values of the given page. This example of ag grid show the pagination with Grouped values but all the datas has been loaded then paginated to the screen. I don't have example an example of pagination in which we can load data with parameters then group them.

Here is what i did so far :

`<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[autoGroupColumnDef]="autoGroupColumnDef"
[rowModelType]="rowModelType"
[cacheBlockSize]="cacheBlockSize"
[pagination]="serverSide"
[paginationAutoPageSize]="true"
[paginateChildRows]="true"
[suppressAggFuncInHeader]="true"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/> `


and the column Definition :

columnDefs: ColDef[] = [
{ field: "country", rowGroup: true, hide: true },
{ field: "athlete" },
{ field: "gold", aggFunc: "sum" },
{ field: "silver", aggFunc: "sum" },
{ field: "bronze", aggFunc: "sum" },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
autoGroupColumnDef: ColDef = {
flex: 1,
minWidth: 180,
};
rowModelType: RowModelType = "serverSide";
cacheBlockSize = 100;
rowData!: IOlympicData[];

Continue reading...