FluentUI: Desktop-DataGrid — Demo-Übersicht
Zurück: FluentUI: Komponenten-Referenzen
Status: Portal-Seite, neu strukturiert nach dem Kategorienschema der DevExpress-ASPxGridView-Demo-Suite (https://demos.devexpress.com/aspxgridviewdemos/Default.aspx) — dieselbe Aufteilung in Übersicht + eine Unterseite je Funktionskategorie, hier auf den PHP-Kontrakt dieser Bibliothek übertragen statt auf ASP.NET-Controls. Jede Kategorie hat eine eigene Unterseite mit Live-Skizze, PHP-Beispiel und Referenztabelle. Seit dem Vollausbau (2026-07-14) ist jede Kategorie umgesetzt — die Seiten beschreiben ausschließlich lauffähiges Verhalten.
Was ist das DataGrid?
Das Desktop-DataGrid (dataGrid() in helper_plugin_wkfluentui_widgets,
Helper-API) rendert tabellarische Daten als
panel-füllende, resize-feste Tabelle im Desktop-Anwendungsstil — Gegenstück zum
Property Grid (ein Objekt als
Zeilenliste statt viele Objekte als Zeilen). Erstkonsument ist wksqliteds
(dbadmin/ResultGrid ist ein dünner Adapter über dataGrid()).
Demo-Kategorien
| Kategorie | Status | Beschreibung |
|---|---|---|
| Grundlagen | [Live] | Spalten/Zeilen/Opts-Kontrakt, erzeugtes Markup, Desktop-Grid-Optik, Spaltenbreiten & Persistenz |
| Adaptivity | [Live] | Container-getriebenes Responsive-CSS-Rezept + adaptiver Spalten-Kollaps mit Detailzeile (adaptive-Opt) |
| Sorting | [Live] | Clientseitige Sortierung + serverseitiger No-JS-Fallback (sortUrl) |
| Selection | [Live] | Einzel-/Mehrfachauswahl, Maus/Tastatur, wk-selectionchange-Event |
| Data Editing (Massenaktionen) | [Live] | Auswahl-Toolbar für Bulk-Operationen; editierbare Zellen liefert das eigenständige declarativeTable() (Widget-Katalog) |
| Filtering | [Live] | Spalten-Header-Filter: Client-Modus (Live + Chips) und Server-Modus (filterAction-GET-Formular) |
| Data Paging and Scrolling | [Live] | Natives Browser-Scrollen im Grid-Body + optionales serverseitiges Paging (paging-Opt); kein virtuelles Scrollen (Architekturentscheidung) |
| Data Export | [Live] | Zeilen-Copy/Copy-with-Headers, CSV-Export als Bulk-Aktion und der Export-Helper exportRows() (CWE-1236-sicher) |
| Accessibility | [Live] | Konsolidierte ARIA-/Tastatur-Fakten aus allen Kategorien an einem Ort |
Nicht auf der DevExpress-Demo-Liste, aber Teil des Widget-Kontrakts:
editierbare Zellen liefert das eigenständige declarativeTable()
(Widget-Katalog) —
dataGrid() selbst bleibt bewusst reines Anzeige-Widget.
Verwandte Themen
- FluentUI: Basic Layout (vertieft) — Shell-Regionen, in denen das Grid lebt
- FluentUI: Admin-Bereich (vertieft) — Tabellen-Optik, Toolbar, Drawer-Muster
- FluentUI: Basis-Widget-Katalog — DeclarativeTable (
declarativeTable()) und Table-Designer-Herkunft im Widget-Katalog - SQLite Data Studio: Admin-Oberfläche — Erstkonsument (SQL-Workbench)