Inhaltsbereich Navigation Navigation Fußzeile

Data Grid

Verwendung

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).
    • Details zur Logik werden in der Dokumentation „Filter für Datenstrukturen“ beschrieben.

Kontextmenü:

  • 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)