useTableState

Provides state management for a table component. Handles building a collection of columns and rows from props. In addition, it tracks row selection and manages sort order changes.

installyarn add react-stately
version3.31.1
usageimport {useTableState, useTableColumnResizeState} from 'react-stately'

API#


useTableState<T extends object>( (props: TableStateProps<T> )): TableState<T> useTableColumnResizeState<T>( (props: TableColumnResizeStateProps<T>, , state: TableState<T> )): TableColumnResizeState<T> Cell( (props: CellProps )): ReactElement Column<T>( (props: ColumnProps<T> )): ReactElement Row<T>( (props: RowProps<T> )): ReactElement TableBody<T>( (props: TableBodyProps<T> )): ReactElement TableHeader<T>( (props: TableHeaderProps<T> )): ReactElement

Interface#


useTableState#

Properties

NameTypeDescription
collectionTableCollection<T>A collection of rows and columns in the table.
showSelectionCheckboxesbooleanWhether the row selection checkboxes should be displayed.
sortDescriptorSortDescriptorThe current sorted column and direction.
isKeyboardNavigationDisabledbooleanWhether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell.
setKeyboardNavigationDisabled( (val: boolean )) => voidSet whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell.
disabledKeysSet<Key>A set of keys for rows that are disabled.
selectionManagerSelectionManagerA selection manager to read and update row selection state.

Methods

MethodDescription
sort( (columnKey: Key, , direction?: 'ascending''descending' )): voidCalls the provided onSortChange handler with the provided column key and sort direction.

useTableColumnResizeState#

NameTypeDescription
updateResizedColumns( (key: Key, , width: number )) => Map<Key, ColumnSize>

Called to update the state that a resize event has occurred. Returns the new widths for all columns based on the resized column.

startResize( (key: Key )) => voidCallback for when onColumnResize has started.
endResize() => voidCallback for when onColumnResize has ended.
getColumnWidth( (key: Key )) => numberGets the current width for the specified column.
getColumnMinWidth( (key: Key )) => numberGets the current minWidth for the specified column.
getColumnMaxWidth( (key: Key )) => numberGets the current maxWidth for the specified column.
resizingColumnKeynullKey of the currently resizing column.
tableStateTableState<T>A reference to the table state.

Example#


See the docs for useTable in react-aria for an example of useTableState, useTableColumnResizeState, Cell, Column, Row, TableBody, and TableHeader.