Grid ​

Tabellen bieten eine Übersicht über eine große Menge von Daten.

Overview ​

Intro ​

Eine Tabelle wird verwendet, um große Mengen von Daten strukturiert und übersichtlich darzustellen. Je nach Tabellentyp ist es z.B. möglich diese Daten auszuwählen, zu sortieren und Aktionen auszulösen.

Je nach Anwendungsfall macht es Sinn Tabellen als Teil einer Seite zu verwenden, oder eine dedizierte Seite (Tabellenseite) zu erstellen.

Grid

Verwendung ​

👍 Do👎 Don't
... wenn eine große Menge von Daten eines zusammengehörigen Datensatzes dargestellt werden soll.
... wenn Daten übersichtlich dargestellt werden sollen.
... wenn Aktionen für einzelne oder mehrere Datensätze ausgelöst werden können.
... wenn Statusinformationen zu verschiedenen Datensätzen angezeigt werden sollen.		... wenn keine strukturierten Daten vorliegen.
... wenn ein Text in Spalten dargestellt werden soll.

Guidelines ​

Aufbau ​

In der Basisausführung besteht die Tabelle aus einer Kopfzeile (Header), die mindestens zwei Spalten hat. Darunter befinden sich die Datenzeilen mit der gleichen Anzahl an Spalten. Die Zeilen werden durch Trennlinien voneinander getrennt. Jede Zeile besteht aus so vielen Zellen wie Spalten vorhanden sind.

Die Ausrichtung der Daten in einer Zelle ist abhängig vom Format. Texte und numerische Eingaben, die keine Größen beschreiben (z. B. Namen, IDs, Telefonnummern, URLs, E-Mail-Adressen, Währungszeichen, Datum), sind innerhalb ihrer Zelle oder Spaltenüberschriften linksbündig ausgerichtet, während Zahlen bzw. numerische Eingaben, die Größen beschreiben (z. B. Geldbeträge, Prozentzahlen) rechtsbündig in Zellen und Spaltenüberschriften ausgerichtet sind.

Aufbau ohne Gitterlinien

Umfangreiche Tabellen sollten mit Gitterlinien dargestellt werden. So können die Daten vom Nutzer schneller erfasst und zugeordnet werden. Diese Darstellung löst die bisherige Darstellung mittels Zebra-Muster ab.

Aufbau mit Gitterlinien

Grid Toolbar ​

Tabellen mit denen weiter interagiert werden soll, können mit einer Tabellen-Funktionsleiste über der Tabelle ergänzt werden. Zusätzlich stehen die Möglichkeiten bereit einzelne oder mehrere Zeilen auszuwählen, sowie Aktionen direkt auf einer Zeile durch Inline-Aktionen auszulösen. Die Funktionalitäten werden im Detail unter Verhalten beschrieben.

Teile der Grid Toolbar (Funktionsleiste)

Grid Toolbar

1. Tabellenüberschrift

Verwende die Tabellenüberschrift, wenn die gesamte Anzahl der Objekte, oder die Anzahl der Treffer nach einer Suche, angezeigt werden sollen. Generische Bezeichnungen wie Objekte sind ebenfalls zulässig. Die Überschriftengröße kann je nach Kontext der Tabelle durch überschreiben des Text-Styles angepasst werden.

Wenn keine Objekte gefunden oder vorhanden sind, wird kein Zahlenwert angezeigt.

Bei Verwendung von Gruppierungen im (Tree) Grid soll hier nur die Anzahl der übergeordneten Elemente (Wurzelelemente) dargestellt werden.

2. Segmented Control

Verwende die Segmented Control als (zusätzlichen) Filter in Tabellen mit vielen Datensätzen wenn z.B. ausschließlich fehlerhafte oder ausgewählte Datensätze angezeigt werden sollen.

3. Zustandsanzeige

Die Zustandsanzeige gibt darüber Auskunft in welchem Zustand sich die Tabelle aktuell befindet. Folgende Zustände werden abgebildet:

Suche läuft...

Dieser Zustand wird durch die Interaktion mit dem Suchfeld oder die Suchleiste ausgelöst.

Laden...

Dieser Zustand wird durch das Nachladen von Daten durch das Scrollen innerhalb der Tabelle ausgelöst.

