@svgrid/grid 2.6.21 → 2.6.22

package/src/SvGrid.svelte

@@ -15,6 +15,8 @@
   } from "./index";
   import "./sv-grid-scrollbar";
   import "./SvGrid.css";
+  import type { RowResizeOptions } from "./row-resize";
+  import type { ColumnResizeOptions } from "./column-resize";
   import {
     RenderSnippetConfig,
     RenderComponentConfig,
@@ -167,7 +169,9 @@
   const hideTooltip = $derived(ctrl.hideTooltip);
   const findHits = $derived(ctrl.findHits);
   const headerHeight = $derived(ctrl.headerHeight);
-  const resizingColumnId = $derived(ctrl.resizingColumnId);
+  // Column resizing has always been unconditional; `columnResize={false}` is
+  // the opt-out, so the default has to stay on when the prop is absent.
+  const columnResizeEnabled = $derived(opt.columnResize === true);
   const selectionColumnWidth = $derived(ctrl.selectionColumnWidth);
   const rowNumberColumnWidth = $derived(ctrl.rowNumberColumnWidth);
   const showRowNumbersEffective = $derived(ctrl.showRowNumbersEffective);
@@ -264,6 +268,23 @@
   // Row-grouping display modes: group state lives in synthetic columns instead
   // of a full-width banner row.
   const groupColumnMode = $derived(ctrl.groupColumnMode);
+  /**
+   * True when a cell's content needs none of the wrapper snippets.
+   *
+   * A cell body normally renders through `cellBodyWithFormat` ->
+   * `cellBodyFormatted` -> `cellBody`, and with no grouping, no tree data and
+   * no conditional formats the first two are pure pass-throughs: three snippet
+   * renders and two `{#if}` blocks per cell to reach content that one render
+   * produces. Measured by ablation, that chain is 4.2 ms of a 17.4 ms mount at
+   * 28 rows x 9 columns - about a quarter of the whole mount, and the largest
+   * single per-cell cost.
+   *
+   * Computed once per render rather than per cell, so the fast path costs one
+   * boolean read at each of the ~250 cells instead of two snippet frames.
+   */
+  const plainCellBody = $derived(
+    !groupColumnMode && !treeData && !hasConditionalFormats,
+  );
   const autoGroupCell = $derived(ctrl.autoGroupCell);
   const isAutoGroupColumn = (id: string): boolean =>
     id === "__autoGroup" || id.startsWith("__group_");
@@ -280,7 +301,60 @@
   // The fixed row height, matching what the virtualized path takes from the virtualizer.
   // The non-virtualized (`virtualization={false}`) body must apply this too, else its rows
   // fall back to content height and look shorter than a virtualized grid's.
+  /**
+   * `rowResize` and `columnResize` are both opt-in and both default to OFF, so
+   * neither module is imported statically - a grid that leaves them alone must
+   * not carry their bytes. This wraps an action so its module is fetched on
+   * first enable and never otherwise. The handles appear a microtask after the
+   * first paint, which is invisible for a drag affordance.
+   *
+   * One helper for both: two hand-rolled copies of this bookkeeping would cost
+   * more base bundle than the deferral saves.
+   */
+  type LazyHandle<O> = { update(o: O): void; destroy(): void };
+  function lazyAction<O extends { disabled?: boolean }>(
+    load: () => Promise<(node: HTMLElement, opts: O) => LazyHandle<O>>,
+  ) {
+    return (node: HTMLElement, opts: O): LazyHandle<O> => {
+      let handle: LazyHandle<O> | null = null;
+      let current = opts;
+      let destroyed = false;
+      const ensure = () => {
+        if (handle || destroyed || current.disabled) return;
+        void load().then((make) => {
+          // The prop can be switched back off, or the grid unmounted, while
+          // the chunk is still in flight.
+          if (destroyed || current.disabled || handle) return;
+          handle = make(node, current);
+        });
+      };
+      ensure();
+      return {
+        update(next: O) {
+          current = next;
+          if (handle) handle.update(next);
+          else ensure();
+        },
+        destroy() {
+          destroyed = true;
+          handle?.destroy();
+        },
+      };
+    };
+  }
+
+  const lazyRowResize = lazyAction<RowResizeOptions>(() =>
+    import("./row-resize").then((m) => m.rowResize),
+  );
+  const lazyColumnResize = lazyAction<ColumnResizeOptions>(() =>
+    import("./column-resize").then((m) => m.columnResize),
+  );
+
   const rowSizePx = (i: number): number => {
+    // A height the user dragged wins over the declared one, so the row stays
+    // where they put it across re-renders and virtualization recycling.
+    const dragged = ctrl.rowResizeHeightPx(i);
+    if (dragged != null) return dragged;
     const rh = opt.rowHeight;
     return typeof rh === "function" ? rh(i) : (rh ?? 30);
   };
@@ -358,26 +432,10 @@
     return "sv-grid-cell-flash";
   }
 
