<div class="container">
  <div class="loading-shade"
    *ngIf="isLoadingResults">
  <mat-spinner *ngIf="isLoadingResults"></mat-spinner>

 </div>

 <div class="table-container">
   <mat-form-field  color="accent">
     <input matInput (keyup)="applyFilter($event.target.value)"
    placeholder="Filter">
   </mat-form-field>

   <table mat-table [dataSource]="dataSource" class="example-table"
        matSort matSortActive="itemId" matSortDirection="asc"
        matSortDisableClear>

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

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

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

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

      <!-- inStock Column -->
     <ng-container matColumnDef="inStock">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Stock</th>
        <td mat-cell *matCellDef="let row" [ngStyle]="{ 'color':
         (row.inStock ? 'green' : 'red') }">
      <mat-icon>{{row.inStock ? 'check' : 'error'}}</mat-icon>
       </td>
     </ng-container>

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

      <mat-paginator class="  mat-elevation-z8" [length]="resultsLength"
        showFirstLastButtons></mat-paginator>
       </div>