@svgrid/grid 1.0.2 → 1.1.1

package/dist/spreadsheet.test.js

@@ -0,0 +1,446 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { spreadsheetLayout, spansToMerges } from './spreadsheet';
+// jsdom does not implement the global `CSS` object, which `findCell` uses via
+// `CSS.escape`. Provide a minimal polyfill so the action's selector queries
+// run. (A real browser ships CSS.escape; this is purely an env gap.)
+if (typeof globalThis.CSS === 'undefined') {
+    // @ts-expect-error - minimal shim for the test environment
+    globalThis.CSS = { escape: (s) => s.replace(/["\\]/g, '\\$&') };
+}
+else if (typeof globalThis.CSS.escape !== 'function') {
+    // @ts-expect-error - augment partial CSS object
+    globalThis.CSS.escape = (s) => s.replace(/["\\]/g, '\\$&');
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Flush a queued requestAnimationFrame callback. The action batches its
+ *  work into one rAF, so tests must advance a frame to observe the effect. */
+function flushFrame() {
+    return new Promise((resolve) => {
+        // Two rAFs: the first lets any already-queued callback run, the second
+        // guarantees we resolve AFTER that callback has executed.
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+    });
+}
+/** Build a `<table>` with a header-less body of `rows` x `cols`. Each TD is
+ *  tagged with `data-svgrid-row` (display index) + `data-col-id` exactly the
+ *  way SvGrid emits them, which is what the layout helper queries on. */
+function buildGrid(rows, columnOrder) {
+    const host = document.createElement('div');
+    const table = document.createElement('table');
+    const tbody = document.createElement('tbody');
+    for (let r = 0; r < rows; r += 1) {
+        const tr = document.createElement('tr');
+        for (const colId of columnOrder) {
+            const td = document.createElement('td');
+            td.setAttribute('data-svgrid-row', String(r));
+            td.setAttribute('data-col-id', colId);
+            td.textContent = `${colId}-${r}`;
+            tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+    host.appendChild(table);
+    document.body.appendChild(host);
+    const cellAt = (r, colId) => {
+        const el = host.querySelector(`td[data-svgrid-row="${r}"][data-col-id="${colId}"]`);
+        if (!el)
+            throw new Error(`no cell at row=${r} col=${colId}`);
+        return el;
+    };
+    return { host, cellAt };
+}
+let hosts = [];
+function track(host) {
+    hosts.push(host);
+    return host;
+}
+beforeEach(() => {
+    hosts = [];
+});
+afterEach(() => {
+    for (const h of hosts)
+        h.remove();
+    document.body.innerHTML = '';
+});
+// ---------------------------------------------------------------------------
+// Merges
+// ---------------------------------------------------------------------------
+describe('spreadsheetLayout - merges', () => {
+    it('applies colspan + hides covered cells horizontally', async () => {
+        const cols = ['a', 'b', 'c'];
+        const { host, cellAt } = buildGrid(2, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'a');
+        expect(origin.getAttribute('colspan')).toBe('2');
+        expect(origin.hasAttribute('rowspan')).toBe(false);
+        expect(origin.getAttribute('data-svgrid-sheet')).toBe('');
+        // Covered neighbour to the right is hidden + marked.
+        expect(cellAt(0, 'b').style.display).toBe('none');
+        expect(cellAt(0, 'b').getAttribute('data-svgrid-sheet')).toBe('');
+        // Untouched cells stay visible.
+        expect(cellAt(0, 'c').style.display).toBe('');
+        expect(cellAt(1, 'a').style.display).toBe('');
+        action.destroy();
+    });
+    it('applies rowspan + hides covered cells vertically', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(3, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', rowspan: 2 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'a');
+        expect(origin.getAttribute('rowspan')).toBe('2');
+        expect(origin.hasAttribute('colspan')).toBe(false);
+        expect(cellAt(1, 'a').style.display).toBe('none');
+        expect(cellAt(2, 'a').style.display).toBe(''); // outside the span
+        action.destroy();
+    });
+    it('handles a rectangular colspan + rowspan block', async () => {
+        const cols = ['a', 'b', 'c'];
+        const { host, cellAt } = buildGrid(3, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: 2 }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').getAttribute('colspan')).toBe('2');
+        expect(cellAt(0, 'a').getAttribute('rowspan')).toBe('2');
+        // All covered cells except the origin are hidden.
+        expect(cellAt(0, 'b').style.display).toBe('none');
+        expect(cellAt(1, 'a').style.display).toBe('none');
+        expect(cellAt(1, 'b').style.display).toBe('none');
+        // c column + row 2 untouched.
+        expect(cellAt(0, 'c').style.display).toBe('');
+        expect(cellAt(2, 'a').style.display).toBe('');
+        action.destroy();
+    });
+    it('clamps zero/negative span to a minimum of 1 (no colspan/rowspan attr)', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(2, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 0, rowspan: -5 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'a');
+        // Clamped to 1, so no span attributes are written, but it is still marked.
+        expect(origin.hasAttribute('colspan')).toBe(false);
+        expect(origin.hasAttribute('rowspan')).toBe(false);
+        expect(origin.getAttribute('data-svgrid-sheet')).toBe('');
+        expect(cellAt(0, 'b').style.display).toBe(''); // nothing covered
+        action.destroy();
+    });
+    it('skips a merge whose columnId is not in columnOrder', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'ghost', colspan: 2 }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').hasAttribute('data-svgrid-sheet')).toBe(false);
+        expect(cellAt(0, 'b').style.display).toBe('');
+        action.destroy();
+    });
+    it('skips a merge whose origin cell is not rendered', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 99, columnId: 'a', colspan: 2 }],
+        });
+        await flushFrame();
+        // Nothing marked anywhere.
+        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(0);
+        expect(cellAt(0, 'a').style.display).toBe('');
+        action.destroy();
+    });
+    it('ignores covered cells that fall outside the columnOrder or render window', async () => {
+        const cols = ['a', 'b'];
+        // Only 1 row rendered, but ask for a colspan that runs off the column
+        // list AND a rowspan that runs off the rendered rows.
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'b', colspan: 3, rowspan: 3 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'b');
+        expect(origin.getAttribute('colspan')).toBe('3');
+        expect(origin.getAttribute('rowspan')).toBe('3');
+        // No sibling to the right of b, and rows 1/2 don't exist - so the only
+        // marked cell is the origin itself.
+        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(1);
+        action.destroy();
+    });
+});
+// ---------------------------------------------------------------------------
+// Selection-edge inheritance
+// ---------------------------------------------------------------------------
+describe('spreadsheetLayout - selection edge inheritance', () => {
+    it('mirrors range-right / range-bottom / selected-range flags onto the origin', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(2, cols);
+        track(host);
+        // Mark the far covered cell with range edge flags BEFORE applying.
+        cellAt(1, 'b').setAttribute('data-range-right', 'true');
+        cellAt(1, 'b').setAttribute('data-range-bottom', 'true');
+        cellAt(0, 'b').setAttribute('data-selected-range', 'true');
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: 2 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'a');
+        expect(origin.classList.contains('sv-merge-edge-right')).toBe(true);
+        expect(origin.classList.contains('sv-merge-edge-bottom')).toBe(true);
+        expect(origin.classList.contains('sv-merge-in-range')).toBe(true);
+        action.destroy();
+    });
+    it('leaves edge classes off when no range flags are present', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(2, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: 2 }],
+        });
+        await flushFrame();
+        const origin = cellAt(0, 'a');
+        expect(origin.classList.contains('sv-merge-edge-right')).toBe(false);
+        expect(origin.classList.contains('sv-merge-edge-bottom')).toBe(false);
+        expect(origin.classList.contains('sv-merge-in-range')).toBe(false);
+        action.destroy();
+    });
+    it('treats the origin own selected-range flag as in-range', async () => {
+        const cols = ['a'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        cellAt(0, 'a').setAttribute('data-selected-range', 'true');
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a' }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').classList.contains('sv-merge-in-range')).toBe(true);
+        action.destroy();
+    });
+});
+// ---------------------------------------------------------------------------
+// Borders
+// ---------------------------------------------------------------------------
+describe('spreadsheetLayout - borders', () => {
+    it('injects an overlay with the requested edge styles', async () => {
+        const cols = ['a'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            borders: [
+                {
+                    rowIndex: 0,
+                    columnId: 'a',
+                    top: { width: 3, style: 'dashed', color: 'red' },
+                    bottom: {}, // defaults: 2px solid currentColor
+                },
+            ],
+        });
+        await flushFrame();
+        const td = cellAt(0, 'a');
+        const overlay = td.querySelector('.sv-cell-border-overlay');
+        expect(overlay).not.toBeNull();
+        expect(overlay.style.borderTop).toBe('3px dashed red');
+        // jsdom's CSSOM drops the `currentColor` keyword from the border
+        // shorthand, but the width + style survive, confirming the default
+        // (2px solid) edge was emitted.
+        expect(overlay.style.borderBottom).toContain('2px solid');
+        // No left/right set.
+        expect(overlay.style.borderLeft).toBe('');
+        expect(td.getAttribute('data-svgrid-sheet')).toBe('');
+        // The TD becomes a positioning context.
+        expect(td.style.position).toBe('relative');
+        action.destroy();
+    });
+    it('skips a border spec with no edges set (no overlay injected)', async () => {
+        const cols = ['a'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            borders: [{ rowIndex: 0, columnId: 'a' }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').querySelector('.sv-cell-border-overlay')).toBeNull();
+        expect(cellAt(0, 'a').hasAttribute('data-svgrid-sheet')).toBe(false);
+        action.destroy();
+    });
+    it('skips a border spec whose target cell is absent', async () => {
+        const cols = ['a'];
+        const { host } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            borders: [{ rowIndex: 5, columnId: 'a', top: { width: 1 } }],
+        });
+        await flushFrame();
+        expect(host.querySelectorAll('.sv-cell-border-overlay').length).toBe(0);
+        action.destroy();
+    });
+    it('does not override an already-positioned TD', async () => {
+        const cols = ['a'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        cellAt(0, 'a').style.position = 'absolute';
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            borders: [{ rowIndex: 0, columnId: 'a', left: { color: 'blue' } }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').style.position).toBe('absolute');
+        action.destroy();
+    });
+});
+// ---------------------------------------------------------------------------
+// Cleanup + update + destroy
+// ---------------------------------------------------------------------------
+describe('spreadsheetLayout - update + cleanup', () => {
+    it('clears prior decorations on the next apply (update path)', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(2, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2 }],
+            borders: [{ rowIndex: 1, columnId: 'a', top: { width: 1 } }],
+        });
+        await flushFrame();
+        expect(cellAt(0, 'a').getAttribute('colspan')).toBe('2');
+        expect(cellAt(1, 'a').querySelector('.sv-cell-border-overlay')).not.toBeNull();
+        // Update to an empty spec - everything from the previous run is removed.
+        action.update({ columnOrder: cols, merges: [], borders: [] });
+        await flushFrame();
+        expect(cellAt(0, 'a').hasAttribute('colspan')).toBe(false);
+        expect(cellAt(0, 'b').style.display).toBe('');
+        expect(cellAt(0, 'a').hasAttribute('data-svgrid-sheet')).toBe(false);
+        expect(cellAt(1, 'a').querySelector('.sv-cell-border-overlay')).toBeNull();
+        action.destroy();
+    });
+    it('re-applies decorations when the grid body mutates (MutationObserver)', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 1, columnId: 'a', colspan: 2 }],
+        });
+        await flushFrame();
+        // Row 1 does not exist yet - nothing applied.
+        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(0);
+        // Simulate the grid rendering a new row -> observer schedules apply.
+        const tbody = host.querySelector('tbody');
+        const tr = document.createElement('tr');
+        for (const colId of cols) {
+            const td = document.createElement('td');
+            td.setAttribute('data-svgrid-row', '1');
+            td.setAttribute('data-col-id', colId);
+            tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+        await flushFrame();
+        await flushFrame();
+        expect(cellAt(1, 'a').getAttribute('colspan')).toBe('2');
+        action.destroy();
+    });
+    it('destroy disconnects the observer and cancels a pending frame', async () => {
+        const cols = ['a', 'b'];
+        const { host, cellAt } = buildGrid(1, cols);
+        track(host);
+        // Destroy immediately - the first scheduled frame is pending.
+        const action = spreadsheetLayout(host, {
+            columnOrder: cols,
+            merges: [{ rowIndex: 0, columnId: 'a', colspan: 2 }],
+        });
+        action.destroy();
+        await flushFrame();
+        await flushFrame();
+        // Frame was cancelled before apply ran.
+        expect(cellAt(0, 'a').hasAttribute('colspan')).toBe(false);
+        // After destroy, mutations no longer trigger apply.
+        const tbody = host.querySelector('tbody');
+        tbody.appendChild(document.createElement('tr'));
+        await flushFrame();
+        await flushFrame();
+        expect(cellAt(0, 'a').hasAttribute('colspan')).toBe(false);
+    });
+    it('treats null merges / borders as empty (no throw)', async () => {
+        const cols = ['a'];
+        const { host } = buildGrid(1, cols);
+        track(host);
+        const opts = {
+            columnOrder: cols,
+            merges: null,
+            borders: null,
+        };
+        const action = spreadsheetLayout(host, opts);
+        await flushFrame();
+        expect(host.querySelectorAll('[data-svgrid-sheet]').length).toBe(0);
+        action.destroy();
+    });
+});
+describe('spansToMerges - declarative colSpan/rowSpan -> MergeSpec[]', () => {
+    const rows = [
+        { region: 'AMER', q: 'Q1', amt: 1 },
+        { region: 'AMER', q: 'Q2', amt: 2 },
+        { region: 'AMER', q: 'Q3', amt: 3 },
+        { region: 'EMEA', q: 'Q1', amt: 4 },
+        { region: 'EMEA', q: 'Q2', amt: 5 },
+    ];
+    // Merge each run of equal `region` values downward.
+    function regionRowSpan() {
+        return ({ data, rowIndex }) => {
+            if (rowIndex > 0 && rows[rowIndex - 1].region === data.region)
+                return 1; // covered
+            let n = 1;
+            while (rows[rowIndex + n]?.region === data.region)
+                n += 1;
+            return n;
+        };
+    }
+    it('emits a rowspan merge at each run origin and skips covered rows', () => {
+        const columns = [{ id: 'region', field: 'region', rowSpan: regionRowSpan() }];
+        const merges = spansToMerges(rows, columns);
+        // AMER spans rows 0..2 (rowspan 3), EMEA spans rows 3..4 (rowspan 2).
+        expect(merges).toEqual([
+            { rowIndex: 0, columnId: 'region', colspan: undefined, rowspan: 3 },
+            { rowIndex: 3, columnId: 'region', colspan: undefined, rowspan: 2 },
+        ]);
+    });
+    it('supports colSpan and marks covered columns', () => {
+        const columns = [
+            { id: 'a', field: 'region', colSpan: ({ rowIndex }) => (rowIndex === 0 ? 2 : 1) },
+            { id: 'b', field: 'q' },
+            { id: 'c', field: 'amt' },
+        ];
+        const merges = spansToMerges(rows.slice(0, 1), columns);
+        expect(merges).toEqual([{ rowIndex: 0, columnId: 'a', colspan: 2, rowspan: undefined }]);
+    });
+    it('returns no merges when no column defines spans', () => {
+        expect(spansToMerges(rows, [{ id: 'region', field: 'region' }])).toEqual([]);
+    });
+});

