DataGrid: Adaptivity

Zurück: Demo-Übersicht

Was ein Grid tut, wenn der Platz nicht reicht: Spalten wandern nach Breakpoint in eine ausklappbare Detailzeile, statt die Tabelle waagerecht scrollen zu lassen.

Status: vollständig [Live] – Panel-Fill-Verhalten plus adaptiver Spalten-Kollaps nach Breakpoint. Referenz: DevExpress ASPxGridView „Adaptive Layout“ – bei schmalen Panels wandern einzelne Spalten in eine ausklappbare Detailzeile (Abschnitt 8).

• dataGrid()-Basiskontrakt verstanden.
• Für das CSS-Rezept: Kontrolle über den umschließenden Shell-Container (.wkq-shell oder Äquivalent).

„Responsive“ heißt bei dataGrid() Container-getrieben, nicht Viewport-getrieben: Das Grid fragt nicht das Browserfenster, sondern misst die Breite seines Panels – egal ob das Fenster, ein per resize gezogener Sidebar-Rand oder ein Kollaps-Zustand sie ändert. Auch sein Breakpoint (Abschnitt 8) bezieht sich auf diese Panelbreite.

/** @var helper_plugin_wkfluentui_widgets $widgets */
$widgets = plugin_load('helper', 'wkfluentui_widgets');
?>
<div class="wkq-shell">
  <div class="wkq-shell__body">
    <?php echo $widgets->dataGrid($columns, $rows, ['persistKey' => 'meinmodul:ergebnisse']); ?>
  </div>
  <div class="wkq-shell__statusbar"><?php echo hsc(count($rows) . ' Zeilen'); ?></div>
</div>

Falsch: overflow: auto auf .wkq-shell selbst statt auf .wk-datagrid__body setzen. Dann scrollt die gesamte Shell inklusive Statusbar – die Statusbar verschwindet beim Scrollen aus dem Viewport statt fixiert zu bleiben (Zutat 4 unten wird dadurch wirkungslos).

Fünf Zutaten – alle im Ist-Code belegt (wksqliteds/screen.css, .wkq-shell):

Höhenbindung der Shell (Richtlinie – bevorzugt): Die fünf Zutaten wirken vertikal erst, wenn die Shell selbst eine Höhengrenze hat – sonst wächst die minmax(0,1fr)-Zeile einfach mit dem Inhalt und die Seite scrollt über den unteren Fensterrand. Bevorzugtes, compiler-sicheres Muster: Seitenrahmen als Flex-Spalte mit min-height: 100vh, Topbar/Footer natürlich hoch, Shell dazwischen flex: 1 1 auto; min-height: 0 – kein calc() mit gemischten Einheiten. Als Richtlinie, nicht harte Regel: statisch wachsende Screens bleiben zulässig (admin-layout → Verbindliche UX-Regeln).

Warnung: minmax() nur mit einer Einheit je Argument verwenden – DokuWikis CSS-Compiler bricht bei min()/calc() mit gemischten Einheiten sitewide fatal ab (dokumentiert in admin-layout).

Grids mit mehr als drei Spalten falten in schmalen Panels (z. B. mobile Auxbar, geteilte Ansicht) Spalten ein, statt zu scrollen – der Aufrufer muss dafür nichts angeben:

• Standard: Ohne adaptive-Option erhält jede Spalte ab der dritten eine Priorität, die rechte zuerst. Ausgenommen bleiben die Spalte, die die Zeile benennt (primary), und Spalten mit Bedienelementen. Der Breakpoint liegt bei 640 px Panelbreite. 'adaptive' => false schaltet das Falten ab.
• Zweite Stufe: Passt der Inhalt unterhalb des Breakpoints auch ohne die Prioritätsspalten nicht ins Panel, faltet das Grid weitere Datenspalten von rechts, bis er passt – nie die Primärspalte, die Auswahl-, Aktions- oder Inspektorspalte und keine Spalte mit Bedienelementen. Wird das Panel wieder breiter, kehren diese Spalten zurück.

