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 https://6hft4n.run.stackblitz.io — keikai, Mar 17 '20 at 02:25
I could not use your link, I did however create one here: https://codesandbox.io/s/upbeat-wilbur-ck0wq I copied my exact code. Thank you @keikai — Taldorr, Mar 17 '20 at 15:41

keikai · Accepted Answer · 2020-03-18T02:41:59.387

5

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:

edited Mar 18 '20 at 02:41

answered Mar 17 '20 at 15:58

keikai

14,085
9
49
68

Yes, but with additional items, the list grows infinitly, I intend to use this component embedded in other components. Do you have another idea? – Taldorr Mar 17 '20 at 16:25
Thank you as it helps me a lot. Do you have an idea how to make the scrollable part as wide as the whole area and align the columns to the headers? @keikai – Taldorr Mar 17 '20 at 20:31
@Taldorr Updated, and if this post has solved your problem, kindly accept it as the answer would be appreciated. – keikai Mar 18 '20 at 10:02
I appreciate your input and the picture looks promising, but it does not work correctly as soon as you change the length of the name of an employee or enable showAdmin in the app component. Your answer is the best nonetheless :) – Taldorr Mar 20 '20 at 11:07

score 3 · Answer 2 · answered Sep 08 '21 at 14:59

3

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

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

answered Sep 08 '21 at 14:59

Dennis Otwoma

51
3

React - Material UI: How to remove scrollbar from table

2 Answers2

Update