flexdesk 0.11.0 → 0.12.0

package/src/ui/components/data_table.js

@@ -397,6 +397,9 @@ const AUTOSIZE_MAX_PX = 520;
  * @property {Function} [onRowKeyDown] - `(rowIdx, row, ev) => boolean|void`, for every key pressed on the focused table (not in a control inside it) BEFORE the table's own keys: `rowIdx`/`row` are the row Enter would open (the one row selected, the selection's anchor, else the active row — see `activateOn`), or null when none is drawn. Return `true` and the key is the consumer's: the table does nothing more with it (default prevented, propagation stopped — the page's keymap does not see it either). For the keys `activateOn` does not take: Ctrl+Enter, Alt+T, a "delete this row".
  * @property {number[]} [hiddenColumns] - STORY-0012. Columns (data indices) NOT DRAWN: no header, no filter box, no cell, no width in the fit, not in a copy or the CSV. They stay in the row data — `renderCell`, `contextMenuItems`' `ctx.row`, sorting and filtering (`sortBy`, `setFilter`) all still see them. A column sorted on while hidden keeps the order and has no arrow to show it. The last column shown cannot be hidden. With `persistKey` the set shown is saved, and a saved set wins over this one. `setData({hiddenColumns})` applies a new set.
  * @property {boolean} [columnChooser=false] - STORY-0012. A right-click on the header lists every column with a check mark on those shown; choosing one shows or hides it (`setColumnVisible`).
+ * @property {boolean} [selectToggle=false] - STORY-0016. The table offers a SELECT MODE: a narrow leading column whose header holds a toggle button. While the mode is on, every row shows a checkbox there and the header a select-all box; a plain click (or Space) ticks or unticks one row, Shift-click adds the range from the last row ticked, and no gesture opens a row (`onRowActivate` is not called; `onRowClick` still is — a consumer that opens rows from it asks `isSelectMode()`). The arrows move a cursor without changing what is ticked. A right-click keeps the ticks. Escape clears the ticks, then leaves the mode. Needs a multi-row `selectable` (ignored, with a warning, on `false` or 'single'). The column is not resizable, is no data column (not in a copy, a CSV, `ctx.colIdx` or `hiddenColumns`), and remembered widths stay on their columns.
+ * @property {boolean} [selectMode=false] - STORY-0016. Start in select mode. Draws the select column even without `selectToggle` (then there is no toggle: the consumer turns the mode off with `setSelectMode(false)`).
+ * @property {Function} [onSelectModeChange] - STORY-0016. `(on) => void`, after every change of the mode (the toggle, Escape, `setSelectMode`).
  * @property {Function} [onColumnsChange] - STORY-0012. `(hidden) => void` with the hidden columns' indices, ascending, after every change of the set (the chooser, `setColumnVisible`, `setData({hiddenColumns})`).
  * @property {boolean} [persistPage=false] - With `persistKey`: the client page is saved with the sort and the filters, and opened again on mount (on the last page, if the rows have shrunk since). OFF by default: a key shared by DIFFERENT row sets (ad-hoc filters, search results) must not reopen on a page of the last list. A sort under `resetPageOnSort` and a new filter save the first page, as they show it. A server's page (`onPageChange`, `dataSource`) is the consumer's and is not kept.
  */
@@ -543,9 +546,26 @@ export class DataTable {
             hiddenColumns: null,
             columnChooser: false,
             onColumnsChange: null,
+            // STORY-0016. Off — no select column, as in 0.11 — until set.
+            selectToggle: false,
+            selectMode: false,
+            onSelectModeChange: null,
             ...config,
         };
 
+        // STORY-0016. The select column is drawn for the table's whole life or
+        // not at all, so the drawn column indices (and the widths kept by them)
+        // never move when the mode flips.
+        {
+            const sel = this.config.selectable;
+            const asked = !!this.config.selectToggle || !!this.config.selectMode;
+            this._gutter = asked && !!sel && sel !== 'single';
+            if (asked && !this._gutter) {
+                console.warn('[DataTable] selectToggle/selectMode need a multi-row `selectable`; ignored.');
+            }
+            this._selecting = this._gutter && !!this.config.selectMode;
+        }
+
         // 0.7.0. Open details (by key), the server's half, follow, and the
         // filter controls that are not text boxes.
         this._expanded = new Set((this.config.expandedRows || []).map((k) => String(k)));
