Two tables in different ma-tab exports the same data about ng-material-extensions

[EmrahSignorini]

Since I generate tables with an ngFor with multiple exporters i figured that maybe i could help you.

so first of all in your .ts file you need to add the following:
Since you have multiple exporters you can use @ViewChildren decorator to retrieve all the elements that have the #exporter declaration.
In other word in your .ts file you should have something like this:

extractors!: QueryList<any>;
@ViewChildren('exporter') set extractor(extractors: QueryList<any>) {
    this.extractors = extractors
  }

and then you should change your .html file as following:

From:

      <div>
        <button mat-raised-button (click)="exporter.exportTable('csv')">Csv</button>
      </div>

To, for the first table:
Pay attention to the 0 that means i want to use the first exporter

<table mat-table matTableExporter [dataSource]="bodySummary" #exporter="matTableExporter"> 
....
</table>
      <div>
        <button mat-raised-button (click)="extractors.toArray()[0].exportTable('csv')">Csv</button>
      </div>

Second table:
Since you need to use the second extractor then you need the second exporter which is on position 1

<table mat-table matTableExporter [dataSource]="footSummary" #exporter="matTableExporter"> 
....
</table>
      <div>
        <button mat-raised-button (click)="extractors.toArray()[1].exportTable('csv')">Csv</button>
      </div>

Hope that helps!