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


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. |
| `translate` | `"yes" \| "no"` | - | - |
| `style` | `StyleOrFunction<TooltipRenderProps>` | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| `dir` | `string` | - | - |
| `lang` | `string` | - | - |
| `hidden` | `boolean` | - | - |
| `inert` | `boolean` | - | - |
| `slot` | `string` | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `disallowEmptySelection` | `boolean` | - | Whether the collection allows empty selection. |
| `disabledKeys` | `Iterable<Key>` | - | A list of row keys to disable. |
| `escapeKeyBehavior` | `"none" \| "clearSelection"` | `'clearSelection'` | Whether pressing the escape key should clear selection in the table or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| `shouldSelectOnPressUp` | `boolean` | - | Whether selection should occur on press up instead of press down. |
| `treeColumn` | `Key` | - | The id of the column that displays hierarchical data. |
| `selectionMode` | `SelectionMode` | - | The type of selection that is allowed in the collection. |
| `selectedKeys` | `"all" \| Iterable<Key>` | - | The currently selected keys in the collection (controlled). |
| `defaultSelectedKeys` | `"all" \| Iterable<Key>` | - | The initial selected keys in the collection (uncontrolled). |
| `sortDescriptor` | `SortDescriptor` | - | The current sorted column and direction. |
| `expandedKeys` | `Iterable<Key>` | - | The currently expanded keys in the collection (controlled). |
| `defaultExpandedKeys` | `Iterable<Key>` | - | The initial expanded keys in the collection (uncontrolled). |
| `selectionBehavior` | `SelectionBehavior` | `'toggle'` | How multiple selection should behave in the collection. |
| `disabledBehavior` | `DisabledBehavior` | `'all'` | Whether `disabledKeys` applies to all interactions, or only selection. |
| `dragAndDropHooks` | `DragAndDropHooks` | - | The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the Table. |
| `verticalAlign` | `"top" \| "middle"` | - | The vertical alignment of the table cells content. |
| `className` | `string` | - | - |

### Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onClickCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onAuxClick` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onAuxClickCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onContextMenu` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onContextMenuCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onDoubleClick` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onDoubleClickCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseDown` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseDownCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseEnter` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseLeave` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseMove` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseMoveCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseOut` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseOutCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseOver` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseOverCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseUp` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseUpCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onTouchCancel` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchCancelCapture` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchEnd` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchEndCapture` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchMove` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchMoveCapture` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchStart` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchStartCapture` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onPointerDown` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerDownCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerMove` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerMoveCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerUp` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerUpCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerCancel` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerCancelCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerEnter` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerLeave` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerOver` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerOverCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerOut` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerOutCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onGotPointerCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onGotPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onLostPointerCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onLostPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onScroll` | `UIEventHandler<HTMLDivElement>` | - | - |
| `onScrollCapture` | `UIEventHandler<HTMLDivElement>` | - | - |
| `onWheel` | `WheelEventHandler<HTMLDivElement>` | - | - |
| `onWheelCapture` | `WheelEventHandler<HTMLDivElement>` | - | - |
| `onAnimationStart` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onAnimationStartCapture` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onAnimationEnd` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onAnimationEndCapture` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onAnimationIteration` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onAnimationIterationCapture` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onTransitionCancel` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionCancelCapture` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionEnd` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionEndCapture` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionRun` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionRunCapture` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionStart` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionStartCapture` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onSelectionChange` | `((keys: Selection) => void)` | - | Handler that is called when the selection changes. |
| `onSortChange` | `((descriptor: SortDescriptor) => any)` | - | Handler that is called when the sorted column or direction changes. |
| `onExpandedChange` | `((keys: Set<Key>) => any)` | - | Handler that is called when items are expanded or collapsed. |
| `onRowAction` | `((key: Key) => void)` | - | Handler that is called when a user performs an action on the row. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-label` | `string` | - | Defines a string value that labels the current element. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |


## Guidelines

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