31 lines
1.4 KiB
HTML
31 lines
1.4 KiB
HTML
<mat-form-field>
|
|
<mat-label>Filter</mat-label>
|
|
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date">
|
|
</mat-form-field>
|
|
<table mat-table class="full-width-table" matSort aria-label="Devices" multiTemplateDataRows>
|
|
<ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
|
|
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
|
|
<td mat-cell *matCellDef="let device"> {{device[column]}} </td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="expandedDetail">
|
|
<td mat-cell *matCellDef="let device" [attr.colspan]="displayedColumns.length">
|
|
<div class="table-detail" [@detailExpand]="device == expandedDevice ? 'expanded' : 'collapsed'">
|
|
<div class="detail-items">
|
|
<span>Folders: </span>
|
|
<span class="item-name" *ngFor="let folder of device.folders">{{folder.label | trim}}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let device; columns: displayedColumns;" class="table-row"
|
|
[class.expanded-row]="expandedDevice === device"
|
|
(click)="expandedDevice = expandedDevice === device ? null : device">
|
|
</tr>
|
|
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
|
|
</table>
|
|
|
|
<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="25"
|
|
[pageSizeOptions]="[25, 50, 100, 250]">
|
|
</mat-paginator> |