package/dist/summaries.d.ts

@@ -0,0 +1,12 @@
+import { type Column, type Row, type RowData, type TableFeatures } from "./index";
+import "./sv-grid-scrollbar";
+export declare function createSummaries<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(ctx: any): {
+    computeSummaries: (rows: ReadonlyArray<Row<TData>>, columns: ReadonlyArray<Column<TData>>) => Record<string, string>;
+    hasRenderedColumn: (entry: {
+        item: (typeof ctx.renderedColumnItems)[number];
+        column: (typeof ctx.allColumns)[number] | undefined;
+    }) => entry is {
+        item: (typeof ctx.renderedColumnItems)[number];
+        column: (typeof ctx.allColumns)[number];
+    };
+};

package/dist/summaries.js

@@ -0,0 +1,65 @@
+import "./sv-grid-scrollbar";
+import { getCellKey, } from "./SvGrid.helpers";
+import { formatSummaryNumeric, } from "./cell-values";
+export function createSummaries(ctx) {
+    /**
+     * Aggregate every row into a per-column footer summary (sum for numeric
+     * columns, `Count: N` otherwise). This loop is the hottest path on a
+     * large grid - it is rows x columns iterations - so two things keep the
+     * constant factor down:
+     *
+     *   1. The edited-cell overlay is only consulted when an edit actually
+     *      exists. `key in editedCellValues` hits a reactive-proxy `has`
+     *      trap for every cell otherwise - 5M no-op trap calls on a
+     *      100k x 50 grid. Skipping it when the map is empty is the single
+     *      biggest win here.
+     *   2. The column's accessor (`accessorFn` / `field`) is resolved once
+     *      per column, not re-read off `columnDef` for every cell.
+     */
+    function computeSummaries(rows, columns) {
+        const summary = {};
+        const rowCount = rows.length;
+        const hasEdits = Object.keys(ctx.editedCellValues).length > 0;
+        for (const column of columns) {
+            const def = column.columnDef;
+            const accessorFn = def.accessorFn;
+            const field = def.field;
+            const columnId = column.id;
+            let numericSum = 0;
+            let numericCount = 0;
+            for (let i = 0; i < rowCount; i += 1) {
+                const row = rows[i];
+                let value;
+                const base = accessorFn
+                    ? accessorFn(row.original)
+                    : field
+                        ? row.original[field]
+                        : row.getCellValueByColumnId(columnId);
+                if (hasEdits) {
+                    const key = getCellKey(row.id, columnId);
+                    value = key in ctx.editedCellValues ? ctx.editedCellValues[key] : base;
+                }
+                else {
+                    value = base;
+                }
+                const asNumber = Number(value);
+                if (Number.isFinite(asNumber)) {
+                    numericSum += asNumber;
+                    numericCount += 1;
+                }
+            }
+            summary[columnId] =
+                numericCount > 0
+                    ? formatSummaryNumeric(column, numericSum)
+                    : `Count: ${rowCount}`;
+        }
+        return summary;
+    }
+    function hasRenderedColumn(entry) {
+        return entry.column !== undefined;
+    }
+    return {
+        computeSummaries,
+        hasRenderedColumn,
+    };
+}

