Als Alternative zu klassischen Tabellen bieten Data Grids ein höheres Maß an Flexibilität, gerade auch in der strukturierten Darstellung auf kleineren Bildschirmgrößen.
Allgemeines
Das Data-Grid ist responsiv und liegt im Grid.
Es gibt eine optionale Kopfzeile.
Der Inhaltsbereich ist abhängig vom jeweiligen Use Case und wird hier als Platzhalter dargestellt.
Checkbox
Am Anfang der Zeile kann optional eine Checkbox zur Mehrfachauswahl verwendet werden:
Die Checkbox ersetzt das Kontextmenü (Auswahlmodus: Kein Kontextmenü hinten, dafür Auswahl vorne).
Am Ende jeder Zeile gibt es einen optionalen Icon-Button.
Dieser öffnet ein Kontextmenü mit mindestens zwei Aktionen.
Sofern verfügbar, ist eine der Aktionen das „Öffnen“ des Elements.
Die möglichen Aktionen können je Zeile unterschiedlich sein.
Ausnahmen:
Wenn es in einer Zeile nur eine Aktion gibt, dann wird statt des Kontextmenüs ein einzelner Icon-Button für diese Aktion angezeigt.
Sobald jedoch mindestens eine Zeile ein Kontextmenü mit mehreren Aktionen hat, erhalten alle Zeilen ein Kontextmenü aus Gründen der Konsistenz, auch wenn dort jeweils nur eine Aktion verfügbar ist.
Positionierung & responsives Verhalten
Ab dem Breakpoint XS (≥ 0px)
(Abbildung nicht maßstabsgerecht)
Ab dem Breakpoint XL (≥ 1200px)
(Abbildung nicht maßstabsgerecht)
Leeres Data-Grid
(Abbildung nicht maßstabsgerecht)
Design
Typografie
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Wenn das Data Grid eine Kopfzeile hat, dann wird diese als erste Zeile gewertet und die erste Zeile des Data Grids wird wie in Punkt 4 beschrieben behandelt.
Ändern sich die States des Icon-Button, dann wirkt sich das auf die gesamte Zeile des Data Grids aus. Der Indikator und ein eventueller zusätzlicher Indikator für den Link des Inhalts (z. B. Unterstrich bei Text) werden entfernt, der Hintergrund der Zeile wird blau eingefärbt.
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Erhält einen deutlich sichtbaren Fokus bei Tastaturbedienung bzw. Swipe auf Touch-UIs. Pfeiltasten bzw. Gesten bewegen den Fokus durch die Matrix-artige Ansicht.
Darstellung:
Der Schriftgrad kann Browser- oder Systemseitig um bis zu 200 % vergrößert werden, ohne dass Informationen verloren gehen. Bis zu 400 % müssen Inhalte so umbrechen, dass sie ohne horizontales Scrollen verfügbar sind.
