How to add buttons edit / delete to mat-table

Question

I wanna have two mat-button in my column "action" one Edit and one Delete.

There is my table

 <table mat-table
       [dataSource]="dataSource" multiTemplateDataRows
       class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let aliasesData"> {{aliasesData[column]}} </td>
  </ng-container>

There are columnsToDisplay

columnsToDisplay = ['id', 'domain_id', 'source', 'action'];

I want to have under Action column in every row button to edit and delete.

What the problem are U facing? It is very simple to add buttons here. — Mohit Saxena, Jul 16 '19 at 10:51
the comments of https://stackoverflow.com/questions/57000594/how-to-create-form-arrays-inside-the-angular-material-table/57004434#57004434, and https://stackoverflow.com/questions/56562871/angular-6-html-table-create-dynamic-columns-and-rows/56664523#56664523 — Eliseo, Jul 16 '19 at 11:47

score 2 · Answer 1 · answered Apr 16 '20 at 14:25

<table mat-table [dataSource]="tableData" class="mat-elevation-z8">
        <ng-container *ngFor="let col of tab.table_columns" [matColumnDef]="col.name">
            <ng-container *ngIf="col.name !== 'action' ">
                <th mat-header-cell *matHeaderCellDef> {{ col.title }} </th>
                <td mat-cell *matCellDef="let element"> {{ element[col.name] }}</td>
            </ng-container>
            <ng-container *ngIf="col.name === 'action' ">
                <th mat-header-cell *matHeaderCellDef> {{ col.title }} </th>
                <td mat-cell *matCellDef="let element"><button>View Details</button></td>
            </ng-container>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
    </table>

score 0 · Answer 2 · answered Jul 16 '19 at 12:12

I have a solution but it is not perfect.

<table mat-table [dataSource]="dataSource"
    multiTemplateDataRows class="mat-elevation-z8">
    <ng-container matColumnDef="{{column}}"
        *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef>
      {{column !== 'action' ? column : ''}}
    </th>
  <ng-container *ngIf="column !== 'action'">
    <td mat-cell *matCellDef="let aliasesData">
       <span>{{aliasesData[column]}}</span>
    </td>
    </ng-container>
  <ng-container *ngIf="column === 'action'">
    <td mat-cell *matCellDef="let aliasesData">
       <span>
         <button>Edit</button>
         <button>Delete</button>
       </span>
    </td>
  </ng-container>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

You can have a ngIf binding to check for the column action and show buttons only for it alone.

Or Have 2 column display arrays

columnsToDisplay = ['id', 'domain_id', 'source'];

columnsForConfig = ['id', 'domain_id', 'source', 'action'];

and use one for rendering and the other for the configuration at the bottom and have actions as a separate section after the ngFor binding.

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
    <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
        <th mat-header-cell *matHeaderCellDef>
            {{column}}
        </th>
        <td mat-cell *matCellDef="let aliasesData">
            <span>{{aliasesData[column]}}</span>
        </td>
    </ng-container>
    <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef>
            actions
        </th>
        <td mat-cell *matCellDef="let aliasesData">
            <button>Edit</button>
            <button>Delete</button>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnsForConfig"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsForConfig;"></tr>
</table>

How to add buttons edit / delete to mat-table

2 Answers2