DataGrid: Adaptivity

Zurück: Demo-Übersicht

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 kennt keine Breakpoints — es folgt der Breite seines Panels, egal ob das Browserfenster, ein per resize gezogener Sidebar-Rand oder ein Kollaps-Zustand die Panelbreite ändert.

/** @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 (realer Nutzer-Befund). 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).

Für Grids in schmalen Panels (z. B. mobile Auxbar, geteilte Ansicht), die einzelne Spalten verlieren sollen statt zu scrollen:

• $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.
• 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]],
]);

• Der Kollaps blendet unterhalb des Breakpoints alle gelisteten Prioritäts-Spalten aus (ein Schwellwert, keine stufenweise Breitenmessung je Spalte) — die priority-Reihenfolge bestimmt die Reihenfolge in der Detailzeile.
• 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