DiunaBI/Frontend/src/app/modules/layers/layers-list/layers-list.component.html

<div class="list-container mat-elevation-z8" (scroll)="onScroll($event)" style="overflow-y: scroll;">
    <div class="list-header">
      <mat-grid-list cols="10" rowHeight="60">
        <mat-grid-tile>
          <button mat-button routerLink="Edit/new">
            Add
          </button>
        </mat-grid-tile>
        <mat-grid-tile [colspan]="8">
          <mat-form-field class="searchListInput">
            <mat-label>Filter</mat-label>
            <input matInput (keyup)="applyFilter($event)">
          </mat-form-field>
        </mat-grid-tile>
      </mat-grid-list>
    </div>
  
    <mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" 
      matSort class="animate">
  
      <ng-container matColumnDef="number">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Number</mat-header-cell>
        <mat-cell *matCellDef="let item">{{item.number}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
        <mat-cell *matCellDef="let item">{{item.name}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="source">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Source</mat-header-cell>
        <mat-cell *matCellDef="let item">{{item.source}}</mat-cell>
      </ng-container>
  
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let item; columns: displayedColumns;" [routerLink]="['Detail/', item.id]"></mat-row>
    </mat-table>
  </div>