package/dist/sv-grid-scrollbar.js

@@ -30,7 +30,11 @@ const STYLE_TEMPLATE = `
     display: flex;
     user-select: none;
     background: var(--sg-scrollbar-bg, #eef2f8);
-    box-shadow: inset 0 0 0 1px var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
+    /* The 1px separator is drawn on the INNER edge only (the edge facing
+       the grid body) via the orientation rules below. A full inset box
+       here doubled up with the grid's own frame border on the outer edge,
+       reading as a 2px border - most visible in dense-gridline themes
+       like Excel, which should show a single 1px line. */
     /* Start hidden + non-interactive - viewport/content sizes are 0 until
        after the first layout pass, so without this default the scrollbar
        paints visible for one frame and then JS hides it on mount. That
@@ -44,10 +48,18 @@ const STYLE_TEMPLATE = `
   :host([orientation="vertical"]) {
     flex-direction: column;
     width: ${ARROW_SIZE}px;
+    /* LTR: vertical scrollbar sits at the right, inner edge is the left. */
+    box-shadow: inset 1px 0 0 0 var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
+  }
+  :host([orientation="vertical"]:dir(rtl)) {
+    /* RTL flips the scrollbar to the left, so the inner edge is the right. */
+    box-shadow: inset -1px 0 0 0 var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
   }
   :host([orientation="horizontal"]) {
     flex-direction: row;
     height: ${ARROW_SIZE}px;
+    /* Horizontal scrollbar sits at the bottom, inner edge is the top. */
+    box-shadow: inset 0 1px 0 0 var(--sg-scrollbar-border, rgba(15, 23, 42, 0.04));
   }
   .arrow {
     flex: none;

package/dist/svgrid-wrapper.types.d.ts

@@ -58,6 +58,16 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
     getCellValue(rowIndex: number, columnId: string): unknown;
     /** Write a cell value through the column's field. */
     setCellValue(rowIndex: number, columnId: string, value: unknown): void;
+    /**
+     * Programmatically begin editing a cell (as a double-click would). Returns
+     * `true` if editing started (cell exists, editable, editing enabled).
+     */
+    startEditing(rowIndex: number, columnId: string): boolean;
+    /**
+     * Commit (default) or, with `cancel: true`, discard the active edit.
+     * Returns `true` if there was an edit in progress.
+     */
+    stopEditing(cancel?: boolean): boolean;
     /**
      * Programmatically select one or more rectangular cell ranges. Each
      * range is `[rowStart, colStart, rowEnd, colEnd]` in 0-indexed grid
@@ -105,6 +115,15 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
         value?: string;
         /** Upper bound for the `between` operator. Required when `operator === 'between'`. */
         valueTo?: string;
+        /**
+         * Optional SECOND condition on the same column, joined by `join`
+         * (multi-condition filtering, e.g. "> 100 AND < 500").
+         */
+        operator2?: SvGridFilterOperator;
+        value2?: string;
+        valueTo2?: string;
+        /** How to combine the two conditions. Defaults to `'AND'`. */
+        join?: 'AND' | 'OR';
     } | null): void;
     /**
      * Set the facet (set-list, Excel-style multi-select) filter for a column.
@@ -164,6 +183,15 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
      * default. Useful for "save view" + URL persistence.
      */
     getColumnWidths(): Record<string, number>;
