Angular Material sticky row don't work

Issue

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’

Solution

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

Answered By – Tim Martens

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.