Задать вопрос
@prolina

Добавление кастомного столбца в Angular Material таблицу?

В моем проекте много таблиц и я хочу сделать 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>;
  • Вопрос задан
  • 163 просмотра
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы