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 } }

[ThisIsHG]

@yassinmars I'm not sure if this would be the best way to tackle that problem. In theory there could be more than two headers and you would need to know the accumulated hight of all the previous ones to determine what to put in the top attribute. I would aim to make the whole TableHead container stick unless there are usecases where only some of the headers should be sticky.

[ZeeshanTamboli]

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.

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.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.