+    /**
+     * Snap one column's width to its widest visible cell (header text +
+     * any rendered body cell). Equivalent to double-clicking the column's
+     * resize handle. The grid also exposes this through the column menu's
+     * "Autosize" item.
+     */
+    autosizeColumn(columnId: string): void;
+    /** Run `autosizeColumn` on every column. */
+    autosizeAllColumns(): void;
     /**
      * Replace the column-pinning state in one call. Each entry is a
      * column id; the order in the array becomes the visible order along
@@ -325,7 +353,9 @@ export type SvGridWrapperProps<TFeatures extends TableFeatures, TData extends Ro
     showRowSelection?: boolean;
     showPagination?: boolean;
     virtualization?: boolean;
-    rowHeight?: number;
+    /** Row height in pixels. Pass a function `(rowIndex) => px` for per-row
+     *  variable heights (e.g. when wiring up an interactive row-resize). */
+    rowHeight?: number | ((rowIndex: number) => number);
     overscan?: number;
     containerHeight?: number;
     columnVirtualization?: boolean;

package/dist/svgrid.behavior.test.js

@@ -389,6 +389,26 @@ describe('SvGrid - column add / remove / visibility', () => {
             destroy();
         }
     });
+    it('columns marked `visible: false` start hidden but stay listed', async () => {
+        const columns = personColumns.map((c) => (c.field === 'team' ? { ...c, visible: false } : c));
+        const { api, destroy } = await mountGrid({ columns });
+        try {
+            // Starts hidden...
+            expect(api.isColumnVisible('team')).toBe(false);
+            // ...but is still listed in getColumns() (so a Choose Columns UI
+            // can offer it), just with visible=false.
+            const team = api.getColumns().find((c) => c.id === 'team');
+            expect(team).toBeDefined();
+            expect(team?.visible).toBe(false);
+            // A later user toggle wins over the initial flag.
+            api.setColumnVisible('team', true);
+            await tick();
+            expect(api.isColumnVisible('team')).toBe(true);
+        }
+        finally {
+            destroy();
+        }
+    });
 });
 describe('SvGrid - row add / remove', () => {
     it('addRow at top / bottom / specific index', async () => {

package/dist/svgrid.comments-autocomplete.test.d.ts

@@ -0,0 +1 @@
+export {};