Sticky header groups overlap each other about material-ui HOT 3 OPEN

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.

from material-ui.

Sample is updated to show what i would expect.

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

from material-ui.

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

from material-ui.