Material-ui: [docs] Tabelle virtualisiert

Wir hoffen, dass die aktuelle API eine einfache Integration mit react-virtualized . Wir sind offen für Änderungen an der Implementierung, um die Integration zu vereinfachen.

Ein Demo-Beispiel in den Dokumenten zu haben, wäre fantastisch.

Wenn dies hilfreich sein kann, finden Sie hier ein Integrationsbeispiel mit der Liste / dem Menü https://codesandbox.io/s/oQ0nkl5pk.

@oliviertassinari Ich habe es ohne react-virtualized weil es ein Chaos war und es nicht gut mit Mui-Komponenten gespielt hat.
Darüber hinaus ist meine aktuelle Lösung ein reiner CSS-fester Kopf und ein scrollbarer Körper mit dynamischer Tabellenhöhe und dynamischer Spaltenbreite (auch auf Safari getestet).
Der immer oben stehende Kopf mit einem scrollbaren Körper ist ein Muss für Datengitter.

Ich füge Scroll-Debouncing hinzu, optimiere die Leistung und behebe einige Störungen, aber es funktioniert großartig: Ich rendere "virtuell" ungefähr ~ 2400 Zeilen, sooo glatt.

Fragen zu Table Komponenten:

1. Wie verwende ich ref mit MUI-Komponenten? Ich berechne automatisch TableThead height: Das Problem ist das

<TableHead ref={ ref => this.tableThead = ref }>

gibt nicht das eigentliche DOM-Containerelement von TableThead sondern die React-Instanz (natives Verhalten von React beim Anwenden von ref auf ein Nicht-DOM-Element), da dies in TableThead angewendet werden sollte. refHandler ? (Ich hoffe, ich habe es geschafft, dies zu erklären @ _ @)
Meine aktuelle Lösung ist eine seltsame

const theadHeight = ReactDOM.findDOMNode(this.tableThead).clientHeight; // eslint-disable-line react/no-find-dom-node

Dies bedeutet, dass Sie das veraltete findDomNode und eslint ebenfalls deaktivieren.

1. Warum wird border-bottom auf Zellen anstatt auf Zeilen angewendet?

2. Was ist mit einer stripe={true} Requisite, um automatisch TableBody Zeilen zu entfernen?

3. Warum hat .MuiIconButton.root eine Eigenschaft im zIndex-Stil? 🤔

Ich hoffe, bald etwas Stabiles darüber zu veröffentlichen, damit Sie einen Blick darauf werfen können, dass dies etwas ist, das allgemein übernommen werden kann.

Es tut mir leid, dass ich mich so sehr darum kümmere, aber ich benutze mui @ next sehr häufig, also sehe ich viele Anwendungsfälle!

Ich habe es ohne reaktionsvirtualisiert gemacht, weil es ein Chaos war und es nicht gut mit Mui-Komponenten gespielt hat.

Oh, das ist eine Schande für uns. Irgendeine Idee, was wir tun könnten, ist möglich?

1. Sie können die innerRef ausprobieren, um eine Referenz für die TableHead . ref erhalten Sie einen Hinweis auf die Komponente withStyles(TableHead) . Wenn das nicht funktioniert, können wir eine rootRef verfügbar machen. Das ist ein Muster, das wir bereits verwenden.

2. Keine Ahnung

3. Was meinst du mit Streifen?
4. Ich habe es in # 7467 entfernt

~~Oh, das ist eine Schande für uns.

Tatsächlich handelt es sich um eine Mischung aus react-virtualized eigenen Containern, nativen table/thead/tbody DOM-Elementen und der Notwendigkeit eines scrollbaren tbody was das Problem verursacht hat.
Es war zu viel Arbeit erforderlich: Es war ein Kinderspiel, einfach eine Ad-hoc-Lösung für MuiTable erstellen.

1. Das Aufdecken eines rootRef wäre großartig (vorausgesetzt, TableThead Hauptelement in der render -Methode ist das Thead DOM-Element selbst)

2. sollte border-bottom dann auf tr verschoben werden? Sollte ich dies in ein spezielles Thema verschieben?

3. Ich meine gestreifte Reihen: leicht zu erreichen mit like tr:nth-child(odd) { backgroundColor: f2f2f2 aber da wir bereits die handliche hover={true} Färbung haben, warum nicht die handliche striped={true} ? :) :)

4. großartig!

