Tabelle
Datentabelle aus columns/rows-Props — gestreift, dicht, mobil horizontal scrollbar
Beispiele
Auftragsliste (gestreift, fehlender Wert → —)
| Auftrag | Kunde | Status | Summe |
|---|---|---|---|
| A-4711 | Selig, David | open | 1.240,00 € |
| A-4712 | Muster GmbH | versendet | 89,90 € |
| A-4713 | Beispiel AG | bezahlt | 12.500,00 € |
| A-4714 | Test KG | — | 430,10 € |
Dicht (Desktop-Liste)
| Auftrag | Kunde | Status | Summe |
|---|---|---|---|
| A-4711 | Selig, David | open | 1.240,00 € |
| A-4712 | Muster GmbH | versendet | 89,90 € |
| A-4713 | Beispiel AG | bezahlt | 12.500,00 € |
| A-4714 | Test KG | — | 430,10 € |
XSS in Zelle → escaped
| Inhalt |
|---|
| <script>alert(1)</script> |
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| columns * | array | — | Spalten |
| rows * | array | — | Zeilen |
| striped | boolean | true | Gestreift |
| dense | boolean | false | Dicht (Desktop-Listen) |
| sortable | boolean | false | Spalten sortierbar (Klick auf Kopf) |
| selectable | boolean | false | Zeilen auswählbar (Checkboxen) |
* Pflicht-Prop
Events & Slots
Events:
⚡ sort⚡ selection — im Surface per on: {<event>: {action, params}} verdrahtbar.
Genutzte Design-Tokens
border.emphasisborder.hairlinecolor.action.primarycolor.border.defaultcolor.border.subtlecolor.status.info-surfacecolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.disabledcolor.text.mutedfont.family.defaultradius.controlsize.1size.10size.2size.3size.4text.smtext.xstracking.wideweight.semibold
LLM-Notizen
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-Rastersection.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; Eventsselection{count} undsort.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
}
}