Export mat-table as excel without action button column

Question

Hi,

 

i have a mat-table like below

<button mat-mini-fab class="my-fab" (click)="exporter.exportTable('xlsx')">
<mat-icon>cloud_download</mat-icon>
</button>
<table mat-table [dataSource]="listData" matSort class="mat-elevation-z8" matTableExporter #exporter="matTableExporter">
<!-- GroupID Column -->
<ng-container matColumnDef="groupid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> GroupID </th>
<td mat-cell *matCellDef="let element"> {{element.GroupID}} </td>
</ng-container>
<!-- GroupName Column -->
<ng-container matColumnDef="groupname">
<th mat-header-cell *matHeaderCellDef mat-sort-header> GroupName </th>
<td mat-cell *matCellDef="let element"> {{element.GroupName}} </td>
</ng-container>
<!-- UserName Column -->
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef mat-sort-header> UserName </th>
<td mat-cell *matCellDef="let element"> {{element.UserName}} </td>
</ng-container>
<!-- Edit/Delete/View button -->
<ng-container matColumnDef="Action">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<div class="button-row">
<button mat-icon-button color="primary"
style="margin-right: 0px;margin-bottom: 0px;width: 30px;height: 30px; line-height: unset;"
(click)="onEdit(row, 'EDIT')" *ngIf="editbtnvisible">
<mat-icon style="font-size:20px;">edit_outline</mat-icon>
</button>
<button mat-icon-button color="warn"
style="margin-right: 0px;margin-bottom: 0px;width: 30px;height: 30px; line-height: unset;"
(click)="onDelete(row)" *ngIf="deletebtnvisible">
<mat-icon style="font-size:20px;">delete_outline</mat-icon>
</button>
<button mat-icon-button color="primary"
style="margin-right: 0px;margin-bottom: 0px;width: 30px;height: 30px; line-height: unset;"
(click)="onEdit(row.ApproverGroupID, 'VIEW')" *ngIf="viewbtnvisible">
<mat-icon style="font-size:20px;">search</mat-icon>
</button>
</div>
</td>
</ng-container>

<!-- <ng-container matColumnDef="Action">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<div class="button-row">
<button mat-icon-button (click)="onEdit(row.UserID, 'EDIT')" *ngIf="editbtnvisible">
<mat-icon>edit_outline</mat-icon>
</button>
<button mat-icon-button color="warn" (click)="onDelete(row.UserID)" *ngIf="deletebtnvisible">
<mat-icon>delete_outline</mat-icon>
</button>
<button mat-icon-button (click)="onEdit(row.UserID, 'VIEW')" *ngIf="viewbtnvisible">
<mat-icon>search</mat-icon>
</button>
</div>
</td>
</ng-container> -->
<ng-container matColumnDef="loading">
<th mat-footer-cell *matFooterCellDef colspan="6">
Loading Data...
</th>
</ng-container>
<ng-container matColumnDef="noData">
<th mat-footer-cell *matFooterCellDef colspan="6">
No data.
</th>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':listData!=null}"></tr>
<tr mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(listData!=null && listData.data.length==0)}"></tr>
</table>

Am using matTableExporter to export table data into excel. The data's are exporting into excel with extra action column and last row as 'LoadingData' and 'No Data'.

 

How to skip the action button column and last two row 'LoadingData' and 'No Data'

 

Please guide me

Thanks