1. 👍 Klingt nach einem Plan, hier ein Beispiel , eine PR ist willkommen.
2. Bootstrap macht dasselbe , ich denke, dass es mehr Flexibilität bietet, indem es auf dem TableCell .
3. Weil es nicht in der Spezifikation enthalten ist und einfach im Userland implementiert werden kann?
4. 👍

1. Ich bin mir nicht sicher, ob ich einfach ref={rootRef} für jede Komponente habe.
   Entwickler, die es verwenden, müssen wahrscheinlich (meistens) die Kontrolle über das DOM haben.
   In Ihrem Beispiel gibt <FormControl ref={rootRef} ...> erneut einen Verweis auf die React-Komponente zurück (da FormControl kein DOM-Element ist) und lässt den Entwickler die Problemumgehung verwenden, die ich verwenden musste.
   Vielleicht sollten sich die rootRef wie folgt verhalten:

Ist der Container der gerenderten Komponente ein DOM-Element?

• Wenn ja, dann wende ref={rootRef} an
• Andernfalls wenden Sie rootRef={rootRef} an =>, was sich bis zum ersten DOM-Element ausbreitet: Auf diese Weise hat der Codierer immer die echte DOM-Referenz

Die Gesamtlösung, an die ich denken kann, besteht darin, muiRef und rootRef Eigenschaften zu haben, wobei die erstere den Rückruf auf den Container "Mui-Komponente" (falls vorhanden) anwendet und die letztere den Rückruf wie ich anwendet sagte vorher.
Auf diese Weise kann der Entwickler problemlos sowohl eine MUI-Referenz als auch eine DOM-Referenz haben (was auch immer er benötigt, wann immer er benötigt).
Halten Sie das für sinnvoll?

1. Ja wirklich? @ _ @

2. ops! Ich vergesse immer die Materialspezifikationen

1. Oh, ich habe nicht über diesen Fall nachgedacht. Das Problem, auf das Sie sich beziehen, ist das folgende:
2. Komponente A nimmt eine ref und eine rootRef -Eigenschaft an
3. Reagieren Sie auf den Abschnitt ref und wenden Sie ihn auf das Element an
4. Komponente B erhält eine rootRef -Eigenschaft und wendet sie als Referenz auf die Stammkomponente C an
5. Reagieren Sie, indem Sie dieses ref abfangen und auf das Element anwenden

Was aber, wenn Komponente C auch eine rootRef-Eigenschaft hat?
Komponente A kann sich im Benutzerland befinden, Komponente B kann das TextField sein und Komponente C kann das FormControl sein.

Also meine Antwort, zuerst haben wir rootRef als einfachen Helfer eingeführt. Wir haben nicht über Industrialisierung nachgedacht. Daher denke ich, dass das aktuelle Verhalten deterministisch, einfach und ohne die von Ihnen beschriebene Einschränkung findDOMNode- API verwenden.

@damianobarbati War reagieren-virtual-Liste das Experiment mit Tabelle und Virtualisierung erwähnt hier ?

Ich vermute listComponent = TableBody, itemComponent = TableRow?

Ich habe dieses Projekt gestartet, das reaktionsvirtualisiert mit Material 1.0 verwendet, an dem Sie interessiert sein könnten.

https://github.com/techniq/mui-table

Es ist noch in Arbeit (siehe https://github.com/techniq/mui-table/blob/master/TODO.md), könnte aber für Sie nützlich sein. Es fehlen Dokumente, aber schauen Sie sich die Geschichten an, um ein Gefühl dafür zu bekommen, wie man sie benutzt.

@techniq Das sieht vielversprechend aus 😄! Ich denke, es wäre großartig, den Abschnitt mit
- https://github.com/DevExpress/devextreme-reactive~~ (kommerzielle Lizenz)

• https://github.com/gregnb/mui-datatables
• https://github.com/techniq/mui-table

Wir können es auch zum Abschnitt https://material-ui-next.com/discover-more/related-projects/#material-ui-specific-projects hinzufügen.
Lassen Sie uns wissen, wann das Projekt ausgereifter ist. Ich denke, dass wir eine Pull-Anfrage annehmen können, um das Projekt zu bewerben :).

Ich habe hier eine PR für react-virtual-list https://github.com/clauderic/react-tiny-virtual-list/pull/30, die die Verwendung mit Material-UI ermöglicht. Ich hatte Mühe, reaktionsvirtiv zum Laufen zu kommen und gültiges HTML zu erstellen, da es div fest codiert hat.

cc: @kgregory

