# Table

Die Table zeigt Daten in Zeilen und Spalten. Sie hilft dabei, Informationen schnell zu überblicken und Einträge zu vergleichen.

## Overview

# 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.

```tsx
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.

```tsx
import {
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableFooterRow,
  TableHeader,
  TableRow,
} from "@mittwald/flow-react-components";

<Table aria-label="Bestellübersicht">
  <TableHeader>
    <TableColumn>Artikel</TableColumn>
    <TableColumn horizontalAlign="end">Preis</TableColumn>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Webhosting (2 vCPU / 4 GB RAM)</TableCell>
      <TableCell horizontalAlign="end">32,00 €</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>20 GB Speicherplatz</TableCell>
      <TableCell horizontalAlign="end">Inklusive</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>20 GB Zusatzspeicherplatz</TableCell>
      <TableCell horizontalAlign="end">2,00 €</TableCell>
    </TableRow>
    <TableFooterRow>
      <TableCell>Gesamtpreis</TableCell>
      <TableCell horizontalAlign="end">34,00 €</TableCell>
    </TableFooterRow>
  </TableBody>
</Table>
```

---

# Vertikal zentriert

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

```tsx
import {
  InlineCode,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@mittwald/flow-react-components";

<Table aria-label="Button Props" verticalAlign="middle">
  <TableHeader>
    <TableColumn>Name</TableColumn>
    <TableColumn>Type</TableColumn>
    <TableColumn>Default</TableColumn>
    <TableColumn>Description</TableColumn>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        <InlineCode>size</InlineCode>
      </TableCell>
      <TableCell>m | s</TableCell>
      <TableCell>m</TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Cumque eius quam quas vel voluptas, ullam
        aliquid fugit.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>
```

---

# Horizontal zentriert

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

```tsx
import {
  IconCheck,
  IconClose,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@mittwald/flow-react-components";

<Table aria-label="Scopes">
  <TableHeader>
    <TableColumn>Bereich</TableColumn>
    <TableColumn horizontalAlign="center">
      Lesen
    </TableColumn>
    <TableColumn horizontalAlign="center">
      Schreiben
    </TableColumn>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Projekt</TableCell>
      <TableCell horizontalAlign="center">
        <IconCheck status="success" aria-label="Zugriff" />
      </TableCell>
      <TableCell horizontalAlign="center">
        <IconClose
          status="danger"
          aria-label="Kein Zugriff"
        />
      </TableCell>
    </TableRow>
  </TableBody>
</Table>
```