<table class="table" mat-table [dataSource]="adapters">
  <ng-container matColumnDef="adapter_number">
    <th mat-header-cell *matHeaderCellDef>Adapter number</th>
    <td mat-cell *matCellDef="let element">Adapter {{ element.adapter_number }}</td>
  </ng-container>

  <ng-container matColumnDef="port_name">
    <th mat-header-cell *matHeaderCellDef>Port name</th>
    <td mat-cell *matCellDef="let element">Ethernet {{ element.adapter_number }}</td>
  </ng-container>

  <ng-container matColumnDef="adapter_type">
    <th mat-header-cell *matHeaderCellDef>Adapter type</th>
    <td mat-cell *matCellDef="let element; let i = index">
      <mat-select placeholder="Type" [(ngModel)]="element.adapter_type">
        <mat-option *ngFor="let type of networkTypes" [value]="type.value">
          {{ type.name }}
        </mat-option>
      </mat-select>
    </td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef>Actions</th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button matTooltip="Delete adapter" matTooltipClass="custom-tooltip" (click)="delete(element)">
        <mat-icon aria-label="Delete adapter">delete</mat-icon>
      </button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<button mat-button class="form-field" (click)="onAdd()">Add</button>
