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.
columnWidthsMutableRefObject<Map<Key, number>>A map of all the column widths by key.
isResizingColumnbooleanBoolean for if a column is being resized.
onColumnResize( (column: GridNode<T>, , width: number )) => voidTrigger a resize and recalc.
onColumnResizeStart() => voidRuns at the start of resizing.
onColumnResizeEnd() => voidTriggers the onColumnResizeEnd prop.
setTableWidth( (width: number )) => voidNeed to be able to set the table width so that it can be used to calculate the column widths, this will trigger a recalc.
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.
getColumnWidth( (key: Key )): numberGetter for column width.
getColumnMinWidth( (key: Key )): numberGetter for column min width.
getColumnMaxWidth( (key: Key )): numberGetter for column max widths.

Example#


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