<table class="table" [class.table-hover]="disabledHover" [class.table-striped]="stripe"
       [class.table-bordered]="border" *ngIf="!height">
  <thead>
  <tr>
    <th *ngFor="let column of columns">
      <div *ngIf="column.type === 'selection'">
        <mat-checkbox (change)="onCheckBoxAllTrigger($event)" [(ngModel)]="checked"></mat-checkbox>
      </div>
      <div *ngIf="column.type !== 'selection'">{{ column.title }}</div>
    </th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let row of data" (click)="onRowClickTrigger(row)">
    <td *ngFor="let column of columns">
      <div *ngIf="column.type === 'selection'">
        <mat-checkbox (change)="onCheckBoxTrigger($event, row)" [checked]="checked"></mat-checkbox>
      </div>
      <div *ngIf="column.type !== 'selection'">{{ row[column.key] }}</div>
    </td>
  </tr>
  </tbody>
</table>

<div class="fixed-table" [ngStyle]="{'height.px': height}" *ngIf="height">
  <div class="table-wrapper">
    <table class="table" [class.table-hover]="disabledHover" [class.table-striped]="stripe"
           [class.table-bordered]="border">
      <thead #fixedTopCell>
      <tr>
        <th *ngFor="let column of columns; let i= index">
          <div *ngIf="column.type === 'selection'">
            <mat-checkbox (change)="onCheckBoxAllTrigger($event)" [(ngModel)]="checked"></mat-checkbox>
          </div>
          {{ column?.title }}
          <div [ngStyle]="{'width.px':cells[i]?.width, 'height.px':cells[i]?.height}" class="fixed-table-heading"
               *ngIf="column.type !== 'selection'">{{ column.title }}
          </div>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let row of data" (click)="onRowClickTrigger(row)">
        <td *ngFor="let column of columns">
          <div *ngIf="column.type === 'selection'">
            <mat-checkbox (change)="onCheckBoxTrigger($event, row)" [checked]="checked"></mat-checkbox>
          </div>
          <div *ngIf="column.type !== 'selection'">{{ row[column.key] }}</div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

./table.component.scss

$table-header-font-weight: 400;
$table-header-font-color: #333;

$table-cell-padding: 16px;
$table-condensed-cell-padding: $table-cell-padding/2;

$table-bg: #fff;
$table-bg-accent: #f5f5f5;
$table-bg-hover: rgba(0, 0, 0, .12);
$table-bg-active: $table-bg-hover;
$table-border-color: #e0e0e0;
$table-grey-header-color: #FAFAFA;

.table {
  width: 100%;
  max-width: 100%;
  background-color: $table-bg;
  border-spacing: 0;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      transition: all .3s ease;
      > th,
      > td {
        text-align: left;
        padding: $table-cell-padding;
        vertical-align: middle;
        border-top: 0;
        transition: all .3s ease;
      }
    }
  }
  > thead > tr > th {
    font-weight: $table-header-font-weight;
    color: $table-header-font-color;
    vertical-align: bottom;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
  }
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: 0;
      }
    }
  }
  > tbody + tbody {
    border-top: 1px solid rgba(0, 0, 0, .12);
  }

  .table {
    background-color: $table-bg;
  }

  .no-border {
    border: 0;
  }
}

.table-condensed {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: $table-condensed-cell-padding;
      }
    }
  }
}

.table-bordered {

  > thead > tr > th,
  > thead > tr > td {

    &:first-child {
      border-left: 0;
    }
  }

  > tbody > tr > td {
    border-bottom: 1px solid $table-border-color;
    border-left: 1px solid $table-border-color;
    border-top: none;

    &:first-child {
      border-left: 0;
    }
  }

}

.table-striped {
  > tbody > tr:nth-child(even) {
    > td,
    > th {
      background-color: $table-bg-accent;
    }
  }
}

.table-hover {
  > tbody > tr:hover {
    > td {
      background-color: $table-bg-hover;
    }
  }
}

.table-hover-cell {
  > tbody > tr > td:hover {
    background-color: $table-bg-hover;
  }
}

.table-striped.table-mc-red > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-red > tbody > tr:nth-child(odd) > th {
  background-color: #fde0dc;
}

.table-hover.table-mc-red > tbody > tr:hover > td,
.table-hover.table-mc-red > tbody > tr:hover > th {
  background-color: #f9bdbb;
}

@media screen and (max-width: 767px) {
  .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td,
  .table-responsive-vertical .table-striped.table-mc-red > tbody > tr:nth-child(odd) {
    background-color: $table-bg;
  }
  .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td:nth-child(odd) {
    background-color: #fde0dc;
  }
  .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover > td,
  .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover {
    background-color: $table-bg;
  }
  .table-responsive-vertical .table-hover.table-mc-red > tbody > tr > td:hover {
    background-color: #f9bdbb;
  }
}

.table-grey-header {
  thead {
    background-color: $table-grey-header-color;
  }
}

.fixed-table {
  position: relative;
  overflow: hidden;
  border: 1px solid $table-border-color;

  .table > thead > th {
    background: $table-grey-header-color;
    border-bottom: 1px solid $table-border-color;
    border-left: 1px solid transparent;
    border-top: none;
    color: rgba(0, 0, 0, 0);
  }
}

.table-wrapper {
  height: 100%;
  overflow: auto;
}

.fixed-table-heading {
  position: absolute;
  top: 0;
  padding: $table-cell-padding;
  background: $table-grey-header-color;
  border-bottom: 1px solid $table-border-color;
  border-left: 1px solid $table-border-color;
  border-top: none;
  color: $table-header-font-color;
  margin-left: -16px;
  z-index: 1;
  box-sizing: border-box;
}