-  // Keyboard-accessible column resize (#79): focus a resize handle and use the
-  // arrow keys (Shift = fine 1px step). Complements the pointer-drag resize.
-  function resizeColumnByKeyboard(e: KeyboardEvent, columnId: string) {
-    let delta = 0;
-    const step = e.shiftKey ? 1 : 10;
-    if (e.key === "ArrowLeft") delta = -step;
-    else if (e.key === "ArrowRight") delta = step;
-    else return;
-    e.preventDefault();
-    const current = ctrl.getColumnWidth(columnId);
-    ctrl.columnWidths = {
-      ...ctrl.columnWidths,
-      [columnId]: Math.max(40, current + delta),
-    };
-  }
-
   // ---- Full-row editing -------------------------------------------------
   const fullRowEdit = $derived(ctrl.fullRowEdit);
   // Commit the whole row when the user clicks away from its editors (Excel /
-  // AG-Grid feel). Clicking within any full-row editor keeps editing.
+  // spreadsheet feel). Clicking within any full-row editor keeps editing.
   // Stays here rather than in SvGridCellEditor: that component is instantiated
   // once PER editable cell during a full-row edit, so a document listener there
   // would be attached N times and commit N times.
@@ -429,7 +487,6 @@
   const setActiveCell = $derived(ctrl.setActiveCell);
   const scrollActiveCellIntoView = $derived(ctrl.scrollActiveCellIntoView);
   const getColumnWidth = $derived(ctrl.getColumnWidth);
-  const startColumnResize = $derived(ctrl.startColumnResize);
   const getCellRangeEdges = $derived(ctrl.getCellRangeEdges);
   const fillHandleCell = $derived(ctrl.fillHandleCell);
   const isInFillPreview = $derived(ctrl.isInFillPreview);
@@ -1294,6 +1351,26 @@
     class="sv-grid-root"
     class:sv-grid-root-fill={opt.containerHeight === "100%"}
     style={chartDockReserveStyle}
+    use:lazyRowResize={{
+      disabled: !ctrl.rowResizeOn,
+      // No gutter column on most grids, so fall back to the first body cell -
+      // otherwise `rowResize` would be a prop that silently does nothing.
+      anchor: "row",
+      onResize: (index, height) => ctrl.setRowResizeHeight(index, height),
+    }}
+    use:lazyColumnResize={{
+      disabled: !columnResizeEnabled,
+      getWidth: (columnId) => ctrl.getColumnWidth(columnId),
+      onResize: (columnId, width) => {
+        ctrl.columnWidths = { ...ctrl.columnWidths, [columnId]: width };
+      },
+      label: (columnId) => {
+        const col = ctrl.findColumnById(columnId);
+        return col ? toolPanelHeaderLabel(col) : columnId;
+      },
+      canResize: (columnId) => ctrl.columnResizable(columnId),
+      onAutosize: (columnId) => ctrl.autosizeColumn(columnId),
+    }}
   >
     {#if showGlobalFilterEffective}
       <label class="sv-grid-global-filter">
@@ -1747,32 +1824,6 @@
                             }}
                           />
                         {/if}
