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

PropertyTypeDescription
children
ReactNode
The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
translate
yes | no
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 (default)
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
SelectionBehaviordefault: 'toggle'
How multiple selection should behave in the collection.
disabledBehavior
DisabledBehaviordefault: '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.
layout
auto (default) | fixed
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.
className
string
The elements class name.

Events

PropertyTypeDescription
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

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

Auf dieser Seite