Material-ui: [Tabela] Cabeça de fixação no material

Me deparei com o mesmo problema hoje. A versão 0.15 tinha a prop fixedHeader , v 1.x não. Imagino que haja planos para isso.

Mesmo problema com Material-ui v1.0.0-beta.16 .

Seria muito bom ter esse recurso de volta!

Mesmo problema com Material-ui v1.0.0-beta.33

Este é um recurso obrigatório! Acho que qualquer pessoa que trabalha com grades de dados concordaria comigo.

@mariorubinas Se este recurso for importante para você, considere enviar um PR. Você pode usar esse problema se quiser discutir sua abordagem.

Este é um recurso obrigatório!! recurso funcionou muito bem na versão MUI antiga.

@asrane Aguardo seu pull request.

Ei, @mbrookes , eu uso o cabeçalho fixo o suficiente e, como todo o resto, cerca de 1.0, o suficiente para tentar isso - você / a organização Material-UI tem uma maneira preferida de corrigir cabeçalhos de tabela? O antigo fixedHeader era ótimo, mas eu não era o maior fã de como ele fazia todas as colunas com largura igual ( table-layout: fixed; ), então eu tentaria reimplementá-lo para suportar larguras de coluna dinâmicas.

@tambling Isso seria ótimo! suporte para larguras de coluna dinâmicas seria ideal.

Para ser observado, o cabeçalho pode ser posicionado de forma adesiva:

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

@oliviertassinari Obrigado, funciona.

@oliviertassinari Os botões na célula da tabela estão sobrepondo o cabeçalho da tabela. Como resolvê-lo?
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam Você precisará ajustar o zIndex para seus botões.

@mbrookes Qual deve ser o valor de zIndex para que os botões apareçam e funcionem corretamente?
Aqui está a demonstração
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam você pode facilmente definir o z-index no cabeçalho adesivo e ele terá o resultado esperado que você deseja.

head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0,
    zIndex: 10,
  }

Para fins de benchmarking: https://vuematerial.io/components/table.

@oliviertassinari , isso não funcionará no IE 11, certo? Tecnicamente Material UI suporta o IE 11. Existe uma solução que funcione com o IE 11?

Alguém tem uma solução para corrigir o cabeçalho de uma tabela dentro de um componente <Dialog> ? position: sticky não está funcionando.

Parece não funcionar no Chrome

Eu tenho um cabeçalho fixo neste componente: https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

Material UI 3.xx!

Ainda sem cabeçalho fixo? IMO sua característica importante ..)

Ressalto!

Alguma idéia sobre isso? Estou usando o Material Table, mas não consigo corrigir o cabeçalho quando o scroll aparece.

Basta usar duas tabelas como no meu exemplo, @mhidalgop.

Basta usar duas tabelas como no meu exemplo, @mhidalgop.

Desculpe, mas não funciona para mim :(

Desculpe, mas não funciona para mim :(

@mhidalgop , se importa em compartilhar seu exemplo em algo como CodeSandbox?

Finalmente resolvi meu problema usando esta solução:

head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0,
    zIndex: 10,
  }

Obrigado!
:)

Para ser observado, o cabeçalho pode ser posicionado de forma adesiva:

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

Isso funciona bem em um navegador de desktop, no entanto, em navegadores móveis, não funciona.

Para ser observado, o cabeçalho pode ser posicionado de forma adesiva:

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

Isso funciona bem em um navegador de desktop, no entanto, em navegadores móveis, não funciona.

Estou usando esta solução em um aplicativo da web e em um tablet com Chrome funciona bem.

o sticky não funciona para mim, então alguma outra solução sobre como corrigir o cabeçalho da tabela?

+1

Funcionou para mim ao aplicar este estilo ao <TableContainer>

    height: 100%;
    overflow-y: auto;