How to export all data on ag grid angular even a filter is applied?

Question

I implemented ag-grid on a project and I want to export all data listed on ag-grid table.

Issue : If I apply a filter and export the csv from ag-grid, then the exported file contains just filtred data.

Wanted : Export all data even a filter is applied.

I searched on the official documentation on ag-grid and I didn't find anything that can helps me.

Thank you.

Template :

<div align="end">
  <button mat-stroked-button color="primary" (click)="onBtnExport()">TELECHARGER</button>
  <button mat-flat-button color="primary" (click)="onCreateProtocole()">CREER PROTOCOLE</button>
</div>
<div>
  <ag-grid-angular
    style="width: 100%; height: 500px"
    class="ag-theme-material ag-theme-rgo"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    rowSelection="multiple"
    [floatingFilter]="true"
    [pagination]="true"
    (firstDataRendered)="onFirstDataRendered($event)"
    (gridReady)="onGridReady($event)"
    (rowClicked)="onRowClicked($event)"
  >
  </ag-grid-angular>
</div>

TS

   columnDefs: ColDef[] = [
    { headerName: 'Libéllé protocole', field: 'libelleProtocole', filter: 'agTextColumnFilter', suppressMenu: true },
    { headerName: 'Nb FD Utilisatrices', field: 'nbFdUtilisatrices', filter: 'agTextColumnFilter', suppressMenu: true },
    { headerName: 'Date de création',
      field: 'dateCreationProtocole',
      filter: 'agDateColumnFilter',
      suppressMenu: true,
      valueGetter: (params) => this.datePipe.transform(params.data.dateCreationProtocole, 'dd/MM/yyyy')
    },
    { headerName: 'Date de modification', field: 'dateModificationProtocole', filter: 'agDateColumnFilter', suppressMenu: true,
      valueGetter: (params) => this.datePipe.transform(params.data.dateModificationProtocole, 'dd/MM/yyyy')},
    { headerName: 'Protocole invalide', field: 'protocoleInvalide', filter: 'agTextColumnFilter', suppressMenu: true,
      valueGetter(params) {
        return params.data.protocoleInvalide ? '-' : 'Invalide';
      },
    }
  ];
  rowData: any;
  defaultColDef: any;
  private gridApi: any;
  private gridColumnApi: any;

  constructor(private dialog: MatDialog,
              private protocoleService: ProtocoleService,
              @Inject(LOCALE_ID) private locale: string,
              private datePipe: DatePipe) {}

  ngOnInit(): void {
    this.defaultColDef = {
      flex: 1,
      minWidth: 150,
      filter: true,
      sortable: true,
      floatingFilter: true,
    };
  }
  onFirstDataRendered(params: any): void {
    params.api.sizeColumnsToFit();
  }

  onGridReady(params: any): void {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }

  onBtnExport(): void {
    const params = {
      fileName: "REMI_PROTOCOLES.csv"
    };
    this.gridApi.exportDataAsCsv(params)
  }

Answer 1

AG-Grid doesn't provide any API as of yet to export all the data even if a filter is applied.

This issue has already been reported on ag-grid's official GitHub repository.

Here is an ugly but working patch for this issue, You can try it until ag-grid support this functionality via an API method.