tableSelection
Why JS: HTML has no select-all checkbox, no indeterminate state outside script and no shift-click range.
import { tableSelection } from "@sdxc/ui/app";Usage
Keeps a table's selection checkboxes consistent: select-all checks or clears every enabled
row, mirrors the rows as checked, indeterminate or clear, and a shift-click checks or clears
every row between the last clicked one and this one. Each row it changes fires a bubbling
change, as a click would, so a selection bar counting [data-selection-item]:checked
hears every change; each row's <tr> carries aria-selected while checked.
The host is the region it governs: a <table>, a wrapper, or a marker inside a table, which
hands the work to its closest <table>.
Signature
tableSelection(): MixinDescriptor<HTMLElement>Examples
<Table mix={[tableSelection()]}>…</Table><span hidden mix={[tableSelection()]} />Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/app too.
SELECTION_ITEM_SELECTOR
Selector for a per-row checkbox, the contract any selectable list renders.
const SELECTION_ITEM_SELECTOR = "input[type=checkbox][data-selection-item]"SELECTION_ALL_SELECTOR
Selector for the checkbox that selects or clears every row at once.
const SELECTION_ALL_SELECTOR = "input[type=checkbox][data-selection-all]"keepSelection
Keeps scope's row boxes true to the selection when a frame reload or navigation patches
them against server HTML, until signal aborts. The patch matches rows by position and
keeps each box's live check, so afterwards a box is checked exactly when it holds a record
that was checked before; once a form submitted checked rows, its boxes take what the server
rendered instead. restored runs after every such patch, even one that changed no box.
keepSelection(scope: HTMLElement, signal: AbortSignal, restored: () => void): void| Parameter | Type | Required | Description |
|---|---|---|---|
scope | HTMLElement | Yes | The region holding the row boxes. |
signal | AbortSignal | Yes | Ends the watch once the binding leaves the document. |
restored | () => void | Yes | Re-derives what the binding draws from the boxes. |