-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
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
[Table] Fixing head in material #6625
Comments
I ran into the same issue today. Version 0.15 had the |
Same problem with |
Would be really nice to have this feature back! |
Same problem with Material-ui v1.0.0-beta.33 This is a must have feature! I think anyone who works with data grids would agree with me. |
@mariorubinas If this feature is important to you, please consider submitting a PR. You can use this issue if you'd like to discuss your approach. |
This is a must have feature!! feature worked great in the old MUI version. |
@asrane Looking forward to your pull request. |
Hey @mbrookes I use the fixed header enough and like everything else about 1.0 enough that I'm going to take a stab at this — do you/the Material-UI organization have a preferred way of fixing table headers? The old |
@tambling That would be great! support for dynamic column widths would be ideal. |
To be noted, the header can be sticky positioned: // ...
head: {
backgroundColor: "#fff",
position: "sticky",
top: 0
}
// ...
<TableHead>
<TableRow>
<TableCell className={classes.head}>
// ... |
@oliviertassinari Thanks, It works. |
@oliviertassinari Buttons in the table cell are overlaying the table header. How to resolve it ? |
@pranayyelugam You will need to adjust the zIndex for your buttons. |
@mbrookes What should be the zIndex value for the buttons to appear and function properly ? |
@pranayyelugam you can easily set the z-index on the sticky header and it will have the expected result you want.
|
For benchmarking purposes: https://vuematerial.io/components/table. |
@oliviertassinari, that won't work on IE 11 though, right? Technically Material UI supports IE 11. Is there a solution that will work with IE 11? |
Does anyone have a solution for fixing the header of a table inside a |
Doesn't seem to work on Chrome |
I have a fixed header in this component: https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js Material UI 3.x.x! |
Still no fixed header? IMO its important feature..) |
Bump! |
Any idea about this? I'm using Material Table, but I'm not able to fix the header when the scroll shows up. |
Just use two tables like in my example, @mhidalgop. |
Sorry, but it's not work for me :( |
@mhidalgop, mind sharing your example in something like CodeSandbox? |
Finally I have resolved my problem using this solution:
Thxs! |
This works fine on a desktop browser, however, on mobile browsers it doesn't work. |
I'm using this solution in a web app, and in a tablet with Chrome it works fine. |
the sticky does not work for me, so any other solution on how to fix the table header? |
This comment has been minimized.
This comment has been minimized.
Worked for me when applying this style to the
|
For anyone else trying to find a good solution that would allow sticky table header over both horizontal and vertical scrolling, I recommend you try: https://github.com/archfz/vh-sticky-table-header |
Hi, couldn't really find any good solution to have a sticky header on The solution proposed by @oliviertassinari position: "sticky",
top: 0,
zIndex: 100 Does not solve the issue with the scrollable @oliviertassinari could you please help and reopen issue #12014 ? |
Use two tables: |
@ryanpcmcquen it would mess up the cells alignments, check-out this one - https://codesandbox.io/s/8kw39m1278 |
You got any work around this? |
For Fixing table Head in material 1.0.0 11 alpha
I have a table with scrolling rows but I am not able to fix the header.
Is there a property to do so as fixedHeader was in material 0.15 and up but there doesnt seem to be something similar in 1.0.0 version
Versions
The text was updated successfully, but these errors were encountered: