Angular Material sticky row don't work

Question

Hello i follow the example of angular material documentation for sticky header row https://material.angular.io/components/table/overview#sticky-rows-and-columns but don't work for me. This is my html code

<div class="content mat-white-bg">
    <mat-table #table [dataSource]="dataSource"
       matSort matSortDirection="asc" matSortDisableClear>

      <ng-container matColumnDef="Code">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'Kodi' | translate}}">
          </mat-form-field>
          <button (click)="sortTable($event.target.value)" mat-button class="mat-icon-button ">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client">
          <p class="text-truncate ">
            {{client.Code}}
          </p>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="FirstName">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'Emri' | translate}}">
          </mat-form-field>
          <button (click)="sortTable($event.target.value)" mat-button class="mat-icon-button">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client">
          <p class="text-truncate ">
            {{client.FirstName}}
          </p>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Address">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'Adresa' | translate}}">
          </mat-form-field>
          <button (click)="sortTable($event.target.value)" mat-button class="mat-icon-button">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client" fxHide fxShow.gt-sm>
          <p class="text-truncate ">
            {{client.Address}}
          </p>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="City">
        <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'Qyteti' | translate}}">
          </mat-form-field>
          <button (click)="sortTable()" mat-button class="mat-icon-button ">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client" fxHide fxShow.gt-sm>
          <p class="text-truncate ">
            {{client.City}}
          </p>
        </mat-cell>
      </ng-container>


      <ng-container matColumnDef="Email">
        <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Email">
          </mat-form-field>
          <button (click)="sortTable()" mat-button class="mat-icon-button">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client" fxHide fxShow.gt-sm>
          <p class="email text-truncate">
            {{client.Email}}
          </p>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Tel">
        <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Tel">
          </mat-form-field>
          <button (click)="sortTable()" mat-button class="mat-icon-button ">
            <mat-icon>sort</mat-icon>
          </button>
        </mat-header-cell>
        <mat-cell *matCellDef="let client" fxHide fxShow.gt-sm>

          {{client.Tel}}

        </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
      <mat-row *matRowDef="let client; columns: displayedColumns;"
               class="client"></mat-row>
    </mat-table>
</div>

I have set sticky to true like example but get error Can't bind to 'matHeaderRowDefSticky' since it isn't a known property of 'mat-header-row'

Answer 1

The sticky attribute was introduced in version 6.3.0. You can upgrade @angular/material and @angular/cdk to try and solve your issue

Check this Github issue

Answer 2

If you can't upgrade @angular/material to a newer version, here's a simple css implementation that I've used to get sticky header rows in @angular/material version 5.1.0:

.mat-header-row--sticky {
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 100;
} 

Then in template add the class mat-header-row--sticky to the mat-header-row element:

<mat-header-row *matHeaderRowDef="displayedColumns" class="mat-header-row--sticky"></mat-header-row>

StackBlitz demo: https://stackblitz.com/edit/angular-62cpzh