<br>
<div class="row">
  <div class="col">
    <mat-form-field appearance="outline" class="search-field">
      <mat-label>Name</mat-label>
      <input matInput [(ngModel)]="name" (ngModelChange)="nameUpdate.next($event)">
    </mat-form-field>
  </div>
  <div class="col">
    <mat-form-field appearance="outline" class="search-field">
      <mat-label>Type</mat-label>
      <mat-select (selectionChange)="loadList()" [(ngModel)]="type">
        <mat-option value="">All</mat-option>
        <mat-option [value]="LayerType.Import">Import</mat-option>
        <mat-option [value]="LayerType.Processed">Processed</mat-option>
        <mat-option [value]="LayerType.Administration">Administration</mat-option>
        <mat-option [value]="LayerType.Dictionary">Dictionary</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>
<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="number">
    <th mat-header-cell *matHeaderCellDef>Number</th>
    <td mat-cell *matCellDef="let element" [class.cancelled]="element.isCancelled">{{element.number}}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element" [class.cancelled]="element.isCancelled">{{element.name}}</td>
  </ng-container>

  <ng-container matColumnDef="type">
    <th mat-header-cell *matHeaderCellDef>Type</th>
    <td mat-cell *matCellDef="let element">{{LayerType[element.type]}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns, sticky: false"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['Detail/', row.id]"
    style="cursor: pointer" (contextmenu)="openInNewTab(row)"></tr>
</table>
<div (diunabiScrollEnd)="loadMore()"></div>