syncthing/src/app/lists/folder-list/folder-list.component.html

<mat-form-field>
    <mat-label>Filter</mat-label>
    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium">
</mat-form-field>
<table mat-table class="full-width-table" matSort aria-label="Elements">
    <!-- Id Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
        <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <!-- Label Column -->
    <ng-container matColumnDef="label">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
        <td mat-cell *matCellDef="let row">{{row.label}}</td>
    </ng-container>

    <!-- Path Column -->
    <ng-container matColumnDef="path">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Path</th>
        <td mat-cell *matCellDef="let row">{{row.path}}</td>
    </ng-container>

    <!-- Status Column -->
    <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
        <td mat-cell *matCellDef="let row">{{row.state}}</td>
    </ng-container>

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

<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
    [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>