<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>