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
Parameters
| Param | Type | Description |
|---|---|---|
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 |
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 with row selection checkboxes and a select-all header checkbox.
Controlled row selection with the reusable TableSelectionToolbar rendered in flow above the table. Product actions occupy the logical start; synchronized selection count and complete clear action occupy the logical end.
The reusable TableSelectionToolbar inside a capped, self-contained scroll region for a long non-sticky table below metric cards. The caller-owned sticky placement keeps actions 16px from the example scrollport without moving the table when selection changes.