@@ -704,8 +724,12 @@ export class DataTable {
         if (blob.colWidths && typeof blob.colWidths === 'object') {
             // Stored under string keys (JSON) → coerce back to ints.
             this._colWidths = {};
+            // STORY-0016. Widths are by drawn column; a blob saved before this
+            // table drew its select column (or a consumer's seed) has none.
+            const shift = this._lead().select - (Number(blob.colWidthsLead) || 0);
             for (const [k, v] of Object.entries(blob.colWidths)) {
-                this._colWidths[Number(k)] = v;
+                const i = Number(k) + shift;
+                if (i >= this._lead().select) this._colWidths[i] = v;
             }
             // Stamp the matching signature so the next render keeps these
             // widths instead of treating them as stale.
@@ -742,6 +766,9 @@ export class DataTable {
             sortAscending: this._state.sortAscending,
             filters: [...this._state.filters.entries()],
             colWidths: { ...this._colWidths },
+            // STORY-0016. Where the widths start, so a blob read by a table
+            // with or without the select column lands on the same columns.
+            ...(this._gutter ? { colWidthsLead: 1 } : {}),
             // STORY-0010. Only for a table that asked: one that did not writes
             // the 0.9.1 blob, key for key.
             ...(this.config.persistPage ? { offset: this._state.offset } : {}),
@@ -778,20 +805,27 @@ export class DataTable {
     /** The cells a drawn row has: the shown columns, and the row number. */
     _domColCount() {
         const n = Math.max(0, (this.config.headers?.length || 0) - this._hidden.size);
-        return n + (this.config.showRowNumbers ? 1 : 0);
+        return n + this._lead().all;
+    }
+
+    /** STORY-0016. The drawn columns in front of the data: the select column
+     *  (`select`, 0 or 1, always first) and the row number. */
+    _lead() {
+        const select = this._gutter ? 1 : 0;
+        return { select, all: select + (this.config.showRowNumbers ? 1 : 0) };
     }
 
     /** A data column's drawn index (row number included), or -1 when hidden. */
     _domIdxOf(colIdx) {
         if (this._isHidden(colIdx)) return -1;
-        let dom = this.config.showRowNumbers ? 1 : 0;
+        let dom = this._lead().all;
         for (const h of this._hidden) if (h < colIdx) dom--;
         return dom + colIdx;
     }
 
     /** A drawn cell's data column, or null for the row number. */
     _dataIdxOfDom(domIdx) {
-        let i = domIdx - (this.config.showRowNumbers ? 1 : 0);
+        let i = domIdx - this._lead().all;
         if (i < 0) return null;
         const n = this.config.headers?.length || 0;
         for (let c = 0; c < n; c++) {
@@ -840,7 +874,7 @@ export class DataTable {
         this._setHidden([...next]);
         if (kept) {
             const widths = {};
-            if (this.config.showRowNumbers && old[0] != null) widths[0] = old[0];
+            for (let i = 0; i < this._lead().all; i++) if (old[i] != null) widths[i] = old[i];
             for (let c = 0; c < n; c++) {
                 const from = domBefore[c];
                 const to = this._domIdxOf(c);
@@ -887,6 +921,14 @@ export class DataTable {
      * @param {Object} updates - Partial config updates (headers, rows, etc.)
      */
     setData(updates) {
+        // STORY-0016. In select mode, ticks are kept by `getRowKey` across new
+        // rows (read before they are replaced): a list refreshed under somebody halfway through ticking twenty
+        // rows must not throw them away. Only in the mode; elsewhere new rows
+        // are an answer, as before.
+        const keepTicks = updates.rows && this._selecting && typeof this.config.getRowKey === 'function'
+            && this._state.selected.size
+            ? new Set(this.getSelection().map((i) => this._rowKey(this.config.rows[i], i)).filter((k) => k !== null))
+            : null;
         // Clear filters if headers changed
         if (updates.headers && this._state.filters.size > 0) {
             const oldHeaders = this.config.headers;
@@ -951,11 +993,19 @@ export class DataTable {
             this._columnTypes = this._detectColumnTypes();
         }
 
+        // STORY-0016. The ticks, found again in the new rows by key.
+        if (keepTicks) {
+            (this.config.rows || []).forEach((r, i) => {
+                if (keepTicks.has(this._rowKey(r, i))) this._state.selected.add(i);
+            });
+        }
+
         // Invalidate processed cache
         this._processedRows = null;
         this._processedIndexMap = null;
 
         this.render();
+        if (keepTicks) this._notifySelectionChange();
     }
 
     /**
@@ -1397,6 +1447,7 @@ export class DataTable {
             headerTable.className = this._tableClassName();
             const thead = document.createElement('thead');
             const tr = document.createElement('tr');
+            if (this._gutter) tr.appendChild(this._buildSelectHead());
             if (showRowNumbers) {
                 const th = document.createElement('th');
                 th.className = 'num';
@@ -2009,6 +2060,11 @@ export class DataTable {
         const tr = document.createElement('tr');
         tr.className = 'twm-data-table__filter-row';
 
+        if (this._gutter) {
+            const th = document.createElement('th');
+            th.className = 'data-table__filter-cell data-table__filter-cell--empty twm-dt-select-cell';
+            tr.appendChild(th);
+        }
         if (showRowNumbers) {
             const th = document.createElement('th');
             th.className = 'data-table__filter-cell data-table__filter-cell--empty';
@@ -2451,7 +2507,7 @@ export class DataTable {
         if (!row) return null;
         const cells = Array.from(row.children);
         const idx = cells.indexOf(cell);
-        return this._hidden.size ? this._dataIdxOfDom(idx) : (this.config.showRowNumbers ? idx - 1 : idx);
+        return this._dataIdxOfDom(idx);
     }
 
     _restoreFilterFocus(colIdx) {
@@ -3013,6 +3069,7 @@ export class DataTable {
         const thead = document.createElement('thead');
         const headerRow = document.createElement('tr');
 
+        if (this._gutter) headerRow.appendChild(this._buildSelectHead());
         if (showRowNumbers) {
             const th = document.createElement('th');
             th.className = 'num';
@@ -3225,7 +3282,7 @@ export class DataTable {
         const colgroup = document.createElement('colgroup');
         for (let i = 0; i < n; i++) {
             const col = document.createElement('col');
-            const w = this._colWidths?.[i];
+            const w = i < this._lead().select ? this._selectColWidth() : this._colWidths?.[i];
             if (w != null && this._colWidthsSig === this._colSig()) col.style.width = `${w}px`;
             colgroup.appendChild(col);
         }
@@ -3645,6 +3702,24 @@ export class DataTable {
     _fillRowCells(tr, row, globalIdx, showRowNumbers) {
         tr.replaceChildren();
 
+        // STORY-0016. The select column: a checkbox, shown in select mode. It
+        // takes no focus and no click of its own — the row's click ticks it.
+        if (this._gutter) {
+            const td = document.createElement('td');
+            td.className = 'twm-dt-select-cell';
+            const box = document.createElement('input');
+            box.type = 'checkbox';
+            box.className = 'twm-dt-select-box';
+            box.tabIndex = -1;
+            box.checked = this._state.selected.has(globalIdx);
+            box.setAttribute('aria-label', 'Select row');
+            // Its click is the row's: the box flips, the row's handler ticks
+            // and sets it to the tick. (Prevented, the browser would flip it
+            // back AFTER the handler.)
+            td.appendChild(box);
+            tr.appendChild(td);
+        }
+
         if (showRowNumbers) {
             const td = document.createElement('td');
             td.className = 'num';
@@ -3800,7 +3875,7 @@ export class DataTable {
             : null;
 
         const showRowNumbers = this.config.showRowNumbers !== false
-            && tr.firstElementChild?.classList.contains('num');
+            && !!tr.querySelector(':scope > td.num');
         this._fillRowCells(tr, row, index, showRowNumbers);
 
         // `_syncHeaderWidths` derives column widths from the FIRST body row.
@@ -5005,6 +5080,9 @@ export class DataTable {
             : ['twm-preview-table'];
         if (this.config.firstColumn === 'plain') names.push('twm-dt--first-plain');
         if (this._isClickable()) names.push('twm-dt--clickable');
+        // STORY-0016. The select column, and whether the mode is on.
+        if (this._gutter) names.push('twm-dt--select');
+        if (this._selecting) names.push('twm-dt--selecting');
         return names.join(' ');
     }
 
@@ -5101,6 +5179,8 @@ export class DataTable {
             // A table disposed by the press (its selection callback threw the
             // list away) opens nothing.
             if (!this._wrapperEl || typeof this.config.onRowActivate !== 'function') return;
+            // STORY-0016. In select mode a gesture ticks; nothing opens.
+            if (this._selecting) return;
             try { this.config.onRowActivate(tr.__rowIndex, tr.__row, ev); } catch (err) {
                 console.error('[DataTable] onRowActivate threw', err);
             }
@@ -5527,7 +5607,7 @@ export class DataTable {
      */
     autoSizeColumn(domIdx, opts = {}) {
         const natural = this._measureNaturalWidths({ sample: true });
-        if (!natural || domIdx < 0 || domIdx >= natural.length) return false;
+        if (!natural || domIdx < this._lead().select || domIdx >= natural.length) return false;
         this._colWidths[domIdx] = this._autoWidth(natural[domIdx], opts);
         this._colWidthsSig = this._colSig();
         this._savePersisted();
@@ -5554,7 +5634,7 @@ export class DataTable {
         const natural = this._measureNaturalWidths({ sample: true });
         if (!natural) return false;
         this._colWidths = {};
-        for (let i = 0; i < natural.length; i++) {
+        for (let i = this._lead().select; i < natural.length; i++) {
             this._colWidths[i] = this._autoWidth(natural[i], opts);
         }
         this._colWidthsSig = this._colSig();
@@ -5588,7 +5668,7 @@ export class DataTable {
      */
     _allColumnsPinned(n) {
         if (!n || this._colWidthsSig !== this._colSig()) return false;
-        for (let i = 0; i < n; i++) {
+        for (let i = this._lead().select; i < n; i++) {
             if (this._colWidths[i] == null) return false;
         }
         return true;
@@ -5640,10 +5720,12 @@ export class DataTable {
         const wrap = this._tableWrapEl;
         const headerWrap = this._headerWrapEl;
         const avail = wrap ? wrap.clientWidth : 0;
-        const firstIdx = this.config.showRowNumbers && n > 1 ? 1 : 0;
+        const lead = this._lead().all;
+        const firstIdx = lead && n > lead ? lead : 0;
         const widths = this._fitColumnWidths(natural, avail, {
             firstIdx,
-            overrides: this._colWidths,
+            // STORY-0016. The select column is as wide as its controls, always.
+            overrides: this._gutter ? { ...this._colWidths, 0: this._selectColWidth() } : this._colWidths,
             fit: this.config.columnFit,
             floors: this._filterFloors,
         });
@@ -5968,6 +6050,7 @@ export class DataTable {
         if (!headRow) return;
         [...headRow.children].forEach((th, domIdx) => {
             if (th.querySelector('.twm-dt-col-resizer')) return;
+            if (th.classList.contains('twm-dt-select-cell')) return;   // STORY-0016: fixed
             th.classList.add('twm-dt-col');
             const grip = document.createElement('div');
             grip.className = 'twm-dt-col-resizer';
@@ -6180,6 +6263,21 @@ export class DataTable {
                     if (!(was && (event.metaKey || event.ctrlKey))) selected.add(idx);
                     else DESELECTING_CLICKS.add(event);   // so it does not ALSO open it
                     this._state.anchorIndex = selected.size ? idx : null;
+                } else if (this._selecting) {
+                    // STORY-0016. A plain click ticks one row; Shift adds the
+                    // range from the last row ticked, as SHOWN.
+                    if (event.shiftKey && this._state.anchorIndex != null) {
+                        const order = this._processedIndexMap || this.config.rows.map((_, i) => i);
+                        const a = order.indexOf(this._state.anchorIndex);
+                        const b = order.indexOf(idx);
+                        if (a >= 0 && b >= 0) {
+                            for (let i = Math.min(a, b); i <= Math.max(a, b); i++) selected.add(order[i]);
+                        } else selected.add(idx);
+                    } else if (selected.has(idx)) selected.delete(idx);
+                    else selected.add(idx);
+                    this._state.anchorIndex = idx;
+                    this._navCursor = idx;
+                    this._markCursor();
                 } else if (event.shiftKey && this._state.anchorIndex != null) {
                     const start = Math.min(this._state.anchorIndex, idx);
                     const end = Math.max(this._state.anchorIndex, idx);
@@ -6239,7 +6337,7 @@ export class DataTable {
                 const selected = this._state.selected;
                 // Where the arrows left off, while that row is still selected;
                 // else the anchor (a click since moved it).
-                const cur = this._navCursor != null && selected.has(this._navCursor)
+                const cur = this._navCursor != null && (this._selecting || selected.has(this._navCursor))
                     ? this._navCursor : this._state.anchorIndex;
                 let pos = order.indexOf(cur);
                 if (ev.key === 'Home') pos = 0;
@@ -6249,6 +6347,22 @@ export class DataTable {
                 const idx = order[pos];
                 this._navCursor = idx;
                 const anchorPos = order.indexOf(this._state.anchorIndex);
+                if (this._selecting) {
+                    // STORY-0016. The arrows move the cursor; the ticks stay.
+                    // Shift ticks the rows passed over.
+                    if (ev.shiftKey) {
+                        const from = order.indexOf(cur);
+                        if (from >= 0) {
+                            for (let i = Math.min(from, pos); i <= Math.max(from, pos); i++) selected.add(order[i]);
+                        } else selected.add(idx);
+                        this._updateRowSelection();
+                        this._notifySelectionChange();
+                    }
+                    this._state.anchorIndex = idx;
+                    this._markCursor();
+                    this.scrollToRow(idx);
+                    return;
+                }
                 if (ev.shiftKey && selectable !== 'single' && anchorPos !== -1) {
                     // Shift: the range between the fixed anchor and the moving
                     // row, as Shift-click selects it.
@@ -6268,6 +6382,26 @@ export class DataTable {
             this._disposers.push(() => table.removeEventListener('keydown', onNavKey));
         }
 
+        // STORY-0016. Space ticks the keyboard's row in select mode.
+        if (this._gutter) {
+            const onSpace = (ev) => {
+                if (!this._selecting || ev.key !== ' ' || ev.ctrlKey || ev.metaKey || ev.altKey) return;
+                if (isRowControl(ev.target, table)) return;
+                const idx = this._navCursor ?? this._state.anchorIndex;
+                if (idx == null || !this.config.rows[idx]) return;
+                ev.preventDefault();
+                const selected = this._state.selected;
+                if (selected.has(idx)) selected.delete(idx); else selected.add(idx);
+                this._state.anchorIndex = idx;
+                this._updateRowSelection();
+                this._notifySelectionChange();
+            };
+            table.addEventListener('keydown', onSpace);
+            this._disposers.push(() => table.removeEventListener('keydown', onSpace));
+            this._paintSelectHead();
+            this._markCursor();
+        }
+
         // 0.5.0 `onRowActivate`. Bound AFTER the selection handler on the same
         // element, so a row is selected before it is opened — the listener
         // order is the guarantee. `onRowClick` stays exactly where it was (on
@@ -6315,6 +6449,9 @@ export class DataTable {
                 const idx = rowEl.__rowIndex;
                 let custom = null;
                 if (customMenu) {
+                    // STORY-0016. In select mode the menu is about the ticked
+                    // rows when the row is one of them, else about that row
+                    // alone — and the ticks stay as they were.
                     const selection = idx !== undefined && !this._state.selected.has(idx)
                         ? [idx] : this.getSelection();
                     const ctx = this._contextMenuCtxFor(rowEl, event.target, selection);
@@ -6328,7 +6465,7 @@ export class DataTable {
                 event.preventDefault();
                 event.stopPropagation();
 
-                if (idx !== undefined && !this._state.selected.has(idx)) {
+                if (idx !== undefined && !this._state.selected.has(idx) && !this._selecting) {
                     this._state.selected.clear();
                     this._state.selected.add(idx);
                     this._state.anchorIndex = idx;
@@ -6356,21 +6493,7 @@ export class DataTable {
                         event.preventDefault();
                     } else if (key === 'a' && selectable) {
                         event.preventDefault();
-                        this._state.selected.clear();
-                        // Select only visible (filtered) rows via index map
-                        const indexMap = this._processedIndexMap;
-                        if (indexMap) {
-                            for (const originalIdx of indexMap) {
-                                this._state.selected.add(originalIdx);
-                            }
-                        } else {
-                            for (let i = 0; i < this.config.rows.length; i++) {
-                                this._state.selected.add(i);
-                            }
-                        }
-                        this._state.anchorIndex = this.config.rows.length - 1;
-                        this._updateRowSelection();
-                        this._notifySelectionChange();
+                        this._selectAllShown();
                     } else if (key === 'c') {
                         event.preventDefault();
                         this.copyToClipboard(event.shiftKey ? 'csv' : 'tsv');
@@ -6378,6 +6501,8 @@ export class DataTable {
                 } else if (event.key === 'Escape') {
                     if (this._state.selected.size) {
                         this.clearSelection();
+                    } else if (this._selecting && this.config.selectToggle) {
+                        this.setSelectMode(false);   // STORY-0016
                     }
                     this._hideContextMenu();
                 }
@@ -6393,9 +6518,119 @@ export class DataTable {
         this._tbodyEl.querySelectorAll('tr').forEach(tr => {
             const idx = tr.__rowIndex;
             if (idx !== undefined) {
-                tr.classList.toggle('selected', this._state.selected.has(idx));
+                const on = this._state.selected.has(idx);
+                tr.classList.toggle('selected', on);
+                // STORY-0016.
+                const box = this._gutter ? tr.querySelector(':scope > td.twm-dt-select-cell > input') : null;
+                if (box) box.checked = on;
             }
         });
+        this._paintSelectHead();
+    }
+
+    /* ── STORY-0016: select mode ─────────────────────────────────────── */
+
+    /** Whether the table is in select mode. */
+    isSelectMode() {
+        return !!this._selecting;
+    }
+
+    /**
+     * Turn select mode on or off. The ticks are kept either way (a selection
+     * is a selection); the consumer clears it if leaving means "never mind".
+     * Does nothing on a table without the select column.
+     *
+     * @param {boolean} on
+     * @returns {boolean} whether the mode changed
+     */
+    setSelectMode(on) {
+        if (!this._gutter || !!on === this._selecting) return false;
+        this._selecting = !!on;
+        this._navCursor = this._selecting ? this._state.anchorIndex : null;
+        if (this._wrapperEl) this.render();
+        try { this.config.onSelectModeChange?.(this._selecting); } catch (err) {
+            console.error('[DataTable] onSelectModeChange threw', err);
+        }
+        return true;
+    }
+
+    /** The rows the filters let through, on every page, by original index. */
+    _shownIndices() {
+        if (this._isServerSide()) return this.config.rows.map((_, i) => i);
+        this._getProcessedRows();
+        return this._processedIndexMap ? [...this._processedIndexMap] : this.config.rows.map((_, i) => i);
+    }
+
+    /** Ctrl+A and the select-all box: every row the filters let through. */
+    _selectAllShown() {
+        this._state.selected.clear();
+        for (const i of this._shownIndices()) this._state.selected.add(i);
+        this._state.anchorIndex = this.config.rows.length - 1;
+        this._updateRowSelection();
+        this._notifySelectionChange();
+    }
+
+    /** The select column's width: its controls, never a drag. */
+    _selectColWidth() {
+        return this._selecting ? (this.config.selectToggle ? 56 : 32) : 32;
+    }
+
+    /** The select column's header: the toggle and, in the mode, select-all. */
+    _buildSelectHead() {
+        const th = document.createElement('th');
+        th.className = 'twm-dt-select-cell twm-dt-select-head';
+        if (this._selecting) {
+            const all = document.createElement('input');
+            all.type = 'checkbox';
+            all.className = 'twm-dt-select-all';
+            all.setAttribute('aria-label', 'Select all rows');
+            all.title = 'Select all rows';
+            all.addEventListener('click', (ev) => {
+                // Not prevented: the browser would undo the state set here.
+                ev.stopPropagation();
+                const shown = this._shownIndices();
+                const every = shown.length > 0 && shown.every((i) => this._state.selected.has(i));
+                if (every) this.clearSelection(); else this._selectAllShown();
+            });
+            th.appendChild(all);
+        }
+        if (this.config.selectToggle) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'material-symbols-outlined twm-dt-select-toggle';
+            btn.textContent = this._selecting ? 'close' : 'checklist';
+            btn.setAttribute('aria-pressed', this._selecting ? 'true' : 'false');
+            const label = this._selecting ? 'Stop selecting' : 'Select multiple';
+            btn.setAttribute('aria-label', label);
+            btn.title = label;
+            btn.addEventListener('click', (ev) => {
+                ev.stopPropagation();
+                this.setSelectMode(!this._selecting);
+            });
+            th.appendChild(btn);
+        }
+        th.classList.toggle('twm-dt-select-head--on', this._selecting);
+        return th;
+    }
+
+    /** The select-all box: checked, mixed or clear, as the ticks are. */
+    _paintSelectHead() {
+        if (!this._gutter || !this._wrapperEl) return;
+        const all = this._wrapperEl.querySelector('.twm-dt-select-all');
+        if (!all) return;
+        const shown = this._shownIndices();
+        const n = shown.filter((i) => this._state.selected.has(i)).length;
+        all.checked = n > 0 && n === shown.length;
+        all.indeterminate = n > 0 && n < shown.length;
+    }
+
+    /** The keyboard's row in select mode, marked so it can be seen. */
+    _markCursor() {
+        if (!this._tbodyEl) return;
+        for (const tr of this._tbodyEl.children) {
+            if (tr.__rowIndex === undefined) continue;
+            tr.classList.toggle('twm-dt-row--cursor', this._selecting && tr.__rowIndex === this._navCursor);
+        }
     }
 
     _notifySelectionChange() {