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/table
version3.1.3
usageimport {useTableState} from '@react-stately/table'

API#


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

Interface#


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.
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 )): voidCalls the provided onSortChange handler with the provided column key and sort direction.

Example#


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