@eyn gute Arbeit! Ich habe gerade eine Implementierung einer Infinite-Scrolling-Tabelle mit React-Virtualized und Material-UI abgeschlossen. Ich hoffe, bald einen Kern zusammen zu werfen. Wenn ich das tue, werde ich es hier für zukünftige Besucher dieser Ausgabe und möglicherweise als Beispiel in den Dokumenten verlinken.

@kgregory hast du dein Wesentliches beendet? Ich bin immer noch auf der Suche nach einer grundlegenden Lösung für die virtualisierte Material-UI-Tabelle und sie ist nicht leicht zu finden ... Es wäre eine große Hilfe!

Danke für deine Arbeit!

@neofox Nein, sorry. Ich bin nie dazu gekommen, aber Ihre Antwort ist eine nette Erinnerung. Ich werde versuchen, Zeit zu finden, um etwas zusammenzustellen.

@oliviertassinari Ihr Beispiel in einem der ersten Kommentare, der angeblich zeigt, wie die Materialliste mit der reaktionsvirtualisierten Liste verwendet wird, funktioniert nicht. Haben Sie noch dieses Beispiel herumliegen?

@rolandjitsu Sorry, ich habe keine Beispiele. Darum geht es in dieser Ausgabe :).

@oliviertassinari hat es verstanden. Ich dachte, dieses Problem betrifft die Tabelle und nicht die <List> , oder es deckt auch die Listen ab?

@rolandjitsu Die Liste, die Tabelle, das Papier, die

@oliviertassinari Ich würde dem gerne einen Riss geben, wenn du mich in die richtige Richtung weisen kannst. Soweit ich das beurteilen kann, brauchen wir einen Grundgedanken mit material-ui @ next, der in React-virtualized integriert ist.

@ hassan-zaheer Ja, ich denke, dass eine einfache Demo mit React-Virtualized am Ende der Tabellen-Docs-Seite den Trick macht :).

Hallo. Zufällig stolperte ich bei der Recherche für mein Projekt über diesen Thread. Ich würde gerne wissen, ob es hier ein Update bezüglich der Demo oder der Nutzungsdokumentation gibt. @kgregory Oder können Sie einen Einblick in die Integration der beiden geben? Es wäre schön, den Tisch stilvoll zu gestalten

@ zd-project Du kannst dir mein mui-virtualized-table Projekt ansehen.

Früher war es Mui-Table, aber ich habe mich entschlossen, die 2 zu mui-table nutzt das DOM direkt und lässt Sie Dinge wie position: sticky und <table> Layout verwenden (Zeilen- / Spaltenbereiche, automatische Breiten usw.), die mit React-Virtualized schwierig waren.

Nachdem dies gesagt wurde, hat mui-virtualized-table gerade die Spaltengröße einer netten PR hinzugefügt.

Wo sind wir auf diesen Jungs?

@techniq , danke für mui-virtualized-table ! Es ist toll! Gibt es eine Chance, dass wir es zu mui-org/material-ui verschmelzen lassen?

Ich würde mich freuen, wenn jemand eine PR öffnen würde, die eine Demo in die Dokumente einführt. Auf diese Weise können wir prüfen, ob wir die Tabellen-API für eine bessere Integration in Virtualisierungsstrategien verbessern können.

@mastertinner Warum müssen wir dies zum Kern hinzufügen? Virtualisierung ist eine Optimierungsstrategie. Nicht jeder rendert große Datenmengen, daher würde ich nicht das Bündel aller damit belasten.

@mastertinner Wir könnten damit beginnen, das Projekt in der Dokumentation zu referenzieren, zum Beispiel hier: https://material-ui.com/demos/tables/#advanced-use-cases :)

👍 klingt nach einem Plan

@mastertinner Während ich es noch benutze (wenn Virtualisierung benötigt wird), benutze ich auch meine neuere Mui-Tabelle, wenn ich keine Virtualisierung benötige, und kann den Dom nutzen (mit table , tr , td oder CSS-Raster für das Layout, wodurch explizite Spaltenbreiten usw. nicht mehr erforderlich sind) und einige erweiterte Muster wie mehrere position: sticky -Header (wie diese ) aktiviert werden

@rogerstorm hat diese Ausgabe mit 30 US- Sehen Sie es auf IssueHunt

Beschlossen, heute damit herumzuspielen, empfehle ich nicht 😭 Folgendes habe ich bisher produziert:

Bitte entschuldigen Sie die Verzögerung, mein Laptop ist nicht großartig. Er verwendet Material-UI-Komponenten und react-virtualized -Komponenten

