Material-ui: [Table] Horizontal scrolling table body cut off

[ghost]

Problem description

When a table has many columns such that they cannot be displayed simultaneously, a horizontal scrollbar appears by default. When using this scrollbar, the header scrolls as expected, but the table body gets cutoff since it's overflow is hidden. Adding `bodyStyle={{height: 'inherit', overflow: 'auto'}} to the Table component results in a second horizontal scrollbar, one which controls the body properly, the other which controls the header.

Steps to reproduce

      <Table>
        <TableHeader>
          <TableRow>
            {this.props.tableHeader.map((col, i) =>
              <TableHeaderColumn style={{ width: 100 }} key={i}>{col}</TableHeaderColumn>
            )}
          </TableRow>
        </TableHeader>
        <TableBody preScanRows={false}>
          {this.props.tableData.map((row, i) => (
            <TableRow key={i}>
              {this.props.tableHeader.map((col, j) => (
                <TableRowColumn style={{ width: 100 }} key={j}>{row[col]}</TableRowColumn>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>

Versions

• Material-UI: 0.15.0
• React: 15.0.2
• Browser: Chrome 50.0.2661.102 (64-bit)

[ghost]

Sorry for spamming.

It seems that doing <Table bodyStyle={{overflow:'visible'}}> accomplishes what I want.

Perhaps this should be the default though?

[joncursi]

The solution proposed above does not play well with fixedHeader={true}. The header loses fixed positioning when bodyStyle overflow is set to visible

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. The horizontal scroll seems to work correctly on the documentation.