Table

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

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

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.

Table

Properties

Events

Accessibility

Auf dieser Seite