4. Suchfeld

Tabellen mit vielen Objekten profitieren von einem Suchfeld. Verwende das Suchfeld nur, wenn es keine andere Möglichkeit gibt in der Tabelle zu suchen, wie z.B. über eine Suchleiste.

Das Suchfeld sollte alle sichtbaren Spalten durchsuchen.

5. Aktionsmenü

Im Aktionsmenü befinden sich generische Funktionen wie z.B. das Hinzufügen, Kopieren, Löschen von Objekten oder das Exportieren der Tabelle als Excel Datei, sowie Batch-Aktionen mit denen sich Aktionen auf mehrere Objekte anwenden lassen.

Zusätzlich können hier anwendungsspezifische Aktionen verortet werden.

Siehe Verhalten der Tabellen-Funktionsleiste für weitere Informationen zur Tabellen-Funktionsleiste.

Varianten/Typen ​

Die Varianten einer Tabelle sind vielfältig. Ausgehend von der Basistabelle können die unter "Verhalten" beschriebenen Funktionen miteinander kombiniert werden, um die Tabelle an die Anforderungen des jeweiligen Anwendungsfalls anzupassen. Die Funktionalitäten können beliebig miteinander kombiniert werden. Lediglich die Batch-Funktion erfordert immer auch die Möglichkeiten des Multi-Selects.

Verhalten ​

Einfacher Klick (single click) ​

Ein einfacher Klick auf eine Tabellenzeile selektiert diese. Ein Klick auf eine bereits ausgewählte Zeile hebt die Selektierung auf. Auch bei der Verwendung von Checkboxen bewirkt ein einfacher Klick die Selektion einer Zeile. In diesem Fall können mehrere Zeilen gleichzeitig ausgewählt sein (multi-select). Wenn keine Checkboxen verwendet werden, kann jeweils nur eine Zeile ausgewählt sein. Das heißt, dass in diesem Fall ein Klick auf eine andere Zeile die neue Zeile selektiert und die vorherige Selektion aufhebt.

Doppelklick (double click) ​

Bei einem Doppelklick auf eine Tabellenzeile werden, falls vorhanden, die Details zum zugehörigen Datensatz angezeigt. Wenn es keine Details gibt, ist der Doppelklick für die ganze Tabelle deaktiviert. Da die Funktionalität des Doppelklicks für den Nutzer schwer zu finden ist, wird empfohlen, die Navigation zu den Details auch als Inline-Aktion zur Verfügung zu stellen.

Lazy-Loading ​

Das sogenannte Lazy-Loading kommt vor allem bei Tabellen mit umfangreichen Daten zum Einsatz. Es werden nur die für den Nutzer sichtbaren Datensätze geladen. Die weiteren Daten werden beim Scrollen der Tabelle nachgeladen. Dies dient vor allem dazu die Anfangsladezeit zu verkürzen und ermöglicht es, dass keine unnötigen Daten geladen werden, die nicht vom Nutzer benötigt werden.

Sortierfunktion ​

Es ist möglich die Sortierung einzelner Tabellenspalten zu ermöglichen. Hierfür erscheint in den sortierbaren Spalten ein Sortier-Icon. Dieses zeigt an, ob die Spalte sortiert ist. Ist dies der Fall, wird kommuniziert, ob die Sortierung auf- oder absteigend erfolgt. Der Nutzer kann durch einen Klick auf den Spaltennamen die Sortierung aktivieren bzw. ändern. Wenn die Tabelle gruppierte Datensätze enthält, bleiben die Gruppierungen erhalten und es werden die übergeordneten Gruppen anhand des gewählten Kriteriums sortiert. Zusätzlich werden die Elemente innerhalb der Gruppen entsprechend sortiert.

Spaltenbreiten ​

Folgende Einstellungen sind möglich:

  • Flexible Breite, automatische am Inhalt ausrichten (Standard)
  • Flexible Breite, verbleibender Raum wird eingenommen
  • Feste Breite

Standardmäßig sollte sich die Spaltenbreite flexibel eingestellt sein und sich automatisch am Inhalt ausrichten.

Spaltenbreite anpassbar machen

