Fixed table header and height in Material-UI@next (v1.0.0-beta.8)

Question

In [email protected] there are props for table height and fixed table header, but unfortunately they don't seem to be implemented in Material-UI@next. Is there a workaround in order to achieve the same thing using Material-UI@next?

I've tried switching to v0.19.1 and rebuilt my table component using that version, but this leaves me with a new bug regarding multiselect (https://github.com/callemall/material-ui/issues/5964).

Any suggestions on how to solve either of these issues?

Answer 1

If you're using the current version of Material UI (v4.5.1), you can just add the stickyHeader property to your table per this demo.

<Table stickyHeader>
  ...
</Table>

Answer 2

Have you tried adding position: 'sticky' to your header TableCell components?

I'm not sure it will work with your version of material UI, but in my case (v3.0.2) CSS class looks like this:

header: {
    background-color: '#fff',
    position: 'sticky',
    top: 0,
},

And then simply apply for each TableCell:

<TableCell
   className={classes.header}>
   {yourLabel}
</TableCell>