Angular Material Table spitted headers add the sticky header functions

Question

I am having the spitted header angular material table and I was looking for help to add the sticky header.

I have tried to using sticky: true but somehow it is not working for my first column (as I am hiding the column.) And for the first rows. It is showing the second row.

Below is my table

When I go with the dropdown only these headers get sticky behavior than others.

Below is my stackblitz.

https://stackblitz.com/edit/angular-bklajw-5foa62

Vimal Patel · Accepted Answer · 2020-12-24 05:23:41Z

1

To make the top header sticky add sticky tag in that as well. It will also fixed first column sticky issue.

 <tr mat-header-row
     *matHeaderRowDef="['header-row-first-group','header-row-sec-group','header-row-third-group','header-row-forth-group','header-row-fifth-group'];sticky:true">
</tr>

Demo

answered Dec 24, 2020 at 5:23

Vimal Patel

3,1152 gold badges27 silver badges39 bronze badges

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

3 Comments

app Over a year ago

Thanks a lot, is it working in internet explorer and edge?

Vimal Patel Over a year ago

Working i chrome and edge have not tested in other browser, requesting you to please test yourself for all edge cases.

app Over a year ago

Sure. Will check and update you. Thanks a lot

Collectives™ on Stack Overflow

Angular Material Table spitted headers add the sticky header functions

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related