@svgrid/grid 1.1.0 → 1.1.1

package/dist/SvGrid.controller.svelte.js

@@ -1,5 +1,5 @@
 import { applyExcelFilter, normalizeForFilter, createColumnVirtualizer, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createSvelteVirtualizer, createSortedRowModel, createSvGrid, getGridCellDomId, sortFns, } from "./index";
-import { createRowScrollScaling } from "./virtualization/scroll-scaling";
+import { createRowScrollScaling, resolveMaxDomHeight, } from "./virtualization/scroll-scaling";
 import "./sv-grid-scrollbar";
 import { computeColumnStat, formatsNeedingStats, } from "./conditional-formatting";
 import { rawToNumber, } from "./SvGrid.helpers";
@@ -12,6 +12,10 @@ import { createCellRender, } from "./cell-render";
 import { createEditing, } from "./editing";
 import { createSelection, } from "./selection";
 import { createColumns, } from "./columns";
+import { createRowDrag, } from "./row-drag";
+import { createAlignedGrids, } from "./aligned-grids";
+import { resolveColumnTypes, } from "./column-types";
+import { computeColumnGroupMeta, hiddenLeavesForCollapse, } from "./column-groups";
 import { createGridApi, } from "./build-api";
 import { createClipboard, } from "./clipboard";
 import { filterOperatorOptions, fallbackOperatorOption, TEXT_OPERATORS, NUMBER_OPERATORS, DATE_OPERATORS, CHECKBOX_OPERATORS, operatorOption, operatorsForColumn, defaultOperatorFor, operatorLabelFor, } from "./filter-operators";
@@ -24,35 +28,81 @@ import { getColumnBaseValue, isGroupRow, toolPanelHeaderLabel, formatSummaryNume
  */
 const MAX_DOM_SCROLL_HEIGHT_FALLBACK = 8000000;
 /**
- * The browser's actual maximum element height in CSS px. Browsers clamp how
- * tall a single element may be (and mobile / high-DPR caps differ), so we
- * measure it once by reading the clamped `offsetHeight` of an absurdly tall
- * probe kept inside a 1x1 `overflow:hidden` wrapper (so it never affects page
- * layout or scroll). Cached for the page lifetime; constant per browser.
+ * The browser's actual maximum *scrollable* element height in CSS px. Browsers
+ * clamp how tall a single element may be, and the cap is lower on mobile /
+ * high-DPR devices (the physical limit is in device px, so a 3x-DPR phone has
+ * ~1/3 the CSS-px cap of a 1x desktop). Past that cap a scroll container
+ * silently clamps its `scrollHeight` and the tail rows of a huge virtualized
+ * grid become unreachable.
+ *
+ * We measure two signals from one offscreen probe and keep the smaller (see
+ * `resolveMaxDomHeight`): the probe's clamped `offsetHeight`, AND the
+ * `scrollHeight` a real `overflow:auto` container exposes for it. The second
+ * matters because mobile WebKit/Blink can report a generous `offsetHeight` yet
+ * expose a smaller scrollable range - trusting the layout height alone is what
+ * stranded the last rows on phones. Using a real scroll container also folds in
+ * DPR clamping for free. Cached for the page lifetime; constant per browser.
  */
 let detectedMaxDomHeight = null;
+/**
+ * Seed the `hiddenColumns` map from any column def marked `visible: false`.
+ * Walks groups so a hidden group hides all of its leaf columns. Keyed by the
+ * same id `setColumnVisible` uses (`id ?? field`), so user toggles afterward
+ * stay consistent. Run once at mount; prop changes don't re-apply it.
+ */
+function initialHiddenColumns(defs) {
+    const hidden = {};
+    const walk = (cols, inheritedHidden) => {
+        for (const def of cols) {
+            const hide = inheritedHidden || def.visible === false;
+            if (def.columns?.length) {
+                walk(def.columns, hide);
+            }
+            else if (hide) {
+                const id = def.id ?? def.field;
+                if (id)
+                    hidden[id] = true;
+            }
+        }
+    };
+    walk(defs, false);
+    return hidden;
+}
 function getMaxDomScrollHeight() {
+    // Escape hatch: a page may pin the cap via `window.__svgridMaxDomHeight`.
+    // Checked before the cache so it always wins. Two uses: reproducing a
+    // phone's lower element-height limit on desktop (and our e2e coverage of
+    // the huge-list path), and overriding detection on a device where it reads
+    // wrong. A non-positive / non-finite value is ignored.
+    if (typeof window !== "undefined") {
+        const forced = window
+            .__svgridMaxDomHeight;
+        if (typeof forced === "number" && Number.isFinite(forced) && forced > 0) {
+            return forced;
+        }
+    }
     if (detectedMaxDomHeight != null)
         return detectedMaxDomHeight;
     if (typeof document === "undefined" || !document.body) {
         return MAX_DOM_SCROLL_HEIGHT_FALLBACK;
     }
     try {
+        // The wrapper is itself an `overflow:auto` scroll container (kept tiny and
+        // offscreen so it never affects page layout or scroll), so we can read the
+        // height it actually exposes as scrollable - not just the probe's layout
+        // height. On high-DPR mobile the two diverge and the scrollable one is the
+        // limit that matters.
         const wrap = document.createElement("div");
         wrap.style.cssText =
-            "position:fixed;top:0;left:-9999px;width:1px;height:1px;overflow:hidden;visibility:hidden;pointer-events:none;";
+            "position:fixed;top:0;left:-9999px;width:1px;height:100px;overflow:auto;visibility:hidden;pointer-events:none;";
         const probe = document.createElement("div");
         probe.style.cssText = "width:1px;height:1000000000px;";
         wrap.appendChild(probe);
         document.body.appendChild(wrap);
-        const measured = probe.offsetHeight;
+        const layoutCap = probe.offsetHeight;
+        const scrollCap = wrap.scrollHeight;
         document.body.removeChild(wrap);
-        // A clamped read is a large finite number well under the 1e9 we asked for.
-        // If the browser did not clamp (returned ~1e9) or returned junk, fall back.
-        detectedMaxDomHeight =
-            measured > 100000 && measured < 900000000
-                ? measured
-                : MAX_DOM_SCROLL_HEIGHT_FALLBACK;
+        detectedMaxDomHeight = resolveMaxDomHeight(layoutCap, scrollCap, MAX_DOM_SCROLL_HEIGHT_FALLBACK);
     }
     catch {
         detectedMaxDomHeight = MAX_DOM_SCROLL_HEIGHT_FALLBACK;
@@ -91,6 +141,10 @@ export function createSvGridController(props) {
     let pendingScrollLeft = 0;
     let scrollSyncRaf = null;
     let selectionRange = $state({ anchor: null, focus: null });
+    // Extra committed ranges for multi-range (Ctrl+drag) selection. The
+    // `selectionRange` above is always the ACTIVE range being manipulated; these
+    // are the finished ones. Full selection = these + the active range.
+    let selectionRanges = $state.raw([]);
     let isDraggingSelection = $state(false);
     /** Excel-style fill handle drag state. While non-null we paint a "fill
      *  preview" overlay on cells between the source range and the pointer
@@ -98,6 +152,9 @@ export function createSvGridController(props) {
     let fillDrag = $state(null);
     let activeAtPointerDown = null;
     let editingCell = $state(null);
+    // Full-row editing: the row currently in whole-row edit + its per-column
+    // draft (keyed by column id). Null when not in full-row mode.
+    let fullRowEdit = $state(null);
     let editedCellValues = $state({});
     const UNDO_LIMIT = 200;
     let history = $state([]);
@@ -160,6 +217,7 @@ export function createSvGridController(props) {
     const rowNumberColumnWidth = $derived(props.rowNumberWidth ?? 56);
     const showRowNumbersEffective = $derived(props.showRowNumbers ?? false);
     let columnMenuFor = $state(null);
+    let columnMenuTab = $state("general");
     let columnMenuPos = $state({ x: 0, y: 0 });
     let columnMenuSearch = $state("");
     let filterMenuFor = $state(null);
@@ -236,9 +294,41 @@ export function createSvGridController(props) {
     // mutates these so add/remove operations don't need a callback round-trip.
     // svelte-ignore state_referenced_locally
     let internalData = $state.raw(props.data);
+    // Resolve `cellDataType` / `inferColumnTypes` into concrete editorType +
+    // format defaults once, up front, so every downstream reader sees a normal
+    // column. Explicit fields on the ColumnDef always win.
+    // svelte-ignore state_referenced_locally
+    const resolveCols = (cols) => resolveColumnTypes(cols, props.data?.[0], props.inferColumnTypes === true);
     // svelte-ignore state_referenced_locally
-    let internalColumns = $state.raw(props.columns);
-    let hiddenColumns = $state({});
+    let internalColumns = $state.raw(resolveCols(props.columns));
+    // svelte-ignore state_referenced_locally
+    let hiddenColumns = $state(initialHiddenColumns(props.columns));
+    // Collapsible column groups (columnGroupShow). Meta is derived from the tree;
+    // `collapsedColumnGroups` is the live set of collapsed group ids, seeded once
+    // from each collapsible group's `openByDefault` (default: collapsed).
+    const columnGroupMeta = $derived(computeColumnGroupMeta(props.columns));
+    // svelte-ignore state_referenced_locally
+    let collapsedColumnGroups = $state((() => {
+        const meta = computeColumnGroupMeta(props.columns);
+        const s = new Set();
+        for (const id of meta.collapsibleGroupIds)
+            if (!meta.defaultOpen.get(id))
+                s.add(id);
+        return s;
+    })());
+    // Leaf ids hidden right now because their group is collapsed/expanded.
+    const hiddenByGroupCollapse = $derived(hiddenLeavesForCollapse(columnGroupMeta, collapsedColumnGroups));
+    function toggleColumnGroup(groupId) {
+        const next = new Set(collapsedColumnGroups);
+        if (next.has(groupId))
+            next.delete(groupId);
+        else
+            next.add(groupId);
+        collapsedColumnGroups = next;
+    }
+    function isColumnGroupCollapsed(groupId) {
+        return collapsedColumnGroups.has(groupId);
+    }
     $effect(() => {
         // When the consumer replaces `data` (e.g. a "Reset" button), drop any
         // accumulated cell-edit overrides - otherwise `getCellDisplayValue`
@@ -248,7 +338,7 @@ export function createSvGridController(props) {
         editedCellValues = {};
     });
     $effect(() => {
-        internalColumns = props.columns;
+        internalColumns = resolveCols(props.columns);
     });
     // Captured ONCE at mount: `externalSort` is a structural choice (tree vs
     // flat data) so toggling it after mount is not supported. Reading it here
@@ -334,7 +424,7 @@ export function createSvGridController(props) {
     const allColumns = $derived.by(() => {
         let raw = grid
             .getAllColumns()
-            .filter((column) => !hiddenColumns[column.id]);
+            .filter((column) => !hiddenColumns[column.id] && !hiddenByGroupCollapse[column.id]);
         // Apply user reorder (if any). Unknown ids in userColumnOrder are
         // skipped; columns not in userColumnOrder keep their original
         // relative order after the user-ordered ones.
@@ -403,13 +493,17 @@ export function createSvGridController(props) {
         function buildId(def, parentId, fallbackIx) {
             return def.id ?? def.field ?? `${parentId ?? 'col'}_d_${fallbackIx}`;
         }
+        // Leaves hidden by a collapsed/expanded group are skipped everywhere here,
+        // so group colSpan + widthPx exclude them and stay aligned with the leaves
+        // the body actually renders.
+        const hiddenLeaf = hiddenByGroupCollapse;
         function collectLeaves(defs, parentId, depthHere) {
             defs.forEach((def, ix) => {
                 const id = buildId(def, parentId, ix);
                 if (def.columns?.length) {
                     collectLeaves(def.columns, id, depthHere + 1);
                 }
-                else {
+                else if (!hiddenLeaf[id]) {
                     leafEntries.push({ id, widthPx: getColumnWidth(id) });
                 }
             });
@@ -419,6 +513,10 @@ export function createSvGridController(props) {
             const nodes = [];
             for (const def of defs) {
                 const id = buildId(def, parentId, nodes.length);
+                // Skip leaves the collapse state hides, so leaf indices/colSpans match
+                // `leafEntries` (and the body's rendered columns) exactly.
+                if (!def.columns?.length && hiddenLeaf[id])
+                    continue;
                 const leafStart = cursor.leaf;
                 if (def.columns?.length) {
                     indexTree(def.columns, id, cursor);
@@ -464,6 +562,7 @@ export function createSvGridController(props) {
             const cells = at.map((n) => {
                 const isLeafEarly = !n.def.columns?.length;
                 const headerText = typeof n.def.header === 'string' ? n.def.header : '';
+                const collapsible = columnGroupMeta.collapsibleGroupIds.has(n.id);
                 return {
                     key: `${n.id}_d${d}`,
                     label: isLeafEarly ? '' : headerText,
@@ -471,6 +570,9 @@ export function createSvGridController(props) {
                     widthPx: sumLeafWidths(n.leafStart, n.leafEnd),
                     firstLeafIndex: n.leafStart,
                     isPlaceholder: isLeafEarly,
+                    groupId: collapsible ? n.id : undefined,
+                    collapsible,
+                    collapsed: collapsible && collapsedColumnGroups.has(n.id),
                 };
             });
             rows.push({ id: `gh_${d}`, cells });
@@ -504,6 +606,12 @@ export function createSvGridController(props) {
     let colDragId = $state(null);
     let colDropOnId = $state(null);
     let colDropSide = $state(null);
+    // Live drag state for managed row dragging. Only meaningful while a row is
+    // being dragged (`props.rowDragManaged`). `rowDropIndex` is the visible row
+    // index currently hovered; `rowDropSide` says which edge the drop line paints.
+    let rowDragActive = $state(false);
+    let rowDropIndex = $state(null);
+    let rowDropSide = $state(null);
     // ---- Conditional formatting --------------------------------------------
     // True when the feature is in use; gates the per-cell positioning context
     // (cells are otherwise non-relative for scroll performance).
@@ -577,23 +685,36 @@ export function createSvGridController(props) {
                 .some((cell) => normalizeForFilter(String(cell.getValue() ?? ""), props.filterLocale)
                 .includes(needle)));
         }
-        const menuFilters = Object.entries(filterMenuValues).filter(([_, filter]) => {
-            if (filter.operator === "isBlank")
+        // A single condition is "active" if it has the value(s) it needs.
+        const condActive = (op, value, valueTo) => {
+            if (op === "isBlank")
                 return true;
-            // `between` needs both endpoints; otherwise treat as inactive.
-            if (filter.operator === "between") {
-                return (filter.value.trim().length > 0 &&
-                    (filter.valueTo ?? "").trim().length > 0);
-            }
-            return filter.value.trim().length > 0;
+            if (op === "between")
+                return value.trim().length > 0 && (valueTo ?? "").trim().length > 0;
+            return value.trim().length > 0;
+        };
+        const evalCond = (cellValue, columnId, op, value, valueTo) => applyExcelFilter(cellValue, { id: columnId, operator: op, value, valueTo: op === "between" ? valueTo : undefined }, { locale: props.filterLocale });
+        // A column filter is active if either of its (up to two) conditions is.
+        const menuFilters = Object.entries(filterMenuValues).filter(([_, f]) => {
+            const a = condActive(f.operator, f.value, f.valueTo);
+            const b = !!f.operator2 && condActive(f.operator2, f.value2 ?? "", f.valueTo2);
+            return a || b;
         });
         if (menuFilters.length) {
-            rows = rows.filter((row) => menuFilters.every(([columnId, filter]) => applyExcelFilter(getRowColumnValue(row, columnId), {
-                id: columnId,
-                operator: filter.operator,
-                value: filter.value,
-                valueTo: filter.operator === "between" ? filter.valueTo : undefined,
-            }, { locale: props.filterLocale })));
+            rows = rows.filter((row) => menuFilters.every(([columnId, f]) => {
+                const cellValue = getRowColumnValue(row, columnId);
+                const aActive = condActive(f.operator, f.value, f.valueTo);
+                const bActive = !!f.operator2 && condActive(f.operator2, f.value2 ?? "", f.valueTo2);
+                const ra = aActive ? evalCond(cellValue, columnId, f.operator, f.value, f.valueTo) : null;
+                const rb = bActive
+                    ? evalCond(cellValue, columnId, f.operator2, f.value2 ?? "", f.valueTo2)
+                    : null;
+                if (ra === null)
+                    return rb ?? true;
+                if (rb === null)
+                    return ra;
+                return f.join === "OR" ? ra || rb : ra && rb;
+            }));
         }
         const valueFilterEntries = Object.entries(valueFilters);
         if (valueFilterEntries.length) {
@@ -739,7 +860,10 @@ export function createSvGridController(props) {
         };
     });
     // ---- Tool panel (docked columns sidebar) -------------------------------
-    let toolPanelOpen = $state(false);
+    // svelte-ignore state_referenced_locally
+    let toolPanelOpen = $state(props.toolPanelDefaultOpen === true);
+    // svelte-ignore state_referenced_locally
+    let toolPanelTab = $state(props.toolPanelDefaultTab ?? "columns");
     const toolPanelEnabled = $derived(props.toolPanel === true);
     // Every column (including hidden ones) in the user's current order, so the
     // panel can toggle/reorder anything. Group columns are flagged live.
@@ -1053,6 +1177,7 @@ export function createSvGridController(props) {
         if (isFirstRender)
             return;
         selectionRange = { anchor: null, focus: null };
+        selectionRanges = [];
         editingCell = null;
         if (scrollContainer) {
             scrollContainer.scrollTop = 0;
@@ -1218,7 +1343,16 @@ export function createSvGridController(props) {
             return null;
         const rowNumberWidth = showRowNumbersEffective ? rowNumberColumnWidth : 0;
         const selectionWidth = showRowSelectionEffective ? selectionColumnWidth : 0;
-        const target = (scrollContainer?.clientWidth ?? 0) - rowNumberWidth - selectionWidth;
+        // Reserve the custom vertical scrollbar's width when it's visible. It
+        // overlays the right 16px of the viewport (absolute, z-index 40) and
+        // does NOT shrink clientWidth, so without this the last fitted column
+        // slides under it and its right-aligned content (e.g. a number column)
+        // is hidden behind the opaque scrollbar.
+        const scrollbarWidth = hasVerticalOverflow ? 16 : 0;
+        const target = (scrollContainer?.clientWidth ?? 0) -
+            rowNumberWidth -
+            selectionWidth -
+            scrollbarWidth;
         if (target <= 0)
             return null;
         // Split base widths into pinned (user-resized) and scalable.
@@ -1322,7 +1456,9 @@ export function createSvGridController(props) {
         return map;
     });
     const columnMenuFacetValues = $derived.by(() => {
-        const columnId = filterMenuFor;
+        // The funnel popover drives via `filterMenuFor`; the column menu's Filter
+        // tab drives via `columnMenuFor`. Support whichever is open.
+        const columnId = filterMenuFor ?? columnMenuFor;
         if (!columnId)
             return [];
         const column = allColumns.find((entry) => entry.id === columnId);
@@ -1393,6 +1529,8 @@ export function createSvGridController(props) {
         set scrollSyncRaf(v) { scrollSyncRaf = v; },
         get selectionRange() { return selectionRange; },
         set selectionRange(v) { selectionRange = v; },
+        get selectionRanges() { return selectionRanges; },
+        set selectionRanges(v) { selectionRanges = v; },
         get isDraggingSelection() { return isDraggingSelection; },
         set isDraggingSelection(v) { isDraggingSelection = v; },
         get fillDrag() { return fillDrag; },
@@ -1401,6 +1539,8 @@ export function createSvGridController(props) {
         set activeAtPointerDown(v) { activeAtPointerDown = v; },
         get editingCell() { return editingCell; },
         set editingCell(v) { editingCell = v; },
+        get fullRowEdit() { return fullRowEdit; },
+        set fullRowEdit(v) { fullRowEdit = v; },
         get editedCellValues() { return editedCellValues; },
         set editedCellValues(v) { editedCellValues = v; },
         get UNDO_LIMIT() { return UNDO_LIMIT; },
@@ -1453,6 +1593,8 @@ export function createSvGridController(props) {
         get DATE_OPERATORS() { return DATE_OPERATORS; },
         get CHECKBOX_OPERATORS() { return CHECKBOX_OPERATORS; },
         get columnMenuFor() { return columnMenuFor; },
+        get columnMenuTab() { return columnMenuTab; },
+        set columnMenuTab(v) { columnMenuTab = v; },
         set columnMenuFor(v) { columnMenuFor = v; },
         get columnMenuPos() { return columnMenuPos; },
         set columnMenuPos(v) { columnMenuPos = v; },
@@ -1498,6 +1640,8 @@ export function createSvGridController(props) {
         set internalColumns(v) { internalColumns = v; },
         get hiddenColumns() { return hiddenColumns; },
         set hiddenColumns(v) { hiddenColumns = v; },
+        get toggleColumnGroup() { return toggleColumnGroup; },
+        get isColumnGroupCollapsed() { return isColumnGroupCollapsed; },
         get externalSortEnabled() { return externalSortEnabled; },
         get externalFilterEnabled() { return externalFilterEnabled; },
         get passthroughSortedRowModel() { return passthroughSortedRowModel; },
@@ -1519,6 +1663,20 @@ export function createSvGridController(props) {
         set colDropOnId(v) { colDropOnId = v; },
         get colDropSide() { return colDropSide; },
         set colDropSide(v) { colDropSide = v; },
+        get rowDragActive() { return rowDragActive; },
+        set rowDragActive(v) { rowDragActive = v; },
+        get rowDropIndex() { return rowDropIndex; },
+        set rowDropIndex(v) { rowDropIndex = v; },
+        get rowDropSide() { return rowDropSide; },
+        set rowDropSide(v) { rowDropSide = v; },
+        get onRowDragStart() { return onRowDragStart; },
+        get onRowDragOver() { return onRowDragOver; },
+        get onRowDragLeave() { return onRowDragLeave; },
+        get onRowDrop() { return onRowDrop; },
+        get onRowsContainerDragOver() { return onRowsContainerDragOver; },
+        get onRowsContainerDrop() { return onRowsContainerDrop; },
+        get onRowDragEnd() { return onRowDragEnd; },
+        get broadcastAlignedScroll() { return broadcastAlignedScroll; },
         get getCurrentColumnOrder() { return getCurrentColumnOrder; },
         get emitColumnOrder() { return emitColumnOrder; },
         get setColumnOrderInternal() { return setColumnOrderInternal; },
@@ -1554,6 +1712,8 @@ export function createSvGridController(props) {
         get statusBarStats() { return statusBarStats; },
         get toolPanelOpen() { return toolPanelOpen; },
         set toolPanelOpen(v) { toolPanelOpen = v; },
+        get toolPanelTab() { return toolPanelTab; },
+        set toolPanelTab(v) { toolPanelTab = v; },
         get toolPanelEnabled() { return toolPanelEnabled; },
         get toolPanelColumns() { return toolPanelColumns; },
         get toolPanelHeaderLabel() { return toolPanelHeaderLabel; },
@@ -1636,6 +1796,7 @@ export function createSvGridController(props) {
         get extendSelection() { return extendSelection; },
         get isCellInSelectedRange() { return isCellInSelectedRange; },
         get getCellRangeEdges() { return getCellRangeEdges; },
+        get getSelectionRects() { return getSelectionRects; },
         get fillHandleCell() { return fillHandleCell; },
         get isInFillPreview() { return isInFillPreview; },
         get findColumnById() { return findColumnById; },
@@ -1654,9 +1815,18 @@ export function createSvGridController(props) {
         get onCellClick() { return onCellClick; },
         get emitCellDoubleClick() { return emitCellDoubleClick; },
         get copySelectionToClipboard() { return copySelectionToClipboard; },
+        get cutSelectionToClipboard() { return cutSelectionToClipboard; },
+        get pasteFromClipboard() { return pasteFromClipboard; },
+        get onGridPaste() { return onGridPaste; },
         get clearSelectedCells() { return clearSelectedCells; },
         get onCellDoubleClick() { return onCellDoubleClick; },
         get startEditingWithChar() { return startEditingWithChar; },
+        get startEditing() { return startEditing; },
+        get stopEditing() { return stopEditing; },
+        get startFullRowEdit() { return startFullRowEdit; },
+        get setFullRowDraft() { return setFullRowDraft; },
+        get commitFullRowEdit() { return commitFullRowEdit; },
+        get cancelFullRowEdit() { return cancelFullRowEdit; },
         get saveEditingCell() { return saveEditingCell; },
         get applyHistoryStep() { return applyHistoryStep; },
         get updateEditingCellValue() { return updateEditingCellValue; },
@@ -1723,10 +1893,25 @@ export function createSvGridController(props) {
     const { computeSummaries, hasRenderedColumn } = createSummaries(ctx);
     const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus(ctx);
     const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender(ctx);
-    const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, focusOnMount, onCellDoubleClick, pasteFromClipboard } = createEditing(ctx);
-    const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, isInFillPreview, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection(ctx);
+    const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste } = createEditing(ctx);
+    const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection(ctx);
     const { cellPinStyle, isColumnPinned, getCurrentColumnOrder, emitColumnOrder, setColumnOrderInternal, applyColumnDrop, onColumnHeaderDragStart, onColumnHeaderDragOver, onColumnHeaderDragLeave, onColumnHeaderDrop, onColumnHeaderDragEnd, pinColumnLeft, pinColumnRight, unpinColumn, toggleColumnVisibleInPanel, moveColumnInPanel, toggleGroupInPanel, getColumnBaseWidth, getColumnWidth, startColumnResize, onColumnResizeMove, endColumnResize, measureText, autosizeColumn, autosizeAllColumns, resetColumns } = createColumns(ctx);
+    const { onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowsContainerDragOver, onRowsContainerDrop, onRowDragEnd } = createRowDrag(ctx);
+    const { register: registerAlignedGrid, broadcastScroll: broadcastAlignedScroll, broadcastWidths: broadcastAlignedWidths } = createAlignedGrids(ctx);
     const { buildApi } = createGridApi(ctx);
     const { readCellRaw, writeCellRaw, applyFillPattern, clearSelectedCellValues, startFillDrag, onFillPointerMove, onFillPointerUp, toggleBooleanCell, copySelectionToClipboard, clearSelectedCells, cutSelectionToClipboard } = createClipboard(ctx);
+    // Aligned grids: register in the shared group on mount, and mirror column
+    // resizes to peers whenever columnWidths changes. Horizontal-scroll mirroring
+    // is driven from onBodyScroll (via ctx.broadcastAlignedScroll).
+    $effect(() => {
+        if (props.alignedGridGroup == null)
+            return;
+        return registerAlignedGrid();
+    });
+    $effect(() => {
+        // Track columnWidths reactively, then broadcast to aligned peers.
+        void columnWidths;
+        broadcastAlignedWidths();
+    });
     return ctx;
 }