Optional kann es dem Nutzer ermöglicht werden, die Spaltenbreite einzelner Spalten manuell anzupassen. Wird über der Kopfzeile gehovert, werden in diesem Fall Trennlinen zwischen den Spalten eingeblendet, die der Nutzer mit dem Mauszeiger greifen und ziehen kann. Die Inhalte der Spalte passen sich entsprechend an und werden bei Bedarf mehrzeilig.

Lange Zelleninhalte

Die Spaltenbreite passt sich standardmäßig an die Inhalte der Zellen an. Wenn der gesamte verfügbare Platz in der Breite nicht ausreicht, um alle Spalten der Tabelle gleichzeitig anzuzeigen, wird die Tabelle horizontal scrollbar. Wenn der Nutzer die Spaltenbreite einer einzelnen Spalte manuell verringert und somit der verfügbare Platz in einer Zelle nicht ausreicht, um den ganzen Inhalt anzuzeigen, wird der Zelleninhalt mit Ellipsis ("...") gekürzt angezeigt. Um den gesamten Zelleninhalt wieder sichtbar zu machen, kann der Nutzer die Breite der Spalte manuell vergrößern.

Gruppierung ​

Bei verschachtelten Daten kann es Sinn machen, einzelne Datensätze in der Tabelle als Gruppe darzustellen, sodass sich der Nutzer besser orientieren kann und es ihm möglich ist, zu erkennen welche Daten zusammengehören. In diesem Fall wird der Gruppenname als übergeordnete, aufklappbare Zeile angezeigt. Diese übergeordnete Zeile (Level 0) wird optisch hervorgehoben. Wenn die Zeile aufgeklappt wird, werden die zugehörigen Datensätze der Gruppe dargestellt. Diese sind etwas eingerückt, sodass die Hierarchie klar wird. Es kann mehrere Hierarchiestufen geben. Das heißt einer Gruppe können eine oder mehrere Untergruppen zugeordnet sein, die wiederum Datensätze beinhalten usw.

Gruppierung in einer Tabelle

Inline-Aktionen ​

SEIT VERSION 4.0.0

Es liegt eine Erweiterung durch Vaadin 23.1 vor. Spalten lassen sich nun auch rechts fixieren (Inline Aktionen müssen auf die Vaadin-Lösung umgestellt werden).

Sogenannte Inline-Aktionen sind Aktionen, die auf einzelne Datensätze angewendet werden können (z.B. duplizieren, Details anzeigen). Diese Aktionen sind mit einer Taste am rechten Ende der Zeile des jeweiligen Datensatzes verknüpft. Ein Klick auf die Taste löst die Aktion aus. Es können bis zu zwei Inline-Aktionen nebeneinander in einer Zeile angezeigt werden.

Info für DEV:

Siehe Showcase Beispiele action-and-toolbar und action-ellipsis für Implementierungsdetails um dieses Verhalten sicherzustellen.

Tabelle mit zwei Inline-Aktionen

Tooltip

Icon-Tasten benötigen Tooltips, damit die Nutzer die Funktion der Taste besser verstehen können.

Inline Aktion mit Tooltip

Overflow Verhalten

WARNING

Experimentelles Feature

Die beste technische Umsetzung ist noch nicht abschließend geklärt.

Alle Inline-Aktionen befinden sich in einer Spalte. Die Spalte hat keinen Spaltentitel und ist nicht sortierbar. Ihre Breite kann nicht angepasst werden. Wenn mehr als zwei Inline-Aktionen vorhanden sind, werden diese mit einem vertikalen Ellipsis-Icon zusammengefasst. Ein Klick auf das Ellipsis-Icon öffnet die Liste mit Inline-Aktionen, ähnlich wie bei einem Dropdown. Ein erneuter Klick auf das Ellipsis-Icon schließt die Liste. Ein Klick auf eine der Inline-Aktionen in der Liste löst die Aktion aus. Mit dem Ellipsis-Icon werden alle Aktionen zusammengefasst, d. h. es kann daneben kein weiteres Icon stehen. In der Dropdown-Liste werden keine Icons für die Aktionen angezeigt.

Tabelle mit mehr als 2 Inline Aktionen

Da Inline-Aktionen nicht auf mehrere Datensätze gleichzeitig angewendet werden können, sollten hier nur Aktionen zum Einsatz kommen, die als Batch-Aktion keinen Sinn ergeben.

