<mat-table #table [dataSource]="dataSource">
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="symbol">
        <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
      </ng-container>


<!-- ----------------- -->
<!-- The delete column -->
      <ng-container matColumnDef="delete">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>

<!-- the "strike-ignore" class will allow this cell to be visable over the strike -->
        <mat-cell *matCellDef="let element" class="strike-ignore">

<!-- You can do this differently, but the toBeDeleted property allows the button to
      switch between delete and undo icons. -->
          <button mat-raised-button [ngClass]="element.toBeDeleted ? 'sec-btn' : 'del-btn'" (click)="deleteElement(element)">
            <mat-icon class="btn-icon" [svgIcon]="element.toBeDeleted ? 'undo' : 'delete'"></mat-icon>
          </button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

<!-- I add the "strike" class to rows with the following JS that finds it by the element ID:
    const element = document.getElementById(item.id) as HTMLElement;
    element.classList.add('strike');                                          -->
      <mat-row [id]="element.id" *matRowDef="let element; let row; columns: displayedColumns;"></mat-row>
    </mat-table>