@joshwooding Ich habe genau das getan, was Sie getan haben, virtualisiert + fester Header (mit Bildlaufleiste nur am Körper) . Wenn Ihre Implementierung zwei separate <Table> s verwendet, haben Sie wahrscheinlich die gleichen Probleme, die ich gefunden habe.

• Die Ausrichtungsrequisiten des Materials (z. B. numeric ) funktionieren nicht, da Sie möglicherweise eine Komponente wie <div> für das Layout innerhalb von <TableCell> .
• Sie können CSS-Eigenschaften für td und tr angeben, damit sie korrekt virtualisiert funktionieren. Es gibt keine Möglichkeit, height oder max-height zu td und tr und das <TableCell> Materials hat seine eigene Polsterung, Rand-Dinge, die es macht es ist schwer, die Höhe der Reihe zu bestimmen.

Nun, der Punkt ist eine Komponente innerhalb von <TableCell> ist unvermeidlich. Ich frage mich, ob Sie dieses Problem auf elegante Weise gelöst haben. Wenn nicht, denke ich, dass es schwierig ist, eine virtualisierte + feste Kopfzeile (mit Bildlaufleiste nur am Körper) als kleine (so kleine wie ihre Funktion), gut definierte Komponente zu verwenden.

@worudso Derzeit wird nur ein <Table> Ich muss einen Weg finden, um die Zahlen weiterzugeben, aber möglicherweise kann ich das zum Laufen bringen. Es ist definitiv keine kleine Komponente und mein Code ist immer noch ein bisschen überall, aber ich werde noch etwas daran arbeiten und sehen, ob ich ihn verfeinern kann

Ich habe eine Sandbox erstellt , die die Verwendung von Material-UI und React-Virtualized demonstriert, um eine virtualisierte Tabelle zu erstellen. In diesem Beispiel wird reaktionsvirtualisiert verwendet, um die Größe der Tabelle an die Höhe des Fensters anzupassen.

Die MuiVirtualizedTable -Komponente aus dem Beispiel ist auch in dieser Übersicht verfügbar.

MuiVirtualizedTable kann alle von einer Tabelle unterstützten Requisiten akzeptieren. Das rowClassName wird nicht direkt angewendet, sondern zusätzlich zu anderen in MuiVirtualizedTable definierten Stilen.

Die columns -Stütze erwartet ein Array von Objekten, das beim Rendern von Zellen für jede Spalte verwendet wird. Jedes Objekt kann jede von Column unterstützte Requisite akzeptieren.

Ich entschuldige mich dafür, dass ich so lange gebraucht habe. Ich war beschäftigt.

Zu Ihrer Information, es gibt jetzt auch react-window der react-virtualized Nachfolger sein soll. Für den Fall, dass jemand das ausprobieren wollte.

@kgregory Vielen Dank, dass Sie die Codesandbox geteilt haben.

@ Joshwooding Tolle Demo. Es ist toll, einen festen Header zu haben :). Ich hoffe, Sie können die Implementierung abschließen! Was hindert Sie in Bezug auf die numerische Weiterleitung daran, direkt auf die Zellen anzuwenden? React-Window vs React-Virtualized

@oliviertassinari Ich habe mir das Ziel gesetzt, die API der Table -Komponente zu verwenden, und im Moment sieht es nicht so aus, als könnten Sie benutzerdefinierte Requisiten über die Column -Komponente übergeben. Es gibt jedoch wahrscheinlich Möglichkeiten, dies zu tun, ohne die reaktionsvirtualisierte Methode zu verwenden

@joshwooding Haben Sie https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#headerrowrenderer ausprobiert?

@oliviertassinari Ich habe versucht, HeaderRowRenderer zu verwenden, aber es sieht so aus, als könnten Sie keine benutzerdefinierten Requisiten übergeben, ohne die vorhandenen Requisiten zu manipulieren, da dies aufgerufen wird, um die Spalten zu erstellen, die an den headerRenderer weitergeleitet werden sollen:

const renderedHeader = headerRenderer({ columnData, dataKey, disableSort, label, sortBy, sortDirection, });

@oliviertassinari Für eine Tabelle mit fester Höhe können Sie die Demo von @kgregory nur geringfügig bearbeiten: https://codesandbox.io/s/6vo8y0929k

@ Joshwooding Sieht gut aus! Ich kann mir nichts vorstellen, was fehlt, um es zu einer offiziellen Demo zu machen.

@issuehuntfest hat 60,00 USD für diese Ausgabe finanziert. Sehen Sie es auf IssueHunt

