Scrollbars are rejected in MaterialUI Tables

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 <div> 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>

[TassosD]

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