@svgrid/grid 2.1.22 → 2.2.0

package/dist/SvGrid.controller.svelte.d.ts

@@ -121,6 +121,11 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     filterMenuPos: MenuPosition;
     operatorMenuFor: string | null;
     operatorMenuPos: MenuPosition;
+    inSuggestFor: string | null;
+    inSuggestPos: MenuPosition;
+    inSuggestQuery: string;
+    readonly inSuggestValues: string[];
+    readonly facetValuesForColumn: (columnId: string) => Array<string>;
     chooseColumnsPos: MenuPosition | null;
     contextMenuFor: ContextMenuTarget<TData> | null;
     contextMenuPos: MenuPosition;
@@ -155,6 +160,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     internalData: readonly TData[];
     internalColumns: ColumnDef<TFeatures, TData>[];
     hiddenColumns: Record<string, boolean>;
+    readonly declaredHiddenColumns: Record<string, boolean>;
     readonly toggleColumnGroup: (groupId: string) => void;
     readonly isColumnGroupCollapsed: (groupId: string) => boolean;
     readonly externalSortEnabled: boolean;
@@ -188,6 +194,26 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
             collapsed: boolean;
         }[];
     }[];
+    readonly groupHeaderRowsWindowed: {
+        id: string;
+        cells: {
+            key: string;
+            label: string;
+            colSpan: number;
+            widthPx: number;
+            /** First leaf-column index this cell spans. */
+            firstLeafIndex: number;
+            /** True for the placeholder cells that fill the column above an
+             *  early-bottoming leaf (e.g. the row-label column to the left of a
+             *  multi-level value tree). They render as empty cells so the
+             *  layout stays aligned without showing duplicate labels. */
+            isPlaceholder: boolean;
+            /** Set when this group cell has a collapse toggle. */
+            groupId?: string;
+            collapsible: boolean;
+            collapsed: boolean;
+        }[];
+    }[];
     readonly pinnedOffsets: {
         left: Record<string, number>;
         right: Record<string, number>;
@@ -435,7 +461,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly computePinnedCellClass: (rowData: TData, column: Column<TData>) => string;
     readonly isRowSelected: (rowId: string) => boolean;
     readonly toggleRowSelectionById: (rowId: string) => void;
-    readonly headerSelectionState: "all" | "none" | "some";
+    readonly headerSelectionState: "none" | "all" | "some";
     readonly toggleSelectAllRows: () => void;
     userHasActivatedCell: boolean;
     readonly setActiveCell: (rowIndex: number, colIndex: number) => void;
@@ -552,6 +578,11 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly openColumnMenu: (event: MouseEvent, columnId: string) => void;
     readonly openFilterMenu: (event: MouseEvent, columnId: string) => void;
     readonly openOperatorMenu: (event: MouseEvent, columnId: string) => void;
+    readonly openInSuggest: (anchor: HTMLElement, columnId: string) => void;
+    readonly closeInSuggest: () => void;
+    readonly addFilterToken: (columnId: string, token: string) => void;
+    readonly removeFilterToken: (columnId: string, token: string) => void;
+    readonly toggleFilterToken: (columnId: string, token: string) => void;
     readonly sortColumnFromMenu: (columnId: string, desc: boolean) => void;
     readonly clearColumnSort: (columnId: string) => void;
     readonly groupByColumnFromMenu: (columnId: string) => void;

package/dist/SvGrid.controller.svelte.js

@@ -1,7 +1,7 @@
 import { applyExcelFilter, normalizeForFilter, createColumnVirtualizer, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createSvelteVirtualizer, createSortedRowModel, createSvGrid, getGridCellDomId, rowsToChartSpec, sortFns, } from "./index";
 import { createRowScrollScaling, resolveMaxDomHeight, } from "./virtualization/scroll-scaling";
 import "./sv-grid-scrollbar";
-import { computeColumnStat, formatsNeedingStats, } from "./conditional-formatting";
+import { computeColumnStat, formatsNeedingStats, formatNeedsStats, } from "./conditional-formatting";
 import { rawToNumber, } from "./SvGrid.helpers";
 import { createFeatures } from "./features";
 import { createScrollSync, } from "./scroll-sync";
@@ -41,9 +41,12 @@ const MAX_DOM_SCROLL_HEIGHT_FALLBACK = 8000000;
  * 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.
+ * DPR clamping for free. Cached, but re-probed when the device pixel ratio
+ * changes (browser zoom) since the physical-pixel cap moves with it (#85).
  */
 let detectedMaxDomHeight = null;
+let detectedAtDpr = 0;
+const currentDpr = () => (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1);
 /**
  * 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
@@ -81,7 +84,7 @@ function getMaxDomScrollHeight() {
             return forced;
         }
     }
-    if (detectedMaxDomHeight != null)
+    if (detectedMaxDomHeight != null && detectedAtDpr === currentDpr())
         return detectedMaxDomHeight;
     if (typeof document === "undefined" || !document.body) {
         return MAX_DOM_SCROLL_HEIGHT_FALLBACK;
@@ -107,6 +110,7 @@ function getMaxDomScrollHeight() {
     catch {
         detectedMaxDomHeight = MAX_DOM_SCROLL_HEIGHT_FALLBACK;
     }
+    detectedAtDpr = currentDpr();
     return detectedMaxDomHeight;
 }
 /**
@@ -258,6 +262,12 @@ export function createSvGridController(props) {
     let filterMenuPos = $state({ x: 0, y: 0 });
     let operatorMenuFor = $state(null);
     let operatorMenuPos = $state({ x: 0, y: 0 });
+    // `in` / `notIn` value-suggestions dropdown: the column whose chip input is
+    // active, its anchor position, and the current typed query (for filtering
+    // the distinct-value list as the user types).
+    let inSuggestFor = $state(null);
+    let inSuggestPos = $state({ x: 0, y: 0 });
+    let inSuggestQuery = $state("");
     let chooseColumnsPos = $state(null);
     let contextMenuFor = $state(null);
     let contextMenuPos = $state({ x: 0, y: 0 });
@@ -366,6 +376,10 @@ export function createSvGridController(props) {
     let internalColumns = $state.raw(resolveCols(props.columns));
     // svelte-ignore state_referenced_locally
     let hiddenColumns = $state(initialHiddenColumns(props.columns));
+    // The columns declared `visible: false` in the ColumnDefs. Kept separately so
+    // applying a saved view (setState) can re-seed from these and never un-hide a
+    // column the app declared hidden (#54).
+    const declaredHiddenColumns = $derived(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).
@@ -680,6 +694,11 @@ export function createSvGridController(props) {
         const left = {};
         let leftAcc = rowNumberWidth + selectionWidth;
         for (const id of effectivePinning.left) {
+            // Hidden pinned columns don't render, so they must contribute neither an
+            // offset entry nor width - otherwise the next visible pinned column is
+            // pushed out by a phantom gap (#75).
+            if (hiddenColumns[id] || hiddenByGroupCollapse[id])
+                continue;
             left[id] = leftAcc;
             leftAcc += getColumnWidth(id);
         }
@@ -689,6 +708,8 @@ export function createSvGridController(props) {
             const id = effectivePinning.right[i];
             if (!id)
                 continue;
+            if (hiddenColumns[id] || hiddenByGroupCollapse[id])
+                continue;
             right[id] = rightAcc;
             rightAcc += getColumnWidth(id);
         }
@@ -717,23 +738,33 @@ export function createSvGridController(props) {
         const formats = props.conditionalFormats;
         if (!formats?.length || !formatsNeedingStats(formats))
             return map;
+        // `visible` (default): the currently displayed rows (filtered + paged),
+        // so the heat map reflects what the user is looking at. `all`: the full
+        // unfiltered dataset, for a stable scale independent of filter/paging.
+        const scanAll = props.conditionalStatScope === "all";
         for (const column of allColumns) {
-            const needs = formats.some((f) => (f.type === "colorScale" || f.type === "dataBar") &&
-                (!f.columns || f.columns.includes(column.id)));
+            const needs = formats.some((f) => formatNeedsStats(f) && (!f.columns || f.columns.includes(column.id)));
             if (!needs)
                 continue;
             const def = column.columnDef;
             const fieldFn = def.fieldFn;
             const field = def.field;
-            const stat = computeColumnStat((function* () {
-                for (const row of allRows) {
-                    yield fieldFn
-                        ? fieldFn(row.original)
-                        : field
-                            ? row.original[field]
-                            : row.getCellValueByColumnId(column.id);
-                }
-            })());
+            const stat = computeColumnStat(scanAll
+                ? (function* () {
+                    // Raw data objects (unfiltered); field/fieldFn only - no Row wrapper.
+                    for (const obj of internalData) {
+                        yield fieldFn ? fieldFn(obj) : field ? obj[field] : undefined;
+                    }
+                })()
+                : (function* () {
+                    for (const row of allRows) {
+                        yield fieldFn
+                            ? fieldFn(row.original)
+                            : field
+                                ? row.original[field]
+                                : row.getCellValueByColumnId(column.id);
+                    }
+                })());
             if (stat)
                 map.set(column.id, stat);
         }
@@ -785,7 +816,7 @@ export function createSvGridController(props) {
         }
         // A single condition is "active" if it has the value(s) it needs.
         const condActive = (op, value, valueTo) => {
-            if (op === "isBlank")
+            if (op === "isBlank" || op === "isNotBlank")
                 return true;
             if (op === "between")
                 return value.trim().length > 0 && (valueTo ?? "").trim().length > 0;
@@ -890,11 +921,15 @@ export function createSvGridController(props) {
         const callback = props.onRowSelectionChange;
         if (!callback)
             return;
-        const data = internalData;
+        // Resolve selected rows by row id (not numeric index) so this is correct
+        // with a custom getRowId and after sorting (#45). Iterate the full filtered
+        // model - not the paginated slice - so selections on other pages are kept.
         const selectedRows = [];
-        for (let i = 0; i < data.length; i++) {
-            if (rowSelectionState[String(i)])
-                selectedRows.push(data[i]);
+        for (const row of allRowsBeforePagination) {
+            if (isGroupRow(row))
+                continue;
+            if (rowSelectionState[row.id])
+                selectedRows.push(row.original);
         }
         callback(rowSelectionState, selectedRows);
     });
@@ -1389,7 +1424,7 @@ export function createSvGridController(props) {
             return;
         const menuEntries = Object.entries(filterMenuValues)
             .filter(([, f]) => {
-            if (f.operator === "isBlank")
+            if (f.operator === "isBlank" || f.operator === "isNotBlank")
                 return true;
             if (f.operator === "between") {
                 return f.value.trim().length > 0 && (f.valueTo ?? "").trim().length > 0;
@@ -1586,6 +1621,46 @@ export function createSvGridController(props) {
     const columnWindowStart = $derived.by(() => renderedColumnItems[0]?.start ?? 0);
     const columnWindowEnd = $derived.by(() => renderedColumnItems[renderedColumnItems.length - 1]?.end ?? 0);
     const columnWindowRightSpacer = $derived.by(() => Math.max(totalColumnWidth - columnWindowEnd, 0));
+    /**
+     * `groupHeaderRows` clipped to the rendered column window. The multi-level
+     * group-header band must virtualize in lock-step with the leaf-header row
+     * and the body: otherwise a group cell spanning off-window leaves renders a
+     * header over empty space (its cells were dropped by body virtualization),
+     * so wide grouped/pivot grids show group headers with no cells beneath.
+     *
+     * We reuse each cell's `firstLeafIndex` + `colSpan` (leaf-index range) to
+     * clip against the rendered leaf window, dropping fully-off-window cells and
+     * shrinking partially-visible ones to their visible leaves. The template
+     * frames the result with the SAME left/right spacers the leaf row uses, so
+     * everything stays pixel-aligned. When virtualization is off this is a
+     * pass-through.
+     */
+    const groupHeaderRowsWindowed = $derived.by(() => {
+        const base = groupHeaderRows;
+        if (!columnVirtualizationEnabled || base.length === 0)
+            return base;
+        const items = renderedColumnItems;
+        if (items.length === 0)
+            return base;
+        const winFirst = items[0].index;
+        const winLast = items[items.length - 1].index; // inclusive
+        return base.map((row) => {
+            const cells = [];
+            for (const cell of row.cells) {
+                const start = cell.firstLeafIndex;
+                const end = start + cell.colSpan; // exclusive
+                const from = Math.max(start, winFirst);
+                const to = Math.min(end, winLast + 1);
+                if (to <= from)
+                    continue; // cell is entirely outside the window
+                let widthPx = 0;
+                for (let i = from; i < to; i += 1)
+                    widthPx += getColumnWidth(allColumns[i].id);
+                cells.push({ ...cell, colSpan: to - from, widthPx, firstLeafIndex: from });
+            }
+            return { ...row, cells };
+        });
+    });
     const activeCell = $derived.by(() => {
         gridStateVersion;
         return (grid.getState().activeCell ?? { rowIndex: 0, colIndex: 0, cellId: null });
@@ -1848,7 +1923,9 @@ export function createSvGridController(props) {
         // Narrow responsive mode pans instead of scaling, so skip fit scaling.
         if (!props.fitColumns || isNarrowResponsive)
             return null;
-        const cols = grid.getAllColumns().filter((c) => !hiddenColumns[c.id]);
+        // Exclude columns hidden by a collapsed group too (#57) - otherwise their
+        // widths stay in the fit distribution and leave a blank gap at the edge.
+        const cols = grid.getAllColumns().filter((c) => !hiddenColumns[c.id] && !hiddenByGroupCollapse[c.id]);
         if (!cols.length)
             return null;
         const rowNumberWidth = showRowNumbersEffective ? rowNumberColumnWidth : 0;
@@ -1993,10 +2070,14 @@ export function createSvGridController(props) {
             cancelled = true;
         };
     });
-    const columnMenuFacetValues = $derived.by(() => {
-        // The funnel popover drives via `filterMenuFor`; the column menu's Filter
-        // tab drives via `columnMenuFor`. Support whichever is open.
-        const columnId = filterMenuFor ?? columnMenuFor;
+    /**
+     * Distinct values for a column, for the set-filter checklist and the
+     * `in` / `notIn` suggestions dropdown. Server-provided values win; numeric /
+     * date columns with many values collapse into range buckets; otherwise the
+     * distinct raw values are collected and sorted naturally. Callable for any
+     * column id (not just the open menu) so the filter row can drive it too.
+     */
+    function facetValuesForColumn(columnId) {
         if (!columnId)
             return [];
         // Server-provided distinct values win (fetched + cached above).
@@ -2015,6 +2096,14 @@ export function createSvGridController(props) {
             seen.add(String(getColumnAccessorValue(rowData, column) ?? ""));
         }
         return Array.from(seen).sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+    }
+    const columnMenuFacetValues = $derived.by(() => {
+        // 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 [];
+        return facetValuesForColumn(columnId);
     });
     const columnMenuVisibleFacets = $derived.by(() => {
         const query = columnMenuSearch.trim().toLowerCase();
@@ -2022,6 +2111,20 @@ export function createSvGridController(props) {
             return columnMenuFacetValues;
         return columnMenuFacetValues.filter((value) => value.toLowerCase().includes(query));
     });
+    // Distinct values offered in the `in` / `notIn` suggestions dropdown for the
+    // active chip input, narrowed by whatever the user has typed. Capped so a
+    // high-cardinality column can't render thousands of rows into the popover.
+    const IN_SUGGEST_LIMIT = 200;
+    const inSuggestValues = $derived.by(() => {
+        if (!inSuggestFor)
+            return [];
+        const query = inSuggestQuery.trim().toLowerCase();
+        const all = facetValuesForColumn(inSuggestFor);
+        const matched = query
+            ? all.filter((value) => value.toLowerCase().includes(query))
+            : all;
+        return matched.slice(0, IN_SUGGEST_LIMIT);
+    });
     // Fire onApiReady exactly once when the grid is first ready. Wrapping in
     // an effect that tracks `props.onApiReady` was racy - every parent render
     // creates a new inline arrow, the effect re-fired, and any synchronous
@@ -2151,6 +2254,14 @@ export function createSvGridController(props) {
         set operatorMenuFor(v) { operatorMenuFor = v; },
         get operatorMenuPos() { return operatorMenuPos; },
         set operatorMenuPos(v) { operatorMenuPos = v; },
+        get inSuggestFor() { return inSuggestFor; },
+        set inSuggestFor(v) { inSuggestFor = v; },
+        get inSuggestPos() { return inSuggestPos; },
+        set inSuggestPos(v) { inSuggestPos = v; },
+        get inSuggestQuery() { return inSuggestQuery; },
+        set inSuggestQuery(v) { inSuggestQuery = v; },
+        get inSuggestValues() { return inSuggestValues; },
+        get facetValuesForColumn() { return facetValuesForColumn; },
         get chooseColumnsPos() { return chooseColumnsPos; },
         set chooseColumnsPos(v) { chooseColumnsPos = v; },
         get contextMenuFor() { return contextMenuFor; },
@@ -2183,6 +2294,7 @@ export function createSvGridController(props) {
         set internalColumns(v) { internalColumns = v; },
         get hiddenColumns() { return hiddenColumns; },
         set hiddenColumns(v) { hiddenColumns = v; },
+        get declaredHiddenColumns() { return declaredHiddenColumns; },
         get toggleColumnGroup() { return toggleColumnGroup; },
         get isColumnGroupCollapsed() { return isColumnGroupCollapsed; },
         get externalSortEnabled() { return externalSortEnabled; },
@@ -2197,6 +2309,7 @@ export function createSvGridController(props) {
         get allColumns() { return allColumns; },
         get headerGroups() { return headerGroups; },
         get groupHeaderRows() { return groupHeaderRows; },
+        get groupHeaderRowsWindowed() { return groupHeaderRowsWindowed; },
         get pinnedOffsets() { return pinnedOffsets; },
         get cellPinStyle() { return cellPinStyle; },
         get isColumnPinned() { return isColumnPinned; },
@@ -2545,6 +2658,11 @@ export function createSvGridController(props) {
         get openColumnMenu() { return openColumnMenu; },
         get openFilterMenu() { return openFilterMenu; },
         get openOperatorMenu() { return openOperatorMenu; },
+        get openInSuggest() { return openInSuggest; },
+        get closeInSuggest() { return closeInSuggest; },
+        get addFilterToken() { return addFilterToken; },
+        get removeFilterToken() { return removeFilterToken; },
+        get toggleFilterToken() { return toggleFilterToken; },
         get sortColumnFromMenu() { return sortColumnFromMenu; },
         get clearColumnSort() { return clearColumnSort; },
         get groupByColumnFromMenu() { return groupByColumnFromMenu; },
@@ -2571,12 +2689,12 @@ export function createSvGridController(props) {
     const { showTooltipFor, hideTooltip, flushScheduledScrollSync, scheduleScrollSync, onBodyScroll } = createScrollSync(ctx);
     const { onGridKeyDown, onWindowKeydown, onHeaderSortClick } = createKeyboard(ctx);
     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 { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, addFilterToken, removeFilterToken, toggleFilterToken, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openInSuggest, closeInSuggest, 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, computeCellValidity, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender(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, fillMarqueeEdges, 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 { onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowsContainerDragOver, onRowsContainerDrop, onRowDragEnd, destroyRowDrag } = 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);
@@ -2593,5 +2711,16 @@ export function createSvGridController(props) {
         void columnWidths;
         broadcastAlignedWidths();
     });
+    // Unmount teardown. Reads no reactive state, so the cleanup runs once on
+    // destroy - tearing down an in-flight column resize (its document pointer
+    // listeners, #58), a pending tooltip timer (#64), and any managed row drag
+    // this grid still owns (#68). Each of these is a no-op when idle.
+    $effect(() => {
+        return () => {
+            endColumnResize();
+            hideTooltip();
+            destroyRowDrag();
+        };
+    });
     return ctx;
 }

package/dist/SvGrid.css

@@ -485,13 +485,28 @@
   justify-content: flex-end;
 }
 /* The custom vertical scrollbar overlays the right 16px of the viewport
-   (absolute, z-index 40). Nudge the last column's right-aligned content in by
-   that width when the scrollbar is visible, so numbers/values aren't hidden
-   underneath it. Left/center content already clears the right edge. */
-.sv-grid-has-vscroll .sv-grid-table tr > :last-child.sv-grid-cell[data-align="right"],
-.sv-grid-has-vscroll .sv-grid-table tr > :last-child.sv-grid-column[data-align="right"] {
+   (absolute, z-index 40) and does NOT shrink the scroll container's
+   clientWidth. Two cases keep the last column clear of it:
+
+   1. No horizontal overflow (content fits, nothing to scroll): nudge the last
+      column's right-aligned content in by the scrollbar width so numbers
+      aren't hidden underneath it. Left/center content already clears it.
+   2. Horizontal overflow: there's nothing to nudge (you scroll to the end and
+      the last 16px sit under the bar with no room left). Instead reserve a
+      trailing gutter on the scroll container so you can scroll the last column
+      fully out from under the overlay. See `.sv-grid-has-vscroll.sv-grid-has-hscroll`. */
+.sv-grid-has-vscroll:not(.sv-grid-has-hscroll) .sv-grid-table tr > :last-child.sv-grid-cell[data-align="right"],
+.sv-grid-has-vscroll:not(.sv-grid-has-hscroll) .sv-grid-table tr > :last-child.sv-grid-column[data-align="right"] {
   padding-right: calc(var(--sg-cell-px, 7px) + 16px);
 }
+/* Case 2: reserve the overlay scrollbar's width as end-of-scroll space so the
+   final column can be scrolled clear of the vertical scrollbar. Modern browsers
+   include a scroll container's inline-end padding in its scrollable overflow;
+   the custom scrollbars are siblings of this container, so their layout is
+   unaffected. */
+.sv-grid-container.sv-grid-has-vscroll.sv-grid-has-hscroll {
+  padding-right: 16px;
+}
 .sv-grid-column[data-align="center"] .sv-grid-header-sort {
   justify-content: center;
 }
@@ -857,6 +872,11 @@
   flex-direction: row;
   align-items: center;
   gap: 4px;
+  box-sizing: border-box;
+  /* Inset the operator button + input from the cell edges so the filter row
+     lines up with the header label / body text (same --sg-cell-px gutter) and
+     isn't cramped against the top/side borders. */
+  padding: 5px var(--sg-filter-cell-px, var(--sg-cell-px, 7px));
 }
 
 .sv-grid-filter-operator {
@@ -871,6 +891,100 @@
   box-sizing: border-box;
 }
 
+/* Invalid regex pattern: flag the input so the user knows the half-typed
+   pattern isn't being applied (it matches nothing until it compiles). */
+.sv-grid-filter-value.sv-grid-filter-value-invalid,
+.sv-grid-tp-filter-input.sv-grid-filter-value-invalid {
+  border-color: var(--sg-danger, #e5484d) !important;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-danger, #e5484d) 45%, transparent);
+}
+
+/* In / Not-in chip (token) input: chips + a flex-growing text box share one
+   bordered control that reads like a single field. */
+.sv-grid-filter-chips {
+  flex: 3 1 0;
+  min-width: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 4px;
+  border: 1px solid var(--sg-input-border, #8794a8);
+  border-radius: 4px;
+  background: var(--sg-input-bg, #fff);
+  overflow: hidden;
+}
+
+/* A few chips stay visible; the rest collapse into a non-wrapping "+N" pill
+   that opens the value dropdown (select / unselect). */
+.sv-grid-filter-chip .sv-grid-filter-chip-label {
+  max-width: 84px;
+}
+.sv-grid-filter-chip-more {
+  flex: none;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--sg-text, inherit);
+}
+.sv-grid-filter-chip-more:hover {
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 26%, transparent);
+}
+.sv-grid-filter-chips:focus-within {
+  border-color: var(--sg-accent, #0b63f3);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-accent, #0b63f3) 45%, transparent);
+}
+.sv-grid-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 120px;
+  padding: 0 2px 0 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 16px;
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 16%, transparent);
+  color: var(--sg-text, inherit);
+}
+.sv-grid-filter-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sv-grid-filter-chip-x {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+.sv-grid-filter-chip-x:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 28%, transparent);
+}
+.sv-grid-filter-chips .sv-grid-filter-chip-input {
+  flex: 1 1 14px;
+  min-width: 14px;
+  border: 0 !important;
+  padding: 0 2px;
+  background: transparent;
+  box-shadow: none !important;
+  outline: none;
+}
+
 /* Brief glow used when the user clicks the funnel icon while the grid
    is in row-filter mode - draws attention to where the input is so
    the click isn't a no-op. */
@@ -1220,6 +1334,22 @@ select.sv-grid-fr-editor {
   width: 100%;
   font-size: 0.8125rem;
 }
+/* The global "Filter all rows" search: a labelled input bar above the grid. Ships
+   styled so it never renders as a bare, unpositioned text label + input. */
+.sv-grid-global-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 0.8125rem;
+  font-weight: 550;
+  color: var(--sg-muted, #64748b);
+}
+.sv-grid-global-filter input {
+  height: 30px;
+  min-width: 220px;
+  font-size: 0.8125rem;
+}
 .sv-grid-column-filter::placeholder,
 .sv-grid-filter-value::placeholder,
 .sv-grid-menu-search::placeholder,
@@ -1752,6 +1882,38 @@ select.sv-grid-fr-editor {
   background: var(--sg-row-hover-bg, #eef2f8);
 }
 
+/* In / Not-in value-suggestions dropdown (anchored under the chip input).
+   Defined AFTER .sv-grid-menu so its tighter sizing wins - the element
+   carries both classes. Compact rows keep a long value list scannable. */
+.sv-grid-menu.sv-grid-in-suggest {
+  min-width: 140px;
+  max-width: 260px;
+  max-height: 220px;
+  overflow-y: auto;
+  font-size: 12px;
+}
+.sv-grid-in-suggest-item {
+  gap: 6px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  line-height: 1.4;
+}
+.sv-grid-in-suggest-item[aria-selected="true"] {
+  color: var(--sg-accent, #0b63f3);
+  font-weight: 600;
+}
+.sv-grid-in-suggest-check {
+  flex: none;
+  width: 12px;
+  text-align: center;
+  color: var(--sg-accent, #0b63f3);
+}
+.sv-grid-in-suggest-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .sv-grid-menu-item[aria-checked="true"] {
   background: var(--sg-selection-bg, #eaf2ff);
   color: var(--sg-accent, #0b63f3);
@@ -2376,6 +2538,32 @@ select.sv-grid-fr-editor {
   color: var(--sg-fg, #101828);
 }
 
+/* Placeholder shown when `scheduler` is set but the enterprise renderer that
+   powers the calendar view has not been registered. */
+.sv-grid-scheduler-upsell {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+  text-align: left;
+  border: 1px dashed var(--sg-border, #e4e7ec);
+  border-radius: var(--sg-radius, 8px);
+  background: color-mix(in srgb, var(--sg-fg, #1f2937) 5%, transparent);
+  color: color-mix(in srgb, var(--sg-fg, #101828) 70%, transparent);
+}
+.sv-grid-scheduler-upsell strong { font-size: 0.95rem; }
+.sv-grid-scheduler-upsell p { margin: 0; font-size: 0.85rem; max-width: 42ch; }
+.sv-grid-scheduler-upsell code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.82em;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+}
+
 /* ===================================================================
    Integrated chart panel (the `charting` prop)
    =================================================================== */