0

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>
Jadamae77
  • 828
  • 7
  • 13

1 Answers1

2

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.

Jadamae77
  • 828
  • 7
  • 13