-
-
Notifications
You must be signed in to change notification settings - Fork 31.6k
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
[material-ui][TableHead] Sticky header groups overlap each other #42165
Comments
Can you update the example to show what you want to achieve after applying the fix? Maybe there is already a way to get that. |
Sample is updated to show what i would expect. Basicly I would expect to still be able to see both headers after scrolling. |
it appears that the issue arises because both header rows are using TableHead { .MuiTableRow-root:first-of-type .MuiTableCell-root { .MuiTableRow-root:last-of-type .MuiTableCell-root { |
@yassinmars I'm not sure if this would be the best way to tackle that problem. |
What's the use case for having two header groups (sticky or non-sticky) in your application? The same issue is discussed in this StackOverflow thread, which suggests using top: 0 in the table head. This can be applied by the developer in their custom CSS. I don't think we should apply it by default in the TableHead component. |
Steps to reproduce
Just scroll down in the sample and the second header will overlap the firs.
Sample here
Current behavior
Both headers stick to the upper container edge and overlap each other
Expected behavior
The group as a whole should stick to the top and not each individual header so they wont overlap.
I did some testing and noticed that each TableRow in the header sticks to top: 0 and the TableHead scrolls away. My expectation would be that the hole Group sticks to the top instead of each individual row. I also did some testing in the devtools and it looked like adding top: 0 to the TableHead would solve the problem.
Looking forward to hear back from you guys! :)
Context
I'm currently working on a larger table with sticky header groups. Where the Bottom one will overlap the top one so the information displayed is not visible.
Your environment
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 20.11.1 - ~\scoop\apps\nodejs-lts\current\node.EXE
npm: 10.2.4 - ~\scoop\apps\nodejs-lts\current\npm.CMD
pnpm: 8.15.4 - ~\scoop\apps\nodejs-lts\current\bin\pnpm.CMD
Browsers:
Chrome: 124.0.6367.119
Edge: Chromium (123.0.2420.97)
Search keywords: Sticky header groups overlapping
The text was updated successfully, but these errors were encountered: