table.component.html

<div class="table" *ngIf="dataSource.length > 0">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

        <!-- Agent -->
        <ng-container matColumnDef="agent">
            <th mat-header-cell *matHeaderCellDef>
                <mat-icon aria-hidden="false" aria-label="Agent">people</mat-icon> Agent
            </th>
            <td mat-cell *matCellDef="let element"><span [ngStyle]="{'color': element.color}">⬤</span> {{element.id}} </td>
        </ng-container>

        <!-- Type --> 
        <ng-container matColumnDef="type">
            <th mat-header-cell *matHeaderCellDef>
                <mat-icon aria-hidden="false" aria-label="Type">style</mat-icon> Type
            </th>
            <td mat-cell *matCellDef="let element"> {{element.type}} </td>
        </ng-container>

        <!-- Time -->
        <ng-container matColumnDef="time">
            <th mat-header-cell *matHeaderCellDef>
                <mat-icon aria-hidden="false" aria-label="Time">access_time</mat-icon> Time
            </th>
            <td mat-cell *matCellDef="let element"> {{element.lastPosUpdate | date:"h:mm:ss" }} </td>
        </ng-container>

        <!-- Zone -->
        <ng-container matColumnDef="zone">
            <th mat-header-cell *matHeaderCellDef>
                <mat-icon aria-hidden="false" aria-label="Zone">hive</mat-icon> Zone
            </th>
            <td mat-cell *matCellDef="let element"> 
                <mat-chip-list>
                    <mat-chip *ngFor="let zone of element.zoneDescriptors"> {{ zone.zoneId }} </mat-chip> 
                </mat-chip-list> 
            </td>
        </ng-container>

        <!-- Position -->
        <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef>
                <mat-icon aria-hidden="false" aria-label="Position">room</mat-icon> Position
            </th>
            <td mat-cell *matCellDef="let element">
                <span *ngFor="let dim of (element.position.point | keyvalue)">
                    {{dim.key}}: {{dim.value}} <br>
                </span>
                <span *ngIf="element?.extractedAttributes">
                    theta: {{element?.extractedAttributes?.theta}}
                </span>
            </td>
        </ng-container>

        <!-- Battery -->
        <ng-container matColumnDef="battery">
            <th mat-header-cell *matHeaderCellDef>
                <mat-icon aria-hidden="false" aria-label="battery">battery_5_bar</mat-icon> <br> Battery 
            </th>
            <td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.batteryChargeLevel}}%</td>
        </ng-container>

        <!-- Items -->
        <ng-container matColumnDef="loadedItems">
            <th mat-header-cell *matHeaderCellDef>
                <mat-icon aria-hidden="false" aria-label="items">feed</mat-icon> Items
            </th>
            <td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.loadedItems}}</td>
        </ng-container>

        <!-- Errors -->
        <ng-container matColumnDef="errors">
            <th mat-header-cell *matHeaderCellDef>
                <mat-icon aria-hidden="false" aria-label="errors">error</mat-icon> Errors
            </th>
            <td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.errors}}</td>
        </ng-container>

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

    </table>
</div>