-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fixed header rows for md-table #6247
Comments
+1 |
1 similar comment
+1 |
Duplicate of #5885 |
+1 |
Hi, I made fixed header table scroll using css for angular material. Use the below code it will work. Put table code inside "div "block with class name "table-container" `Ex: HTML
CSS: TS file:
} export interface Element { const ELEMENT_DATA: Element[] = [ Try this Code surely it will work. |
to simplify above solution
|
@androidovshchik : Seems you need to add z-index for the white background to work. In my case i had to anyways. Thanks for the solution. |
@mdelorimier |
Seems it is working .mat-header-row { but Scroll for sticky header not work as expected |
|
instead of right: 18px, it must be lot less like 3px or so if you have a darker background for header. Else position is bit left to the scroll. |
Hello everyone. |
@niculescuc Can you provide sample html? |
Can anyone please suggest me how to wrap all the cdk-row inside a container in angular 5 material table
|
@AvishekNath |
Thanks @androidovshchik |
Solution does not work if the table is inside |
I was thinking I wanted something but what I really wanted is @niculescuc solution! thanks! |
You should upgrade your material version to 6.0.0 or more and use sticky header. Is more reliable and easy to use. You can get also the advantage of sticky footer and sticky columns. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Bug, feature request, or proposal:
Feature request
What is the expected behavior?
Have the headers of md-table fixed (when you scroll down, headers should remain at the top)
What is the current behavior?
When you scroll down, headers become invisible
What is the use-case or motivation for changing an existing behavior?
As a user scrolls down a list of data , he or she wants to be able to sort the table at any given moment
Is there anything else we should know?
This may be already possible , in which case I hope someone can tell me how :)
The text was updated successfully, but these errors were encountered: