© TeraVector/Shutterstock.com
Mit der JavaScript-Bibliothek Tabulator Tabellen bauen

Tabellenbau für Fortgeschrittene


Mit Tabulator lassen sich Tabellen auf Basis eines leistungsfähigen JavaScript API realisieren. Entwickler bekommen so Zugang zu fortgeschrittenen Visualisierungs- und Darstellungsfunktionen.

Tabellen haben in der Welt von HTML eine relativ fragwürdige Reputation. Vor vielen Jahren nutzte man sie beispielsweise, um Elemente am Bildschirm anzuordnen. Die Einführung von CSS machte diese zugegebenermaßen etwas unflexible Anwendungsweise unpopulär.

Tabellen spielen allerdings auch in der heutigen Webdesignwelt eine wichtige Rolle. Tim van Beveren mag in seinem Klassiker „Runter kommen sie immer“ noch so oft über digitale Turbinenzustandsanzeigen lästern – möchte man beispielsweise wirtschaftliche Zusammenhänge kompakt darstellen, führt nicht wirklich ein Weg am <table>-Tag vorbei.

Mag man kleinere Tabellen noch von Hand zusammenklicken können, ist mit einem gewissen Anspruch an Darstellung, Formatierung und Interaktivität die Verwendung eines dedizierten Frameworks die bessere Wahl. Tabulator ist seit vielen Jahren auf dem Markt und verdient schon aus diesem Grund Aufmerksamkeit.

Einrichtung des Testharnischs

Tabulator zeigt sich im Bereich der Browserunterstützung kooperativ: Wer für Promises ein Polyfill lädt, kann den Großteil der Programmfunktionen sogar im antiken Internet Explorer 11 verwenden. Unsere erste Aufgabe ist jedenfalls das Einbinden der Bibliothek in einen Testharnisch. Das Tabulator-Team arbeitet mit dem unpkg CDN zusammen, weshalb die Inklusion der aktuellen Version 4.5 mit folgenden Kommandos erfolgt:

<html> <head> <link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script> </head>

Stehen Sie aus irgendeinem Grund mit CDN auf Kriegsfuß, können Sie natürlich auch eine lokale Version der Datei herunterladen. Alternativ dazu unterstützt das Entwicklerteam auch eine Gruppe von Verpackungswerkzeugen wie npm oder Ember.

Die praktische Erfahrung lehrt, dass das Errichten und Zerstören von DOM-Elementen eine sehr teure Operation ist. Tabulator begegnet diesem Problem durch die Einführung des virtuellen DOMs. Dahinter steckt eine Idee, die Mobile-Entwickler aus Android kennen dürften: Die Bibliothek hat eine Art Handapparat von Zellen, die dynamisch an die gerade anzuzeigenden Situationen angepasst werden. Auf diese Art und Weise kann sich Tabulator die sehr teure Speicherallokation bei Betriebssystem und Browser ersparen.

Für uns als Entwickler ist das zwar in Bezug auf die höhere Performance erfreulich, es geht allerdings mit einigen theoretischen Problemen einher. Ärgernis Nummer eins ist, dass man die am Bildschirm erscheinenden DOM-Objekte keinesfalls durch Methoden wie findViewByID anzielen darf. Selbst wenn eine Beispiel-applikation auf ihrer Workstation funktioniert, wäre es vorstellbar, dass sie auf einem anders konfigurierten Kundenrechner die Arbeit einstellt. Ärgernis Nummer zwei ist unter [1] beschrieben – zur Erzeugung des Handapparats braucht Tabulator Informationen über die tatsächliche Größe der Tabelle, die im Rahmen der Initialisierung schon am Bildschirm angezeigt werden. Die Tabelle muss mit einem fixen Größenattribut ausgestattet sein. Für unsere kleinen Experimente wollen wir allerdings nur den folgenden Code verwenden:

<body> <div id="example-table"></div> </body>

In diesem Fall arbeitet Tabulator zwar sehr langsam, blendet die Informationen allerdings ebenfalls ein. Die Anzeige der Scrollbar ist in diesem Fall ebenfalls Aufgabe des Betriebssystems; die Verwendung der in Tabulator enthaltenen Scrollfunktion setzt die Festlegung der Dimensionen voraus.

Danach beginnen wir mit der Bereitstellung der anzuzeigenden Informationen. Die weiter oben in Bezug auf die Sichtbarkeit aufgestellte Bedingung lässt sich dadurch erfüllen, dass wir das Skripttag mit dem eigentlichen Code unter das für die Anzeige vorgesehene Tag platzieren:

<div id="example-table"></div> <script> var tableData = [ {id:1, name:"A A", age:"24", gender:"male", col:"red"}, {id:2, name:"B B", age:"48", gender:"female", col:"blue"}, ];

In kleineren Beispielen reicht es aus, die anzuzeigenden Informationen in Form eines Objekts anzuliefern. Sie sehen, dass wir hier eine Gruppe numerischer und Stringwerte bereitstellen. In produktiven Applikationen findet man hier stattdessen meist DOM-Zugriffe. Im nächsten Schritt rufen wir den Tabulator-Konstruktor auf, der für die Initialisierung der weiter oben beschriebenen virtuellen DOM-Infrastruktur zu sorgen hat:

 var table = new Tabulator("#example-table", { data:tableData, columns:[ {title:"Name", field:"name"}, {title:"Age", field:"age"}, {title:"Gender", field:"gender"}, {title:"Favourite Color", field:"col"}, ], }); </script>

Das Attribut Data ermöglicht Tabulator das Auffinden der Datenquelle – in unserem Fall ist es das soeben besprochene Array mit Personeninformationen. Im columns-Feld erwartet das Programm dann ein zweiwertiges Datenfeld, das die einzelnen Attribute des Datenarrays mit den anzuzeigenden Tabellenspalten korreliert. In unserem Fall haben wir hierbei zwei Attribute: einerseits title, das den Titel der in der Tabelle anzulegenden Spalten beschreibt. Andererseits gibt es noch das Feld field, das den per Reflection anzuwendenden Variablennamen in den einzelnen Objektinstanzen anliefert.

Wichtig ist hier, dass Tabulator Entwickler nicht zur Verwendung aller im Array bereitstehenden Attribute zwingt. Es ist durchaus legitim, nur einen Teil der Felder in Tabellenspalten zu konvertieren. An dieser Stelle ist unser Programm für einen ersten Testlauf bereit. Abbildung 1 zeigt, wie es sich in Google Chrome präsentiert.

hanna_tabulator_1.tif_fmt1.jpgAbb. 1: Tabulator beginnt zu arbeiten

Ereignisverarbeitung

Die in der Einleitung gemachten Feststellungen zum virtuellen DOM wirken auf den ersten Blick wenig motivierend. Amüsanterweise ist Tabulator in der Erfahrung des Autors unterm Strich eines der am stärksten ereignisgetriebenen Frameworks – Ereignisse sind nämlich nicht nur Benutzereingaben, sondern auch im Rahmen der Generierung von DOM-Elementen entstehende Events.

Ein sehr schönes Beispiel, das man in der Praxis immer wieder antrifft, ist das graduelle Einfärben einzelner Tabellenelemente. Hat man beispielsweise eine Tabelle, die die Gesund...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang