@svgrid/grid 1.1.0 → 1.1.2

package/dist/SvGrid.types.d.ts

@@ -137,7 +137,32 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
     showFilterMenu?: boolean;
     showFilterRow?: boolean;
     enableCellSelection?: boolean;
+    /**
+     * Prepend a header row (the column labels) to copied cell ranges, so pasting
+     * into Excel / Sheets includes the headers. Applies per copied range.
+     */
+    copyHeadersToClipboard?: boolean;
+    /**
+     * Transform each cell value on its way to the clipboard - e.g. strip
+     * currency symbols, expand codes to labels, or redact. Receives the display
+     * value plus the row/column context; return the string (or value) to copy.
+     */
+    processCellForClipboard?: (params: {
+        value: unknown;
+        column: unknown;
+        row: TData;
+        rowIndex: number;
+        columnId: string;
+    }) => unknown;
     enableInlineEditing?: boolean;
+    /**
+     * Full-row editing. When `true`, starting an edit puts the WHOLE row into
+     * edit mode - every editable cell shows an inline editor at once - and a
+     * single Enter (or focus leaving the row) commits all of them; Esc cancels
+     * the whole row. Requires `enableInlineEditing`. The full-row editor covers
+     * text / number / date / datetime / checkbox / list-select editor types.
+     */
+    fullRowEditing?: boolean;
     enableRowSummaries?: boolean;
     /**
      * Excel-style status bar under the grid showing live aggregates of the
@@ -149,12 +174,21 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
         aggregates?: ReadonlyArray<"count" | "numericCount" | "sum" | "avg" | "min" | "max">;
     };
     /**
-     * Show a docked Columns tool panel - the enterprise sidebar for toggling
-     * column visibility, reordering, and grouping without a right-click. A
-     * toggle button appears at the grid's top-right; the panel itself docks
-     * on the right edge.
+     * Show the docked tool panel - the enterprise sidebar with Columns and
+     * Filters tabs. A "Columns & Filters" button appears in a toolbar above the
+     * grid; the panel docks on the right edge.
      */
     toolPanel?: boolean;
+    /**
+     * Render the header column menu (⋮) as a tabbed popover - **General**,
+     * **Filter**, and **Columns** tabs (the AG-Grid layout). Defaults to `false`,
+     * which keeps the flat menu (actions list + "Choose columns" submenu).
+     */
+    columnMenuTabs?: boolean;
+    /** Open the tool panel on first render (instead of collapsed). */
+    toolPanelDefaultOpen?: boolean;
+    /** Which tab the tool panel starts on. Defaults to `'columns'`. */
+    toolPanelDefaultTab?: "columns" | "filters";
     /**
      * Quick way to pick which selection surfaces are active. `'row'` shows the
      * selection checkbox column only, `'cell'` allows rectangle/range cell
@@ -167,6 +201,12 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
      * column. Useful as a permanent anchor when scrolling wide grids.
      */
     showRowNumbers?: boolean;
+    /**
+     * Paint alternating data rows with the `--sg-row-alt-bg` color (zebra
+     * striping). Only data rows stripe - pinned, group, detail, and summary
+     * rows keep their single background. Defaults to `false`.
+     */
+    zebraRows?: boolean;
     /**
      * Width (px) of the row-number column. Defaults to 56, which fits up
      * to "99,999"; bump this when the dataset crosses six digits so the
@@ -401,6 +441,53 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
     columnOrder?: ReadonlyArray<string>;
     /** Fires every time the column order changes (drag or `api.setColumnOrder`). */
     onColumnOrderChange?: (order: ReadonlyArray<string>) => void;
