@svgrid/grid 2.6.21 → 2.6.23

package/src/number-editor-literal.test.ts

@@ -0,0 +1,84 @@
+/**
+ * Typing a decimal into an `editorType: 'number'` cell.
+ *
+ * `<input type="number">` applies the HTML value-sanitization algorithm: the
+ * element only reports a value it can parse as a valid floating-point number.
+ * Every intermediate state on the way to "12.5" - "12." - is not one, so the
+ * element reports "" and the keystroke vanishes. The same applies to a lone
+ * "-" on the way to a negative, and to "1e" on the way to "1e3".
+ *
+ * jsdom implements that sanitization, so this is reproducible here rather than
+ * only in a browser.
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  getCellEditorInputType,
+  getEditorInputType,
+  isNumericEditorInput,
+} from './SvGrid.helpers'
+
+describe('what a bare number input does to intermediate values', () => {
+  // This is the browser behaviour the editor has to work around, pinned so the
+  // reasoning below cannot quietly stop being true.
+  const sanitized = (raw: string) => {
+    const el = document.createElement('input')
+    el.type = 'number'
+    el.value = raw
+    return el.value
+  }
+
+  it('throws away a trailing decimal point', () => {
+    expect(sanitized('12.')).toBe('')
+  })
+
+  it('throws away a lone minus sign', () => {
+    expect(sanitized('-')).toBe('')
+  })
+
+  it('throws away a half-typed exponent', () => {
+    expect(sanitized('1e')).toBe('')
+  })
+
+  it('keeps values that are already valid', () => {
+    expect(sanitized('12.5')).toBe('12.5')
+    expect(sanitized('-3')).toBe('-3')
+    expect(sanitized('1e3')).toBe('1e3')
+  })
+})
+
+describe('getCellEditorInputType', () => {
+  it('does NOT hand the number editor a type=number input', () => {
+    // The whole point: a text input keeps the raw keystrokes, and the value is
+    // coerced at commit by parseEditorValue - which the editor already did.
+    expect(getCellEditorInputType('number')).toBe('text')
+  })
+
+  it('leaves every other editor on its native input type', () => {
+    for (const t of ['text', 'date', 'datetime', 'time', 'password', 'color'] as const) {
+      expect(getCellEditorInputType(t), t).toBe(getEditorInputType(t))
+    }
+  })
+
+  it('does not change the FILTER inputs, which share the other helper', () => {
+    // The filter row and filter menu still ask getEditorInputType. They have
+    // the same defect, but changing them is a separate decision - this pins
+    // that they were not swept along by accident.
+    expect(getEditorInputType('number')).toBe('number')
+  })
+})
+
+describe('isNumericEditorInput', () => {
+  it('accepts every state on the way to a number', () => {
+    // Rejecting these is the exact bug this replaces.
+    for (const v of ['', '-', '12', '12.', '12.5', '-3', '.5', '1e', '1e3', '1e-3']) {
+      expect(isNumericEditorInput(v), JSON.stringify(v)).toBe(true)
+    }
+  })
+
+  it('rejects what can never become a number', () => {
+    // The guarantee type="number" used to provide, now that it is gone.
+    for (const v of ['abc', '12x', '12..5', '--3', '1 2', '12,5']) {
+      expect(isNumericEditorInput(v), JSON.stringify(v)).toBe(false)
+    }
+  })
+})

package/src/number-editor.grid.test.ts

@@ -0,0 +1,160 @@
+/**
+ * End-to-end: typing a decimal into an `editorType: 'number'` cell keeps every
+ * keystroke, and the value still commits as a NUMBER.
+ *
+ * The unit half of this lives in `number-editor-literal.test.ts` - the browser
+ * sanitization that caused it, and the helpers that route around it. This
+ * drives the real editor, which is what actually regressed for users: typing
+ * "12.5" produced 125, because the "." was dropped and the digits ran together.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { createCoreRowModel, tableFeatures } from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; label: string; amount: number }
+const features = tableFeatures({})
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'label', header: 'Label', width: 160 },
+  { field: 'amount', header: 'Amount', width: 140, editorType: 'number' },
+]
+
+function mountGrid() {
+  return new Promise<{
+    api: SvGridApi<typeof features, Row>
+    target: HTMLElement
+    changes: Array<{ newValue: unknown }>
+    destroy: () => void
+  }>((res, rej) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const changes: Array<{ newValue: unknown }> = []
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: [{ id: 1, label: 'One', amount: 5 }],
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => String(r.id),
+        containerHeight: 200,
+        virtualization: false,
+        editable: true,
+        onCellValueChange: (e: { newValue: unknown }) => changes.push(e),
+        onApiReady(api: SvGridApi<typeof features, Row>) {
+          res({ api, target, changes, destroy: () => { unmount(app); target.remove() } })
+        },
+      } as any,
+    })
+    queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+  })
+}
+
+/** Start editing the amount cell and return its input, once the lazy chunk lands. */
+async function editAmount(api: SvGridApi<typeof features, Row>, target: HTMLElement) {
+  api.startEditing(0, 'amount')
+  await vi.waitFor(() => {
+    expect(target.querySelector('.sv-grid-cell-editing input')).not.toBeNull()
+  })
+  return target.querySelector('.sv-grid-cell-editing input') as HTMLInputElement
+}
+
+/** Type `text` one character at a time, as a user does. */
+function typeInto(input: HTMLInputElement, text: string) {
+  let sofar = ''
+  for (const ch of text) {
+    sofar += ch
+    input.value = sofar
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    // Read back what survived - the element may have rewritten it.
+    sofar = input.value
+  }
+  return input.value
+}
+
+describe('number editor - decimals survive being typed', () => {
+  it('keeps the trailing decimal point mid-entry', async () => {
+    const { api, target, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      // The bug: with type="number" this read back "" and the dot was gone.
+      expect(typeInto(input, '12.')).toBe('12.')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('commits 12.5 as the number 12.5, not 125', async () => {
+    const { api, target, changes, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      typeInto(input, '12.5')
+      input.dispatchEvent(new Event('blur', { bubbles: true }))
+
+      await vi.waitFor(() => expect(changes.length).toBeGreaterThan(0))
+      expect(changes.at(-1)!.newValue).toBe(12.5)
+      expect(typeof changes.at(-1)!.newValue).toBe('number')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('keeps a lone minus sign on the way to a negative', async () => {
+    const { api, target, changes, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      expect(typeInto(input, '-')).toBe('-')
+      typeInto(input, '-4.25')
+      input.dispatchEvent(new Event('blur', { bubbles: true }))
+
+      await vi.waitFor(() => expect(changes.length).toBeGreaterThan(0))
+      expect(changes.at(-1)!.newValue).toBe(-4.25)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('carries the mobile decimal keypad hint', async () => {
+    // Losing type="number" also loses the numeric soft keyboard, which is what
+    // inputmode restores.
+    const { api, target, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      expect(input.getAttribute('type')).toBe('text')
+      expect(input.getAttribute('inputmode')).toBe('decimal')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('refuses characters that can never be part of a number', async () => {
+    // type="number" used to block these; a text input does not, so the editor
+    // has to. Without the guard "12x" would reach the commit and coerce to null.
+    const { api, target, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      typeInto(input, '12')
+      input.value = '12x'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      expect(input.value).toBe('12')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('leaves a text column alone', async () => {
+    const { api, target, destroy } = await mountGrid()
+    try {
+      api.startEditing(0, 'label')
+      await vi.waitFor(() => {
+        expect(target.querySelector('.sv-grid-cell-editing input')).not.toBeNull()
+      })
+      const input = target.querySelector('.sv-grid-cell-editing input') as HTMLInputElement
+      expect(input.getAttribute('inputmode')).toBeNull()
+      expect(typeInto(input, 'hello.')).toBe('hello.')
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/resize-props.test.ts

@@ -0,0 +1,361 @@
+/**
+ * The `columnResize` / `rowResize` props, against a REAL mounted `<SvGrid>`.
+ *
+ * Both default to OFF and both are opt-in, so they are tested together and the
+ * last block asserts they behave identically.
+ *
+ * Two things make "the prop is on" and "the affordance exists" separate claims
+ * here, and both are why these tests double-`settle()`:
+ *
+ *   - Neither affordance is rendered by the component. Each is injected by an
+ *     action through a MutationObserver.
+ *   - Neither action is imported statically. Both arrive via `import()`, so the
+ *     handles land a microtask after the first paint.
+ *
+ * `columnResize` off-by-default is a deliberate behaviour CHANGE - column
+ * resizing used to be unconditional - so the assertion pinning that is load
+ * bearing, not a restatement of the obvious.
+ *
+ * jsdom does no layout, so the drag arithmetic is only sanity-checked here; it
+ * is covered properly against synthetic DOM in row-resize.test.ts and
+ * column-resize.test.ts. What this file checks is the wiring.
+ */
+import { describe, expect, it, beforeEach } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { tableFeatures, createCoreRowModel } from './index'
+import type { ColumnDef } from './index'
+
+type Row = { id: string; name: string; team: string }
+
+const features = tableFeatures({})
+
+const rows: Row[] = [
+  { id: 'r1', name: 'Ada Lovelace', team: 'Platform' },
+  { id: 'r2', name: 'Grace Hopper', team: 'Compilers' },
+  { id: 'r3', name: 'Barbara Liskov', team: 'Platform' },
+]
+
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 200 },
+  { field: 'team', header: 'Team', width: 140 },
+]
+
+const mounted: Array<() => void> = []
+
+function mountGrid(extraProps: Record<string, unknown> = {}) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data: rows,
+      columns: cols,
+      features,
+      _rowModels: { coreRowModel: createCoreRowModel() },
+      containerHeight: 300,
+      // Virtualization off so every row is in the DOM to be counted.
+      virtualization: false,
+      columnVirtualization: false,
+      ...extraProps,
+    } as never,
+  })
+  mounted.push(() => {
+    unmount(app)
+    target.remove()
+  })
+  return target
+}
+
+/** Let the row model + effects settle before reading the DOM. */
+const settle = () => new Promise((r) => setTimeout(r, 0))
+
+beforeEach(() => {
+  while (mounted.length) mounted.pop()!()
+  document.body.innerHTML = ''
+  if (!HTMLElement.prototype.setPointerCapture) {
+    HTMLElement.prototype.setPointerCapture = function () {}
+  }
+  if (!HTMLElement.prototype.releasePointerCapture) {
+    HTMLElement.prototype.releasePointerCapture = function () {}
+  }
+})
+
+const handles = (t: HTMLElement) => t.querySelectorAll('.sv-grid-resize-handle').length
+const strips = (t: HTMLElement) => t.querySelectorAll('.sv-grid-row-resize-handle').length
+
+describe('columnResize prop', () => {
+  it('injects no handles when the prop is absent', async () => {
+    const target = mountGrid()
+    await settle()
+    await settle()
+    // Off by default. Column resizing used to be unconditional, so this is the
+    // assertion that pins the deliberate behaviour change.
+    expect(handles(target)).toBe(0)
+  })
+
+  it('injects a handle per column when true', async () => {
+    const target = mountGrid({ columnResize: true })
+    await settle()
+    // The action is fetched through import(), so the handles land a tick later
+    // than the first paint - a second settle, not a rendering bug.
+    await settle()
+    expect(handles(target)).toBe(cols.length)
+  })
+
+  it('injects no handles when explicitly false', async () => {
+    const target = mountGrid({ columnResize: false })
+    await settle()
+    await settle()
+    expect(handles(target)).toBe(0)
+  })
+
+  it('leaves the headers themselves intact when off', async () => {
+    // Only the drag affordance is absent - the column still renders, still
+    // sorts, still has its accessible name.
+    const target = mountGrid({ columnResize: false })
+    await settle()
+    expect(target.querySelectorAll('.sv-grid-column').length).toBeGreaterThanOrEqual(cols.length)
+    expect(target.textContent).toContain('Name')
+    expect(target.textContent).toContain('Team')
+  })
+
+  it('applies a dragged width to the column', async () => {
+    const target = mountGrid({ columnResize: true })
+    await settle()
+    await settle()
+
+    const handle = target.querySelector<HTMLElement>('.sv-grid-resize-handle')!
+    const th = handle.closest<HTMLElement>('th.sv-grid-column')!
+    const opts = { bubbles: true, cancelable: true, pointerId: 1 }
+    handle.dispatchEvent(new PointerEvent('pointerdown', { ...opts, clientX: 0 } as PointerEventInit))
+    window.dispatchEvent(new PointerEvent('pointerup', { ...opts, clientX: 60 } as PointerEventInit))
+    await settle()
+
+    // Name starts at 200 (see `cols`), so a +60 drag lands at 260.
+    expect(th.style.width).toContain('260')
+  })
+})
+
+describe('rowResize prop', () => {
+  it('injects no strips when the prop is absent', async () => {
+    const target = mountGrid()
+    await settle()
+    expect(strips(target)).toBe(0)
+  })
+
+  it('injects a strip per body row when on', async () => {
+    const target = mountGrid({ rowResize: true })
+    await settle()
+    // The MutationObserver decorates asynchronously; give it a turn.
+    await settle()
+    expect(strips(target)).toBe(rows.length)
+  })
+
+  it('works without a gutter column, via the row anchor', async () => {
+    // No showRowNumbers, no `sv-row-gutter` cellClass. Before the anchor
+    // fallback this rendered zero strips and the prop did nothing at all.
+    const target = mountGrid({ rowResize: true })
+    await settle()
+    await settle()
+    const first = target.querySelector<HTMLElement>('.sv-grid-row-resize-handle')
+    expect(first).not.toBeNull()
+    expect(first!.closest('td')).not.toBeNull()
+  })
+
+  it('gives each strip a keyboard-reachable separator role', async () => {
+    const target = mountGrid({ rowResize: true })
+    await settle()
+    await settle()
+    const strip = target.querySelector<HTMLElement>('.sv-grid-row-resize-handle')!
+    expect(strip.getAttribute('role')).toBe('separator')
+    expect(strip.getAttribute('aria-orientation')).toBe('horizontal')
+    expect(strip.tabIndex).toBe(0)
+  })
+
+  it('is suppressed by autoRowHeight, which owns the height itself', async () => {
+    // Both want to set the row height. Letting them both run means the next
+    // measurement pass silently discards whatever the user dragged.
+    const target = mountGrid({ rowResize: true, autoRowHeight: true })
+    await settle()
+    await settle()
+    expect(strips(target)).toBe(0)
+  })
+
+  it('applies a dragged height to the row', async () => {
+    const target = mountGrid({ rowResize: true, rowHeight: 30 })
+    await settle()
+    await settle()
+
+    const strip = target.querySelector<HTMLElement>('.sv-grid-row-resize-handle')!
+    const tr = strip.closest<HTMLTableRowElement>('tr.sv-grid-row')!
+    // jsdom reports a zero rect, so the drag needs a real starting height.
+    tr.getBoundingClientRect = () =>
+      ({ height: 30, width: 300, top: 0, left: 0, right: 300, bottom: 30, x: 0, y: 0, toJSON() {} }) as DOMRect
+
+    const opts = { bubbles: true, cancelable: true, pointerId: 1 }
+    strip.dispatchEvent(new PointerEvent('pointerdown', { ...opts, clientY: 0 } as PointerEventInit))
+    window.dispatchEvent(new PointerEvent('pointerup', { ...opts, clientY: 44 } as PointerEventInit))
+    await settle()
+
+    expect(tr.style.height).toBe('74px')
+  })
+})
+
+/**
+ * The two props are meant to be interchangeable in every way a consumer can
+ * touch them: same import, same shape, same opt-in, same runtime override.
+ * Asserted rather than assumed, because they were built at different times and
+ * `rowResize` reads through the controller while `columnResize` reads in the
+ * view - two paths that could easily drift apart.
+ */
+describe('rowResize / columnResize symmetry', () => {
+  it('are exported from the package the same way', async () => {
+    const pkg = (await import('./index')) as Record<string, unknown>
+    expect(typeof pkg.rowResize).toBe('function')
+    expect(typeof pkg.columnResize).toBe('function')
+  })
+
+  it('both default to off', async () => {
+    const target = mountGrid()
+    await settle()
+    await settle()
+    expect(handles(target)).toBe(0)
+    expect(strips(target)).toBe(0)
+  })
+
+  it('both turn on with an explicit true', async () => {
+    const target = mountGrid({ columnResize: true, rowResize: true })
+    await settle()
+    await settle()
+    expect(handles(target)).toBe(cols.length)
+    expect(strips(target)).toBe(rows.length)
+  })
+
+  it('both turn on at runtime through api.setOption', async () => {
+    // `columnResize` is read in the view and `rowResize` in the controller, but
+    // both go through the same override proxy - so both must react here.
+    let api: { setOption: (k: string, v: unknown) => void } | null = null
+    const target = mountGrid({ onApiReady: (next: unknown) => (api = next as never) })
+    await settle()
+    expect(handles(target)).toBe(0)
+    expect(strips(target)).toBe(0)
+
+    api!.setOption('columnResize', true)
+    api!.setOption('rowResize', true)
+    await settle()
+    await settle()
+    expect(handles(target)).toBe(cols.length)
+    expect(strips(target)).toBe(rows.length)
+  })
+
+  it('both turn back off through api.setOption', async () => {
+    let api: { setOption: (k: string, v: unknown) => void } | null = null
+    const target = mountGrid({
+      columnResize: true,
+      rowResize: true,
+      onApiReady: (next: unknown) => (api = next as never),
+    })
+    await settle()
+    await settle()
+    expect(handles(target)).toBe(cols.length)
+    expect(strips(target)).toBe(rows.length)
+
+    api!.setOption('columnResize', false)
+    api!.setOption('rowResize', false)
+    await settle()
+    await settle()
+    expect(handles(target)).toBe(0)
+    expect(strips(target)).toBe(0)
+  })
+})
+
+describe('ColumnDef.resizable', () => {
+  const mixed = [
+    { field: 'name', header: 'Name', width: 200 },
+    { field: 'team', header: 'Team', width: 140, resizable: false },
+  ] as ColumnDef<typeof features, Row>[]
+
+  it('drops the handle for the column that opted out', async () => {
+    const target = mountGrid({ columnResize: true, columns: mixed })
+    await settle()
+    await settle()
+    expect(handles(target)).toBe(1)
+    const th = target
+      .querySelector<HTMLElement>('.sv-grid-resize-handle')!
+      .closest<HTMLElement>('th')!
+    expect(th.dataset.svgridHeaderCol).toBe('name')
+  })
+
+  it('narrows columnResize rather than enabling anything', async () => {
+    // With the grid-wide prop off, `resizable: true` must not bring a handle
+    // back - the column option only ever subtracts.
+    const target = mountGrid({
+      columns: [
+        { field: 'name', header: 'Name', width: 200, resizable: true },
+        { field: 'team', header: 'Team', width: 140 },
+      ] as ColumnDef<typeof features, Row>[],
+    })
+    await settle()
+    await settle()
+    expect(handles(target)).toBe(0)
+  })
+
+  it('leaves every column resizable when none opts out', async () => {
+    const target = mountGrid({ columnResize: true })
+    await settle()
+    await settle()
+    expect(handles(target)).toBe(cols.length)
+  })
+})
+
+describe('rowResize brings in the row header column', () => {
+  const gutters = (t: HTMLElement) => t.querySelectorAll('.sv-grid-row-number-cell').length
+
+  it('shows the row-number gutter when rowResize is on', async () => {
+    // The strip lives in the row header, which is where a spreadsheet puts it.
+    // Without a gutter there is nothing that reads as a grab target.
+    const target = mountGrid({ rowResize: true })
+    await settle()
+    await settle()
+    expect(gutters(target)).toBe(rows.length)
+    const strip = target.querySelector<HTMLElement>('.sv-grid-row-resize-handle')!
+    expect(strip.closest('.sv-grid-row-number-cell')).not.toBeNull()
+  })
+
+  it('shows no gutter when rowResize is off', async () => {
+    const target = mountGrid()
+    await settle()
+    await settle()
+    expect(gutters(target)).toBe(0)
+  })
+
+  it('lets an explicit showRowNumbers={false} win', async () => {
+    // Turning the gutter on is a default, not a takeover. The strip falls back
+    // to the row's first cell so the prop still does something.
+    const target = mountGrid({ rowResize: true, showRowNumbers: false })
+    await settle()
+    await settle()
+    expect(gutters(target)).toBe(0)
+    expect(strips(target)).toBe(rows.length)
+    const strip = target.querySelector<HTMLElement>('.sv-grid-row-resize-handle')!
+    expect(strip.closest('td')).not.toBeNull()
+  })
+
+  it('does not disturb a grid that already asked for the gutter', async () => {
+    const target = mountGrid({ rowResize: true, showRowNumbers: true })
+    await settle()
+    await settle()
+    expect(gutters(target)).toBe(rows.length)
+  })
+
+  it('brings no gutter when autoRowHeight has suppressed rowResize', async () => {
+    // rowResizeOn is false there, so the gutter would be a column with no
+    // purpose - the gate has to follow the resolved state, not the raw prop.
+    const target = mountGrid({ rowResize: true, autoRowHeight: true })
+    await settle()
+    await settle()
+    expect(gutters(target)).toBe(0)
+    expect(strips(target)).toBe(0)
+  })
+})

package/src/row-resize.test.ts

@@ -130,6 +130,37 @@ describe('rowResize - strip injection', () => {
     action.destroy()
   })
 
+  it("anchor 'row' falls back to the first body cell when there is no gutter", () => {
+    // What `<SvGrid rowResize>` relies on: most grids have no row-number
+    // column, and without the fallback the prop would be inert on them.
+    const { host, rows } = buildGrid([{ gutter: false }, { gutter: false }])
+    track(host)
+    const action = rowResize(host, { onResize: vi.fn(), anchor: 'row' })
+    expect(stripOf(rows[0]!)).not.toBeNull()
+    expect(stripOf(rows[1]!)).not.toBeNull()
+    // The strip hangs off the row's first cell, since that is all there is.
+    expect(stripOf(rows[0]!)!.parentElement).toBe(rows[0]!.querySelector('.sv-grid-cell'))
+    action.destroy()
+  })
+
+  it("anchor 'row' still prefers a real gutter when the row has one", () => {
+    const { host, rows } = buildGrid([{ gutter: true }])
+    track(host)
+    const action = rowResize(host, { onResize: vi.fn(), anchor: 'row' })
+    expect(stripOf(rows[0]!)!.parentElement).toBe(gutterOf(rows[0]!))
+    action.destroy()
+  })
+
+  it("defaults to anchor 'gutter', leaving gutterless rows alone", () => {
+    // The exported action's existing contract. Adding the fallback must not
+    // start decorating rows for consumers who never asked for it.
+    const { host, rows } = buildGrid([{ gutter: false }])
+    track(host)
+    const action = rowResize(host, { onResize: vi.fn() })
+    expect(stripOf(rows[0]!)).toBeNull()
+    action.destroy()
+  })
+
   it('also injects a strip into the built-in row-number gutter (showRowNumbers)', () => {
     // The native gutter cell is `.sv-grid-cell.sv-grid-row-number-cell`, NOT
     // `.sv-row-gutter`; the action must recognise it so `showRowNumbers` grids

package/src/row-resize.ts

@@ -39,6 +39,17 @@ export type RowResizeOptions = {
   max?: number
   /** When true, the action removes its strips and ignores events. */
   disabled?: boolean
+  /**
+   * Where the drag strip is anchored.
+   * - `'gutter'` (default) - only rows that have a row-header gutter cell get
+   *   a strip: the built-in row-number column (`showRowNumbers`) or a column
+   *   tagged `cellClass: 'sv-row-gutter'`. Rows without one are skipped, so on
+   *   a plain grid the action does nothing.
+   * - `'row'` - use the gutter when there is one, otherwise fall back to the
+   *   row's first body cell. This is what `<SvGrid rowResize>` passes, so the
+   *   prop works without also asking for a gutter column.
+   */
+  anchor?: 'gutter' | 'row'
 }
 
 type ActiveDrag = {
@@ -150,9 +161,16 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
       // A row-header gutter cell: either a user column tagged
       // `sv-row-gutter`, or the grid's built-in row-number gutter
       // (`showRowNumbers`), whose cell is `.sv-grid-row-number-cell`.
-      const gutter = tr.querySelector<HTMLTableCellElement>(
-        '.sv-grid-cell.sv-row-gutter, .sv-grid-cell.sv-grid-row-number-cell',
-      )
+      const gutter =
+        tr.querySelector<HTMLTableCellElement>(
+          '.sv-grid-cell.sv-row-gutter, .sv-grid-cell.sv-grid-row-number-cell',
+        ) ??
+        // `anchor: 'row'` - no gutter on this grid, so hang the strip off the
+        // first body cell instead. Without this a grid with no row-number
+        // column would silently not resize.
+        (current.anchor === 'row'
+          ? tr.querySelector<HTMLTableCellElement>('.sv-grid-cell')
+          : null)
       if (!gutter) continue
       if (gutter.querySelector(`:scope > .${STRIP_CLASS}`)) continue
       // Anchor the strip to the gutter cell + allow it to overflow