Table

Die Table zeigt Daten in Zeilen und Spalten und macht Einträge vergleichbar.

Name	Type	Default	Description
`color`	primary \| success \| 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 | success | 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>

Best Practices

Halte die Zahl der Spalten so gering wie möglich. Das erleichtert das Scannen.
Formuliere die Spaltenüberschriften kurz, eindeutig und prägnant.
Stelle pro Zelle nur eine Information dar.
Zeige Zahlen wie Geldbeträge oder Zeitwerte rechtsbündig an. Das fördert die Vergleichbarkeit.

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 €

Ausrichtung

Vertikal zentriert

Der Inhalt wird vertikal zentriert dargestellt, sodass er mittig zwischen oberem und unterem 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 \| success \| secondary \| danger	primary
`variant`	plain \| solid \| soft	solid
`size`	m \| s	m

Properties

Property	Type	Default	Description
`children`	`ReactNode`	-	The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
`className`	`string`	-	The elements class name.
`defaultExpandedKeys`	`Iterable<Key>`	-	The initial expanded keys in the collection (uncontrolled).
`defaultSelectedKeys`	`"all" \| Iterable<Key>`	-	The initial selected keys in the collection (uncontrolled).
`dir`	`string`	-
`disabledBehavior`	`DisabledBehavior`	'all'	Whether `disabledKeys` applies to all interactions, or only selection.
`disabledKeys`	`Iterable<Key>`	-	A list of row keys to disable.
`disallowEmptySelection`	`boolean`	-	Whether the collection allows empty selection.
`dragAndDropHooks`	`DragAndDropHooks`	-	The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the Table.
`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.
`expandedKeys`	`Iterable<Key>`	-	The currently expanded keys in the collection (controlled).
`hidden`	`boolean`	-
`inert`	`boolean`	-
`lang`	`string`	-
`layout`	`"auto" \| "fixed"`	"auto"	The column-sizing algorithm of the table. Use "fixed" together with column widths to enforce exact widths.
`minWidth`	`string \| number`	-	The minimum width of the table. Below this width the table scrolls horizontally instead of shrinking its columns.
`selectedKeys`	`"all" \| Iterable<Key>`	-	The currently selected keys in the collection (controlled).
`selectionBehavior`	`SelectionBehavior`	'toggle'	How multiple selection should behave in the collection.
`selectionMode`	`SelectionMode`	-	The type of selection that is allowed in the collection.
`shouldSelectOnPressUp`	`boolean`	-	Whether selection should occur on press up instead of press down.
`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.
`sortDescriptor`	`SortDescriptor`	-	The current sorted column and direction.
`translate`	`"yes" \| "no"`	-
`treeColumn`	`Key`	-	The id of the column that displays hierarchical data.
`verticalAlign`	`"top" \| "middle"`	-	The vertical alignment of the table cells content.

Events

Property	Type	Default	Description
`onClick`	`MouseEventHandler<HTMLDivElement>`	-
`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.
`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.

Accessibility

Property	Type	Default	Description
`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.
`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.

Components

Integrations