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.

@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?