@oliviertassinari Ich werde daran arbeiten, dies umzusetzen :)

@joshwooding hat eine Pull-Anfrage eingereicht. Sehen Sie es auf IssueHunt

@oliviertassinari hat Sehen Sie es auf IssueHunt

• : moneybag: Gesamteinzahlung: $ 90.00
• : tada: Repository-Belohnung (0%): 0,00 USD
• : Schraubenschlüssel: Servicegebühr (10%): 9,00 USD

@oliviertassinari hat

Wohlverdient. Gute Arbeit @joshwooding!

Ich habe einen ähnlichen Bedarf, aber für die List-Komponente ... würde der gleiche Ansatz funktionieren, damit die Liste funktioniert?

@mdizzy Ja, wir könnten eine ähnliche Demo für die Liste hinzufügen.

Ich versuche gerade, eine Liste mit Reaktionsfenster virtuell zu machen (wie der Ersteller vorgeschlagen hat, sie anstelle von virtualisiert zu verwenden, wenn Sie nicht die vollständige API benötigen, aber am Ende ändert sich die API für eine Liste nicht wirklich so viel)

Bisher habe ich zwei große Probleme:
1) Der Stil von Listenelementen ist fehlerhaft, insbesondere bei Dingen wie richtigen Symbolen / Aktionen. Ich denke, dass der Stil der virtuellen Liste nicht gut mit dem Styling von material-ui zusammenspielt
2) Sticky-Subheader werden ebenfalls sehr chaotisch, wahrscheinlich aus dem gleichen Grund (Reaktionsfenster verwenden Position absolut, um die Elemente zu gestalten)

Ich werde wahrscheinlich versuchen, reaktionsvirtualisiert zu werden, um zu sehen, ob sie besser zusammenarbeiten

@MastroLindus Ich nehme an, Sie haben zuerst unsere Virtualisierungsdemo ausprobiert?

@oliviertassinari Ich habe auf meinem eigenen Weg angefangen, die oben beschriebenen Probleme gefunden, danach gegoogelt und diesen Thread gefunden.

Dann entdeckte ich die Virtualisierungsdemo, überprüfte ihren Code und stellte fest, dass dies im Grunde dasselbe ist, was ich selbst mache (nur auf Tabellen anstelle von Listen angewendet).

Meine Probleme sind etwas mehr Listen. Das allgemeine Konzept funktioniert, aber Dinge wie Symbole, Aktionen und klebrige Überschriften funktionieren nicht richtig.
Im Detail unter Bezugnahme auf meine 2 Punkte im obigen Kommentar:
Problem Nr. 1 könnte ein Problem mit dem Reaktionsfenster sein, das bei der Reaktion virtualisiert nicht vorhanden sein wird. Ich werde es Sie wissen lassen, sobald ich es heute oder morgen versuche. Vielleicht haben wir Glück und es funktioniert einfach mit React-Virtualized. Wir werden sehen.
Problem Nummer 2 (klebrige Subheader funktionieren nicht richtig) Ich denke, es ist etwas, das ohnehin eine Ad-hoc-Lösung benötigt, da ihre Positionierung wahrscheinlich zu einem Konflikt führen wird, egal was passiert. Jemand hat https://github.com/marchaos/react-virtualized-sticky-tree für ein ähnliches Problem erstellt (nachdem er mit klebrigen Headern reaktionsvirtualisiert wurde), aber ich hatte momentan nicht die Zeit, mich damit zu befassen

@MastroLindus Welche Probleme haben wir mit https://next.material-ui.com/demos/tables/#virtualized -table?

@oliviertassinari Keine.
Ich habe angegeben, dass meine Probleme spezifisch für virtuelle Listen sind, nicht für virtuelle Tabellen. (Nochmals: Es tut mir leid, dass ich über das Problem für Table Virtualized schreibe, es gibt keine für virtualisierte Listen und ich habe den Kommentar von @mdizzy weiterverfolgt. )

In Bezug auf die Listen: Die Verwendung von ListItemSecondaryAction, ListItemIcon und ListSubheader (mit klebrigen Headern) scheint nicht zu funktionieren, da ihre Positionierung durcheinander gebracht wird.
Ohne diese Komponenten habe ich eine grundlegende Liste für die Arbeit mit React-Window erhalten (und ich denke, dasselbe würde ich bei React-Virtualized tun).

@MastroLindus Ich denke, dass Sie die Diskussion auf # 15149 verschieben können.