<table mat-table class="mat-elevation-z8" [dataSource]="devices">
      <ng-container matColumnDef="emptyColumn">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>
        <mat-cell class="align-top" *matCellDef></mat-cell>
      </ng-container>

      <ng-container matColumnDef="icon">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>
        <mat-cell class="align-top" *matCellDef> <mat-icon>pets</mat-icon> </mat-cell>
      </ng-container>

      <ng-container matColumnDef="deviceId">
        <mat-header-cell *matHeaderCellDef translate>ID</mat-header-cell>
        <mat-cell class="align-top" *matCellDef="let element"> {{element.deviceId}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="status">
        <mat-header-cell *matHeaderCellDef translate>Status</mat-header-cell>
        <mat-cell class="align-top" *matCellDef="let element">
          <i class="material-icons status-circle {{element.status == 'ACTIVE' ? 'connected-circle' : 'disconnected-circle'}}">lens</i>
          <span translate>{{element.status}}</span>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="type">
        <mat-header-cell *matHeaderCellDef translate>Type</mat-header-cell>
        <mat-cell class="align-top" *matCellDef="let element"> Drill</mat-cell>
      </ng-container>

      <ng-container matColumnDef="tags">
        <mat-header-cell *matHeaderCellDef translate>Tags</mat-header-cell>
        <mat-cell class="align-top" *matCellDef="let element">

          <span><tags *ngFor="let tag of tags.get(element.deviceId)"
                tagName="{{tag.group + ':' + tag.name}}"
                tagColor="{{tag.color}}">
          </tags></span>
        </mat-cell>
      </ng-container>
    </tbody>

    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
    <mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>
  </table>