Two tables in different ma-tab exports the same data

[juan-dura]

I have two tables in two different mat-tab. The export button always export the data of the first table: [dataSource]="bodySummary"

How I can create two different exporters?

<div>
  <mat-tab-group mat-align-tabs="start">
    <mat-tab label="Body">
      <div>
        <table mat-table matTableExporter [dataSource]="bodySummary" #exporter="matTableExporter">

          <ng-container matColumnDef="project">
            <th mat-header-cell *matHeaderCellDef> Proyecto </th>
            <td mat-cell *matCellDef="let element"> {{element.project}} </td>
          </ng-container>

          <ng-container matColumnDef="country">
            <th mat-header-cell *matHeaderCellDef> country </th>
            <td mat-cell *matCellDef="let element"> {{element.country}} </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumnsBody"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumnsBody;"></tr>

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

    </mat-tab>
    <mat-tab label="Foot">
      <div>
        <table mat-table matTableExporter [dataSource]="footSummary" #exporter="matTableExporter">

        <ng-container matColumnDef="project">
          <th mat-header-cell *matHeaderCellDef> Proyecto </th>
          <td mat-cell *matCellDef="let element"> {{element.project}} </td>
        </ng-container>

        <ng-container matColumnDef="country">
          <th mat-header-cell *matHeaderCellDef> country </th>
          <td mat-cell *matCellDef="let element"> {{element.country}} </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumnsFoot"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumnsFoot;"></tr>

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

    </mat-tab>
  </mat-tab-group>
</div>

[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!