---
name: DataGrid
description: Onesown Blazor Komponente DataGrid (DataGrid). Verwende diesen Skill wenn du die DataGrid-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# DataGrid

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** DataGrid  
**Basisklasse:** `OoComponentBase`  
**Generisch:** Ja (`DataGrid<TItem>` o.ae.)  

Generisches, vollständig serverseitig-kompatibles DataGrid für tabellarische Daten. Unterstützt Spalten-Definition per DataGridColumn-Kindkomponenten, Sortierung (clientseitig und serverseitig), Paging, Freitext-Suche, Spalten-Filter, Einzel- und Mehrfach-Selektion, State-Persistenz via SessionStorage und fixierte (frozen) Spalten.

**Live-Demo:** https://components.schini.com/demo/datagrid  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Items`` | ``IEnumerable<TItem>`` |  | Datenquelle als In-Memory-Liste. Bei gleichzeitiger Angabe von QueryableItems wird QueryableItems bevorzugt. |
| ``QueryableItems`` | ``IQueryable<TItem>`` |  | Datenquelle als IQueryable für serverseitige Sortierung und Filterung. Hat Vorrang vor Items. |
| ``EmptyText`` | ``string`` | ``"Keine Daten vorhanden."`` | Anzeigetext wenn die Datenquelle leer ist. Standard: "Keine Daten vorhanden." |
| ``IsBusy`` | ``bool`` |  | Zeigt einen Lade-Indikator über der Tabelle und blendet den Inhalt aus, solange true. |
| ``ShowGridLines`` | ``bool`` | ``true`` | Zeigt Rasterlinien zwischen allen Zellen. Standard: true. |
| ``Striped`` | ``bool`` | ``true`` | Hebt jede zweite Zeile farblich hervor (Zebra-Streifen) für bessere Lesbarkeit. Standard: true. |
| ``Hover`` | ``bool`` | ``true`` | Hebt die Zeile unter dem Mauszeiger visuell hervor. Standard: true. |
| ``MaxHeight`` | ``string`` |  | Begrenzt die Höhe des Tabellenbereichs (z. B. "400px" oder "60vh"). Wenn gesetzt, wird der Grid-Bereich scrollbar und der Tabellen-Header bleibt beim Scrollen oben fixiert (sticky). |
| ``Columns`` | ``RenderFragment`` |  | RenderFragment für die Spalten-Definitionen. Befüllt durch untergeordnete DataGridColumn-Komponenten. |
| ``Filterable`` | ``bool`` | ``false`` | Aktiviert Spalten-Filter-Eingaben in der Header-Zeile für alle filterbaren Spalten. Standard: false. |
| ``ToolbarContent`` | ``RenderFragment`` |  | Optionaler Inhalt der rechts über der Tabelle eingeblendet wird (z. B. Export-Buttons oder Aktions-Icons). Wird nur gerendert wenn gesetzt. |
| ``ExportFileName`` | ``string`` | ``"export"`` | Dateiname ohne Erweiterung für den CSV-Download via Export-Button. Standard: "export". |
| ``OnSortChanged`` | ``EventCallback<SortChangedEventArgs<TItem>>`` |  | Wird ausgelöst wenn der Nutzer eine Spalten-Überschrift zum Sortieren anklickt. Liefert Property (Spaltenname) und Direction für eigene serverseitige Sortierlogik. |
| ``SearchText`` | ``string`` |  | Freitext-Suchwert von außen. Jede Änderung löst automatisch eine neue Abfrage aus und setzt auf Seite 1 zurück. Unterstützt @bind-SearchText. |
| ``SearchTextChanged`` | ``EventCallback<string>`` |  | EventCallback für @bind-SearchText. |
| ``OnSearchStarted`` | ``EventCallback`` |  | Wird unmittelbar vor dem Start einer neuen Abfrage ausgelöst (z. B. um einen globalen LoadingBar einzublenden). |
| ``OnSearchCompleted`` | ``EventCallback`` |  | Wird nach Abschluss einer Abfrage ausgelöst (z. B. um einen globalen LoadingBar auszublenden). |
| ``Page`` | ``int`` | ``1`` | Aktuell angezeigte Seite (1-basiert). Unterstützt @bind-Page für externe Steuerung. Standard: 1. |
| ``PageChanged`` | ``EventCallback<int>`` |  | EventCallback für @bind-Page. |
| ``PageSize`` | ``int`` | ``20`` | Anzahl der Einträge pro Seite. Standard: 20. |
| ``PageSizeChanged`` | ``EventCallback<int>`` |  | EventCallback für @bind-PageSize. |
| ``PageSizeOptions`` | ``int[]`` | ``new[] { 10, 20, 50, 100 }`` | Auswahlmöglichkeiten für die Seitengröße im Pager-Dropdown. Standard: 10, 20, 50, 100. |
| ``ShowPager`` | ``bool`` | ``true`` | Blendet den gesamten Pager (Seitenanzeige + Navigation) aus wenn false. Standard: true. |
| ``ShowPagerControls`` | ``bool`` | ``true`` | Blendet Navigations-Pfeile und Seitengrößen-Dropdown aus; zeigt nur den Info-Text. Standard: true. |
| ``TotalCount`` | ``int?`` |  | Gesamtanzahl aller Datensätze für serverseitige Szenarien (IQueryable). Wenn gesetzt, wird dieser Wert für die Seitenberechnung verwendet. |
| ``SelectionMode`` | ``OoSelectionMode`` | ``OoSelectionMode.None`` | Selektionsmodus. None deaktiviert die Auswahl (Standard), Single erlaubt genau eine Zeile, Multiple erlaubt beliebig viele Zeilen. |
| ``SelectedItem`` | ``TItem`` |  | Die aktuell selektierte Zeile im Einzel-Modus. Unterstützt @bind-SelectedItem. |
| ``SelectedItemChanged`` | ``EventCallback<TItem>`` |  | EventCallback für @bind-SelectedItem. |
| ``SelectedItems`` | ``IList<TItem>`` |  | Liste aller aktuell selektierten Zeilen im Mehrfach-Modus. Unterstützt @bind-SelectedItems. |
| ``SelectedItemsChanged`` | ``EventCallback<IList<TItem>>`` |  | EventCallback für @bind-SelectedItems. |
| ``OnSelectionChanged`` | ``EventCallback<IList<TItem>>`` |  | Wird bei jeder Änderung der Selektion ausgelöst und liefert die vollständige Liste aller selektierten Zeilen. |
| ``SaveStateEnabled`` | ``bool`` |  | Aktiviert die automatische Persistenz von Sortierung, aktiver Seite und PageSize in SessionStorage. Der Storage-Key wird aus dem TItem-Typnamen automatisch abgeleitet. Beim n\u00e4chsten Seitenaufruf wird der gespeicherte Zustand wiederhergestellt. Standard: false. |

## Geerbte Parameter (OoComponentBase)

Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht.

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` |  | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |

## Hinweise

- Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben
- Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben
- Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht
- Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl)
- Spalten als DataGridColumn-Kindkomponenten im Columns-RenderFragment definieren
- In-Memory-Daten: Items="@_liste" verwenden
- Serverseitige Daten: QueryableItems="@_query" hat Vorrang vor Items
- Sortierung übergabe: OnSortChanged-Callback empfängt Property und Richtung für eigene IQueryable-Logik
- State-Persistenz: SaveStateEnabled="true" speichert Sortierung, Seite und PageSize in SessionStorage
- Selektion: SelectionMode="Single" oder "Multiple" aktiviert Zeilenauswahl mit @bind-SelectedItem(s)
- Toolbar: ToolbarContent-RenderFragment erscheint rechts über der Tabelle (Export-Buttons, Aktionen)
- Scrollbare Tabelle: MaxHeight="400px" macht den Grid-Bereich scrollbar mit sticky Header