Material-ui: [Tabelle] Horizontal scrollender Tabellenkörper abgeschnitten

Problembeschreibung

Wenn eine Tabelle so viele Spalten hat, dass sie nicht gleichzeitig angezeigt werden können, wird standardmäßig eine horizontale Bildlaufleiste angezeigt. Wenn Sie diese Bildlaufleiste verwenden, scrollt die Kopfzeile wie erwartet, aber der Tabellenkörper wird abgeschnitten, da sein Überlauf ausgeblendet ist. Das Hinzufügen von `bodyStyle={{height: 'inherit', overflow: 'auto'}} zur Table-Komponente führt zu einer zweiten horizontalen Bildlaufleiste, von der eine den Hauptteil richtig steuert, die andere die Kopfzeile.

Schritte zum Reproduzieren

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

Versionen

• Material-UI: 0.15.0
• Reaktion: 15.0.2
• Browser: Chrome 50.0.2661.102 (64-Bit)