Table

Die Table zeigt Daten in Zeilen und Spalten und macht Einträge vergleichbar.
NameTypeDefaultDescription
colorprimary | success | 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 | 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.

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

Ausrichtung

Vertikal zentriert

Der Inhalt wird vertikal zentriert dargestellt, sodass er mittig zwischen oberem und unterem 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

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.

NameTypeDefault
colorprimary | success | secondary | dangerprimary
variantplain | solid | softsolid
sizem | sm

Properties

PropertyTypeDefaultDescription
childrenReactNode-The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
translate"yes" | "no"-
dirstring-
langstring-
hiddenboolean-
inertboolean-
slotstring-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.
disallowEmptySelectionboolean-Whether the collection allows empty selection.
disabledKeysIterable<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.
shouldSelectOnPressUpboolean-Whether selection should occur on press up instead of press down.
treeColumnKey-The id of the column that displays hierarchical data.
selectionModeSelectionMode-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).
sortDescriptorSortDescriptor-The current sorted column and direction.
expandedKeysIterable<Key>-The currently expanded keys in the collection (controlled).
defaultExpandedKeysIterable<Key>-The initial expanded keys in the collection (uncontrolled).
selectionBehaviorSelectionBehavior'toggle'How multiple selection should behave in the collection.
disabledBehaviorDisabledBehavior'all'Whether `disabledKeys` applies to all interactions, or only selection.
dragAndDropHooksDragAndDropHooks-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.
layout"auto" | "fixed""auto"The column-sizing algorithm of the table. Use "fixed" together with column widths to enforce exact widths.
minWidthstring | number-The minimum width of the table. Below this width the table scrolls horizontally instead of shrinking its columns.
classNamestring-The elements class name.

Events

PropertyTypeDefaultDescription
onClickMouseEventHandler<HTMLDivElement>-
onClickCaptureMouseEventHandler<HTMLDivElement>-
onAuxClickMouseEventHandler<HTMLDivElement>-
onAuxClickCaptureMouseEventHandler<HTMLDivElement>-
onContextMenuMouseEventHandler<HTMLDivElement>-
onContextMenuCaptureMouseEventHandler<HTMLDivElement>-
onDoubleClickMouseEventHandler<HTMLDivElement>-
onDoubleClickCaptureMouseEventHandler<HTMLDivElement>-
onMouseDownMouseEventHandler<HTMLDivElement>-
onMouseDownCaptureMouseEventHandler<HTMLDivElement>-
onMouseEnterMouseEventHandler<HTMLDivElement>-
onMouseLeaveMouseEventHandler<HTMLDivElement>-
onMouseMoveMouseEventHandler<HTMLDivElement>-
onMouseMoveCaptureMouseEventHandler<HTMLDivElement>-
onMouseOutMouseEventHandler<HTMLDivElement>-
onMouseOutCaptureMouseEventHandler<HTMLDivElement>-
onMouseOverMouseEventHandler<HTMLDivElement>-
onMouseOverCaptureMouseEventHandler<HTMLDivElement>-
onMouseUpMouseEventHandler<HTMLDivElement>-
onMouseUpCaptureMouseEventHandler<HTMLDivElement>-
onTouchCancelTouchEventHandler<HTMLDivElement>-
onTouchCancelCaptureTouchEventHandler<HTMLDivElement>-
onTouchEndTouchEventHandler<HTMLDivElement>-
onTouchEndCaptureTouchEventHandler<HTMLDivElement>-
onTouchMoveTouchEventHandler<HTMLDivElement>-
onTouchMoveCaptureTouchEventHandler<HTMLDivElement>-
onTouchStartTouchEventHandler<HTMLDivElement>-
onTouchStartCaptureTouchEventHandler<HTMLDivElement>-
onPointerDownPointerEventHandler<HTMLDivElement>-
onPointerDownCapturePointerEventHandler<HTMLDivElement>-
onPointerMovePointerEventHandler<HTMLDivElement>-
onPointerMoveCapturePointerEventHandler<HTMLDivElement>-
onPointerUpPointerEventHandler<HTMLDivElement>-
onPointerUpCapturePointerEventHandler<HTMLDivElement>-
onPointerCancelPointerEventHandler<HTMLDivElement>-
onPointerCancelCapturePointerEventHandler<HTMLDivElement>-
onPointerEnterPointerEventHandler<HTMLDivElement>-
onPointerLeavePointerEventHandler<HTMLDivElement>-
onPointerOverPointerEventHandler<HTMLDivElement>-
onPointerOverCapturePointerEventHandler<HTMLDivElement>-
onPointerOutPointerEventHandler<HTMLDivElement>-
onPointerOutCapturePointerEventHandler<HTMLDivElement>-
onGotPointerCapturePointerEventHandler<HTMLDivElement>-
onGotPointerCaptureCapturePointerEventHandler<HTMLDivElement>-
onLostPointerCapturePointerEventHandler<HTMLDivElement>-
onLostPointerCaptureCapturePointerEventHandler<HTMLDivElement>-
onScrollUIEventHandler<HTMLDivElement>-
onScrollCaptureUIEventHandler<HTMLDivElement>-
onWheelWheelEventHandler<HTMLDivElement>-
onWheelCaptureWheelEventHandler<HTMLDivElement>-
onAnimationStartAnimationEventHandler<HTMLDivElement>-
onAnimationStartCaptureAnimationEventHandler<HTMLDivElement>-
onAnimationEndAnimationEventHandler<HTMLDivElement>-
onAnimationEndCaptureAnimationEventHandler<HTMLDivElement>-
onAnimationIterationAnimationEventHandler<HTMLDivElement>-
onAnimationIterationCaptureAnimationEventHandler<HTMLDivElement>-
onTransitionCancelTransitionEventHandler<HTMLDivElement>-
onTransitionCancelCaptureTransitionEventHandler<HTMLDivElement>-
onTransitionEndTransitionEventHandler<HTMLDivElement>-
onTransitionEndCaptureTransitionEventHandler<HTMLDivElement>-
onTransitionRunTransitionEventHandler<HTMLDivElement>-
onTransitionRunCaptureTransitionEventHandler<HTMLDivElement>-
onTransitionStartTransitionEventHandler<HTMLDivElement>-
onTransitionStartCaptureTransitionEventHandler<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

PropertyTypeDefaultDescription
aria-labelstring-Defines a string value that labels the current element.
aria-labelledbystring-Identifies the element (or elements) that labels the current element.
aria-describedbystring-Identifies the element (or elements) that describes the object.
aria-detailsstring-Identifies the element (or elements) that provide a detailed, extended description for the object.

Auf dieser Seite