mittwald Flow Logo

Components

Table

Die Table zeigt Daten in Zeilen und Spalten. Sie hilft dabei, Informationen schnell zu überblicken und Einträge zu vergleichen.GitHub
NameTypeDefaultDescription
colorprimary | accent | secondary | dangerprimaryThe color of the button
variantplain | solid | softsolidThe variant of the button
sizem | smThe 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.

NameTypeDefaultDescription
colorprimary | accent | secondary | dangerprimaryThe color of the button
variantplain | solid | softsolidThe variant of the button
sizem | smThe 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>

Um die letzte Zeile der Table hervorzuheben (z. B. für eine Preisübersicht), kann TableFooterRow verwendet werden.

ArtikelPreis
proSpace (2 vCPU / 4 GB RAM)32,00 €
20 GB SpeicherplatzInklusive
20 GB Zusatzspeicherplatz2,00 €

Vertikal zentriert

Der Inhalt wird vertikal zentriert dargestellt, sodass dieser mittig zwischen dem oberen und unteren Zellenrand positioniert ist.

NameTypeDefaultDescription
sizem | smLorem 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.

BereichLesenSchreiben
Projekt

Overview