Table

Grundlagen

Best Practices

Achte bei der Verwendung einer Table darauf, dass ...

• die Anzahl der Spalten so gering wie möglich gehalten wird, damit das Scannen einfach bleibt.
• Spaltenüberschriften kurz, eindeutig und prägnant formuliert sind.
• nicht mehrere Informationen in einer Zelle dargestellt werden.
• Zahlen, insbesondere Geldbeträge oder Zeitwerte, rechtsbündig angezeigt werden, um Vergleichbarkeit zu fördern.

Verwendung

Verwende eine Table, um ...

• große Datenmengen klar strukturiert, übersichtlich und leicht vergleichbar darzustellen (z. B. Userlisten, Rechnungsübersichten).
• Spaltenweise konsistente Inhalte (z. B. Preis, Status, Datum) schnell erfassbar zu machen.

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.

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.

Vertikal zentriert

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

Horizontal zentriert

Der Inhalt wird horizontal zentriert ausgerichtet. Unabhängig von der Ausrichtung unterstützt die Table optional die Statusanzeigen success und danger.

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.

Properties

Events

Accessibility