Hinweis zur Barrierefreiheit von Inline-Aktionen

Um die Barrierefreiheit zu gewährleisten, müssen alle Inline-Aktionen über die Tastatur fokussiert werden können und mit einem "aria-label" versehen werden, welches die Aktion eindeutig beschreibt.

Beispiel: Im oben visualisierten Beispiel wäre das aria-label für die Aktion "Details anzeigen" folgendermaßen definiert: aria-label="Details von Margarete Wolf anzeigen".

Batch-Aktionen ​

Lassen sich Aktionen direkt auf mehrere Objekte anwenden, dann spricht man von Batch-Aktionen.

10 Batch Aktionen

Damit Batch-Aktionen ausgeführt werden können, muss Multi-Select für die Tabelle aktiviert werden.

Batch-Aktionen können immer auf mehrere Objekte angewendet werden.

👍 Do👎 Don't
... wenn sich eine Aktion auf mehrere Elemente anwenden lässt.... wenn sich eine Aktion nicht auf mehrere Elemente anwenden lässt.

Multi-Select ​

Eine Tabelle mit Multi-Select Funktion hat eine Checkbox in jeder Daten-Zeile, mit der die jeweilige Zeile ausgewählt werden kann.

Tabelle mit Multiselect

Info für Dev:

Die Nutzung von Multi-Select ist sowohl für Lazy-Loading als auch Eager-Loading in Vaadin vorgesehen

Select-All ​

In der Kopfzeile befindet sich ganz links über allen anderen Checkboxen eine übergeordnete Checkbox, die alle Datensätze der Tabelle auswählt. Eine Gruppe von Datensätzen kann ebenfalls über eine Checkbox ausgewählt werden. In diesem Fall werden auch alle untergeordneten Elemente der Gruppe ausgewählt. Wenn nur einzelne Elemente einer Gruppe ausgewählt werden, geht die übergeordnete Checkbox in einen unbestimmten Zustand über. Dieses verdeutlicht dem Nutzer, dass mindestens ein Unterelement jedoch nicht alle Unterelemente ausgewählt wurden.

Tabelle mit Multi-Select und Select-All Funktion

Hinweis:

Nur zu verwenden, wenn die Gesamtanzahl an auswählbaren Objekten nicht zu hoch ist, um sie direkt alle in die Tabelle zu laden

Info für Dev:

Die Nutzung von Select-All ist nur für Tabellen die Eager-Loading in Vaadin verwenden vorgesehen.

Responsive Verhalten ​

Tabellen tauchen in unterschiedlichen Kontexten auf. Daher muss die Tabelle und Tabellen-Funktionsleiste auf allen Endgeräten funktionieren.

Responsive Verhalten

1. Zustandsindikator

Der Zustandsindikator kann bei Bedarf nur noch das Lade-Icon oder den Lade-Indikator anzeigen.

2. Suchfeld

Das Suchfeld schrumpft auf eine minimale Breite zusammen. Es wandert nicht wie die restlichen Tasten im Aktionsmenü in das Overflow-Menü (Icon-Taste mit Ellipsis-Icon).

3. Aktionsmenü

Tasten die keinen Platz mehr haben, wandern in das Overflow-Menü (Icon-Taste mit Ellipsis-Icon).

4. Inline Aktionen

Die Inline Aktionen überlagern alle weiteren Spalten und sind auf der rechten Seite immer sichtbar.

Zahlen und Einheiten ​

Zahlen und Einheiten, wie z.B. Beträge 2134,45 €, werden standardmäßig rechtsbündig und in einer Zelle zusammen dargestellt.

Grid Toolbar ​

Verhalten Grid Toolbar

1. Anzahl der Objekte

Neben der Tabellenüberschrift steht die gesamte Anzahl an Objekten, die in der Tabelle angezeigt oder durch Scrollen erreicht werden können.

2. Suchfeld

Bei jeder Änderung löst das Suchfeld automatisch die Suche aus. Dabei sollten alle sichtbaren Spalten durchsucht werden.

Sollte diese Suche dem Anwendungsfall nicht gerecht werden, empfehlt das UX Team die Verwendung einer Tabellenseite, die mit der Suchleiste zusammen mehr Möglichkeiten bietet.

