Table Tabelle
Data Display
Intelligente Auto-Erkennung
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\"}]"
}
| Name | Category | Price |
|---|---|---|
| Laptop | Electronics | $999.00 |
| Coffee Mug | Home & Kitchen | $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\"}]"
}
| System Service | Server Node | Status |
|---|---|---|
| Auth Endpoint | EU-West | Online |
| Payment API | US-East | Degraded |
| File Storage | APAC-South | Online |
Props
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / unterstützte Optionen |
|---|---|---|---|
Spalten (columns) | list | - | Geordnete Liste von Spaltenkonfigurationen (Details unten). |
Zeilendaten (rows) | text | - | Roh serialisierter JSON-Array-String der Tabellenzeilen (z. B. "[{\"item\": \"Laptop\"}]"), zur Render-Zeit automatisch geparst. |
Variante (variant) | select | "plain" | Allgemeiner Layoutstil des Tabellencontainers. • Optionen: "plain", "surface". |
Zebra-Streifen (striped) | boolean | false | Bei true werden abwechselnde Zeilen dezent schattiert. |
Zeilenhervorhebung (interactive) | boolean | false | Aktiviert Hover-Hintergrundanimationen auf aktiven Zellen. |
Spaltenränder (columnBorder) | boolean | false | Rendert vertikale Trennlinien zwischen Spalten. |
Sticky-Header (stickyHeader) | boolean | false | Heftet die Kopfzeile beim Scrollen oben im Viewport fest. |
Spalten-Listeneigenschaften (columns)
Jeder Eintrag in der columns-Liste akzeptiert folgende Felder:
| Unter-Eigenschaft | Typ | Erforderlich | Beschreibung / unterstützte Optionen |
|---|---|---|---|
Kopftext (header) | string | Ja | Spaltenüberschrift in der Kopfzeile. |
Schlüssel (key) | string | Ja | Eigenschaftsschlüssel im Zeilenobjekt für diese Zelle. |
Textausrichtung (align) | select | "start" | Ausrichtung der Zellenwerte. • Optionen: "start", "center", "end". |
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:
stickyHeadernutzt standardmäßigesposition: stickyauf Headern in einem Overflow-Wrapper und umgeht teure Scroll-Listener.