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?

andreivictor · Accepted Answer · 2020-05-28T17:13:32.120

16

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.

edited May 28 '20 at 17:13

answered Nov 25 '19 at 09:40

andreivictor

7,628
3
48
75

2

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 ! – pantonis Nov 25 '19 at 09:42

score 1 · Answer 2 · answered Nov 25 '19 at 08:57

1

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

answered Nov 25 '19 at 08:57

Bilel-Zheni

1,202
1
6
10

But I want the table to take full page height. I do not want to limit the table height – pantonis Nov 25 '19 at 08:58
use 100vh instead of 100px for your table height – Bilel-Zheni Nov 25 '19 at 09:01
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``` – pantonis Nov 25 '19 at 09:02
mat table sticky option is used to keep the table header visible when you scroll the table content – Bilel-Zheni Nov 25 '19 at 09:36

score 1 · Answer 3 · answered Nov 25 '19 at 08:58

1

Give height to your table container :

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

answered Nov 25 '19 at 08:58

Kishan

773
4
10

doesnt work when you have table with 2 headers – jodoro Dec 12 '22 at 08:21

Gionny B. · Answer 4 · 2022-04-28T22:15:50.100

1

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

edited Apr 28 '22 at 22:15

answered Apr 28 '22 at 21:57

Gionny B.

11
3

score 0 · Answer 5 · answered Aug 17 '22 at 13:59

0

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

answered Aug 17 '22 at 13:59

Angel Balashev

59
2
5

William Schubarg · Answer 6 · 2022-10-08T22:25:42.843

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>

Angular material table sticky headers not working as expected

6 Answers6