React - Material UI: How to remove scrollbar from table

Taldorr

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,
 }
}),
);
keikai

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

React material ui table can't get element from row

How can I change a width of table Material UI / React?

Expandable table in React material ui

How do I add borderTop to React Material UI Table?

How to remove default padding from material ui List Item?

How to remove curved border and inset box shadow from Material UI TextField React component?

react material ui populate table from API response

How to change Table Cell width in Material-ui React table

How to clear entire react material ui table conent

Disable/remove pagination from react material-table

How to remove lines between cells in table in Material-ui

How can I remove the underline of TextField from Material-UI?

React & Material UI - How to Remove Nav Buttons/Links based on Routes?

React Material-UI How can I add a checkbox which is separate from table row click

React How to remove the animation of Material-UI Select

Remove blue outline from Select box React Material UI

Is there a way to remove currency prefix from material-table react?

How to remove the border around the entire table in Material-ui

Remove padding from Material UI SwipeableViews React [SOLVED]

material-UI: how to increase scrollbar size

How to remove scrollbar from tables

How to remove the overlay loader from material table?

How to remove the arrows icons from a Material UI TextField

How to put Link from react router dom inside Material UI table

React Material UI - How to automatically remove items from an Autocomplete depending on another value

material ui react, how to remove the shadow from the table? tried to find the api but couldn't find the right property

React - Material UI - Table no rows

How to remove hover from button? Material UI v5

How to update the rows in a table in Material UI/React Table