Assignments Detail Table - Copy this Angular, Css Component to your project

<div class="container-flex"> <mat-toolbar style="padding-top: 10px"> <mat-toolbar-row> <mat-form-field> <mat-label>Device/SIM</mat-label> <mat-select (selectionChange)="selectionChanged()" [(ngModel)]="assegnazioneService.selectedDeviceSim"> <mat-option value="device" selected>Device</mat-option> <mat-option value="sim">SIM</mat-option> <mat-option value="deviceSim">Entrambi</mat-option> </mat-select> </mat-form-field> <mat-form-field style="margin-left: 10rem"> <mat-label>Dipendenti/Reparti</mat-label> <mat-select (selectionChange)="selectionChanged()" [(ngModel)]="assegnazioneService.selectedDipendenteReparto"> <mat-option value="dipendente" selected>Dipendenti</mat-option> <mat-option value="reparto">Reparti</mat-option> <mat-option value="dipendentereparto">Entrambi</mat-option> </mat-select> </mat-form-field> </mat-toolbar-row> <mat-toolbar-row> <button *ngIf="assegnazioneService.storic" mat-icon-button (click)="cambiaStorico()"> <mat-icon>filter_alt_off</mat-icon> </button> <button *ngIf="!assegnazioneService.storic" mat-icon-button (click)="cambiaStorico()"> <mat-icon>filter_alt</mat-icon> </button> <mat-form-field class="example-full-width"> <mat-label>Cerca Assegnazioni</mat-label> <input matInput [formControl]="searchControl" placeholder="Cerca per Imei/Iccid, Reparto/Dipendente, etc." /> </mat-form-field> <button mat-icon-button (click)="openDetail()"> <mat-icon>add</mat-icon> </button> <button mat-icon-button (click)="exportTableListAsExcel()"> <mat-icon>download</mat-icon> </button> </mat-toolbar-row> </mat-toolbar> <div class="mat-elevation-z8 full-page-table-container" #exportableExcelTable> <table mat-table [dataSource]="dataSource" matSort> <tr mat-header-row *matHeaderRowDef="displayedColumns$()"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns$()" [ngClass]="{ 'selected-row': selectedRow?.id === row.id }" (click)="selectAssignment(row)" style="cursor: pointer"></tr> <!-- Colonna Device --> <ng-container matColumnDef="sim"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Sim</th> <td mat-cell *matCellDef="let element"> {{ element?.assegnazione_sim?.sim?.numero_telefonico || element?.assegnazione_sim?.sim?.numero_telefonico }} </td> </ng-container> <ng-container matColumnDef="device"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Device</th> <td mat-cell *matCellDef="let element"> {{ element?.assegnazione_device?.device?.tipologia?.modello || element?.assegnazione_device?.device?.imei }} </td> </ng-container> <!-- Colonna Dipendente --> <ng-container matColumnDef="dipendente"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Dipendente</th> <td mat-cell *matCellDef="let element"> {{ element.assegnazione_sim?.dipendente?.samAccountName || element.assegnazione_device?.dipendente?.displayName }} </td> </ng-container> <ng-container matColumnDef="dipendente_nome"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Nome Dipendente</th> <td mat-cell *matCellDef="let element"> {{ element.assegnazione_sim?.dipendente?.displayName || element.assegnazione_device?.dipendente?.displayName }} </td> </ng-container> <!-- Colonna Reparto --> <ng-container matColumnDef="reparto"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Reparto</th> <td mat-cell *matCellDef="let element"> {{ element.assegnazione_sim?.reparto?.reP_COD_CC || element.assegnazione_device?.reparto?.reP_COD_CC }} </td> </ng-container> <!-- Colonna Data Inizio --> <ng-container matColumnDef="data_dal"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Dal</th> <td mat-cell *matCellDef="let element"> {{ element.assegnazione_sim?.data_dal || element.assegnazione_device?.data_dal | date : "dd/MM/yyyy" }} </td> </ng-container> <!-- Colonna Data Fine --> <ng-container matColumnDef="data_al"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Al</th> <td mat-cell *matCellDef="let element"> {{ element.assegnazione_sim?.data_al || element.assegnazione_device?.data_al | date : "dd/MM/yyyy" }} </td> </ng-container> <!-- Colonna Azioni --> <ng-container matColumnDef="actions" stickyEnd> <th mat-header-cell *matHeaderCellDef>Azioni</th> <td mat-cell *matCellDef="let row"> <button mat-icon-button (click)="openDetail(row)"> <mat-icon>mode_edit</mat-icon> </button> <button mat-icon-button (click)="getPDF('assignments', row)"> <mat-icon>picture_as_pdf</mat-icon> </button> <button mat-icon-button (click)="openConfirmDialog(row.id)"> <mat-icon>delete</mat-icon> </button> </td> </ng-container> </table> <mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator> </div> </div>