Table-Plugin Grid.js 04.08.2021, 11:18 Uhr

Dynamische Datenkataloge

Grid.js ist ein Table-Plugin für die Anzeige und Bearbeitung von Daten im Web.
(Quelle: Shutterstock)
Neben der reinen Anzeige von Daten ist auch die Interaktion damit eine Notwendigkeit. Zum Beispiel das Sortieren und Filtern nach Kriterien. Funktioniert das nicht performant, führt es nur zu Frust. Datentabellen sind somit über die Jahre fester Bestandteil von Bibliotheken und Frameworks geworden. In diesem Artikel wird Grid.js vorgestellt, einem Table-Plugin für verschiedenste Anwendungsfälle.
Daten sind überall und Web-Anwendungen ohne die Anforderung, Daten in irgendeiner Weise und Umfang zu bearbeiten, ist vermutlich relativ selten. Mindestens die Anzeige von Daten ist gefordert, damit Anwender darauf basierend zum Beispiel Entscheidungen treffen können. Und wenn Daten erst einmal angezeigt werden, dann ist auch die Eingabe und Bearbeitung ebendieser Daten nicht mehr weit.
Da die Datenmengen aber immer umfangreicher werden, ist die Frage, wie Datensätze sinnvoll in eine Anwendung integriert werden können. Die Form einer Liste, beziehungsweise Tabelle, wird dabei noch immer sehr häufig gewählt. Oftmals, weil die Daten auch tabellarisch vorliegen. Datentabellen oder Data Tables sind eine oft genutzte Variante, um die Daten in einer Tabelle anzuzeigen. Moderne Ausprägungen dieser Tabellenform kommen mit fortgeschrittenen Features einher, wie zum Beispiel das Filtern, Sortieren und das seitenweise Navigieren in den Daten. Zusätzlich zu Funktionen wie dem Lazy Loading der Daten in einem bestimmten Umfang, damit nicht zu viele Informationen vom Server in den Browser transferiert werden müssen und einem virtuellen DOM, falls der Datenberg doch einmal viel umfangreicher ist.

Jetzt 1 Monat kostenlos testen!

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
  • + Digitales Kundenkonto,
  • + Zugriff auf das digitale Heft,
  • + Zugang zum digitalen Heftarchiv,
  • + Auf Wunsch: Weekly Newsletter,
  • + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar