Tabelle

component.table

Daten-Tabelle. columns = [{key, label, align?: start|end}], rows = Objekte mit passenden Keys (nur Skalare — alles wird escaped).

Wann nutzen

• Listen mit gleichförmigen Datensätzen (Aufträge, Kunden). Für Kennzahlen-Kacheln component.metric-card, für Produkt-Raster section.product-grid.

Wichtige Props

• sortable: Klick auf Spaltenkopf sortiert auf/ab (numerik-bewusst inkl. deutscher Zahlformate, aria-sort).
• selectable: Checkbox-Spalte + Alle-Checkbox, gewählte Zeilen getönt; Events selection {count} und sort.
• stickyHeader: Kopfzeile bleibt beim vertikalen Scrollen stehen; deckelt die Höhe auf --table-max-height (Stellschraube, Default 28rem).
• Spalten-pin: start (links fixiert) oder end (rechts fixiert) beim horizontalen Scrollen — typisch Kennung links, Aktion rechts. EINE Spalte pro Seite (mehrere überlagern sich). Mit selectable pinnt die Auswahl-Spalte automatisch mit.
• striped, dense.

Beispiel-Node

{
  "definition": "component.table",
  "props": {
    "columns": [{"key": "nr", "label": "Auftrag"}, {"key": "summe", "label": "Summe", "align": "end"}],
    "rows": [{"nr": "#4711", "summe": "1.240,00 €"}],
    "sortable": true, "selectable": true, "striped": true
  }
}