useTableSelection@astryxdesign/core v0.5.2 · useTableSelection

Usage

Hook that returns a TablePlugin implementing row selection with checkboxes, select-all, and aria-selected. Uses React Context for independent checkbox re-renders.

ts
import {useTableSelection} from '@astryxdesign/core/Table'

Parameters

ParamTypeDescription
getIsItemSelectedrequired
(item: T) => boolean

Returns whether the given item is currently selected.

onSelectItemrequired
(event: {item: T; isSelected: boolean}) => void

Called when a row checkbox is toggled. isSelected is the new desired state.

onSelectAllrequired
(event: {isAllSelected: boolean}) => void

Called when the select-all header checkbox is toggled.

getIsAllSelectedrequired
() => boolean

Returns whether all selectable items are currently selected.

getIsIndeterminate
() => boolean

Returns whether selection is partial (some but not all). Renders the select-all checkbox in indeterminate state.

getIsItemSelectable
(item: T) => boolean (default: () => true)

Returns whether a row should show a checkbox. Non-selectable rows render nothing in the selection cell.

getIsItemEnabled
(item: T) => boolean (default: () => true)

Returns whether a row checkbox is interactive. Disabled rows show a disabled checkbox.

getRowLabel
(item: T) => string

Derives a human-readable identity for a row; the row checkbox's hidden label becomes Select ${getRowLabel(item)} so screen readers announce which row each checkbox selects. Falls back to "Select row" when omitted.

hasRowHighlight
boolean (default: true)

Paints checked rows with the accent wash. Set false when the surrounding UI already uses row background to mean something else (a row open in a detail panel, say). The wash is an inline style, so it cannot be overridden from userland. Only the background is dropped: aria-selected is still set on checked rows either way.

Examples

Common configurations, variations, and states.
Table — Row Selection
Open in Playground

Table with row selection checkboxes and a select-all header checkbox.