In unserem kreativen Schaffen gibt es besondere Anforderungen, um alle Wünsche unserer Kunden zu jederzeit vollumfänglich bedienen zu können. Zu diesen Anforderungen gehört auch eine interaktive Bedienbarkeit von Webanwendungen, um diese intuitiver und praktikabler zu gestalten. Daher sind wir bereits seit längerem auf den Zug der dynamischen Web-Technologien aufgesprungen. Unter anderem arbeiten wir intensiv mit Vue.js, einem Web-Framework, das viele mächtige Funktionen mitliefert und skalierbar und flexibel eingesetzt werden kann.
Aus früheren Tagen unserer Entwicklung stammen Erfahrungen mit der FooTable, deren Mehrwert gegenüber einer statischen HTML-Tabelle sich vor allem in einem besonderen Responsive-Verhalten (Anzeige auf verschieden großen Endgeräten) ergibt.
FooTable veraltet
Die Entwicklung an diesem für uns äußert praktikablem Tool wurde leider bereits vor längerer Zeit eingestellt und einige Abhängigkeiten (z.B. jQuery 2.2.4) sind inzwischen veraltet und enthalten teilweise sogar Sicherheitslücken. Außerdem ist das Konzept der FooTable leider nicht mit Vue.js kompatibel. Also war die Zeit gekommen, diese gleichwertig zu ersetzen und im besten Falle noch weitere Funktionen dazuzugewinnen.
Wir machten uns also auf die Suche passenden Alternativen im Bereich von Vue.js. Aufgrund der großen Community rund um das Framework existieren viele frei verfügbare Tabellen-Implementierungen, von denen einige auch viele Funktionen der FooTable abbilden. Allerdings sind wir bei unseren Recherchen leider nicht auf eine Tabelle mit ähnlichem Responsive-Verhalten gestoßen. Da uns als innovative Software-Firma auch immer wieder neue Ideen für weitere nice-to-have Features einfallen, beschlossen wir das Thema selbst in die Hand zu nehmen.
Wir machten uns also an die Eigenentwicklung einer Javascript-Implementierung zur Tabellendarstellung, die Vue.js und die Funktionalitäten der FooTable vereinen und die Anforderungen für flexible und interaktive Tabellen abdecken sollte.
Das Ergebnis ist VueQuintable, deren Features im weiteren kurz vorgestellt werden.
Probleme mit statischen Tabellen
Um auf einer Website zusammenhängende Daten darzustellen, sind Tabellen eine einfache und übersichtliche Möglichkeit. Eine statische HTML-Tabelle sieht mit entsprechendem Styling auf den Standard-Desktop-Geräten meist gut aus und bildet eine Vielzahl an Einträgen übersichtlich ab.
- Die Spalten werden viel zu eng um den Inhalt noch anschaulich darzustellen
- Die Schriftgröße muss so klein skaliert werden, dass ein Lesen und Verstehen sehr anstrengend wird
- Um den Inhalt noch darstellen zu können wird die Breite der Tabelle über die Bildschirmbreite hinaus gesetzt, was horizontales Scrollen erfordert
Das kann negativ auffallen und ist der Usability einer Webanwendung alles andere als zuträglich. Es gibt Ansätze dieses Thema mit CSS-Styling zu lösen und die Tabelle statt in Spalten in Zeilen anzuzeigen, was das Platz-Problem ausmerzt. Es leidet allerdings die Übersichtlichkeit. Andererseits können bei kleineren Bildschirmen auch einfach einzelne Spalten versteckt werden. Dadurch verliert die Tabelle aber an Aussagekraft.
Der große Mehrwert
Unsere Lösung ist ein Hybrid aus den bekannten Strategien. Die Tabelle kann je nach Bildschirmgröße mit verschieden vielen Spalten angezeigt werden. Die versteckten Spalten werden unter jeder Zeile als weitere Zeilen dargestellt. Diese können per Klick gezeigt oder versteckt werden. Dadurch ist die Übersichtlichkeit der Tabelle weiterhin gegeben und es müssen keine Spalten komplett unsichtbar gemacht werden. Durch die farbliche Abgrenzung ist eine Differenzierung weiterhin möglich und der jeweilige Inhalt der Zellen kann klar dargestellt werden.
Features
Zusätzlich zu diesem großen Mehrwert im responsive-Bereich wurden noch weitere praktische Funktionalitäten in die Tabelle integriert, die bei Bedarf aktiviert oder deaktiviert werden können, teilweise auch „on-the-fly“:
- Pagination – Die Tabelle in wird beliebig große Seiten mit beispielsweise 20 Zeilen aufgeteilt und kann durchgeblättert werden
- (Multi-) Sortierung – Die Tabelleneinträge können nach beliebigen Inhalten sortiert werden, auch nach mehreren Spalten gleichzeitig
- Suche – Die Tabelle kann beliebig mit Full-Text-Suche durchsucht werden
- Filterung – Es können komplexe Filter und Filtergruppen mit und-oder-Relationen definiert werden
- Benutzerdefinierte Werte – sowohl für den Suchbegriff, als auch für die Filter-Werte können pro Zeile und Zelle eigens definierte Werte gesetzt werden, die vom angezeigten Inhalt unabhängig sind
- Datenquellen – VueQuintable kann komplett clientseitig erstellt werden. Alternativ können die Daten und deren Filterung/Sortierung/Pagination von einem Server via API-Calls bereitgestellt werden
- Fixierte Spalten – Es können Spalten definiert werden, welche immer als Zeile dargestellt werden
- Selektierung – Zeilen können mit Checkboxen ausgewählt werden
- Binding – Alle Werte und Inhalte können über Vue.js interaktiv behandelt werden, auch der Einsatz von Komponenten in Zellen ist möglich
- Verschachtelung – Es ist auch möglich, eine VueQuintable-Instanz in einer VueQuintable-Zelle darzustellen, und das in beliebiger Tiefe
- Slots – es können verschiedene innere Bereiche der Tabelle benutzerdefiniert verändert oder gesetzt werden: Header, Footer, Platzhalter für leere Resultate und eine Lade-Animation
Viele weitere kleinere Funktionalitäten können in diesem Artikel nicht beschrieben werden und gehen noch weiter in die technische Richtung.
Ausblick
Wir konnten VueQuintable bereits vielfach erfolgreich einsetzen und haben unserer Ansicht nach ein einzigartiges Produkt geschaffen.
Das Projekt wurde unter der MIT-Lizenz veröffentlicht, damit auch andere Entwickler von dessen Vorzügen profitieren und Endnutzer die Flexibilität und Interaktivität von VueQuintable genießen können.
Unter folgenden Links kann VueQuintable heruntergeladen werden:
https://www.npmjs.com/package/@sensetence/vue-quintable
https://github.com/sensetence/vue-quintable
Wenn wir mit diesem Artikel Interesse geweckt haben, freuen wir uns jederzeit über Input, Feedback und Anregungen.