Angular material table sticky headers not working as expected

Question

I forked the example on angular material table with sticky header and I added more data. I see that the headers are not sticky. Stackblitz here

Anyone knows how headers can remain sticky?

Levania

Answer 1

The problem in your example is that the table container has overflow: auto and height: 100%; this is unnecessary, since the page will already have a scrollbar attached if the table content is bigger than the viewport.

I've fixed it by removing all the styles that are attached to .example-container.

In this way, the sticky element will be set relative to the top of the page.

Example: https://stackblitz.com/edit/angular-brzwrz-aejes6

Let me know if it works for you.

Photoconductivity

Excellent. You should send the code to material team to fix it there as well. The example they have there is not good promotion for material table and might lead potential users of the table to abandon it for something else. Thanks again ! – Levania

Answer 2

By limiting your table height. https://stackblitz.com/edit/angular-brzwrz-hkevwi

Crispi

But I want the table to take full page height. I do not want to limit the table height – Levania

use 100vh instead of 100px for your table height – Crispi

there are two scrollbars. Page scrollbar and the table container scrollbar. This is not what I need. Primeng has a very good example of how sticky header must work. https://www.primefaces.org/primeng/#/table/sticky – Levania

mat table sticky option is used to keep the table header visible when you scroll the table content – Crispi

Answer 3

Give height to your table container :

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

Martyrology

doesnt work when you have table with 2 headers – Rhody

Answer 4

Same issue with material expansion table and related example. I solved by setting overflow: hidden in style.css under scr folder, as below:

body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; overflow: hidden; }

and modifying the CSS .example-container in

.example-container {
  height: 100vh;
  overflow: auto;
 }

You will see only the table scrollbar.

Hope help someone

Speakeasy

Answer 5

In my case I just removed the overflow: auto from my table container, and the sticky worked.

Supergalaxy

Answer 6

Found a much easier way... It's all about the syntax in the definition...

<cdk-virtual-scroll-viewport tvsItemSize
                             class="wrapper mat-elevation-z2">

  <table mat-table [dataSource]="dataSource">
<!-- Notice the definition for *matHeaderRowDef and the 'sticky: true' in quotes. -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

    <ng-container matColumnDef="id">
      <th mat-header-cell
          *matHeaderCellDef
          class="col-sm">No.</th>
      <td mat-cell
          *matCellDef="let element"
          class="col-sm">{{element.id}}</td>
    </ng-container>

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

  </table>

</cdk-virtual-scroll-viewport>

Intertwist