Tabellenseite ​

Overview ​

Intro ​

Die Tabellenseite ist eine dedizierte Seite für die Darstellung von Daten in Form einer Tabelle . Die Seite bietet Funktionen zum Auffinden und Bearbeiten relevanter Elemente aus dem jeweiligen Datensatz (z.B. Filtern, Sortieren). Oft wird diese Ansicht als Ausgangspunkt genutzt, um die Details eines Datensatzelements aufzurufen (siehe Master-Detail ).

MATE Tabellenseite Intro

Verwendung ​

👍 Do👎 Don't
...wein ein kompletter Datenbestand als Ganzes, ohne andersartige Seiteninhalte, dargestellt werden soll...wenn eine Tabelle innerhalb eines Inhalts neben anderen Inhaltstypen angezeigt werden soll. Dafür findet die Komponente Tabelle Verwendung; siehe Tabellen.

Guidelines ​

Aufbau ​

Aufbau der Tabellenseite

Der Global Header ist die oberste Leiste der Benutzeroberfläche und bietet Zugang zu anwendungsübergreifenden Funktionen.

Breadcrumbs zeigen Nutzenden, wo sie sich befinden und erlauben es, schnell eine oder mehrere hierarchische Ebenen zurück zu gehen.

Seitenüberschrift ​

Die Seitenüberschrift dient zur Orientierung. Sie sollte die dargestellte Seite beschreiben und/oder das Objekt bzw. den Kontext wie z.B. in welcher Funktion sich der Nutzer derzeit befindet, kommunizieren.

Aktuell ist im Design System kein globaler Standard für Seitentitel festgelegt.

Die Verantwortung für die Definition und Dokumentation des jeweils richtigen Seitentitels liegt auf Produktebene.

Siehe den Abschnitt Seitenüberschrift und Object Header unter UX Writing in Foundations.

Filter Panel ​

Das Filter Panel stellt Funktionen zum finden der Daten bereit.

Grid Toolbar (optional) ​

Die Tabellen-Funktionsleiste enthält Funktionen, die alle Daten oder eine manuelle Auswahl betreffen (z. B. Löschen, Hinzufügen).

Siehe auch Tabellen für weitere Informationen.

Tabelle ​

Der Inhaltsbereich enthält die Tabelle mit allen Daten und evtl. vorhandenen Inline-Aktionen.

Verhalten ​

Suchleiste ​

Siehe Verhalten unter Filter Panel .

Inhaltsbereich ​

Das Verhalten der Tabelle im Inhaltsbereich ist analog zum Verhalten, das unter Tabellen beschrieben ist.

Wenn nicht alle Daten der Tabelle gleichzeitig dargestellt werden können, lässt sich die Tabelle horizontal und/oder vertikal scrollen. Beim vertikalen Scrollen sollte die Kopfzeile der Tabelle oben fixiert werden, sodass sie immer sichtbar ist.

Grid Toolbar ​

Aktionen der Grid Toolbar, die sich nicht auf ausgewählte Datensätze beziehen, sind immer aktiv und können vom Nutzer geklickt werden. Aktionen, die sich auf ausgewählte Elemente beziehen (z.B. Löschen oder Batch-Funktionen), sind inaktiv (disabled), wenn kein Datensatz gewählt ist.

Suche läuft ​

Wird eine Suche über die Suchleiste ausgelöst, dann wird dieser Zustand in der Tabellen-Funktionsleiste angezeigt, solange die Suche ausgeführt wird.

Suche läuft

Anzahl der Treffer ​

Treffer gefunden

Die Anzahl der gefundenen Treffer wird neben der Tabellenüberschrift in Klammern angezeigt.

Anzahl der Treffer

Keine Treffer gefunden ​

Wurden keine Treffer gefunden, steht auch keine Zahl neben der Tabellenüberschrift in Klammern. In der Tabelle steht dann die Meldung "Keine Daten verfügbar.".

Keine Treffer gefunden

Weitere Hinweise zum Verhalten der Tabellen-Funktionsleiste stehe unter Tabellen .

Vor- und Zurücknavigation ​

Die Tabellenseite dient häufig als Startpunkt für die Navigation zu den Detailansichten der Daten aus der Tabelle, siehe Master-Detail Bedienmuster.

Vorwärtsnavigation ​

Die Vorwärtsnavigation ist auf unterschiedliche Weise möglich.

  1. Ein Doppelklick auf die Tabellenzeile führt zur Vorwärtsnavigation im selben Tab/Fenster.
  2. Ein Klick auf die Inline-Funktion am Ende der Zeile führt zur Vorwärtsnavigation im selben Tab/Fenster.
  3. Ein Rechtsklick auf die Inline-Funktion am Ende der Zeile ermöglicht die Auswahl, ob eine Vorwärtsnavigation im selben Tab/Fenster oder neuen Tab/Fenster erfolgen soll.

Zurücknavigation ​

Nach einer Vorwärtsnavigation kann die Navigation zurück zu einer Tabellenseite auf unterschiedliche Weise erfolgen. Hierfür können z.B. die Breadcrumbs und die Browser-Zurück-Taste verwendet werden. Dabei werden die vorherige Trefferliste inkl. Sortierung und aktive Filter wiederhergestellt.

Barrierefreiheit ​

Siehe die spezifischen Kriterien zur Barrierefreiheit unter Tabellen .

Tastaturbedienung ​

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") sind Tabellenzeilen und Bedienelemente fokussierbar.