How to display all rows in AgGrid paginationPageSizeSelector?

Question

code

             gridOptions = {
                 pagination: true,
                 paginationPageSize: 10,
                 paginationPageSizeSelector: [10,20,30]
                 etc....
                }  

Firstly in AgGrid Options

paginationPageSizeSelector = [10,20,50] will be there Question how to add all to it like this [10, 20, 50, All] and define pageSize of ALL as total rows or Secondly how to display a custom pagenationPageSizeSelector like this paginationPageSizeSelector = ['10', '20', '1000 (slow)', 'All')]

Note: Please provide answers related to AG Grid only

Answer 1

I have created custom pagination in ag-grid in angular like

   <ng-select [clearable]="false" [items]="numberList" bindLabel="value" [(ngModel)]="selectedOption"
            class="customPagination pagination-icon" (change)="onPageSizeChanged($event)" [searchable]="false">
        </ng-select>

TS

 numberList = [
    { id: 1, value: '10' },
    { id: 2, value: '25' },
    { id: 3, value: '50' },
    { id: 4, value: '100' },
    // { id: 5, value: 'All' }
  ];
     onPageSizeChanged(newValue: any): void {
        this.pageSize = newValue.value;
        this.selectedOption = newValue;
        newValue.value == 'All' ? this.params.onPageSizeChanged(this.totalCount) : this.params.onPageSizeChanged(newValue.value);
      }

now

async onPageSizeChanged(newValue: any) {
    this.pageSize = Number(newValue);
    this.isClientSide = this.gridData?.length == Number(newValue) ? false : true;
    delayedFunctionCall(this.changePageSizeForAll, 0, this, newValue);
  }

that function add in aggrid.component.ts file

Answer 2

Update one way is we can have a state variable and manipulate it accordingly with table rows when tabledata loads. but this is not efficient method.

gridOptions = {
       pagination: true,
       paginationPageSize: 10,
       paginationPageSizeSelector: this.pageSizes,
     }