[Table] Sticky header in group

[idrm]

When the stickyHeader option is enabled on a Table and the table contains multiple header rows, only the last of the rows ends up being sticky.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Only the last of the header rows is sticky.

Expected Behavior 🤔

All header rows should be sticky.

Steps to Reproduce 🕹

https://codesandbox.io/s/ymv2c

Tech	Version
Material-UI	v4.11.0

[oliviertassinari]

Yeah, I think that you would need to set a different top position for each row of the header group. We also have mui/mui-x#195 in the pipeline.

[oliviertassinari]

          <TableHead>
            <TableRow>
              <TableCell align="center" colSpan={columns.length}>
                Another header row
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                style={{ top: 57 }}
                align="center"
                colSpan={columns.length}
              >

https://codesandbox.io/s/material-demo-forked-g12em?file=/demo.tsx

[oliviertassinari]

We can probably improve the documentation for this aspect. It's also not obvious to find the group example introduced for #17909.

[idrm]

Thanks for the quick heads-up. The custom styling did the trick. I presume it's not possible to apply the stickiness props to the <thead> element itself in order to avoid the custom top offset styling.

[oliviertassinari]

I presume it's not possible to apply the stickiness props to the element itself in order to avoid the custom top offset styling.

It's not possible, to apply the sticky position on the thead, as far as I know. This would have been ideal.

[kkomelin]

As simple as this:

  <Table>
    <TableHead sx={{ position: 'sticky', top: 0, backgroundColor: 'white' }}>
      <TableRow></TableRow>
      <TableRow></TableRow>
      <TableRow></TableRow>
    </TableHead>
   </Table>

No stickyHeader, no pain.

[juliushuck]

This works for me. I still use the stickyHeader prop to get the correct visual styles. I also change the background color of the header to white by using the themes background paper variable.

<TableContainer sx={{ height: "100%" }}>
    <Table size="small" stickyHeader>
        <TableHead
            sx={{
                position: "sticky",
                top: 0,
                zIndex: 1,
                "& .MuiTableCell-root": { backgroundColor: "background.paper" },
            }}
        >