Ein thematisierbares React Data Grid mit großartigen UX-orientierten Funktionen

KendoReact kann Ihnen jede Menge Zeit sparen, da es vorgefertigte Komponenten anbietet, die Sie sofort in Ihrer App verwenden können. Sie sehen gut aus, aber wichtiger ist, dass sie leicht thematisierbar sind, sodass sie so aussehen, wie Sie es wünschen. Und ich würde sagen, die Optik ist nicht einmal der wichtige Teil. Es gibt viele Komponentenbibliotheken da draußen, die sich auf die Optik konzentrieren. Diese Komponenten bewältigen die schwierigsten Interaktivitätsprobleme in UI/UX und tun dies mit Anmut, Geschwindigkeit und unter Berücksichtigung der Barrierefreiheit.

Werfen wir einen Blick auf ihre React Data Grid Komponente.

Das gute alte <table> Element ist das richtige Werkzeug für Data Grids, aber eine Tabelle bietet nicht die meisten Funktionen, die eine *gute* Erfahrung beim Durchsuchen von Daten ausmachen. Wenn wir die KendoReact <Grid /> Komponente (und Freunde) verwenden, erhalten wir eine ganze Menge zusätzlicher Funktionen, die einzeln schon nicht trivial zu realisieren sind und zusammen eine äußerst überzeugende Lösung ergeben. Gehen wir eine Liste dessen durch, was Sie erhalten.

Sortierbare Spalten

Sie werden sicherlich eine Standardreihenfolge für Ihre Daten wählen, aber wenn eine Zeile Daten 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 sehen. HTML hilft nicht bei der Sortierung in Tabellen, daher ist dies ein Muss (verstehen Sie den Witz?!) für eine JavaScript-Bibliothek für Data Grids, und es ist hier perfekt gelöst.

Paginierung und Limits

Wenn Sie mehr als, sagen wir, ein paar Dutzend Datenzeilen haben, ist es üblich, dass Sie diese paginieren möchten. So müssen die Benutzer nicht so viel scrollen, und ebenso wichtig, es hält die Seite schnell, indem der DOM nicht zu riesig wird. Eines der Probleme mit der Paginierung ist jedoch, dass sie Dinge wie das Sortieren erschwert! Sie können nicht einfach die 20 Zeilen sortieren, die Sie sehen, es wird erwartet, dass der gesamte Datensatz sortiert wird. Natürlich ist das in der KendoReact Data Grid Komponente gelöst.

Oder, wenn Paginierung nicht Ihr Ding ist, bietet das Data Grid virtualisiertes Scrolling – sowohl in Spalten- als auch in Zeilenrichtung. Das ist eine nette Geste, da die Daten schnell geladen werden, für ein reibungsloses, natürliches Scrollen.

Erweiterbare Zeilen

Ein Data Grid hat möglicherweise viele Daten, die in der Zeile selbst sichtbar sind, aber es können noch mehr Daten sein, die ein Benutzer aus einem Eintrag heraussuchen möchte, sobald er ihn gefunden hat. Vielleicht handelt es sich um Daten, die nicht auf die gleiche Weise wie Spaltendaten querbezogen werden müssen. Das kann knifflig sein, wegen der Art und Weise, wie Tabellenzellen angeordnet sind. Die Daten sind immer noch mit einer einzelnen Zeile verknüpft, aber Sie benötigen oft mehr Platz als die Breite einer Zelle bietet. Mit der KendoReact Data Grid Komponente können Sie eine `detail`-Prop mit einer beliebigen React-Komponente übergeben, die angezeigt wird, wenn eine Zeile erweitert wird. Super flexibel!

Responsives Design

Vielleicht das notorisch schwierigste Problem bei <table>-Designs ist die Anzeige auf kleinen Bildschirmen. Herauszoomen ist keine gute UX, ebenso wenig wie das Zusammenklappen der Tabelle zu etwas Nicht-Tabellenartigem. Das Problem bei Data Grids ist, dass sie alle unterschiedlich sind, und Sie wissen am besten, welche Daten für Ihre Benutzer am wichtigsten sind. Die KendoReact Data Grid Komponente hilft dabei, indem sie Ihr Data Grid scrollbar/wischbar macht und auch Spalten fixieren kann, um sicherzustellen, dass sie leicht zu finden und querzubeziehend bleiben.

Daten filtern

Das ist vielleicht meine Lieblingsfunktion, gerade weil sie so UX-fokussiert ist. Stellen Sie sich vor, Sie schauen sich ein großes Data Grid von Bestellungen an und denken: „Lass mich alle Bestellungen von White Clover Markets sehen.“ Mit einer Filterfunktion tippen Sie vielleicht schnell „clover“ in das Filterfeld ein, und voilà, all diese Bestellungen sind da. Das sind knifflige Dinge, wenn man auch noch Sortierung und Paginierung unterstützt – es ist großartig, dass all diese Funktionen zusammenarbeiten.

Daten gruppieren

Nun, diese Funktion haut mich 🤯 ehrlich gesagt ein bisschen um. Filtern und Sortieren sind beide sehr nützlich, aber in einigen Fällen lassen sie etwas zu wünschen übrig. Zum Beispiel kann man zu schnell zu weit filtern und die betrachteten Daten stark einschränken. Und beim Sortieren versuchen Sie vielleicht auch, eine Teilmenge von Daten zu betrachten, aber es liegt an Ihrem Gehirn, herauszufinden, wo diese Daten beginnen und enden. Durch Gruppieren können Sie dem Data Grid sagen, dass es die für Sie wichtigsten Dinge stark gruppieren soll, und dann dennoch Filterung und Sortierung darüber hinaus nutzen. Das macht Ihre Datenexploration sofort einfacher und nützlicher.

Lokalisierung

Hier merkt man wirklich, dass KendoReact keine Kompromisse eingegangen ist. Es wäre äußerst unglücklich, eine Komponentenbibliothek zu wählen und dann festzustellen, dass man Lokalisierung benötigt und feststellt, dass sie nicht als erstklassiger Bürger konzipiert wurde. Das alles vermeiden Sie mit KendoReact, was Sie in dieser Data Grid Komponente sehen. In der Demo können Sie Englisch gegen Spanisch mit einem einfachen Dropdown austauschen und alle Daten lokalisiert sehen. Jede Art von Übersetzung und Lokalisierung wird mit <LocalizationProvider> und <IntlProvider> durchgeführt, beides gängige React-Konzepte.

Exportieren nach PDF oder Excel

Hier ist eine Live-Demo davon

Kommen Sie schon! Das ist *sehr* cool.

Das ist nicht alles…

Schauen Sie sich die Dokumentation für das React Data Grid an. Es gibt noch viele weitere Funktionen, die wir hier nicht behandelt haben (Zeilen-Pinning! Zellenbearbeitung!). Und hier etwas zur Beruhigung: diese Komponente und alle KendoReact-Komponenten sind tastaturfreundlich und erfüllen die Section 508 Zugänglichkeitsstandards. Das ist keine Kleinigkeit. Wenn Komponenten so komplex sind und so viel Interaktivität beinhalten, ist die richtige Zugänglichkeit schwierig. Sie erhalten also nicht nur gut aussehende Komponenten, die überall funktionieren, sondern auch reichhaltig interaktive Komponenten, die eine UX bieten, die über Ihre Vorstellungskraft hinausgeht, und das alles schnell und barrierefrei. Das ist wirklich ziemlich unglaublich.