Ein thematisch anpassbares React-Datenraster mit großartigen UX-fokussierten Funktionen

KendoReact kann Ihnen eine Menge Zeit sparen, da es vorgefertigte Komponenten bietet, die Sie sofort in Ihrer App verwenden können. Sie sehen gut aus, aber was noch wichtiger ist, sie lassen sich leicht thematisch anpassen, sodass sie so aussehen, wie Sie es möchten. Und ich würde sagen, das Aussehen ist nicht einmal der entscheidende Teil. Es gibt viele Komponentenbibliotheken, die sich auf die Optik konzentrieren. Diese Komponenten lösen die schwierigsten Interaktivitätsprobleme in UI/UX und tun dies mit Blick auf Anmut, Geschwindigkeit und Zugänglichkeit.

Werfen wir einen Blick auf ihre Reagieren Sie auf das Datenraster Komponente.

Der alte <table> Element ist das richtige Werkzeug für den Job für Datenraster, aber eine Tabelle bietet nicht die meisten Funktionen, die eine Tabelle ausmachen gut Daten-Browsing-Erlebnis. Wenn wir KendoReact verwenden <Grid /> Komponente (und Freunde) erhalten wir eine Menge zusätzlicher Funktionen, von denen jedes einzelne nicht trivial umzusetzen ist und alles in allem eine äußerst überzeugende Lösung ergibt. Lassen Sie uns eine Liste dessen durchgehen, was Sie erhalten.

Sortierbare Spalten

Sie werden sicherlich eine Standardreihenfolge für Ihre Daten auswählen, aber wenn eine bestimmte Datenzeile Dinge wie IDs, Daten oder Namen enthält, ist es sehr wahrscheinlich, dass ein Benutzer die Spalte nach diesen Daten sortieren möchte. Vielleicht möchten sie die ältesten Bestellungen oder die Bestellungen mit dem höchsten Gesamtwert anzeigen. HTML hilft nicht bei der Sortierung in Tabellen, daher handelt es sich hier um eine Tabelle (verstanden?!) für eine JavaScript-Bibliothek für Datenraster, und sie wird hier perfekt gehandhabt.

Paginierung und Grenzen

Wenn Sie mehr als beispielsweise ein paar Dutzend Datenzeilen haben, ist es üblich, diese zu paginieren. Auf diese Weise müssen Benutzer nicht so viel scrollen, und was ebenso wichtig ist: Die Seite bleibt schnell, da das DOM nicht zu groß wird. Eines der Probleme bei der Paginierung besteht jedoch darin, dass sie beispielsweise das Sortieren erschwert! Sie können nicht nur die 20 angezeigten Zeilen sortieren, es wird erwartet, dass der gesamte Datensatz sortiert wird. Das wird natürlich in der Data Grid-Komponente von KendoReact erledigt.

Oder wenn Paginierung nicht Ihr Ding ist, bietet das Datenraster virtualisiertes Scrollen – sowohl in Spalten- als auch in Zeilenrichtung. Das ist eine nette Geste, da die Daten schnell geladen werden und ein reibungsloses, natürliches Scrollen ermöglicht wird.

Erweiterbare Zeilen

In einem Datenraster sind möglicherweise viele Daten in der Zeile selbst sichtbar, aber es gibt möglicherweise noch mehr Daten, die ein Benutzer möglicherweise aus einem Eintrag heraussuchen möchte, sobald er ihn gefunden hat. Möglicherweise sind es Daten, die nicht auf die gleiche Weise mit Querverweisen versehen werden müssen wie Spaltendaten. Dies kann aufgrund der Anordnung der Tabellenzellen schwierig zu bewerkstelligen sein. Die Daten sind immer noch einer einzelnen Zeile zugeordnet, Sie benötigen jedoch häufig mehr Platz, als die Breite einer Zelle bietet. Mit der KendoReact Data Grid-Komponente können Sie eine übergeben detail prop mit einer beliebigen React-Komponente, um anzuzeigen, wann eine Zeile erweitert wird. Super flexibel!

Responsive Design für mobile Endgeräte

