CODEWITHSUNDEEP
angularangular-material
David Struck
David Struck

Reputation: 157

Multiple sticky header rows inside a tab in Angular/Material

I followed the example on the Angular Material website to create a table with multiple sticky header rows. This works perfectly. But, when I take the table and move it inside a tab, only one of the rows sticks as I scroll down. Can this be fixed?

https://stackblitz.com/edit/angular-bklajw-3zzcw7

Notice how when you scroll down in the first table, the first two rows stick. But when you scroll down in the second table, only the second row sticks.

Upvotes: 2

Views: 3450

Answers (2)

Neel Shah
Neel Shah

Reputation: 171

You can explicitly apply position: sticky and setting top equals to height of the above row for the second-row header i.e. top: 56px, and this will make the second-row header also sticky. This is the CSS you need to add.

.mat-header-row:nth-child(2) {
    position: sticky;
    top: 56px;
}

And here is the forked example with this change applied. https://angular-bklajw-rqkyjm.stackblitz.io

Thank you.

Upvotes: 3

Vimal Patel
Vimal Patel

Reputation: 3055

Sticky positions are applied at run time. You can try to fix it using css.

  • First add a class to your 2nd row.
 <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="second-row"></tr>
  • Add following css to set the top position. 55px is the height of first row.
.second-row .mat-header-cell.mat-table-sticky {
  top: 55px !important;
}

Working example:- https://angular-bklajw-rwgxn9.stackblitz.io

Not the cleanest of solution but will get the work done.

Upvotes: 0

Related Questions