Table
The props declared for Table, generated from the types @proyecto-viviana/ui ships.
Import
import { Table } from "@proyecto-viviana/ui";Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | (() => JSX.Element) | — | Children components (TableHeader, TableBody). |
density | 'compact' | 'regular' | 'spacious' | — | Density of rows and headers. |
isQuiet | false | true | — | Whether the TableView should draw without the default container chrome. |
overflowMode | 'wrap' | 'truncate' | — | Whether labels and cell content truncate or wrap. |
renderActionBar | (selectedKeys: "all" | Set<Key>) => JSX.Element | — | Provides an action bar when rows are selected. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
class | string | — | Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. |
style | JSX.CSSProperties | — | Backward-compatible inline style alias. Prefer styles or UNSAFE_style. |
title | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | Title for the table. Prefer aria-label/aria-labelledby for new code. |
description | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | Description for the table. |
size | 'sm' | 'md' | 'lg' | — | Legacy size alias retained for compatibility. |
variant | 'default' | 'bordered' | 'striped' | — | Legacy variant alias retained for compatibility. |
showSelectionCheckboxes | false | true | — | Overrides the default S2 selection checkbox behavior. |
selectionStyle | 'checkbox' | 'highlight' | 'checkbox' | How selection is displayed: `checkbox` shows selection checkboxes (toggle behavior), `highlight` selects whole rows with no checkboxes (replace behavior). |
onAction | (key: Key) => void | — | S2 row action alias. |
loadingState | 'idle' | 'loading' | 'loadingMore' | 'sorting' | 'filtering' | 'error' | — | S2 asynchronous loading state. |
onLoadMore | () => void | Promise<void> | — | S2 asynchronous load-more callback. |
onResizeStart | (widths: Map<Key, number>) => void | — | Called when a column resize starts. |
onResize | (widths: Map<Key, number>) => void | — | Called during column resize. |
onResizeEnd | (widths: Map<Key, number>) => void | — | Called when a column resize ends. |
selectionBehavior | 'toggle' | 'replace' | — | Selection behavior forwarded to the headless table. S2 defaults to toggle. |
onSelectionChange | (keys: "all" | Set<Key>) => void | — | Selection callback mirrored for the optional action bar. |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableElement) => void) | { current?: HTMLTableElement | null | undefined; } | — | Ref for the table element. solidaria-components |
id | string | — | ID for the table element. solidaria |
aria-describedby | string | — | ARIA describedby for the table. solidaria |
aria-label | string | — | ARIA label for the table. solidaria |
aria-labelledby | string | — | ARIA labelledby for the table. solidaria |
render | (props: JSX.HTMLAttributes<HTMLTableElement>, renderProps: TableRenderProps) => JSX.Element | — | Custom renderer for the table element. solidaria-components |
selectionMode | 'none' | 'single' | 'multiple' | — | The selection mode. solidaria-components |
selectedKeys | "all" | Iterable<Key> | — | Currently selected keys (controlled). solidaria-components |
defaultSelectedKeys | "all" | Iterable<Key> | — | Default selected keys (uncontrolled). solidaria-components |
items* | T[] | — | The data items to render in the table. solidaria-components |
getKey | (item: T) => Key | — | Function to get the key from an item. solidaria-components |
getTextValue | (item: T, column: TableColumnDefinition<T>) => string | — | Function to get the text value from an item for a column. solidaria-components |
disabledKeys | Iterable<Key> | — | Keys of disabled items. solidaria-components |
disabledBehavior | 'all' | 'selection' | — | Whether disabled rows remain focusable. solidaria-components |
renderEmptyState | () => JSX.Element | — | A function to render when the table is empty. solidaria-components |
dragAndDropHooks | DragAndDropHooks<T> | — | Drag and drop hooks from `useDragAndDrop`. solidaria-components |
isVirtualized | false | true | — | Whether the table uses virtual scrolling. solidaria |
shouldSelectOnPressUp | false | true | — | Whether selection should occur on press up. solidaria |
escapeKeyBehavior | 'none' | 'clearSelection' | — | Whether Escape clears selection. solidaria-components |
columns* | TableColumnDefinition<T>[] | — | The column definitions. solidaria-components |
onRowAction | (key: Key) => void | — | Handler for row actions. solidaria |
onCellAction | (key: Key) => void | — | Handler for cell actions. solidaria |
focusMode | 'cell' | 'row' | — | Focus mode: 'row' or 'cell'. solidaria |
sortDescriptor | SortDescriptor | — | The current sort descriptor. solidaria-components |
onSortChange | (descriptor: SortDescriptor) => void | — | Handler called when sort changes. solidaria-components |
UNSTABLE_childItems | (item: T) => Iterable<T> | undefined | — | Derives the child rows of an item, turning the flat `items` into a tree grid (expandable rows). Providing this — or any `UNSTABLE_*expandedKeys` prop — switches the table into tree-grid mode. Mirrors `@react-aria/table`'s `UNSTABLE_` tree-grid feature. solidaria-components |
UNSTABLE_expandedKeys | "all" | Iterable<Key> | — | The currently expanded row keys (controlled). Tree grid only. solidaria-components |
UNSTABLE_defaultExpandedKeys | "all" | Iterable<Key> | — | The initial expanded row keys (uncontrolled). Tree grid only. solidaria-components |
UNSTABLE_onExpandedChange | (keys: Set<Key>) => void | — | Handler called when rows are expanded or collapsed. Tree grid only. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
Cell props
| Prop | Type | Default | Description |
|---|---|---|---|
align | 'start' | 'end' | 'center' | 'left' | 'right' | — | Text alignment for the cell. |
showDivider | false | true | — | Whether to draw an end divider. |
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | ((renderProps: TableCellRenderProps) => JSX.Element) | — | The children of the cell. solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableCellElement) => void) | { current?: HTMLTableCellElement | null | undefined; } | — | Ref for the table cell element. solidaria-components |
id | Key | — | The unique key for the cell. solidaria-components |
render | (props: JSX.TdHTMLAttributes<HTMLTableCellElement>, renderProps: TableCellRenderProps) => JSX.Element | — | Custom renderer for the table cell element. solidaria-components |
colSpan | number | — | Number of columns spanned by the cell. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
Column props
| Prop | Type | Default | Description |
|---|---|---|---|
align | 'start' | 'end' | 'center' | 'left' | 'right' | — | Text alignment for the column. |
showDivider | false | true | — | Whether to draw an end divider. |
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | ((renderProps: TableColumnRenderProps) => JSX.Element) | — | The children of the column. solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableCellElement) => void) | { current?: HTMLTableCellElement | null | undefined; } | — | Ref for the column header element. solidaria-components |
id* | Key | — | The unique key for the column. solidaria-components |
render | (props: JSX.ThHTMLAttributes<HTMLTableCellElement>, renderProps: TableColumnRenderProps) => JSX.Element | — | Custom renderer for the column header element. solidaria-components |
width | ColumnSize | — | Column width (number for px, string for 'Xfr', 'X%', 'Xpx'). solidaria-components |
minWidth | number | — | Minimum column width in px. solidaria-components |
maxWidth | number | — | Maximum column width in px. solidaria-components |
allowsSorting | false | true | — | Whether the column allows sorting. solidaria-components |
allowsResizing | false | true | — | Whether the column allows resizing. solidaria-components |
defaultWidth | ColumnSize | — | Default width for uncontrolled mode. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
EditableCell props
| Prop | Type | Default | Description |
|---|---|---|---|
renderEditing* | () => JSX.Element | — | Renders the editing form fields shown in the popover (desktop) or dialog (mobile). |
isSaving | false | true | — | Whether a submitted edit is currently saving. Dims the cell and shows a pending trigger. |
onSubmit | (event: SubmitEvent) => void | — | Handler called when the editing form is submitted. The native submit is already prevented. |
onCancel | () => void | — | Handler called when editing is cancelled (Cancel button, Escape, or interact-outside without save). |
action | string | — | A native form `action` for the editing form. |
align | 'start' | 'end' | 'center' | 'left' | 'right' | — | Text alignment for the cell. |
showDivider | false | true | — | Whether to draw an end divider. |
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | ((renderProps: TableCellRenderProps) => JSX.Element) | — | The children of the cell. solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableCellElement) => void) | { current?: HTMLTableCellElement | null | undefined; } | — | Ref for the table cell element. solidaria-components |
id | Key | — | The unique key for the cell. solidaria-components |
render | (props: JSX.TdHTMLAttributes<HTMLTableCellElement>, renderProps: TableCellRenderProps) => JSX.Element | — | Custom renderer for the table cell element. solidaria-components |
colSpan | number | — | Number of columns spanned by the cell. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
ResizableTableContainer props
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | Children (should contain a Table). solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
onResize | (widths: Map<Key, number>) => void | — | Called during column resize. solidaria-components |
columns | { key: Key; width?: ColumnSize; minWidth?: number; maxWidth?: number; }[] | — | Column resize definitions. If not provided, columns from child ColumnResizers are auto-detected. solidaria-components |
onResizeStart | (widths: Map<Key, number>) => void | — | Called when column resize starts. solidaria-components |
onResizeEnd | (widths: Map<Key, number>) => void | — | Called when column resize ends. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
Row props
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | ((renderProps: TableRowRenderProps) => JSX.Element) | ((column: TableColumnDefinition<T>) => JSX.Element) | — | The children of the row (usually TableCell components). solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableRowElement) => void) | { current?: HTMLTableRowElement | null | undefined; } | — | Ref for the table row element. solidaria-components |
id | Key | — | The unique key for the row. solidaria-components |
isDisabled | false | true | — | Whether the row is disabled. solidaria-components |
render | (props: JSX.HTMLAttributes<HTMLTableRowElement>, renderProps: TableRowRenderProps) => JSX.Element | — | Custom renderer for the table row element. solidaria-components |
href | string | — | The URL this row links to. solidaria-components |
target | string | — | Link target for linked rows. solidaria-components |
rel | string | — | Link relationship for linked rows. solidaria-components |
routerOptions | RouterOptions | — | Router options for linked rows. solidaria-components |
download | string | boolean | — | Download attribute for linked rows. solidaria-components |
ping | string | — | Ping attribute for linked rows. solidaria-components |
referrerPolicy | '' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | — | Referrer policy for linked rows. solidaria-components |
onAction | () => void | — | Handler called when the row is activated (double-click or Enter). solidaria-components |
item | NonNullable<T> | — | The item value. solidaria-components |
columns | TableColumnDefinition<T>[] | — | Columns to render when children is a column render function. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
TableBody props
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
children | (item: T) => JSX.Element | — | The children (usually a render function for TableRow). solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableSectionElement) => void) | { current?: HTMLTableSectionElement | null | undefined; } | — | Ref for the table body element. solidaria-components |
render | (props: JSX.HTMLAttributes<HTMLTableSectionElement>, renderProps: TableBodyRenderProps) => JSX.Element | — | Custom renderer for the table body element. solidaria-components |
items | T[] | — | The items to render. If not provided, uses items from Table. solidaria-components |
renderEmptyState | () => JSX.Element | — | A function to render when the body is empty. solidaria-components |
isLoading | false | true | — | Whether additional rows are currently loading. solidaria-components |
hasMore | false | true | — | Whether there are more rows to load. solidaria-components |
onLoadMore | () => void | Promise<void> | — | Called when the load more sentinel becomes visible. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
TableCell props
| Prop | Type | Default | Description |
|---|---|---|---|
align | 'start' | 'end' | 'center' | 'left' | 'right' | — | Text alignment for the cell. |
showDivider | false | true | — | Whether to draw an end divider. |
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | ((renderProps: TableCellRenderProps) => JSX.Element) | — | The children of the cell. solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableCellElement) => void) | { current?: HTMLTableCellElement | null | undefined; } | — | Ref for the table cell element. solidaria-components |
id | Key | — | The unique key for the cell. solidaria-components |
render | (props: JSX.TdHTMLAttributes<HTMLTableCellElement>, renderProps: TableCellRenderProps) => JSX.Element | — | Custom renderer for the table cell element. solidaria-components |
colSpan | number | — | Number of columns spanned by the cell. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
TableColumn props
| Prop | Type | Default | Description |
|---|---|---|---|
align | 'start' | 'end' | 'center' | 'left' | 'right' | — | Text alignment for the column. |
showDivider | false | true | — | Whether to draw an end divider. |
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | ((renderProps: TableColumnRenderProps) => JSX.Element) | — | The children of the column. solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableCellElement) => void) | { current?: HTMLTableCellElement | null | undefined; } | — | Ref for the column header element. solidaria-components |
id* | Key | — | The unique key for the column. solidaria-components |
render | (props: JSX.ThHTMLAttributes<HTMLTableCellElement>, renderProps: TableColumnRenderProps) => JSX.Element | — | Custom renderer for the column header element. solidaria-components |
width | ColumnSize | — | Column width (number for px, string for 'Xfr', 'X%', 'Xpx'). solidaria-components |
minWidth | number | — | Minimum column width in px. solidaria-components |
maxWidth | number | — | Maximum column width in px. solidaria-components |
allowsSorting | false | true | — | Whether the column allows sorting. solidaria-components |
allowsResizing | false | true | — | Whether the column allows resizing. solidaria-components |
defaultWidth | ColumnSize | — | Default width for uncontrolled mode. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
TableFooter props
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | ((item: T) => JSX.Element) | — | The children, or a render function when `items` is provided. solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
items | T[] | — | The footer items to render. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
TableHeader props
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | The children (usually TableColumn components). solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableSectionElement) => void) | { current?: HTMLTableSectionElement | null | undefined; } | — | Ref for the table header element. solidaria-components |
render | (props: JSX.HTMLAttributes<HTMLTableSectionElement>, renderProps: TableHeaderRenderProps) => JSX.Element | — | Custom renderer for the table header element. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
TableRow props
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | Additional CSS class name. Use only as a last resort. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | ((renderProps: TableRowRenderProps) => JSX.Element) | ((column: TableColumnDefinition<T>) => JSX.Element) | — | The children of the row (usually TableCell components). solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableRowElement) => void) | { current?: HTMLTableRowElement | null | undefined; } | — | Ref for the table row element. solidaria-components |
id | Key | — | The unique key for the row. solidaria-components |
isDisabled | false | true | — | Whether the row is disabled. solidaria-components |
render | (props: JSX.HTMLAttributes<HTMLTableRowElement>, renderProps: TableRowRenderProps) => JSX.Element | — | Custom renderer for the table row element. solidaria-components |
href | string | — | The URL this row links to. solidaria-components |
target | string | — | Link target for linked rows. solidaria-components |
rel | string | — | Link relationship for linked rows. solidaria-components |
routerOptions | RouterOptions | — | Router options for linked rows. solidaria-components |
download | string | boolean | — | Download attribute for linked rows. solidaria-components |
ping | string | — | Ping attribute for linked rows. solidaria-components |
referrerPolicy | '' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | — | Referrer policy for linked rows. solidaria-components |
onAction | () => void | — | Handler called when the row is activated (double-click or Enter). solidaria-components |
item | NonNullable<T> | — | The item value. solidaria-components |
columns | TableColumnDefinition<T>[] | — | Columns to render when children is a column render function. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
TableView props
| Prop | Type | Default | Description |
|---|---|---|---|
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | (() => JSX.Element) | — | Children components (TableHeader, TableBody). |
density | 'compact' | 'regular' | 'spacious' | — | Density of rows and headers. |
isQuiet | false | true | — | Whether the TableView should draw without the default container chrome. |
overflowMode | 'wrap' | 'truncate' | — | Whether labels and cell content truncate or wrap. |
renderActionBar | (selectedKeys: "all" | Set<Key>) => JSX.Element | — | Provides an action bar when rows are selected. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
class | string | — | Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. |
style | JSX.CSSProperties | — | Backward-compatible inline style alias. Prefer styles or UNSAFE_style. |
title | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | Title for the table. Prefer aria-label/aria-labelledby for new code. |
description | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | Description for the table. |
size | 'sm' | 'md' | 'lg' | — | Legacy size alias retained for compatibility. |
variant | 'default' | 'bordered' | 'striped' | — | Legacy variant alias retained for compatibility. |
showSelectionCheckboxes | false | true | — | Overrides the default S2 selection checkbox behavior. |
selectionStyle | 'checkbox' | 'highlight' | 'checkbox' | How selection is displayed: `checkbox` shows selection checkboxes (toggle behavior), `highlight` selects whole rows with no checkboxes (replace behavior). |
onAction | (key: Key) => void | — | S2 row action alias. |
loadingState | 'idle' | 'loading' | 'loadingMore' | 'sorting' | 'filtering' | 'error' | — | S2 asynchronous loading state. |
onLoadMore | () => void | Promise<void> | — | S2 asynchronous load-more callback. |
onResizeStart | (widths: Map<Key, number>) => void | — | Called when a column resize starts. |
onResize | (widths: Map<Key, number>) => void | — | Called during column resize. |
onResizeEnd | (widths: Map<Key, number>) => void | — | Called when a column resize ends. |
selectionBehavior | 'toggle' | 'replace' | — | Selection behavior forwarded to the headless table. S2 defaults to toggle. |
onSelectionChange | (keys: "all" | Set<Key>) => void | — | Selection callback mirrored for the optional action bar. |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
ref | ((el: HTMLTableElement) => void) | { current?: HTMLTableElement | null | undefined; } | — | Ref for the table element. solidaria-components |
id | string | — | ID for the table element. solidaria |
aria-describedby | string | — | ARIA describedby for the table. solidaria |
aria-label | string | — | ARIA label for the table. solidaria |
aria-labelledby | string | — | ARIA labelledby for the table. solidaria |
render | (props: JSX.HTMLAttributes<HTMLTableElement>, renderProps: TableRenderProps) => JSX.Element | — | Custom renderer for the table element. solidaria-components |
selectionMode | 'none' | 'single' | 'multiple' | — | The selection mode. solidaria-components |
selectedKeys | "all" | Iterable<Key> | — | Currently selected keys (controlled). solidaria-components |
defaultSelectedKeys | "all" | Iterable<Key> | — | Default selected keys (uncontrolled). solidaria-components |
items* | T[] | — | The data items to render in the table. solidaria-components |
getKey | (item: T) => Key | — | Function to get the key from an item. solidaria-components |
getTextValue | (item: T, column: TableColumnDefinition<T>) => string | — | Function to get the text value from an item for a column. solidaria-components |
disabledKeys | Iterable<Key> | — | Keys of disabled items. solidaria-components |
disabledBehavior | 'all' | 'selection' | — | Whether disabled rows remain focusable. solidaria-components |
renderEmptyState | () => JSX.Element | — | A function to render when the table is empty. solidaria-components |
dragAndDropHooks | DragAndDropHooks<T> | — | Drag and drop hooks from `useDragAndDrop`. solidaria-components |
isVirtualized | false | true | — | Whether the table uses virtual scrolling. solidaria |
shouldSelectOnPressUp | false | true | — | Whether selection should occur on press up. solidaria |
escapeKeyBehavior | 'none' | 'clearSelection' | — | Whether Escape clears selection. solidaria-components |
columns* | TableColumnDefinition<T>[] | — | The column definitions. solidaria-components |
onRowAction | (key: Key) => void | — | Handler for row actions. solidaria |
onCellAction | (key: Key) => void | — | Handler for cell actions. solidaria |
focusMode | 'cell' | 'row' | — | Focus mode: 'row' or 'cell'. solidaria |
sortDescriptor | SortDescriptor | — | The current sort descriptor. solidaria-components |
onSortChange | (descriptor: SortDescriptor) => void | — | Handler called when sort changes. solidaria-components |
UNSTABLE_childItems | (item: T) => Iterable<T> | undefined | — | Derives the child rows of an item, turning the flat `items` into a tree grid (expandable rows). Providing this — or any `UNSTABLE_*expandedKeys` prop — switches the table into tree-grid mode. Mirrors `@react-aria/table`'s `UNSTABLE_` tree-grid feature. solidaria-components |
UNSTABLE_expandedKeys | "all" | Iterable<Key> | — | The currently expanded row keys (controlled). Tree grid only. solidaria-components |
UNSTABLE_defaultExpandedKeys | "all" | Iterable<Key> | — | The initial expanded row keys (uncontrolled). Tree grid only. solidaria-components |
UNSTABLE_onExpandedChange | (keys: Set<Key>) => void | — | Handler called when rows are expanded or collapsed. Tree grid only. solidaria-components |
Declared in packages/viviana-ui/src/table/index.tsx.
Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.