Tabelle — component.table
Datentabelle aus columns/rows-Props — gestreift, dicht, mobil horizontal scrollbar, Sticky-Kopf + Spalten-Pinning
Componentv1.3.0Datenweb.documentweb.applicationdesktop.shellemail.client
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 € |
Sticky-Kopf + Pinning (Auftrag links, Aktion rechts fixiert — horizontal + vertikal scrollen)
| Auftrag | Kunde | Ansprechpartner | Straße | Ort | Status | Summe | Aktion |
|---|---|---|---|---|---|---|---|
A-4711 | Selig, David | Kontakt 1 | Musterstraße 1 | 97110 Musterstadt | offen | 240,00 € | Öffnen |
A-4712 | Muster GmbH | Kontakt 2 | Musterstraße 2 | 97111 Musterstadt | versendet | 555,00 € | Öffnen |
A-4713 | Beispiel AG | Kontakt 3 | Musterstraße 3 | 97112 Musterstadt | bezahlt | 870,00 € | Öffnen |
A-4714 | Test KG | Kontakt 4 | Musterstraße 4 | 97113 Musterstadt | offen | 1.185,00 € | Öffnen |
A-4715 | Nord Handel | Kontakt 5 | Musterstraße 5 | 97114 Musterstadt | versendet | 1.500,00 € | Öffnen |
A-4716 | Süd Logistik | Kontakt 6 | Musterstraße 6 | 97115 Musterstadt | bezahlt | 1.815,00 € | Öffnen |
A-4717 | West Metall | Kontakt 7 | Musterstraße 7 | 97116 Musterstadt | offen | 2.130,00 € | Öffnen |
A-4718 | Ost Papier | Kontakt 8 | Musterstraße 8 | 97117 Musterstadt | versendet | 2.445,00 € | Öffnen |
A-4719 | Berg & Tal | Kontakt 9 | Musterstraße 9 | 97118 Musterstadt | bezahlt | 2.760,00 € | Öffnen |
A-4720 | Fluss OHG | Kontakt 10 | Musterstraße 10 | 97119 Musterstadt | offen | 3.075,00 € | Öffnen |
A-4721 | Hafen eG | Kontakt 11 | Musterstraße 11 | 97110 Musterstadt | versendet | 3.390,00 € | Öffnen |
A-4722 | Wald KG | Kontakt 12 | Musterstraße 12 | 97111 Musterstadt | bezahlt | 3.705,00 € | Öffnen |
Pinning + Auswahl (Auswahl-Spalte pinnt mit, Datenspalte rückt nach)
| Auftrag | Kunde | Ansprechpartner | Straße | Ort | Status | Summe | Aktion | |
|---|---|---|---|---|---|---|---|---|
A-4711 | Selig, David | Kontakt 1 | Musterstraße 1 | 97110 Musterstadt | offen | 240,00 € | Öffnen | |
A-4712 | Muster GmbH | Kontakt 2 | Musterstraße 2 | 97111 Musterstadt | versendet | 555,00 € | Öffnen | |
A-4713 | Beispiel AG | Kontakt 3 | Musterstraße 3 | 97112 Musterstadt | bezahlt | 870,00 € | Öffnen | |
A-4714 | Test KG | Kontakt 4 | Musterstraße 4 | 97113 Musterstadt | offen | 1.185,00 € | Öffnen | |
A-4715 | Nord Handel | Kontakt 5 | Musterstraße 5 | 97114 Musterstadt | versendet | 1.500,00 € | Öffnen |
XSS in Zelle → escaped
| Inhalt |
|---|
| <script>alert(1)</script> |
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
columns * | array | — |
rows * | array | — |
striped | boolean | true |
dense | boolean | false |
sortable | boolean | false |
selectable | boolean | false |
stickyHeader | boolean | false |
Events & Slots
Events: sort, selection
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--table-border | var(--color-border-subtle) |
--table-stripe | var(--color-surface-sunken) |
--table-padding-y | var(--size-2) |
--table-max-height | 28rem |
--table-select-width | var(--size-10) |
Genutzte Design-Tokens
border.emphasis border.hairline color.action.primary color.border.default color.border.subtle color.status.info-surface color.surface.default color.surface.sunken color.text.default color.text.disabled color.text.muted font.family.default radius.control radius.sm size.1 size.10 size.2 size.3 size.4 size.6 text.sm text.xs tracking.wide weight.semibold