3. Zustandsanzeige

Die Zustandsanzeige gibt den Zustand der Tabelle dynamisch wieder.

4. Keine Daten

Sollten von vornherein oder nach einer Suche keine Daten verfügbar sein, dann steht nach der Tabellenüberschrift keine Zahl in den Klammern.

Unter der Tabellenklopfzeile steht die Meldung "Keine Daten verfügbar".

5. Dynamische Anzeige der Anzahl der Objekte

Die Anzahl der gefundenen Daten wird dynamisch in Klammern hinter der Tabellenüberschrift angezeigt.

6. Feste Höhe der Tabelle

Die Tabellenhöhe bleibt fix, auch wenn die Anzahl der Ergebnisse nicht die gesamte Höhe benötigt. Damit ist sichergestellt, dass die Benutzeroberfläche durch das Suchen nicht unruhig wird.

Badges ​

Badges werden in Tabellenzellen immer linksbündig ausgerichtet.

Highlighted Row ​

Wenn dem Nutzer eine deutlich hervorgehobene Zeile innerhalb der Tabelle angezeigt werden soll, kann hierfür die highlighted Funktion verwendet werden.

Grid Highlighted Row

Highlighted Cell ​

Wenn dem Nutzer eine hervorgehobene Zelle innerhalb der Tabelle angezeigt werden soll, kann hierfür die highlighted Funktion verwendet werden.

Grid Highlighted Cell

States ​

Eine Tabellenzeile kann verschiedene Zustände haben.

Enabled

Eine wählbare Zeile kann vom Nutzer angeklickt und ausgewählt werden. Es ist möglich, die Inline-Aktionen der Zeile auszulösen.

States einer Tabellenzeile

Hover

Wenn der Nutzer den Mauszeiger über eine Zeile bewegt, wird diese visuell leicht hervorgehoben.

Focus

Über die Tastatur kann jeweils eine Zelle einer Tabelle oder der Kopfzeile fokussiert werden. Die fokussierte Zelle wird durch einen farbigen Rahmen hervorgehoben.

Selected

Eine gewählte Zeile wird farblich hervorgehoben. Falls vorhanden, wird die zugehörige Checkbox ausgewählt dargestellt. Der Selected Zustand kann in Kombination mit anderen Zuständen auftreten (z.B. Selected & Hover).

Active

Der aktive Zustand einer Zeile wird ebenfalls visuell hervorgehoben. Eine Zeile ist aktiv, während die Zeile angeklickt wird (oder tapped bei Touch-Bedienung).

Leer

Eine leere Tabelle einhält einen Hinweis, dass keine Daten existieren oder gefunden wurden.

Empty Grid

Barrierefreiheit ​

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Umschalttaste" + "Tab") lässt sich eine Zelle der Kopfzeile und der Inhaltszeilen einer Tabelle fokussieren. Mit den Pfeiltasten ist es möglich, den Fokus auf andere Zellen innerhalb der Kopfzeile oder Tabelle zu setzen. Eine Zeile kann mit der Leerzeichentaste ("Space") ausgewählt werden.

Spezifische Kriterien

Neben den grundlegenden Kriterien der Barrierefreiheit sollten folgende Punkte bei Implementierung der Tabelle beachtet werden:

  1. Bei Spaltentiteln sollten aria-describedby Tags verwendet werden.
  2. Inline Aktionen: In der Tabelle müssen die aria-labels der Inline Actions den Kontext kommunizieren da sie sonst nicht hilfreich sind. Zudem müssen Tooltips verwendet werden.
  3. Darstellung eines Status: Wenn Icons zur Visualisierung eines Status in einer Tabelle verwendet werden, sind diese nicht klickbar. Da hier üblicherweise kein nebenstehender Text vorliegt, müssen aria-label Attribute und Tooltips verwendet werden, um die Barrierefreiheit und die Screenreader Unterstützung zu gewährleisten.
aria-label Attribut bei Icons
aria-label Attribut bei Status-Icons

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-grid--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter:

Code Examples ​

Install ​

npm i @vaadin/grid@${version.vaadin.web}
npm i @mate/grid-addons@${version.mate.web}

Import ​

javascript
import '@vaadin/grid';

Variants ​