Material UI Table With Sticky Header

material-sticky-table-example.js

import React, { memo } from 'react'
import {
  Checkbox,
  Button,
  FormControlLabel,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableRow,
} from '@material-ui/core'
import TableSticky from '../tablesticky'

// maxHeight defaults to window.innerHeight
// add prop maxHeight to TableSticky to specify height
export default memo(props =>
  <TableSticky yBottomOffset={15}>
    <TableHead>
      <TableRow>
        <TableCell>
          col1
        </TableCell>
        <TableCell>
          col2
        </TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
    </TableBody>
      <TableRow>
        <TableCell>
          data-col1
        </TableCell>
        <TableCell>
          data-col2
        </TableCell>
    </TableRow>
  </TableSticky>
)

tablesticky.js

import React, { memo } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import {
  Table,
 } from '@material-ui/core'

export default memo(props => {
  const { yBottomOffset=0, maxHeight=window.innerHeight } = props

  const useStyles = makeStyles({
    tableWrapper: {
      maxHeight: maxHeight - yBottomOffset,
      overflow: 'auto',
    },
  })

  const classes = useStyles()
  
  return (
    <div className={classes.tableWrapper}>
      <Table stickyHeader>
        {props.children}
      </Table>
    </div>
  )
})