• $opts-Schlüssel 'adaptive' => ['breakpoint' => int, 'priority' => [key => int]]: unterhalb breakpoint (Panelbreite in Pixeln, per ResizeObserver in scripts/datagrid.js gemessen) werden die in priority gelisteten Spalten ausgeblendet (Kopf- und Datenzellen hidden); jede Datenzeile erhält einen fokussierbaren Toggle-Button (.wk-datagrid__detailtoggle, aria-expanded), der eine Detailzeile (.wk-datagrid__detail) mit den ausgeblendeten Label/Wert-Paaren als <dl> aufklappt – die Zellinhalte werden dabei als echtes Markup übernommen, Links bleiben klickbar (Analog: DevExpress Adaptive-Detail-Row).
• Ausgeblendete Spalten bleiben damit vollwertig zugänglich – die Detailzeile ist der fokussierbare Ersatz, keine visuelle Kürzung.
• Trägt das Grid einen Inspektor, entfällt der Toggle: Die Inspektorfläche zeigt bereits alle Werte der Zeile, auch die gefalteten.
• Ohne JavaScript: alle Spalten bleiben sichtbar, das Grid scrollt horizontal im .wk-datagrid__body wie im [Live]-Verhalten – der Kollaps ist reine Progressive Enhancement, kein Ersatz für die Container-Responsive-Basis.

echo $widgets->dataGrid($columns, $rows, [
    'adaptive' => ['breakpoint' => 640, 'priority' => ['info' => 1, 'status' => 2]],
]);

• Unterhalb des Breakpoints blendet der Kollaps alle Prioritätsspalten auf einmal aus; erst danach misst die zweite Stufe die tatsächliche Breite und faltet weitere Spalten einzeln. Die priority-Reihenfolge bestimmt die Reihenfolge in der Detailzeile, Spalten der zweiten Stufe folgen dahinter.
• Die zweite Stufe setzt Prioritätsspalten voraus: Ein Grid mit höchstens drei Spalten oder mit 'adaptive' => false scrollt horizontal.
• Der Toggle einer Zeile steht in der ersten sichtbaren Datenzelle – nie in der Auswahlzelle (.wk-datagrid__checkcell) oder der Inspektorzelle (.wk-datagrid__inspectcell), in deren schmaler Spalte er das Auswahlkästchen verdecken würde. Ist die erste sichtbare Datenspalte selbst schmal (z. B. ein Vorschaubild), fasst sie Toggle und Inhalt nicht – solche Spalten ebenfalls in priority listen.
• Enthält eine ausgeblendete Zelle Elemente mit id-Attributen, entstehen in der aufgeklappten Detailzeile geklonte Duplikate dieser IDs – für solche Spalten den Kollaps nicht listen.
• Die Höhenbindung (Abschnitt 7) ist Richtlinie, keine harte Regel – statisch wachsende Screens bleiben zulässig.

• Container-getriebenes Responsive erfordert keine ARIA-Anpassung – es ändert nur Layout, keine Semantik.
• Browserkompatibilität: CSS-Grid + resize-Property-Grundunterstützung (alle aktuellen Browser).

Symptom: die gesamte Seite scrollt über den unteren Fensterrand hinaus, obwohl das Grid intern scrollen sollte.

Ursache: die Shell hat keine Höhengrenze – die minmax(0,1fr)- Zeile wächst mit dem Inhalt (s. Abschnitt 7).

Lösung: Höhenbindungs-Muster aus Abschnitt 7 anwenden (min-height: 100vh am Seitenrahmen, flex: 1 1 auto; min-height: 0 an der Shell).

Symptom: DokuWikis CSS-Compiler bricht site-weit ab, nachdem ein CSS-Rezept-Wert angepasst wurde.

Ursache: minmax()/calc() mit gemischten Einheiten (s. Abschnitt 7, Warnung).

Lösung: nur eine Einheit je minmax()-Argument verwenden.

• Demo-Übersicht – alle Kategorien
• DataGrid: Grundlagen – dataGrid()-Basiskontrakt
• FluentUI: Admin-Bereich (vertieft) – Shell-Höhenbindung, CSS-Compiler-Fallen