CODEWITHSUNDEEP
angularangular-materialmaterial-uimat-table
app
app

Reputation: 207

Angular Material Table spitted headers add the sticky header functions

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

enter image description here

When I go with the dropdown only these headers get sticky behavior than others. enter image description here

Below is my stackblitz.

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

Upvotes: 0

Views: 1377

Answers (1)

Vimal Patel
Vimal Patel

Reputation: 3075

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

Upvotes: 1

Related Questions