React - Material UI: How to remove scrollbar from table

user_7582029 0
Viewed 11664

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. enter image description here

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,
 }
}),
);
material-ui typescript reactjs css html
2 Answers

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:

Edit eager-rubin-oq5fh

enter image description here

user_118722460

to remove scroll bars using jss material ui, simple do this

container_with_scrolls:{
    overflowX:'scroll',
    '&::-webkit-scrollbar':{
        width:0,
    }
},
user_158506810
Related