Vielleicht die notorisch schwierigste Sache, die man durchziehen kann <table> Designs ist, wie man sie auf kleinen Bildschirmen anzeigt. Das Herauszoomen ist keine sehr gute UX, ebenso wenig wie das Reduzieren der Tabelle in etwas, das nicht tabellenartig ist. Das Besondere an Datengittern ist, dass sie alle unterschiedlich sind und Sie am besten wissen, dass Daten für Ihre Benutzer am wichtigsten sind. Die KendoReact Data Grid-Komponente hilft dabei, indem sie Ihr Datenraster scrollbar/wischbar macht und außerdem die Möglichkeit bietet, Spalten zu sperren, um sicherzustellen, dass sie weiterhin leicht zu finden und mit Querverweisen versehen sind.

Daten filtern

Dies ist vielleicht meine Lieblingsfunktion, einfach weil sie so UX-orientiert ist. Stellen Sie sich vor, Sie sehen sich ein Big-Data-Raster mit Bestellungen an und sagen: „Lassen Sie mich alle Bestellungen von White Clover Markets sehen.“ Mit einer Filterfunktion geben Sie vielleicht schnell „Klee“ in die Filtereingabe ein, und Viola, alle diese Befehle sind direkt da. Das ist besonders knifflig, wenn Sie auch die Reihenfolge und Paginierung unterstützen – es ist also großartig, dass alle diese Funktionen zusammenarbeiten.

Daten gruppieren

Diese Funktion haut mich tatsächlich ein wenig um 🤯. Filtern und Sortieren sind beide sehr nützlich, lassen jedoch in manchen Fällen etwas zu wünschen übrig. Es kann beispielsweise leicht passieren, dass zu schnell zu weit gefiltert wird, wodurch die angezeigten Daten sehr begrenzt bleiben. Und beim Sortieren versuchen Sie möglicherweise auch, eine Teilmenge von Daten zu betrachten, aber es liegt an Ihrem Gehirn, herauszufinden, wo diese Daten beginnen und enden. Mit der Gruppierung können Sie das Datenraster anweisen, die für Sie wichtigsten Dinge stark zu gruppieren und darüber hinaus noch Filter und Sortierung zu nutzen. Es macht Ihre Datenexploration sofort einfacher und nützlicher.

Lokalisierung

Hier merkt man wirklich, dass KendoReact voll ausgelastet ist. Es wäre äußerst bedauerlich, sich für eine Komponentenbibliothek zu entscheiden und dann zu erkennen, dass eine Lokalisierung erforderlich ist, und dann zu erkennen, dass sie nicht dafür gemacht ist, ein erstklassiger Bürger zu sein. All das vermeiden Sie mit KendoReact, was Sie in dieser Data Grid-Komponente sehen können. In der Demo können Sie mit einem einfachen Dropdown zwischen Englisch und Spanisch wechseln und alle Daten lokalisiert sehen. Mit dem können Sie jede Art von Übersetzung und Lokalisierung durchführen <LocalizationProvider> und <IntlProvider>, beides komfortable React-Konzepte.

Exportieren nach PDF oder Excel

Hier ist eine Live-Demo davon:

Komm schon! Das ist sehr cool.

Das ist nicht alles…

Schauen Sie sich die Dokumente für das React Data Grid an. Es gibt eine Reihe weiterer Funktionen, auf die wir hier noch nicht einmal eingegangen sind (Zeilenfixierung! Zellenbearbeitung!). Und hier etwas zur Beruhigung: Diese Komponente und alle KendoReact-Komponenten sind tastaturfreundlich und erfüllen die Barrierefreiheitsstandards von Abschnitt 508. Das ist keine Kleinigkeit. Wenn Komponenten so komplex sind und so viel Interaktivität erfordern, ist es schwierig, die Zugänglichkeit richtig zu gestalten. Sie erhalten also nicht nur gut aussehende Komponenten, die überall funktionieren, sondern auch äußerst interaktive Komponenten, die eine UX bieten, die über das hinausgeht, was Sie sich vielleicht vorstellen, und das alles schnell und leicht zugänglich. Das ist wirklich ziemlich unwirklich.

Quelle: https://css-tricks.com/a-themeable-react-data-grid-with-great-ux-focused-features/