Einführung

Die Table-Komponente ist ein robustes Layout-Element, das komplexe tabellarische Datensätze klar auf Client-Seiten rendert. Mit voller Unterstützung für Zero-JS-responsive Templates und datengetriebene CMS-Konfigurationsschemata bietet sie sauberes vertikales Scroll-Wrapping, dynamische Spaltenausrichtung und Hover-Hervorhebungen.

Verwendung

Du kannst Daten einfach aus dem Dashboard zuordnen und Tabellen direkt gestalten.

1. Einfache Plain-Tabelle mit Custom-Ausrichtung

Eine Standard-Textliste mit der plain-Variante und rechtsbündigen Preisen für bessere Lesbarkeit.

{
  "type": "table",
  "variant": "plain",
  "columns": [
    { "header": "Name", "key": "name" },
    { "header": "Category", "key": "category" },
    { "header": "Price", "key": "price", "align": "end" }
  ],
  "rows": "[{\"name\": \"Laptop\", \"category\": \"Electronics\", \"price\": \"$999.00\"}, {\"name\": \"Coffee Mug\", \"category\": \"Home & Kitchen\", \"price\": \"$15.00\"}]"
}

2. Zebra-Interaktionstabelle (Surface-Variante)

Mit schattierten, alternierenden Zeilen (Zebra), interaktiven Hover-Hervorhebungen und strukturellen Rahmen.

{
  "type": "table",
  "variant": "surface",
  "striped": true,
  "interactive": true,
  "columnBorder": true,
  "columns": [
    { "header": "System Service", "key": "service" },
    { "header": "Server Node", "key": "node", "align": "center" },
    { "header": "Status", "key": "status", "align": "end" }
  ],
  "rows": "[{\"service\": \"Auth Endpoint\", \"node\": \"EU-West\", \"status\": \"Online\"}, {\"service\": \"Payment API\", \"node\": \"US-East\", \"status\": \"Degraded\"}, {\"service\": \"File Storage\", \"node\": \"APAC-South\", \"status\": \"Online\"}]"
}

3. Zeilen-Hover-Aktionen (Row Hover Actions)

Übergebe hoverActions, um zusätzliche Steuerelemente (z. B. eine Schaltfläche "Details anzeigen") in einer Zelle mit der Breite Null am Ende der Zeile zu rendern. Diese Zelle bleibt ausgeblendet, bis sich der Mauszeiger über der Zeile befindet oder eines der Steuerelemente den Tastaturfokus erhält. Sie ist absolut über dem Ende der Zeile positioniert, sodass sie die Tabellenbreite nie verändert — im eingeblendeten Zustand kann sie jedoch visuell die letzte(n) Spalte(n) verdecken.

hoverActions ist eine Render-Funktion (wie column.render), kein über das CMS serialisierbares Feld — sie wird im Sveltia CMS-Schema für den table-Block nicht bereitgestellt.

Hydrierung und interaktive Einschränkungen von hoverActions

Bei Verwendung von hoverActions in einer Tabelle, die vollständig oder teilweise interaktiv ist (z. B. wenn Spaltenköpfe sortable sind oder die Tabelle über eine übergeordnete Island-Komponente hydriert wird), gibt es wichtige architektonische Überlegungen bezüglich des clientseitigen Status:

1. Statisches Markup-Rendering: Die Funktion hoverActions wird während des serverseitigen Renderings (SSR) ausgeführt. Wenn die Sortierung der Tabelle aktiviert ist oder eine clientseitige Hydrierung stattfindet, können interaktive Ereignis-Listener (wie onClick oder zustandsbehaftete Island-Komponenten), die direkt in hoverActions verschachtelt sind, während des DOM-Klonens und der Hydrierung verloren gehen.
2. Empfohlenes Klick-Delegationsmuster: Anstatt komplexe Client-Islands oder aktive Event-Hooks direkt im hoverActions-Callback einzubetten:
   • Rendere statische Trigger oder Standard-HTML-Elemente mit beschreibenden Datenattributen (z. B. <button type="button" data-action="delete" data-id={row.id}>Löschen</button>).
   • Mounte eine einzelne zustandsbehaftete Controller-Island außerhalb der Table-Komponente.
   • Lausche global (oder delegiere Events am übergeordneten Element), um Klicks auf diese Datenattribute abzufangen und entsprechende Modals, Drawers oder API-Aufrufe auszulösen.

Props

Spalten-Listeneigenschaften (columns)

Jeder Eintrag in der columns-Liste akzeptiert folgende Felder:

Architecture Notes

• Optimierte JSON-String-Konvertierung: Da sich Roh-Zeilenstrukturen pro Block dynamisch ändern, liefert Sveltia CMS die Zeilen als escapten JSON-Array-String im rows-Feld. Dieser wird zur Render-Zeit sicher geparst und hält die Bundle-Größe minimal.
• Reine CSS-Layout-Hygiene: Kopfzeilen, Spaltenumrisse und Zebra-Streifen nutzen leichte Panda-CSS-Utility-Variablen, vermeiden Layout-Verschiebungen und rendern auf Touchscreens sofort.
• Scroll-Pinning: stickyHeader nutzt standardmäßiges position: sticky auf Headern in einem Overflow-Wrapper und umgeht teure Scroll-Listener.