Выберите столбцы для экспорта в материале Angular

У меня есть проект в материалах Angular, в котором я использую matTableExporter модуль.

Я хочу экспортировать данные из таблицы в файл xlsx. В таблице 3 столбца: ID, Имя и действия (отвечает за редактирование или удаление).

Я хочу экспортировать только столбцы идентификатора и имени, но когда я экспортирую таблицу, она показывает мне все столбцы, как я могу выбрать, какие столбцы экспортировать?

Это мое component.html:

      <div class="title">Customers</div>
<mat-divider></mat-divider>

<div fxLayout="column" fxLayoutGap="10px" class="m-3">
  <mat-card class="mat-elevation-z8">
  
    <div>
      <button mat-raised-button
        (click)="exporter.exportTable('xlsx')">Export excel
      </button>
    </div>
    
    <mat-table matTableExporter [dataSource]="clients" #exporter="matTableExporter">
    
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
        <mat-cell *matCellDef="let clients"> {{clients.id}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let clients; let i = index">
          <mat-form-field floatLabel="never" [appearance]="editIndex != i ? 'none' : 'legacy'">
            <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" [readonly]="editIndex!=i">
          </mat-form-field>
        </mat-cell>
      </ng-container>
      </ng-container>
      
      <ng-container matColumnDef="act">
        <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
        <mat-cell *matCellDef="let element
          <button mat-icon-button matTooltip="Edit" (click)="edit(element)">
            <mat-icon class="icon_edit_button">edit</mat-icon>
          </button>
          <button *ngIf="editIndex != i" mat-icon-button matTooltip="Delete" (click)="delete(element)">
            <mat-icon>delete_forever</mat-icon>
          </button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let col; columns: displayedColumns;"></mat-row>

    </mat-table>
    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  </mat-card>
</div>

1 ответ

https://www.npmjs.com/package/mat-table-exporter

Вы должны использовать Input () hiddenColumns

(Необязательно) Индексы столбцов, которые не нужны в выходном файле

          <mat-table matTableExporter [hiddenColumns]="[2]" [dataSource]="clients" #exporter="matTableExporter">
Другие вопросы по тегам