Angular material table with sticky header

Question

I'm using angular7 with Angular material design templates. Currently, my result is as follows,

But I want my result is as follows. Scrollbar under sticky header.

I put some demo code and live demo as your reference.

HTML

<div class="example-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef> Symbol </th>
      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

CSS

.example-container {
  height: 400px;
  overflow: auto;
}

table {
  width: 100%;
}

Its the default behavior of angular material tables. If you want scroll out side you need to make two separate tables or somehow you able to make scroll inside then your header and body cell aliment create problem — Awais
– Awais, Commented Oct 30, 2019 at 5:54

akpgp · Accepted Answer · 2019-10-30 06:39:14Z

1

You can do something like that using two table one for the header and another for the data. Please see the working demo.

answered Oct 30, 2019 at 6:39

akpgp

8417 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mikkel R. Lund Over a year ago

Be aware that this solution causes the headers to misalign, because the scrollbar doesn't take up space there.

Collectives™ on Stack Overflow

Angular material table with sticky header

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related