-                        <div
-                          class="sv-grid-resize-handle"
-                          class:is-resizing={resizingColumnId ===
-                            header.column.id}
-                          role="separator"
-                          aria-orientation="vertical"
-                          aria-label={`Resize ${toolPanelHeaderLabel(header.column)}`}
-                          tabindex="0"
-                          {...(() => {
-                            // A focusable separator is a widget, so ARIA requires
-                            // aria-valuenow. The value it exposes is the column
-                            // width the arrow keys change; 40 is the floor
-                            // enforced in resizeColumnByKeyboard.
-                            const w = Math.round(ctrl.getColumnWidth(header.column.id));
-                            return {
-                              "aria-valuenow": w,
-                              "aria-valuemin": 40,
-                              "aria-valuetext": `${w} pixels`,
-                            };
-                          })()}
-                          onpointerdown={(event) =>
-                            startColumnResize(event, header.column.id)}
-                          onkeydown={(event) =>
-                            resizeColumnByKeyboard(event, header.column.id)}
-                          ondblclick={(event) => event.stopPropagation()}
-                        ></div>
                       {/if}
                     </th>
                   {/if}
@@ -2177,12 +2228,11 @@
                               rendered.column.columnDef.cellFlash,
                             ),
                           }}
-                          {...getGridCellA11yProps({
-                            id: getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex),
-                            rowIndex: rowIndex + 1,
-                            colIndex: colIndex + 1,
-                            selected: isRowSelected(row.id),
-                          })}
+                          role="gridcell"
+                          id={getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex)}
+                          aria-colindex={colIndex + 1}
+                          aria-rowindex={rowIndex + 1}
+                          aria-selected={isRowSelected(row.id)}
                         >
                           {#if inRowEdit || isEditing}
                             <!-- The editing cell stays empty until the lazy
@@ -2194,11 +2244,15 @@
                               <CellEditor {ctrl} column={rendered.column} {row} fullRow={inRowEdit} />
                             {/if}
                           {:else}
-                            {@render cellBodyWithFormat(
-                              row,
-                              rendered.column,
-                              cellValue,
-                            )}
+                            {#if plainCellBody}
+                              {@render cellBody(row, rendered.column, cellValue)}
+                            {:else}
+                              {@render cellBodyWithFormat(
+                                row,
+                                rendered.column,
+                                cellValue,
+                              )}
+                            {/if}
                           {/if}
                           {#if !isEditing && fillHandleCell && fillHandleCell.rowIndex === rowIndex && fillHandleCell.colIndex === colIndex}
                             <!-- Excel-style fill handle: drag down/right to

package/src/SvGrid.types.ts

@@ -1329,6 +1329,28 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * supplying per-row heights).
    */
   autoRowHeight?: boolean;
+  /**
+   * Let the user drag a row's bottom edge to change its height. **Off by
+   * default**, because a resizable row needs somewhere to grab and most grids
+   * do not want a drag target on every row.
+   *
+   * The grid remembers the heights itself, so this works as a bare boolean -
+   * no `rowHeight` function required. Drag, or focus the grip and use Up/Down
+   * (Shift for 1px steps).
+   *
+   * Turning this on also turns on the **row header column** ({@link
+   * showRowNumbers}), because that is where the grip lives and where a
+   * spreadsheet puts it - a drag target on the edge of a data cell works but
+   * reads as an accident. An explicit `showRowNumbers={false}` still wins; the
+   * grip then falls back to the row's first cell, and a column of your own
+   * carrying `cellClass: 'sv-row-gutter'` is used ahead of either.
+   *
+   * Ignored under `autoRowHeight`, where the content decides the height and a
+   * manual one would immediately be overwritten. For full control of the
+   * heights - persisting them, sharing them between grids - pass a
+   * function-valued {@link rowHeight} and use the `rowResize` action directly.
+   */
+  rowResize?: boolean;
   /**
    * Height (px) of a single column-header level row. With multi-level
    * (grouped) headers the total header height is `levels * headerHeight`,
@@ -1387,6 +1409,24 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * win once they happen.
    */
   fitColumns?: boolean;
+  /**
+   * Let the user drag a column's edge to change its width. **Off by default**,
+   * so `width` means the width you asked for until you say otherwise.
+   *
+   * Turn it on for grids the reader is meant to arrange - a spreadsheet, a
+   * dense report, anything with columns whose content varies in length. Leave
+   * it off for layouts you control, and for columns that must keep their size:
+   * a row-number gutter, a checkbox column, an icon column.
+   *
+   * It is grid-wide rather than per-column: there is no `resizable: false` on a
+   * single column definition. `api.autosizeColumn()`, `fitColumns` and
+   * programmatic width changes work either way - this only governs the drag
+   * handle.
+   *
+   * The handles come from the `columnResize` action, loaded on demand: a grid
+   * that leaves this off never fetches that code.
+   */
+  columnResize?: boolean;
   /**
    * Make the grid usable on narrow screens. When the grid's own width drops
    * below the breakpoint (default `640`px), pinned columns are un-pinned so the
@@ -1498,7 +1538,7 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
   charting?: boolean | ChartingConfig<TData>;
   /**
    * Render the header column menu (⋮) as a tabbed popover - **General**,
-   * **Filter**, and **Columns** tabs (the AG-Grid layout). Defaults to `false`,
+   * **Filter**, and **Columns** tabs (the tabbed layout). Defaults to `false`,
    * which keeps the flat menu (actions list + "Choose columns" submenu).
    */
   columnMenuTabs?: boolean;

package/src/column-groups.ts

@@ -1,4 +1,4 @@
-// Collapsible column groups (AG-Grid `columnGroupShow`). A column group can
+// Collapsible column groups (a per-column `columnGroupShow` flag). A column group can
 // carry a collapse toggle: its child columns tagged `columnGroupShow: 'open'`
 // show only when the group is expanded, `'closed'` show only when collapsed,
 // and untagged children always show.

package/src/column-resize.test.ts

@@ -0,0 +1,381 @@
+/**
+ * The `columnResize` action. This coverage moved here from columns.test.ts when
+ * the drag logic left the controller: the same behaviours (min clamp, rAF
+ * coalescing, final commit, teardown) are asserted, but against real DOM rather
+ * than a synthetic ctx, because the action now owns the handles as well as the
+ * drag.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { columnResize } from './column-resize'
+
+const HANDLE = 'sv-grid-resize-handle'
+
+/** A header row shaped like SvGrid's: `th.sv-grid-column[data-svgrid-header-col]`. */
+function buildHeaders(
+  specs: Array<{ id?: string; classes?: string[] }>,
+): { host: HTMLElement; ths: HTMLElement[] } {
+  const host = document.createElement('div')
+  const table = document.createElement('table')
+  const thead = document.createElement('thead')
+  const tr = document.createElement('tr')
+  const ths: HTMLElement[] = []
+  specs.forEach((spec, i) => {
+    const th = document.createElement('th')
+    th.className = ['sv-grid-column', ...(spec.classes ?? [])].join(' ')
+    if (spec.id !== undefined) th.dataset.svgridHeaderCol = spec.id
+    else if (!spec.classes) th.dataset.svgridHeaderCol = `c${i}`
+    tr.appendChild(th)
+    ths.push(th)
+  })
+  thead.appendChild(tr)
+  table.appendChild(thead)
+  host.appendChild(table)
+  document.body.appendChild(host)
+  return { host, ths }
+}
+
+const handleOf = (th: HTMLElement) => th.querySelector<HTMLElement>(`.${HANDLE}`)
+
+function pointer(type: string, init: Partial<PointerEvent> = {}): PointerEvent {
+  return new PointerEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    pointerId: 1,
+    ...init,
+  } as PointerEventInit)
+}
+
+const hosts: HTMLElement[] = []
+const track = (h: HTMLElement) => (hosts.push(h), h)
+
+let rafCb: FrameRequestCallback | null = null
+beforeEach(() => {
+  rafCb = null
+  vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+    rafCb = cb
+    return 1
+  })
+  vi.stubGlobal('cancelAnimationFrame', vi.fn())
+  if (!HTMLElement.prototype.setPointerCapture) {
+    HTMLElement.prototype.setPointerCapture = function () {}
+  }
+  if (!HTMLElement.prototype.releasePointerCapture) {
+    HTMLElement.prototype.releasePointerCapture = function () {}
+  }
+})
+afterEach(() => {
+  while (hosts.length) hosts.pop()!.remove()
+  document.body.innerHTML = ''
+  document.body.style.cursor = ''
+  vi.unstubAllGlobals()
+})
+
+/** Widths a test can read back, standing in for the controller. */
+function widthStore(initial: Record<string, number> = {}) {
+  const widths = { ...initial }
+  return {
+    widths,
+    getWidth: (id: string) => widths[id] ?? 100,
+    onResize: (id: string, w: number) => {
+      widths[id] = w
+    },
+  }
+}
+
+describe('columnResize - handle injection', () => {
+  it('injects one handle per identified header', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }, { id: 'b' }])
+    track(host)
+    const a = columnResize(host, widthStore())
+    expect(handleOf(ths[0]!)).not.toBeNull()
+    expect(handleOf(ths[1]!)).not.toBeNull()
+    a.destroy()
+  })
+
+  it('skips spacer columns and headers with no column id', () => {
+    // Group headers and the virtualization spacers have nothing to resize.
+    const { host, ths } = buildHeaders([
+      { id: 'a' },
+      { classes: ['sv-grid-column-spacer'] },
+      { classes: ['sv-grid-group-header'] },
+    ])
+    track(host)
+    const a = columnResize(host, widthStore())
+    expect(handleOf(ths[0]!)).not.toBeNull()
+    expect(handleOf(ths[1]!)).toBeNull()
+    expect(handleOf(ths[2]!)).toBeNull()
+    a.destroy()
+  })
+
+  it('does not double-inject on re-decorate', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const a = columnResize(host, widthStore())
+    a.update({ ...widthStore(), disabled: false })
+    expect(ths[0]!.querySelectorAll(`.${HANDLE}`).length).toBe(1)
+    a.destroy()
+  })
+
+  it('injects nothing when created disabled', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const a = columnResize(host, { ...widthStore(), disabled: true })
+    expect(handleOf(ths[0]!)).toBeNull()
+    a.destroy()
+  })
+
+  it('removes handles when toggled off and restores them when back on', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const store = widthStore()
+    const a = columnResize(host, store)
+    expect(handleOf(ths[0]!)).not.toBeNull()
+    a.update({ ...store, disabled: true })
+    expect(handleOf(ths[0]!)).toBeNull()
+    a.update({ ...store, disabled: false })
+    expect(handleOf(ths[0]!)).not.toBeNull()
+    a.destroy()
+  })
+
+  it('gives the handle an accessible separator role and a name', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const a = columnResize(host, { ...widthStore({ a: 150 }), label: () => 'Name' })
+    const h = handleOf(ths[0]!)!
+    expect(h.getAttribute('role')).toBe('separator')
+    expect(h.getAttribute('aria-orientation')).toBe('vertical')
+    expect(h.getAttribute('aria-label')).toBe('Resize Name')
+    expect(h.tabIndex).toBe(0)
+    expect(h.getAttribute('aria-valuenow')).toBe('150')
+    a.destroy()
+  })
+})
+
+describe('columnResize - drag', () => {
+  it('clamps to the minimum width and commits on the frame', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const store = widthStore({ a: 120 })
+    const a = columnResize(host, store)
+    const h = handleOf(ths[0]!)!
+    h.dispatchEvent(pointer('pointerdown', { clientX: 100 }))
+    window.dispatchEvent(pointer('pointermove', { clientX: -1000 }))
+    expect(rafCb).not.toBeNull()
+    rafCb!(0)
+    expect(store.widths.a).toBe(40)
+    a.destroy()
+  })
+
+  it('coalesces multiple moves into a single frame', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const store = widthStore({ a: 120 })
+    const a = columnResize(host, store)
+    const h = handleOf(ths[0]!)!
+    h.dispatchEvent(pointer('pointerdown', { clientX: 100 }))
+    window.dispatchEvent(pointer('pointermove', { clientX: 150 })) // +50 -> 170
+    const first = rafCb
+    window.dispatchEvent(pointer('pointermove', { clientX: 200 })) // +100 -> 220
+    expect(rafCb).toBe(first) // not rescheduled
+    rafCb!(0)
+    expect(store.widths.a).toBe(220)
+    a.destroy()
+  })
+
+  it('commits the final width on pointerup even if the frame never ran', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const store = widthStore({ a: 120 })
+    const a = columnResize(host, store)
+    const h = handleOf(ths[0]!)!
+    h.dispatchEvent(pointer('pointerdown', { clientX: 100 }))
+    window.dispatchEvent(pointer('pointermove', { clientX: 190 }))
+    window.dispatchEvent(pointer('pointerup', { clientX: 190 })) // rAF cancelled
+    expect(store.widths.a).toBe(210)
+    a.destroy()
+  })
+
+  it('marks the handle while dragging and clears it afterwards', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const a = columnResize(host, widthStore({ a: 120 }))
+    const h = handleOf(ths[0]!)!
+    h.dispatchEvent(pointer('pointerdown', { clientX: 100 }))
+    expect(h.classList.contains('is-resizing')).toBe(true)
+    window.dispatchEvent(pointer('pointerup', { clientX: 100 }))
+    expect(h.classList.contains('is-resizing')).toBe(false)
+    a.destroy()
+  })
+
+  it('ignores pointerdown when disabled, and on a non-handle target', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const store = widthStore({ a: 120 })
+    const a = columnResize(host, store)
+    const h = handleOf(ths[0]!)!
+    a.update({ ...store, disabled: true })
+    h.dispatchEvent(pointer('pointerdown', { clientX: 100 }))
+    window.dispatchEvent(pointer('pointermove', { clientX: 300 }))
+    expect(rafCb).toBeNull()
+    // A click on the header itself must not start a drag either.
+    ths[0]!.dispatchEvent(pointer('pointerdown', { clientX: 100 }))
+    expect(rafCb).toBeNull()
+    a.destroy()
+  })
+})
+
+describe('columnResize - keyboard', () => {
+  it('ArrowRight grows by 10 and ArrowLeft shrinks by 10', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const store = widthStore({ a: 120 })
+    const a = columnResize(host, store)
+    const h = handleOf(ths[0]!)!
+    h.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+    expect(store.widths.a).toBe(130)
+    h.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))
+    expect(store.widths.a).toBe(120)
+    a.destroy()
+  })
+
+  it('Shift gives a 1px step and the minimum still holds', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const store = widthStore({ a: 41 })
+    const a = columnResize(host, store)
+    const h = handleOf(ths[0]!)!
+    h.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowLeft', shiftKey: true, bubbles: true }),
+    )
+    expect(store.widths.a).toBe(40)
+    h.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))
+    expect(store.widths.a).toBe(40) // clamped, not 30
+    a.destroy()
+  })
+
+  it('ignores other keys and does nothing while disabled', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const store = widthStore({ a: 120 })
+    const a = columnResize(host, store)
+    const h = handleOf(ths[0]!)!
+    h.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    expect(store.widths.a).toBe(120)
+    a.update({ ...store, disabled: true })
+    h.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+    expect(store.widths.a).toBe(120)
+    a.destroy()
+  })
+})
+
+describe('columnResize - teardown', () => {
+  it('destroy removes every handle and detaches the drag listeners', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }, { id: 'b' }])
+    track(host)
+    const store = widthStore({ a: 120 })
+    const a = columnResize(host, store)
+    const h = handleOf(ths[0]!)!
+    h.dispatchEvent(pointer('pointerdown', { clientX: 100 }))
+    a.destroy()
+    expect(host.querySelectorAll(`.${HANDLE}`).length).toBe(0)
+    // An in-flight drag must not keep writing after unmount (#58).
+    window.dispatchEvent(pointer('pointermove', { clientX: 400 }))
+    expect(rafCb).toBeNull()
+    expect(store.widths.a).toBe(120)
+  })
+})
+
+describe('columnResize - per-column resizable', () => {
+  it('creates no handle for a column that opts out', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }, { id: 'b' }])
+    track(host)
+    const a = columnResize(host, { ...widthStore(), canResize: (id) => id !== 'b' })
+    expect(handleOf(ths[0]!)).not.toBeNull()
+    expect(handleOf(ths[1]!)).toBeNull()
+    a.destroy()
+  })
+
+  it('takes the handle away when a column stops being resizable', () => {
+    // A re-decorate has to remove, not merely stop adding: the handle is
+    // already in the DOM by then.
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const store = widthStore()
+    let allow = true
+    const a = columnResize(host, { ...store, canResize: () => allow })
+    expect(handleOf(ths[0]!)).not.toBeNull()
+    allow = false
+    a.update({ ...store, canResize: () => allow, disabled: true })
+    a.update({ ...store, canResize: () => allow, disabled: false })
+    expect(handleOf(ths[0]!)).toBeNull()
+    a.destroy()
+  })
+
+  it('refuses the drag and the arrow keys even if a handle is reached', () => {
+    // Defence in depth: no handle is created, so this can only happen if one
+    // survives a stale render. It must still not resize.
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const store = widthStore({ a: 120 })
+    let allow = true
+    const a = columnResize(host, { ...store, canResize: () => allow })
+    const h = handleOf(ths[0]!)!
+    allow = false
+    a.update({ ...store, canResize: () => allow })
+
+    h.dispatchEvent(pointer('pointerdown', { clientX: 100 }))
+    window.dispatchEvent(pointer('pointermove', { clientX: 300 }))
+    expect(rafCb).toBeNull()
+    h.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+    expect(store.widths.a).toBe(120)
+    a.destroy()
+  })
+})
+
+describe('columnResize - double-click autosize', () => {
+  it('double-clicking the handle autosizes that column', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const onAutosize = vi.fn()
+    const a = columnResize(host, { ...widthStore(), onAutosize })
+    handleOf(ths[0]!)!.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    expect(onAutosize).toHaveBeenCalledWith('a')
+    a.destroy()
+  })
+
+  it('does not autosize a column that opted out - it has no handle to hit', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const onAutosize = vi.fn()
+    const a = columnResize(host, { ...widthStore(), onAutosize, canResize: () => false })
+    expect(handleOf(ths[0]!)).toBeNull()
+    // The header itself is all that is left, and it carries no autosize.
+    ths[0]!.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    expect(onAutosize).not.toHaveBeenCalled()
+    a.destroy()
+  })
+
+  it('does not let the double-click reach the header underneath', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const onHeader = vi.fn()
+    ths[0]!.addEventListener('dblclick', onHeader)
+    const a = columnResize(host, { ...widthStore(), onAutosize: vi.fn() })
+    handleOf(ths[0]!)!.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    expect(onHeader).not.toHaveBeenCalled()
+    a.destroy()
+  })
+
+  it('does nothing on double-click while disabled', () => {
+    const { host, ths } = buildHeaders([{ id: 'a' }])
+    track(host)
+    const onAutosize = vi.fn()
+    const store = widthStore()
+    const a = columnResize(host, { ...store, onAutosize })
+    const h = handleOf(ths[0]!)!
+    a.update({ ...store, onAutosize, disabled: true })
+    h.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    expect(onAutosize).not.toHaveBeenCalled()
+    a.destroy()
+  })
+})