Material-ui: [Table] Tête de fixation dans le matériau

J'ai rencontré le même problème aujourd'hui. La version 0.15 avait le prop fixedHeader , la v 1.x n'en a pas. Je suppose qu'il y a des plans pour l'intégrer.

Même problème avec Material-ui v1.0.0-beta.16 .

Ce serait vraiment bien de retrouver cette fonctionnalité !

Même problème avec Material-ui v1.0.0-beta.33

C'est une fonctionnalité indispensable ! Je pense que quiconque travaille avec des grilles de données serait d'accord avec moi.

@mariorubinas Si cette fonctionnalité est importante pour vous, veuillez envisager de soumettre un PR. Vous pouvez utiliser ce numéro si vous souhaitez discuter de votre approche.

C'est une fonctionnalité indispensable !! fonction fonctionnait très bien dans l'ancienne version MUI.

@asrane Dans l'attente de votre pull request.

Hé @mbrookes , j'utilise suffisamment l'en-tête fixe et, comme tout le reste, environ 1.0, je vais tenter ma chance - avez-vous / l'organisation Material-UI avez-vous une manière préférée de fixer les en-têtes de tableau? L'ancien fixedHeader était génial, mais je n'étais pas le plus grand fan de la façon dont il rendait toutes les colonnes de largeur égale ( table-layout: fixed; ), donc j'allais essayer de le réimplémenter pour prendre en charge largeurs de colonnes dynamiques.

@tambling Ce serait génial ! la prise en charge des largeurs de colonnes dynamiques serait idéale.

À noter, l'en-tête peut être collant positionné :

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

@oliviertassinari Merci, ça marche.

@oliviertassinari Les boutons de la cellule du tableau recouvrent l'en-tête du tableau. Comment le résoudre ?
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam Vous devrez ajuster le zIndex pour vos boutons.

@mbrookes Quelle doit être la valeur zIndex pour que les boutons apparaissent et fonctionnent correctement ?
Voici la démo
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam , vous pouvez facilement définir le z-index sur l'en-tête collant et il aura le résultat attendu que vous souhaitez.

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

À des fins d'analyse comparative : https://vuematerial.io/components/table.

@oliviertassinari , cela ne fonctionnera pas sur IE 11, n'est-ce pas ? Techniquement, Material UI prend en charge IE 11. Existe-t-il une solution qui fonctionnera avec IE 11 ?

Quelqu'un a-t-il une solution pour réparer l'en-tête d'une table dans un composant <Dialog> ? position: sticky ne fonctionne pas.

Ne semble pas fonctionner sur Chrome

J'ai un en-tête fixe dans ce composant : https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

Interface utilisateur matérielle 3.xx !

Toujours pas d'en-tête fixe ? IMO sa caractéristique importante..)

Cogner!

Une idée à ce sujet? J'utilise Material Table, mais je ne parviens pas à corriger l'en-tête lorsque le défilement apparaît.

Utilisez simplement deux tables comme dans mon exemple, @mhidalgop.

Utilisez simplement deux tables comme dans mon exemple, @mhidalgop.

Désolé, mais ça ne marche pas pour moi :(

Désolé, mais ça ne marche pas pour moi :(

@mhidalgop , cela vous dérange de partager votre exemple dans quelque chose comme CodeSandbox ?

Enfin j'ai résolu mon problème en utilisant cette solution:

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

Merci !
:)

À noter, l'en-tête peut être collant positionné :

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

Cela fonctionne bien sur un navigateur de bureau, cependant, sur les navigateurs mobiles, cela ne fonctionne pas.

À noter, l'en-tête peut être collant positionné :

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

Cela fonctionne bien sur un navigateur de bureau, cependant, sur les navigateurs mobiles, cela ne fonctionne pas.

J'utilise cette solution dans une application Web et dans une tablette avec Chrome, cela fonctionne bien.

le collant ne fonctionne pas pour moi, donc une autre solution pour réparer l'en-tête du tableau ?

+1

A travaillé pour moi lors de l'application de ce style au <TableContainer>

    height: 100%;
    overflow-y: auto;