Scrollbars are rejected in MaterialUI Tables

[lotusms]

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)

<Scrollbars> render as a div.

Is there a way to assign Scrollbars to the TableBody without using the <Scrollbars> 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.

[alexlukelevy]

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>

[lotusms]

Yup! That did it! Thank you!

[sarahshuffle]

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

[alexlukelevy]

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

[justinmasse]

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.

[carlosafw]

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

[TassosD]

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