# tableSelection

> Why JS: HTML has no select-all checkbox, no indeterminate state outside script and no shift-click range.

```ts
import { tableSelection } from "@sdxc/ui/app";
```

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

```ts
tableSelection(): MixinDescriptor<HTMLElement>
```

## Examples

```tsx
<Table mix={[tableSelection()]}>…</Table>
```

```tsx
<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.

#### Signature

```ts
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.

#### Signature

```ts
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.

#### Signature

```ts
keepSelection(scope: HTMLElement, signal: AbortSignal, restored: () => void): void
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `scope` | `HTMLElement` | The region holding the row boxes. |
| `signal` | `AbortSignal` | Ends the watch once the binding leaves the document. |
| `restored` | `() => void` | Re-derives what the binding draws from the boxes. |