32 lines
1.6 KiB
HTML
32 lines
1.6 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="Folders" multiTemplateDataRows>
|
|
<ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
|
|
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
|
|
<td mat-cell *matCellDef="let folder"> {{folder[column]}} </td>
|
|
</ng-container>
|
|
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
|
|
<ng-container matColumnDef="expandedDetail">
|
|
<td mat-cell *matCellDef="let folder" [attr.colspan]="displayedColumns.length">
|
|
<div class="table-detail" [@detailExpand]="folder == expandedFolder ? 'expanded' : 'collapsed'">
|
|
<div class="detail-items">
|
|
<span>Shared with: </span>
|
|
<span class="item-name" *ngFor="let device of folder.devices">{{device.name}}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let folder; columns: displayedColumns;" class="table-row"
|
|
[class.expanded-row]="expandedFolder === folder"
|
|
(click)="expandedFolder = expandedFolder === folder ? null : folder">
|
|
</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> |