CODEWITHSUNDEEP
angularangular-materialangular-material-table
Jadamae77
Jadamae77

Reputation: 928

Angular Material table header sticky:true not working

I have a Angular Material table within a div that has a max-height set and overflow-y: auto, but the headers are not sticking to the top of the viewport as expected.

    <mat-table class="table" mat-table [dataSource]="dataSource" matSort>
    ...
      <tr mat-header-row *matHeaderRowDef="displayColumns; sticky: true"></tr>
      <tr
        mat-row
        *matRowDef="
          let rateMethod;
          let j = index;
          columns: displayColumns
        "
        (dblclick)="editRateMethod(rateMethod.rateMethodId)"
        (contextmenu)="onContextMenu($event, rateMethod)"
        [ngClass]="{ 'striped-row': j % 2 === 0 }"
      ></tr>
    </mat-table>

Upvotes: 0

Views: 1327

Answers (1)

Jadamae77
Jadamae77

Reputation: 928

After much consternation, I realized I was using the html element instead of the native with the mat-table directive applied as in the documentation. Once I made that switch, everything worked as expected.

Upvotes: 2

Related Questions