React - Material UI: How to remove scrollbar from table

Question

I've built a simple table with react and material UI with these instructions: https://material-ui.com/components/tables/#table.

It works fine but the scrollbar bothers me.

Is there an option to let the scrollbar start at the red arrow? Or remove it entirely?

Thank you in advance

code

    <TableContainer component={Paper} style={{maxHeight: 350}}>
    <Table className={styles.table} size="small" stickyHeader>
      <TableHead>
        <TableRow >
          <TableCell className={styles.header}>
            <Checkbox checked={allSelected} onClick={handleSelectAll} color="primary"/>
          </TableCell>
          <TableCell className={styles.header} align="left">Name</TableCell>
          {props.showAdmin && <TableCell className={styles.header}>Admin</TableCell>}
        </TableRow>
      </TableHead>
      <TableBody>
        {props.employees.map(empl => (
          <TableRow key={empl.id}>
            <TableCell>
              <Checkbox checked={isSelected(empl.id)} onClick={() =>handleSelect(empl.id)} className={styles.checkBox} color="primary"/>
            </TableCell>
            <TableCell component="th" scope="row" style={{paddingRight: 30}}>{empl.name}</TableCell>
            {props.showAdmin && <TableCell align="center"><Checkbox disabled checked={empl.isAdmin} className={styles.checkBox}/></TableCell>}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

style

createStyles({
  table: {
   maxWidth: 350,
   maxHeight: 300
  },
  header: {
   backgroundColor: '#123456',
   color: '#ffffff',
   fontSize: 18
 },
 checkBox: {
   paddingTop: 1,
   paddingBottom: 1,
 }
}),
);

Could you make it an online demo? Cause what we can find in the official document showing that the scroll bar is default hidden 6hft4n.run.stackblitz.io — keikai
I could not use your link, I did however create one here: codesandbox.io/s/upbeat-wilbur-ck0wq I copied my exact code. Thank you @keikai — Taldorr

keikai keikai · Accepted Answer · 2020-03-17T15:58:02

If you remove the maxHeight style for TableContainer, the scroll would disappear.

<TableContainer component={Paper} style={{ maxHeight: 350 }}>

to

<TableContainer component={Paper}>

Update

If you want to scroll from below header, simply add the related CSS to material-ui component Table and TableBody would be fine.

table: {
  display: "block",
  maxWidth: 350,
},
body: {
  display: "block",
  overflow: "auto",
  height: "300px"
},

Refer:

Try it online:

React - Material UI: How to remove scrollbar from table

1 Answers

Update