Sticky header groups overlap each other

[ThisIsHG]

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

[brijeshb42]

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.

[ThisIsHG]

Sample is updated to show what i would expect.

Basicly I would expect to still be able to see both headers after scrolling.

[yassinmars]

it appears that the issue arises because both header rows are using position: sticky with the same top: 0 value, causing them to overlap when scrolling. To fix this maybe we can adjust the top values for each header row to ensure they stack properly without overlapping. Here's a CSS suggestion:

TableHead {
.MuiTableCell-root {
position: sticky;
top: 0; // Keep this for the first header row
z-index: 10; // Ensures this row stays on top when scrolling
}

.MuiTableRow-root:first-of-type .MuiTableCell-root {
top: 0; // First header row
}

.MuiTableRow-root:last-of-type .MuiTableCell-root {
top: 56px; // Adjust this value based on the actual height of your first header row
}
}