Die Table zeigt Daten in Zeilen und Spalten. Sie hilft dabei, Informationen schnell zu überblicken und Einträge zu vergleichen.GitHubMarkdown
Name
Type
Default
Description
color
primary | accent | secondary | danger
primary
The color of the button
variant
plain | solid | soft
solid
The variant of the button
size
m | s
m
The size of the button
Playground
Verwende <Table />, um tabellarische Daten strukturiert darzustellen. Nutze
TableHeader und TableColumn, um die Spaltenüberschriften zu definieren.
Verwende TableBody, um den Content über TableRow und TableCell abzubilden.
Name
Type
Default
Description
color
primary | accent | secondary | danger
primary
The color of the button
variant
plain | solid | soft
solid
The variant of the button
size
m | s
m
The size of the button
import{InlineCode,Table,TableBody,TableCell,TableColumn,TableHeader,TableRow,}from"@mittwald/flow-react-components";<Tablearia-label="Button Props"><TableHeader><TableColumn>Name</TableColumn><TableColumn>Type</TableColumn><TableColumn>Default</TableColumn><TableColumn>Description</TableColumn></TableHeader><TableBody><TableRow><TableCell><InlineCode>color</InlineCode></TableCell><TableCell> primary | accent | secondary | danger</TableCell><TableCell>primary</TableCell><TableCell>The color of the button</TableCell></TableRow><TableRow><TableCell><InlineCode>variant</InlineCode></TableCell><TableCell>plain | solid | soft</TableCell><TableCell>solid</TableCell><TableCell>The variant of the button</TableCell></TableRow><TableRow><TableCell><InlineCode>size</InlineCode></TableCell><TableCell>m | s</TableCell><TableCell>m</TableCell><TableCell>The size of the button</TableCell></TableRow></TableBody></Table>
Mit Footer
Um die letzte Zeile der Table hervorzuheben (z. B. für eine Preisübersicht),
kann TableFooterRow verwendet werden.
Artikel
Preis
Webhosting (2 vCPU / 4 GB RAM)
32,00 €
20 GB Speicherplatz
Inklusive
20 GB Zusatzspeicherplatz
2,00 €
Gesamtpreis
34,00 €
Vertikal zentriert
Der Inhalt wird vertikal zentriert dargestellt, sodass dieser mittig zwischen
dem oberen und unteren Zellenrand positioniert ist.
Name
Type
Default
Description
size
m | s
m
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque eius quam quas vel voluptas, ullam aliquid fugit.
Horizontal zentriert
Der Inhalt wird horizontal zentriert ausgerichtet. Unabhängig von der
Ausrichtung unterstützt die Table optional die Statusanzeigen success und
danger.
Bereich
Lesen
Schreiben
Projekt
Feste Spaltenbreiten
Setze layout="fixed" an der Table und weise einzelnen TableColumn über
width eine feste Breite zu. Spalten ohne Breite teilen sich den restlichen
Platz. Mit minWidth an der Table bleibt bei wenig Platz die Breite erhalten
und die Tabelle scrollt horizontal, statt die Spalten zu stauchen.