React-custom-scrollbars: Scrollbars are rejected in MaterialUI Tables

Created on 15 May 2017  路  7Comments  路  Source: malte-wessel/react-custom-scrollbars

When used in a material UI TableBody, it seems that MaterialUI rejects anything that may alter their table's architecture throught the DOM. Material UI forbids using anything other than TableHeader or TableBody as Table children, and any

inside of TableBody or Table Header (per HTML5 standars, this is not permitted either)

render as a div.

Is there a way to assign Scrollbars to the TableBody without using the so that way the Table architecture is unchanged?

Here is the code

    `<TableBody
    displayRowCheckbox={this.state.showCheckboxes}
    deselectOnClickaway={this.state.deselectOnClickaway}
    showRowHover={this.state.showRowHover}>
        <Scrollbars  //not permitted. it renders as a <div>
            autoHide={false}
            style={ScrollBarsStyle}>
        {tableData.map( (row, index) => (
            <TableRow key={index}>
                <TableRowColumn>{row.name}</TableRowColumn>
                <TableRowColumn>{row.type}</TableRowColumn>
                <TableRowColumn>{row.owner}</TableRowColumn>
            </TableRow>
        ))}
        </Scrollbars>
    </TableBody>`

UPDATE
The only way it can work is by adding the entire table inside the Scrollbars tags. But it disables the fixedHeader.

picture lotusms
🚀1 👍1

Most helpful comment

This can be accomplished by using two material-ui tables. One for the header and one for the rows.

<Table>
  <TableHeader>
  ...
  </TableHeader>
</Table>
<Scrollbars>
  <Table>
    <TableBody>
     ...
    </TableBody>
  </Table>
</Scrollbars>
picture alexlukelevy on 19 May 2017
🎉4 👎3 ❤1 😄1

All 7 comments

This can be accomplished by using two material-ui tables. One for the header and one for the rows.

<Table>
  <TableHeader>
  ...
  </TableHeader>
</Table>
<Scrollbars>
  <Table>
    <TableBody>
     ...
    </TableBody>
  </Table>
</Scrollbars>
alexlukelevy picture alexlukelevy on 19 May 2017
🎉4 👎3 ❤1 😄1

Yup! That did it! Thank you!

lotusms picture lotusms on 19 May 2017

But what if you need the columns to be the same width?

sarahshuffle picture sarahshuffle on 11 Jul 2017

Then give the both sets of columns a style property e.g. style={{ width: '10%' }}

alexlukelevy picture alexlukelevy on 12 Jul 2017

Unideal solution. What if you want the header to be fixed on vertical scroll, however to scroll with the content on horizontal scroll.

edit: Seems the only way to go about it might be a modified version of what you have there combined with js to move the tablehead left or right.

justinmasse picture justinmasse on 25 Aug 2017

How would the horizontal scrolling work in this case? @justinmasse did you get this to work?

carlosafw picture carlosafw on 11 Feb 2019

@justinmasse, @carlosafw just put both tables inside a horizontally scrollable div

TassosD picture TassosD on 26 Nov 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

bunkat picture bunkat  路  5Comments
strobox picture strobox  路  4Comments
webchaz picture webchaz  路  3Comments
simonkberg picture simonkberg  路  3Comments
limbosounds picture limbosounds  路  4Comments