В моем проекте много таблиц и я хочу сделать shared компонент для отрисовки таблицы. Чаще всего колонки для таблицы будут соответствовать данным, получаемым с сервера, но бывает, что надо добавить отдельный столбец для удаления и редактирования. Как можно это сделать? Я пробовала следующим образом(но как тогда передать в столбец Actions кнопки edit и delete):
<fo-table [data]="data" [templateRef]="template" [displayedColumns]="displayedColumns">
<ng-template #template>
<button mat-icon-button color="warn">
<mat-icon>delete</mat-icon>
</button>
<button mat-icon-button color="primary">
<mat-icon>edit</mat-icon>
</button>
</ng-template>
</fo-table>
public data;
public displayedColumns;
constructor(
private readonly keywordService: KeywordService
) {
this.keywordService.getKeywordsList()
.subscribe(res => {
this.data = res;
this.displayedColumns = Object.keys(this.data[0]);
this.displayedColumns = [ ...this.displayedColumns, 'Actions']
})
}
fo-table:
<section class="d-flex justify-content-center align-items-center">
<table mat-table [dataSource]="tableData" class="mat-elevation-z8">
<ng-container *ngFor="let col of displayedColumns" [cdkColumnDef]="col">
<mat-header-cell *cdkHeaderCellDef> {{col}} </mat-header-cell>
<mat-cell *cdkCellDef="let row"> {{row[col]}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let person">
<ng-container *ngTemplateOutlet="templateRef"></ng-container>
</td>
<!-- <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>-->
<!-- <mat-cell *matCellDef>-->
<!-- <ng-template *ngTemplateOutlet="templateRef"></ng-template>-->
<!-- </mat-cell>-->
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</table>
</section>
@Input() public tableData;
@Input() public displayedColumns: string[];
@Input() templateRef: TemplateRef<any>;