Quando uma tabela tem muitas colunas que não podem ser exibidas simultaneamente, uma barra de rolagem horizontal aparece por padrão. Ao usar essa barra de rolagem, o cabeçalho rola conforme o esperado, mas o corpo da tabela é cortado, pois seu estouro está oculto. Adicionar `bodyStyle={{height: 'inherit', overflow: 'auto'}} ao componente Table resulta em uma segunda barra de rolagem horizontal, uma que controla o corpo adequadamente, a outra que controla o cabeçalho.
<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>
Desculpe pelo spam.
Parece que fazer <Table bodyStyle={{overflow:'visible'}}>
realiza o que eu quero.
Talvez este deve ser o padrão embora?
A solução proposta acima não funciona bem com fixedHeader={true}
. O cabeçalho perde o posicionamento fixo quando o estouro de bodyStyle
é definido como visible
Estamos portando o componente no branch v1-beta . Nós o reimplementamos desde o início. A rolagem horizontal parece funcionar corretamente na documentação.
Comentários muito úteis
Desculpe pelo spam.
Parece que fazer
<Table bodyStyle={{overflow:'visible'}}>
realiza o que eu quero.Talvez este deve ser o padrão embora?