Toggle pagination in ag-grid

Question

Is there a way to dynamically toggle pagination in ag-grid? The API doesn't seem to explicitly support it. What's the best workaround?

Answer 1

As far as I know there is not nativly something available. But the best workaround would be to set the pagination attribute in the gridOptions and then have the entire table re-render. In Angular this would looks something like this: https://plnkr.co/edit/aRPG3X6sTeuKcqj1?open=app%2Fapp.component.ts

For the template:

  <button (click)="togglePagination()">Toggle Pagination</button>
  <ng-container #container >
  </ng-container>
  <ng-template #table>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      class="ag-theme-alpine"
      [columnDefs]="columnDefs"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [defaultColDef]="defaultColDef"
      [suppressRowClickSelection]="true"
      [groupSelectsChildren]="true"
      [rowSelection]="rowSelection"
      [rowGroupPanelShow]="rowGroupPanelShow"
      [pivotPanelShow]="pivotPanelShow"
      [enableRangeSelection]="true"
      [rowData]="rowData"
      [gridOptions]="gridOptions"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  </ng-template>

and the toggle function is doing the redraw

  public gridOptions: GridOptions = {
    pagination: true,
  }
  public togglePagination() {
    this.gridOptions = {pagination: !this.gridOptions.pagination};
    this.outletRef.clear();
    this.outletRef.createEmbeddedView(this.contentRef);
  }

You didn't specify if you use a framework or the native JS. But the redraw approach works in every framework and also natively just with a different syntax