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"; <Table aria-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.
| Name | Type | Default |
|---|---|---|
color | primary | accent | secondary | danger | primary |
variant | plain | solid | soft | solid |
size | m | s | m |