How to customise ag-grid pagination

user_9353890 0
Viewed 2184

Is it possible to customize ag-grid pagination for angular. Attached custom pagination image for reference.

enter image description here

<ag-grid-angular id="myGrid" style="width: 500px; height: 500px;" class="ag-theme-alpine"
 [rowData]="gridOptions.rowData"
    [columnDefs]="gridOptions.columnDefs" [pagination]="true"  [paginationPageSize]="paginationPageSize"
    (gridReady)="onGridReady($event)"  (cellClicked)="onCellClicked($event)"
    [defaultColDef]="defaultColDef" 
    [frameworkComponents]="frameworkComponents" [allowContextMenuWithControlKey]="true"
    [getContextMenuItems]="getContextMenuItems" >
</ag-grid-angular>


 onPageSizeChanged(event: any) {
    var value = event.target.value;
    this.gridApi.paginationSetPageSize(Number(value));
  }
ag-grid pagination
1 Answers

To create a customised pagination panel, you have to do the following two things:

  1. Set suppressPaginationPanel=true to tell the grid to not show the default controls for pagination, as shown in the documentation

  2. Create a Custom Status Bar Panel to design your pagination panel as per your requirements. Note that this is an enterprise feature, so if you have a AG Grid license, you could contact the team via Zendesk for further support on this.

user_131290180
Related