Material-ui: [Tabla] Cabezal de fijación en material

Me encontré con el mismo problema hoy. La versión 0.15 tenía el accesorio fixedHeader , v 1.x no. Supongo que hay planes para conseguir esto.

Mismo problema con Material-ui v1.0.0-beta.16 .

¡Sería muy bueno tener esta función de vuelta!

Mismo problema con Material-ui v1.0.0-beta.33

¡Esta es una característica imprescindible! Creo que cualquiera que trabaje con cuadrículas de datos estaría de acuerdo conmigo.

@mariorubinas Si esta característica es importante para usted, considere enviar un PR. Puede utilizar este número si desea analizar su enfoque.

¡Esta es una característica imprescindible! La característica funcionó muy bien en la versión anterior de MUI.

@asrane Esperamos su solicitud de extracción.

Hola, @mbrookes , uso el encabezado fijo lo suficiente y me gusta todo lo demás sobre 1.0 lo suficiente como para intentarlo: ¿usted/la organización Material-UI tiene una forma preferida de arreglar los encabezados de las tablas? El antiguo fixedHeader era excelente, pero no era el mayor admirador de cómo hacía que todas las columnas tuvieran el mismo ancho ( table-layout: fixed; ), así que iba a intentar volver a implementarlo para admitir anchos de columna dinámicos.

@tambling ¡ Eso sería genial! el soporte para anchos de columna dinámicos sería ideal.

Para tener en cuenta, el encabezado se puede colocar de forma fija:

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

@oliviertassinari Gracias, Funciona.

@oliviertassinari Los botones en la celda de la tabla se superponen al encabezado de la tabla. Como resolverlo ?
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam Deberá ajustar el zIndex para sus botones.

@mbrookes ¿Cuál debería ser el valor de zIndex para que los botones aparezcan y funcionen correctamente?
Aquí está la demostración
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam puede configurar fácilmente el índice z en el encabezado fijo y tendrá el resultado esperado que desea.

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

Para fines de evaluación comparativa: https://vuematerial.io/components/table.

@oliviertassinari , eso no funcionará en IE 11, ¿verdad? Técnicamente, Material UI es compatible con IE 11. ¿Hay alguna solución que funcione con IE 11?

¿Alguien tiene una solución para arreglar el encabezado de una tabla dentro de un componente <Dialog> ? position: sticky no funciona.

No parece funcionar en Chrome

Tengo un encabezado fijo en este componente: https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

Material UI 3.xx!

¿Aún no tienes un encabezado fijo? En mi opinión, su característica importante ...)

¡Protuberancia!

¿Alguna idea sobre esto? Estoy usando la tabla de materiales, pero no puedo corregir el encabezado cuando aparece el desplazamiento.

Simplemente use dos tablas como en mi ejemplo, @mhidalgop.

Simplemente use dos tablas como en mi ejemplo, @mhidalgop.

Lo siento, pero no me sirve :(

Lo siento, pero no me sirve :(

@mhidalgop , ¿le importaría compartir su ejemplo en algo como CodeSandbox?

Finalmente he resuelto mi problema usando esta solución:

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

¡Gracias!
:)

Para tener en cuenta, el encabezado se puede colocar de forma fija:

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

Esto funciona bien en un navegador de escritorio, sin embargo, en los navegadores móviles no funciona.

Para tener en cuenta, el encabezado se puede colocar de forma fija:

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

Esto funciona bien en un navegador de escritorio, sin embargo, en los navegadores móviles no funciona.

Estoy usando esta solución en una aplicación web y en una tableta con Chrome funciona bien.

el pegajoso no funciona para mí, entonces, ¿alguna otra solución sobre cómo arreglar el encabezado de la tabla?

+1

Funcionó para mí al aplicar este estilo a <TableContainer>

    height: 100%;
    overflow-y: auto;