Material-ui: [Tabela] Corpo da tabela de rolagem horizontal cortado

Criado em 1 jun. 2016  ·  3Comentários  ·  Fonte: mui-org/material-ui

Descrição do Problema

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.

Passos para reproduzir

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

Versões

  • Material-UI: 0.15.0
  • Reagir: 15.0.2
  • Navegador: Chrome 50.0.2661.102 (64 bits)

image

Table

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?

Todos 3 comentários

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.

Esta página foi útil?
0 / 5 - 0 avaliações