Table
A data table component for displaying structured information with sorting, resizing, and selection capabilities.
Usage
The Table component provides a flexible way to display structured data with support for sorting, column resizing, and row selection.
Basic Table Example
Sortable Table
Resizable Columns
Selectable Rows
Tables can support row selection with single or multiple selection modes.
Table Sizes
The table component supports different sizes for varying information density.
Column Styling
Tables support column alignment and visual dividers between columns.
Column Widths
Configure column widths using fixed, minimum, maximum, or fractional values.
Actions and Interactions
Tables can include action buttons and handle row interactions.
Empty State
Display custom empty states when there is no data to show.
Text Wrap and Overflow
Tables can handle long content with text wrapping and overflow modes.
Form Inputs in Tables
Tables can contain interactive form elements like inputs and checkboxes.
Advanced Resizing
Advanced column resizing with event callbacks for more control.
Async Data Loading
Advanced example showing async data loading with React Query, including pagination and sorting.
Table Props
| Prop | Type | Default |
|---|---|---|
onComputedWidth? | ((widths: number) => void) | - |
renderActionBar? | ((selectedKeys: "all" | Set<Key>) => ReactElement<unknown, string | JSXElementConstructor<any>>) | - |
onLoadMore? | (() => any) | - |
loadingState? | LoadingState | - |
onResizeEnd? | ((widths: Map<Key, ColumnSize>) => void) | - |
onResize? | ((widths: Map<Key, ColumnSize>) => void) | - |
onResizeStart? | ((widths: Map<Key, ColumnSize>) => void) | - |
overflowMode? | "wrap" | "truncate" | 'truncate' |
size? | "sm" | "md" | "lg" | 'md' |
onRowAction? | ((key: Key) => void) | - |
disabledBehavior? | DisabledBehavior | "selection" |
selectionBehavior? | SelectionBehavior | "toggle" |
onSortChange? | ((descriptor: SortDescriptor) => any) | - |
sortDescriptor? | SortDescriptor | - |
onSelectionChange? | ((keys: Selection) => void) | - |
defaultSelectedKeys? | Iterable<Key> | "all" | - |
selectedKeys? | Iterable<Key> | "all" | - |
disallowEmptySelection? | boolean | - |
selectionMode? | SelectionMode | - |
shouldSelectOnPressUp? | boolean | - |
escapeKeyBehavior? | "clearSelection" | "none" | 'clearSelection' |
disabledKeys? | Iterable<Key> | - |
TableColumn Props
| Prop | Type | Default |
|---|---|---|
hideHeader? | boolean | - |
focusStrategy? | "cell" | "column" | - |
menuItems? | ReactNode | - |
maxWidth? | ColumnStaticSize | null | - |
minWidth? | ColumnStaticSize | null | - |
defaultWidth? | ColumnSize | null | - |
width? | ColumnSize | null | - |
textValue? | string | - |
isRowHeader? | boolean | - |
allowsSorting? | boolean | - |
allowsResizing? | boolean | - |
TableRow Props
| Prop | Type | Default |
|---|---|---|
onHoverChange? | ((isHovering: boolean) => void) | - |
onHoverEnd? | ((e: HoverEvent) => void) | - |
onHoverStart? | ((e: HoverEvent) => void) | - |
routerOptions? | undefined | - |
referrerPolicy? | HTMLAttributeReferrerPolicy | - |
ping? | string | - |
download? | string | boolean | - |
target? | HTMLAttributeAnchorTarget | - |
hrefLang? | string | - |
href? | string | - |
onAction? | (() => void) | - |
isDisabled? | boolean | - |
textValue? | string | - |
dependencies? | readonly any[] | - |
value? | object | - |
columns? | Iterable<object> | - |
TableCell Props
| Prop | Type | Default |
|---|---|---|
separator? | boolean | - |
type? | "default" | "checkbox" | - |
isSticky? | boolean | - |
textValue? | string | - |
Last updated on