How to make the Material UI's table header sticky in relation to an outer scroll?

Question

I have a page that uses Material UI's table and I need to get the sticky header working when the entire page is scrolled, since the table must be allowed to take as much vertical space as it needs, like in this pure HTML+CSS example.

I couldn't manage to do this with MUI's table, though. How can it be achieved?

demo

Answer 1

Set overflowX to initial on TableContainer

...
          <TableContainer style={{ overflowX: "initial" }}>
...

Read more on this link

Answer 2

Related issue

---

Wanted mui table with sticky header & rotated to -45 degree angle

---

Below din't work:

Wasted 3 hours to make stickyHeader work

  <Table stickyHeader ...

---

Below worked:

1. Apply head1 CSS for TableHead:
2. Apply rotatedContent1 CSS for TableCell's child (NOTE: child):

Full code is something like below:

const TableStyles = theme => ({
  head1: {
    zIndex: 3,
    position: 'sticky',
    top: '0px',
  },
  rotatedContent1: {
    transform: 'rotate(270deg)',
  }
})

const Component1 = ({ classes }) => {
  return (
    <React.Fragment>
     <Table>
      <TableHead className={classes.head1}>
        <TableCell>
          <div className={classes.rotatedContent1}> header value </div>
        </TableCell>
      </TableHead>
      <TableBody>
       <TableRow>
        <TableCell> value </TableCell>
       </TableRow>
      </TableBody>
     </Table>
    </React.Fragment>
  )
}

export default withStyles(TableStyles)(Component1)