Fixed header in mat-table

[jayakrishna-v]

Bug, feature request, or proposal: It would be good if we can have a fixed header for mat-table.

What is the expected behavior? Header should always be visible even while scrolling the table body.

What is the current behavior? When the mat-table body is scrolled, the header is also getting scrolled along with the body and getting hidden.

What are the steps to reproduce?

Check the official mat-table link below.
https://material.angular.io/components/table/overview

What is the use-case or motivation for changing an existing behavior?

When we had to show more than 50 records per page, user will have to scroll down to see the bottom records. When we scroll down, header should stay static on top of the table and it helps the user to easily identify which column is what.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[jayakrishna-v]

No working sample available

[oktav777]

.mat-header-row {
    position: sticky;
    top: 0;
    background-color: inherit;
}

[EdricChan03]

@oktav777 You should also include position: -webkit-sticky for Safari browsers.

.mat-header-row {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background-color: inherit;
}

[oktav777]

@Chan4077 preprocessor should autoprefix it.

[ghost]

@oktav777 the css work .but if the hearder has selection,when scroll the below will occur

before scoll:

when scroll:

[jayakrishna-v]

Thanks oktav and Chan. The css works fine. But not working in IE 11

[oktav777]

@stevenmi add z-index so it looks like:

.mat-header-row {
    top: 0;
    position: sticky;
    z-index: 1;
    background-color: inherit;
}

@jayakrishna-v position: sticky is not supported in IE. If you really need IE, you have to override the styles or change the layout of tables.

[jayakrishna-v]

ok. I have a basic question. Does Angular Material support IE browsers?

[oktav777]

@jayakrishna-v Yes, IE11 is supported, see here

[jayakrishna-v]

ok. Thank you

[jainubaba25]

i have tried with solution you have provided to fix mat-tab-header , but not working

[soumyakantiroychowdhury]

Solution does not work if the table is inside mat-sidenav-container. Any suggestion?

[charlieshawfeather]

@soumyakantiroychowdhury did you find a solution?

[soumyakantiroychowdhury]

@Ch4osCosmo I did not try after that. Will post here if I get a solution.

[rubenheymans]

is there a fix for this?

[mattspaulding]

Try this:

::ng-deep .mat-tab-header {
  top: 0;
  position: sticky !important;
  z-index: 999 !important;
  background-color: white;
}

[pavithra0116]

I want to make the first four columns as sticky. Is there any way in angular mat-table??

[vankadn]

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
Tried this solution on @angular/material 8.1.4 . It's working

[louis-rogeon]

I don't understand why would you say Angular Material is compatible with IE 11, if the property 'sticky: true' of mat table's header is not working in IE 11 ?

In addition I see a case where we would need fixed position on header (and not sticky). Suppose you have a fixed header. Setting sticky table's headers would cause them to stick underneath the fixed header, making it invisible.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}