Material-ui: [Tabelle] Befestigungskopf in Material

Ich bin heute auf das gleiche Problem gestoßen. Version 0.15 hatte die Eigenschaft fixedHeader , v 1.x nicht. Ich gehe davon aus, dass es Pläne gibt, dies einzuführen.

Dasselbe Problem mit Material-ui v1.0.0-beta.16 .

Wäre wirklich schön, wenn es diese Funktion wieder gäbe!

Gleiches Problem mit Material-ui v1.0.0-beta.33

Diese Funktion ist ein Muss! Ich denke, jeder, der mit Datengrids arbeitet, würde mir zustimmen.

@mariorubinas Wenn diese Funktion für Sie wichtig ist, erwägen Sie bitte, eine PR einzureichen. Sie können diese Ausgabe verwenden, wenn Sie Ihren Ansatz besprechen möchten.

Diese Funktion ist ein Muss!! Funktion hat in der alten MUI-Version hervorragend funktioniert.

@asrane Ich freue mich auf Ihre Pull-Anfrage.

Hey @mbrookes , ich benutze den festen Header genug und mag alles andere an 1.0 genug, dass ich es versuchen werde – haben Sie/die Material-UI-Organisation eine bevorzugte Methode zum Reparieren von Tabellenkopfzeilen? Das alte fixedHeader war großartig, aber ich war nicht der größte Fan davon, wie es alle Spalten gleich breit machte ( table-layout: fixed; ), also wollte ich versuchen, es zur Unterstützung neu zu implementieren dynamische Spaltenbreiten.

@tambling Das wäre toll! Unterstützung für dynamische Spaltenbreiten wäre ideal.

Zu beachten ist, dass der Header klebrig positioniert werden kann:

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

@oliviertassinari Danke, es funktioniert.

@oliviertassinari Schaltflächen in der Tabellenzelle überlagern den Tabellenkopf. Wie löst man es?
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam Sie müssen den zIndex für Ihre Schaltflächen anpassen.

@mbrookes Was sollte der zIndex-Wert sein, damit die Schaltflächen richtig angezeigt werden und funktionieren?
Hier ist die Demo
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam Sie können den Z-Index einfach auf den Sticky-Header setzen und er wird das erwartete Ergebnis haben, das Sie wollen.

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

Für Benchmarking-Zwecke: https://vuematerial.io/components/table.

@oliviertassinari , das funktioniert aber nicht auf IE 11, oder? Technisch unterstützt Material UI IE 11. Gibt es eine Lösung, die mit IE 11 funktioniert?

Hat jemand eine Lösung, um den Header einer Tabelle in einer <Dialog> -Komponente zu reparieren? position: sticky funktioniert nicht.

Scheint bei Chrome nicht zu funktionieren

Ich habe einen festen Header in dieser Komponente: https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

Material-UI 3.xx!

Immer noch kein fester Header? IMO sein wichtiges Merkmal..)

Stoßen!

Irgendeine Idee dazu? Ich verwende die Materialtabelle, aber ich kann die Kopfzeile nicht reparieren, wenn die Schriftrolle angezeigt wird.

Verwenden Sie einfach zwei Tabellen wie in meinem Beispiel @mhidalgop.

Verwenden Sie einfach zwei Tabellen wie in meinem Beispiel @mhidalgop.

Sorry, aber bei mir funktioniert es nicht :(

Sorry, aber bei mir funktioniert es nicht :(

@mhidalgop , macht es Ihnen etwas aus, Ihr Beispiel in etwas wie CodeSandbox zu teilen?

Endlich habe ich mein Problem mit dieser Lösung gelöst:

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

Danke!
:)

Zu beachten ist, dass der Header klebrig positioniert werden kann:

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

Dies funktioniert gut auf einem Desktop-Browser, aber auf mobilen Browsern funktioniert es nicht.

Zu beachten ist, dass der Header klebrig positioniert werden kann:

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

Dies funktioniert gut auf einem Desktop-Browser, aber auf mobilen Browsern funktioniert es nicht.

Ich verwende diese Lösung in einer Web-App und auf einem Tablet mit Chrome funktioniert sie einwandfrei.

das Sticky funktioniert bei mir nicht, also gibt es eine andere Lösung, wie man den Tabellenkopf repariert?

+1

Hat bei mir funktioniert, als ich diesen Stil auf <TableContainer> habe

    height: 100%;
    overflow-y: auto;