+    /**
+     * Infer each column's data type (number / boolean / date / ISO date-string /
+     * text) from the first data row, for columns that declare neither an
+     * explicit `editorType` nor a `cellDataType`. Sets the matching editor,
+     * alignment, date format, and filter operators automatically. Explicit
+     * column config always wins. Defaults to `false`.
+     */
+    inferColumnTypes?: boolean;
+    /**
+     * Enables managed row dragging. When `true`, every row becomes a drag
+     * source (grab cursor + a grip in the row-number cell) and a drop
+     * indicator paints between rows during a drag. On drop the grid mutates
+     * its own internal data - reordering within the grid, or moving the row
+     * across grids that share the same {@link rowDragGroup}. Defaults to
+     * `false`.
+     */
+    rowDragManaged?: boolean;
+    /**
+     * Connection group for cross-grid row dragging. Grids that share the same
+     * non-empty `rowDragGroup` string (and have `rowDragManaged` on) can
+     * exchange rows: dragging a row out of one and dropping it into another
+     * removes it from the source and inserts it into the target. Omit to keep
+     * dragging confined to reordering within a single grid.
+     */
+    rowDragGroup?: string;
+    /**
+     * Fires on the TARGET grid after a managed row drag settles, with the
+     * moved row, its landing index, whether it stayed in the same grid, and
+     * the source / target grid ids. Use it to mirror the move into your own
+     * state (persistence, server sync). The grid has already applied the
+     * change to its internal data by the time this fires.
+     */
+    onRowDragEnd?: (event: {
+        row: TData;
+        toIndex: number;
+        sameGrid: boolean;
+        fromGridId: number;
+        toGridId: number;
+    }) => void;
+    /**
+     * Align this grid with others that share the same non-empty
+     * `alignedGridGroup` string: horizontal scroll and column-resize widths are
+     * kept in lockstep across every grid in the group. Use for a totals/header
+     * grid above a body grid, or side-by-side comparison grids that must line up.
+     * The grids should declare the same columns (matched by id) for widths to map.
+     */
+    alignedGridGroup?: string;
     /**
      * BCP-47 locale tag (or array of fallbacks) used for accent- and
      * case-insensitive text filtering / sorting / search. Powered by

package/dist/aligned-grids.d.ts

@@ -0,0 +1,6 @@
+export declare function createAlignedGrids<TFeatures, TData>(ctx: any): {
+    register: () => () => void;
+    broadcastScroll: (left: number) => void;
+    broadcastWidths: () => void;
+    alignedGridId: number;
+};

package/dist/aligned-grids.js

@@ -0,0 +1,84 @@
+// Aligned grids - keep two or more independent grids in lockstep on horizontal
+// scroll and column widths. Grids that share the same `alignedGridGroup` string
+// register with a module-level registry (same pattern as managed row dragging);
+// when one scrolls horizontally or a column is resized, the others follow.
+//
+// Loop-safety without flags: scroll sync no-ops when the target already has the
+// value (so the echo scroll event never fires); width sync compares a serialized
+// snapshot and pre-seeds it on apply, so the reactive effect that fires after
+// applying a peer's widths sees "no change" and doesn't echo.
+// Shared across every grid in the bundle.
+const groups = new Map();
+let seq = 0;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createAlignedGrids(ctx) {
+    const id = ++seq;
+    let lastWidthsSerial = "";
+    const group = () => ctx.props.alignedGridGroup ?? null;
+    function peers() {
+        const g = group();
+        if (!g)
+            return [];
+        const m = groups.get(g);
+        if (!m)
+            return [];
+        const out = [];
+        for (const member of m.values())
+            if (member.id !== id)
+                out.push(member);
+        return out;
+    }
+    const self = {
+        id,
+        applyScroll(left) {
+            const el = ctx.scrollContainer;
+            // Only set when it differs, so no echo scroll event fires -> no loop.
+            if (el && el.scrollLeft !== left)
+                el.scrollLeft = left;
+        },
+        applyWidths(widths) {
+            const merged = { ...ctx.columnWidths, ...widths };
+            // Pre-seed the serial so the columnWidths effect that fires after this
+            // set sees an unchanged snapshot and skips its own broadcast.
+            lastWidthsSerial = JSON.stringify(merged);
+            ctx.columnWidths = merged;
+        },
+    };
+    // Register on mount; returns the unregister for the effect's cleanup.
+    function register() {
+        const g = group();
+        if (!g)
+            return () => { };
+        let m = groups.get(g);
+        if (!m) {
+            m = new Map();
+            groups.set(g, m);
+        }
+        m.set(id, self);
+        return () => {
+            const mm = groups.get(g);
+            if (!mm)
+                return;
+            mm.delete(id);
+            if (!mm.size)
+                groups.delete(g);
+        };
+    }
+    function broadcastScroll(left) {
+        const p = peers();
+        for (const member of p)
+            member.applyScroll(left);
+    }
+    function broadcastWidths() {
+        if (!group())
+            return;
+        const serial = JSON.stringify(ctx.columnWidths ?? {});
+        if (serial === lastWidthsSerial)
+            return; // nothing new (or echo of an apply)
+        lastWidthsSerial = serial;
+        const w = ctx.columnWidths;
+        for (const member of peers())
+            member.applyWidths(w);
+    }
+    return { register, broadcastScroll, broadcastWidths, alignedGridId: id };
+}

package/dist/aligned-grids.test.d.ts

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

package/dist/aligned-grids.test.js

@@ -0,0 +1,75 @@
+/**
+ * Unit tests for aligned grids: two members sharing a group mirror horizontal
+ * scroll and column-resize widths to each other. Driven with minimal fake ctxs.
+ */
+import { describe, expect, it } from 'vitest';
+import { createAlignedGrids } from './aligned-grids';
+function makeCtx(group) {
+    return {
+        props: { alignedGridGroup: group },
+        scrollContainer: { scrollLeft: 0 },
+        columnWidths: {},
+    };
+}
+describe('aligned grids', () => {
+    it('mirrors horizontal scroll to peers in the same group', () => {
+        const a = makeCtx('g');
+        const b = makeCtx('g');
+        const ha = createAlignedGrids(a);
+        const hb = createAlignedGrids(b);
+        const un1 = ha.register();
+        const un2 = hb.register();
+        ha.broadcastScroll(240);
+        expect(b.scrollContainer.scrollLeft).toBe(240);
+        // and the other way
+        hb.broadcastScroll(80);
+        expect(a.scrollContainer.scrollLeft).toBe(80);
+        un1();
+        un2();
+    });
+    it('mirrors column-resize widths to peers (matched by column id)', () => {
+        const a = makeCtx('g');
+        const b = makeCtx('g');
+        const ha = createAlignedGrids(a);
+        const hb = createAlignedGrids(b);
+        ha.register();
+        hb.register();
+        a.columnWidths = { Feb: 180 };
+        ha.broadcastWidths();
+        expect(b.columnWidths.Feb).toBe(180);
+    });
+    it('does NOT mirror across different groups', () => {
+        const a = makeCtx('one');
+        const b = makeCtx('two');
+        const ha = createAlignedGrids(a);
+        const hb = createAlignedGrids(b);
+        ha.register();
+        hb.register();
+        ha.broadcastScroll(200);
+        expect(b.scrollContainer.scrollLeft).toBe(0);
+        a.columnWidths = { Feb: 999 };
+        ha.broadcastWidths();
+        expect(b.columnWidths.Feb).toBeUndefined();
+    });
+    it('is inert with no group set, and after unregister', () => {
+        const a = makeCtx(undefined);
+        const b = makeCtx(undefined);
+        const ha = createAlignedGrids(a);
+        const hb = createAlignedGrids(b);
+        ha.register();
+        hb.register();
+        ha.broadcastScroll(120);
+        expect(b.scrollContainer.scrollLeft).toBe(0);
+        // Grouped, then unregistered -> no longer receives updates.
+        const c = makeCtx('gg');
+        const d = makeCtx('gg');
+        const hc = createAlignedGrids(c);
+        const hd = createAlignedGrids(d);
+        const unc = hc.register();
+        const und = hd.register();
+        und(); // d leaves the group
+        hc.broadcastScroll(55);
+        expect(d.scrollContainer.scrollLeft).toBe(0);
+        unc();
+    });
+});

package/dist/build-api.coverage.test.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Coverage-focused behavioral tests for the SvGridApi assembled in
+ * `build-api.ts`. The existing `svgrid.api.test.ts` / `svgrid.api-extensions
+ * .test.ts` cover filters, row selection, pagination, navigation, and
+ * getState/setState. This file exercises the remaining surface:
+ *   - getCellValue / setCellValue
+ *   - selectCells / getSelected
+ *   - addRow(s) / removeRow(s) / applyTransaction
+ *   - addColumn(s) / removeColumn / setColumnVisible / getColumns
+ *   - setColumnWidth / setColumnPinning / setColumnOrder
+ *   - setFacetFilter
+ *   - undo / redo / canUndo / canRedo / clearHistory
+ *   - find (open/close/query/hits)
+ *   - grouping (setGroupBy / expandAllGroups / collapseAllGroups)
+ *   - autosizeColumn / refresh
+ *
+ * All tests mount the real <SvGrid /> in jsdom and drive the api handed back
+ * from onApiReady.
+ */
+export {};