Die Table zeigt Daten in Zeilen und Spalten. Sie hilft dabei, Informationen schnell zu überblicken und Einträge zu vergleichen.GitHub
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
Tab not found
The tab you tried to access no longer exists or you do not have permission to view it.
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
Tab not found
The tab you tried to access no longer exists or you do not have permission to view it.