@alaarab/ogrid-vue 2.0.22 → 2.1.0

package/dist/esm/components/createDataGridTable.js

@@ -29,6 +29,8 @@ export function createDataGridTable(ui) {
             const onWrapperMousedown = (e) => { lastMouseShift.value = e.shiftKey; };
             const onContextmenu = (e) => e.preventDefault();
             const stopPropagation = (e) => e.stopPropagation();
+            // Pre-compute header rows so buildHeaderRows is not called on every render
+            const headerRowsComputed = computed(() => buildHeaderRows(propsRef.value.columns, propsRef.value.visibleColumns));
             // Pre-compute per-column layout metadata so it's only recalculated when
             // column config, sizing, pinning, or measured widths change — not on every
             // render (parity with React's columnMeta useMemo).
@@ -111,7 +113,7 @@ export function createDataGridTable(ui) {
                 const ariaLabelledBy = p['aria-labelledby'];
                 const fitToContent = layoutMode === 'content';
                 const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
-                const headerRows = buildHeaderRows(p.columns, p.visibleColumns);
+                const headerRows = headerRowsComputed.value;
                 const editCallbacks = { commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit };
                 const interactionHandlers = { handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu };
                 const handleSingleRowClick = (e) => {
@@ -316,6 +318,8 @@ export function createDataGridTable(ui) {
                                                         class: 'ogrid-column-group-header',
                                                     }, cell.label);
                                                 }
+                                                if (!cell.columnDef)
+                                                    return null;
                                                 const col = cell.columnDef;
                                                 const { classes: headerClasses, style: headerStyle } = getHeaderClassAndStyle(col);
                                                 return h('th', {

package/dist/esm/components/createOGrid.js

@@ -115,7 +115,8 @@ function renderSideBar(sb) {
                         h('div', { style: { fontWeight: '500', marginBottom: '4px', fontSize: '13px' } }, col.name),
                     ];
                     if (col.filterType === 'text') {
-                        const currentVal = sb.filters[filterKey]?.type === 'text' ? sb.filters[filterKey].value : '';
+                        const filterEntry = sb.filters[filterKey];
+                        const currentVal = filterEntry?.type === 'text' ? filterEntry.value : '';
                         groupChildren.push(h('input', {
                             type: 'text',
                             value: currentVal,
@@ -131,13 +132,15 @@ function renderSideBar(sb) {
                     if (col.filterType === 'multiSelect') {
                         const options = sb.filterOptions[filterKey] ?? [];
                         const msChildren = options.map((opt) => {
-                            const selected = sb.filters[filterKey]?.type === 'multiSelect' ? sb.filters[filterKey].value.includes(opt) : false;
+                            const msFilter = sb.filters[filterKey];
+                            const selected = msFilter?.type === 'multiSelect' ? msFilter.value.includes(opt) : false;
                             return h('label', { key: opt, style: { display: 'flex', alignItems: 'center', gap: '4px', padding: '1px 0', cursor: 'pointer', fontSize: '13px' } }, [
                                 h('input', {
                                     type: 'checkbox',
                                     checked: selected,
                                     onChange: (e) => {
-                                        const current = sb.filters[filterKey]?.type === 'multiSelect' ? sb.filters[filterKey].value : [];
+                                        const curFilter = sb.filters[filterKey];
+                                        const current = curFilter?.type === 'multiSelect' ? curFilter.value : [];
                                         const next = e.target.checked
                                             ? [...current, opt]
                                             : current.filter((v) => v !== opt);
@@ -150,7 +153,8 @@ function renderSideBar(sb) {
                         groupChildren.push(h('div', { style: { maxHeight: '120px', overflowY: 'auto' }, role: 'group', 'aria-label': `${col.name} options` }, msChildren));
                     }
                     if (col.filterType === 'date') {
-                        const existingValue = sb.filters[filterKey]?.type === 'date' ? sb.filters[filterKey].value : { from: undefined, to: undefined };
+                        const dateFilter = sb.filters[filterKey];
+                        const existingValue = dateFilter?.type === 'date' ? dateFilter.value : { from: undefined, to: undefined };
                         groupChildren.push(h('div', { style: { display: 'flex', flexDirection: 'column', gap: '4px' } }, [
                             h('label', { style: { display: 'flex', alignItems: 'center', gap: '4px', fontSize: '12px' } }, [
                                 'From:',
@@ -239,8 +243,8 @@ export function createOGrid(ui) {
         setup(props, { expose }) {
             const propsRef = computed(() => props.gridProps);
             const { dataGridProps, pagination, columnChooser, layout, api } = useOGrid(propsRef);
-            // Expose the API for parent refs
-            expose({ api: api.value });
+            // Expose the ref container so parent always gets the latest API value
+            expose({ api });
             return () => {
                 const sideBar = layout.value.sideBarProps;
                 const hasSideBar = sideBar != null;
@@ -266,7 +270,6 @@ export function createOGrid(ui) {
                     onPageChange: pagination.value.setPage,
                     onPageSizeChange: (size) => {
                         pagination.value.setPageSize(size);
-                        pagination.value.setPage(1);
                     },
                     pageSizeOptions: pagination.value.pageSizeOptions,
                     entityLabelPlural: pagination.value.entityLabelPlural,

package/dist/esm/composables/useCellSelection.js

@@ -1,4 +1,4 @@
-import { shallowRef, ref, computed, onMounted, onUnmounted } from 'vue';
+import { shallowRef, ref, isRef, onMounted, onUnmounted } from 'vue';
 import { normalizeSelectionRange, rangesEqual, computeAutoScrollSpeed } from '@alaarab/ogrid-core';
 import { useLatestRef } from './useLatestRef';
 /** DOM attribute names used for drag-range highlighting (bypasses Vue). */
@@ -12,11 +12,13 @@ const AUTO_SCROLL_INTERVAL = 16;
  */
 export function useCellSelection(params) {
     // Store latest params in a ref for stable handler references
-    const paramsRef = useLatestRef(computed(() => params));
-    const { colOffset, wrapperRef, setActiveCell } = params; // These are stable, safe to destructure
+    const paramsRef = useLatestRef(params);
+    const { wrapperRef, setActiveCell } = params; // These are stable, safe to destructure
+    const getColOffset = () => isRef(params.colOffset) ? params.colOffset.value : params.colOffset;
     const selectionRange = shallowRef(null);
     const isDragging = ref(false); // boolean primitive, ref is fine
-    let isDraggingInternal = false;
+    const isDraggingInternal = ref(false); // ref so event handlers always read current value
+    const isUnmounted = ref(false); // ref for clean unmount tracking
     let dragMoved = false;
     let dragStart = null;
     let rafId = 0;
@@ -31,6 +33,7 @@ export function useCellSelection(params) {
     const handleCellMouseDown = (e, rowIndex, globalColIndex) => {
         if (e.button !== 0)
             return;
+        const colOffset = getColOffset();
         if (globalColIndex < colOffset)
             return;
         e.preventDefault();
@@ -57,7 +60,7 @@ export function useCellSelection(params) {
             setSelectionRange(initial);
             liveDragRange = initial;
             setActiveCell({ rowIndex, columnIndex: globalColIndex });
-            isDraggingInternal = true;
+            isDraggingInternal.value = true;
             // Apply drag attrs immediately for the initial cell so the anchor styling shows
             // even before the first mousemove. This ensures instant visual feedback.
             setTimeout(() => applyDragAttrs(initial), 0);
@@ -73,10 +76,60 @@ export function useCellSelection(params) {
             endRow: rowCount.value - 1,
             endCol: visibleColCount.value - 1,
         });
-        setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+        setActiveCell({ rowIndex: 0, columnIndex: getColOffset() });
     };
     // --- Window mouse move/up for drag selection ---
+    /** Set of currently drag-marked HTMLElements — avoids O(n) full DOM scan on each frame. */
+    const markedCells = new Set();
+    /** Cell lookup index built on drag start — O(1) lookups per frame instead of querySelectorAll. */
+    let cellIndex = null;
+    /** Build cell lookup index from a single querySelectorAll scan. */
+    const buildCellIndex = () => {
+        const wrapper = wrapperRef.value;
+        if (!wrapper)
+            return;
+        cellIndex = new Map();
+        const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
+        for (let i = 0; i < cells.length; i++) {
+            const el = cells[i];
+            const r = el.getAttribute('data-row-index') ?? '';
+            const c = el.getAttribute('data-col-index') ?? '';
+            cellIndex.set(`${r},${c}`, el);
+        }
+    };
+    /** Apply styling to a single in-range cell (attrs + box-shadow). */
+    const styleCellInRange = (el, r, c, minR, maxR, minC, maxC, anchor) => {
+        if (!el.hasAttribute(DRAG_ATTR))
+            el.setAttribute(DRAG_ATTR, '');
+        const isAnchor = anchor && r === anchor.row && c === anchor.col;
+        if (isAnchor) {
+            if (!el.hasAttribute(DRAG_ANCHOR_ATTR))
+                el.setAttribute(DRAG_ANCHOR_ATTR, '');
+        }
+        else {
+            if (el.hasAttribute(DRAG_ANCHOR_ATTR))
+                el.removeAttribute(DRAG_ANCHOR_ATTR);
+        }
+        const shadows = [];
+        if (r === minR)
+            shadows.push('inset 0 2px 0 0 var(--ogrid-selection, #217346)');
+        if (r === maxR)
+            shadows.push('inset 0 -2px 0 0 var(--ogrid-selection, #217346)');
+        if (c === minC)
+            shadows.push('inset 2px 0 0 0 var(--ogrid-selection, #217346)');
+        if (c === maxC)
+            shadows.push('inset -2px 0 0 0 var(--ogrid-selection, #217346)');
+        el.style.boxShadow = shadows.length > 0 ? shadows.join(', ') : '';
+        markedCells.add(el);
+    };
+    /** Remove drag styling from a single cell. */
+    const unstyleCell = (el) => {
+        el.removeAttribute(DRAG_ATTR);
+        el.removeAttribute(DRAG_ANCHOR_ATTR);
+        el.style.boxShadow = '';
+    };
     /** Toggle DRAG_ATTR on cells to show the range highlight via CSS.
+     *  Uses a cell index Map for O(1) lookups per cell in the range instead of scanning all cells.
      *  Also sets edge box-shadows for a green border around the selection range,
      *  and marks the anchor cell with DRAG_ANCHOR_ATTR (white background). */
     const applyDragAttrs = (range) => {
@@ -88,58 +141,43 @@ export function useCellSelection(params) {
         const minC = Math.min(range.startCol, range.endCol);
         const maxC = Math.max(range.startCol, range.endCol);
         const anchor = dragStart;
-        const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
-        for (let i = 0; i < cells.length; i++) {
-            const el = cells[i];
-            const r = parseInt(el.getAttribute('data-row-index'), 10);
-            const c = parseInt(el.getAttribute('data-col-index'), 10) - colOffset;
-            const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
-            if (inRange) {
-                if (!el.hasAttribute(DRAG_ATTR))
-                    el.setAttribute(DRAG_ATTR, '');
-                // Anchor cell gets white background instead of green
-                const isAnchor = anchor && r === anchor.row && c === anchor.col;
-                if (isAnchor) {
-                    if (!el.hasAttribute(DRAG_ANCHOR_ATTR))
-                        el.setAttribute(DRAG_ANCHOR_ATTR, '');
+        const colOff = getColOffset();
+        // 1. Un-mark cells that are no longer in the new range (iterate the small set, not all DOM)
+        for (const el of markedCells) {
+            const r = parseInt(el.getAttribute('data-row-index') ?? '', 10);
+            const c = parseInt(el.getAttribute('data-col-index') ?? '', 10) - colOff;
+            const stillInRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
+            if (!stillInRange) {
+                unstyleCell(el);
+                markedCells.delete(el);
+            }
+        }
+        // Build index on first call if not yet initialized
+        if (!cellIndex)
+            buildCellIndex();
+        // 2. Look up only the cells in the new range — O(range size) via Map lookup.
+        for (let r = minR; r <= maxR; r++) {
+            for (let c = minC; c <= maxC; c++) {
+                const key = `${r},${c + colOff}`;
+                let el = cellIndex?.get(key);
+                // Handle virtual scroll recycling — if element is stale, rebuild index once
+                if (el && !el.isConnected) {
+                    buildCellIndex();
+                    el = cellIndex?.get(key);
                 }
-                else {
-                    if (el.hasAttribute(DRAG_ANCHOR_ATTR))
-                        el.removeAttribute(DRAG_ANCHOR_ATTR);
+                if (el) {
+                    styleCellInRange(el, r, c, minR, maxR, minC, maxC, anchor);
                 }
-                // Edge borders via inset box-shadow (no layout shift)
-                const shadows = [];
-                if (r === minR)
-                    shadows.push('inset 0 2px 0 0 var(--ogrid-selection, #217346)');
-                if (r === maxR)
-                    shadows.push('inset 0 -2px 0 0 var(--ogrid-selection, #217346)');
-                if (c === minC)
-                    shadows.push('inset 2px 0 0 0 var(--ogrid-selection, #217346)');
-                if (c === maxC)
-                    shadows.push('inset -2px 0 0 0 var(--ogrid-selection, #217346)');
-                el.style.boxShadow = shadows.length > 0 ? shadows.join(', ') : '';
-            }
-            else {
-                if (el.hasAttribute(DRAG_ATTR))
-                    el.removeAttribute(DRAG_ATTR);
-                if (el.hasAttribute(DRAG_ANCHOR_ATTR))
-                    el.removeAttribute(DRAG_ANCHOR_ATTR);
-                if (el.style.boxShadow)
-                    el.style.boxShadow = '';
             }
         }
     };
+    /** Clear all drag styling using the tracked set — O(marked) not O(all cells). */
     const clearDragAttrs = () => {
-        const wrapper = wrapperRef.value;
-        if (!wrapper)
-            return;
-        const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
-        for (let i = 0; i < marked.length; i++) {
-            const el = marked[i];
-            el.removeAttribute(DRAG_ATTR);
-            el.removeAttribute(DRAG_ANCHOR_ATTR);
-            el.style.boxShadow = '';
+        for (const el of markedCells) {
+            unstyleCell(el);
         }
+        markedCells.clear();
+        cellIndex = null;
     };
     const resolveRange = (cx, cy) => {
         if (!dragStart)
@@ -150,6 +188,7 @@ export function useCellSelection(params) {
             return null;
         const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
         const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
+        const colOffset = getColOffset();
         if (Number.isNaN(r) || Number.isNaN(c) || c < colOffset)
             return null;
         const dataCol = c - colOffset;
@@ -168,7 +207,7 @@ export function useCellSelection(params) {
     };
     const updateAutoScroll = () => {
         const wrapper = wrapperRef.value;
-        if (!wrapper || !lastMousePos || !isDraggingInternal) {
+        if (!wrapper || !lastMousePos || !isDraggingInternal.value) {
             stopAutoScroll();
             return;
         }
@@ -195,7 +234,7 @@ export function useCellSelection(params) {
             autoScrollInterval = setInterval(() => {
                 const w = wrapperRef.value;
                 const p = lastMousePos;
-                if (!w || !p || !isDraggingInternal) {
+                if (!w || !p || !isDraggingInternal.value) {
                     stopAutoScroll();
                     return;
                 }
@@ -225,11 +264,13 @@ export function useCellSelection(params) {
         }
     };
     const onMove = (e) => {
-        if (!isDraggingInternal || !dragStart)
+        if (!isDraggingInternal.value || !dragStart)
             return;
         if (!dragMoved) {
             dragMoved = true;
             isDragging.value = true;
+            // Build cell index once at drag start for O(1) lookups during drag
+            buildCellIndex();
         }
         lastMousePos = { cx: e.clientX, cy: e.clientY };
         updateAutoScroll();
@@ -255,14 +296,14 @@ export function useCellSelection(params) {
         });
     };
     const onUp = () => {
-        if (!isDraggingInternal)
+        if (!isDraggingInternal.value)
             return;
         stopAutoScroll();
         if (rafId) {
             cancelAnimationFrame(rafId);
             rafId = 0;
         }
-        isDraggingInternal = false;
+        isDraggingInternal.value = false;
         const wasDrag = dragMoved;
         if (wasDrag) {
             if (lastMousePos) {
@@ -275,7 +316,7 @@ export function useCellSelection(params) {
                 setSelectionRange(finalRange);
                 setActiveCell({
                     rowIndex: finalRange.endRow,
-                    columnIndex: finalRange.endCol + colOffset,
+                    columnIndex: finalRange.endCol + getColOffset(),
                 });
             }
         }
@@ -286,14 +327,13 @@ export function useCellSelection(params) {
         if (wasDrag)
             isDragging.value = false;
     };
-    let isUnmounted = false;
     const onMoveSafe = (e) => {
-        if (isUnmounted)
+        if (isUnmounted.value)
             return;
         onMove(e);
     };
     const onUpSafe = () => {
-        if (isUnmounted)
+        if (isUnmounted.value)
             return;
         onUp();
     };
@@ -302,7 +342,7 @@ export function useCellSelection(params) {
         window.addEventListener('mouseup', onUpSafe, true);
     });
     onUnmounted(() => {
-        isUnmounted = true;
+        isUnmounted.value = true;
         window.removeEventListener('mousemove', onMoveSafe, true);
         window.removeEventListener('mouseup', onUpSafe, true);
         if (rafId)

package/dist/esm/composables/useClipboard.js

@@ -1,16 +1,18 @@
-import { ref, shallowRef } from 'vue';
-import { getCellValue, parseValue, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard } from '@alaarab/ogrid-core';
+import { ref, shallowRef, isRef } from 'vue';
+import { normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear } from '@alaarab/ogrid-core';
 /**
  * Manages copy, cut, and paste operations for cell ranges with TSV clipboard format.
  */
 export function useClipboard(params) {
-    const { items, visibleCols, colOffset, selectionRange, activeCell, editable, onCellValueChanged, beginBatch, endBatch, } = params;
+    const { items, visibleCols, selectionRange, activeCell, editable, onCellValueChanged, beginBatch, endBatch, } = params;
+    const getColOffset = () => isRef(params.colOffset) ? params.colOffset.value : params.colOffset;
     const cutRange = shallowRef(null);
     const copyRange = shallowRef(null);
     const internalClipboardRef = ref(null);
     const getEffectiveRange = () => {
         const sel = selectionRange.value;
         const ac = activeCell.value;
+        const colOffset = getColOffset();
         return sel ?? (ac != null
             ? { startRow: ac.rowIndex, startCol: ac.columnIndex - colOffset, endRow: ac.rowIndex, endCol: ac.columnIndex - colOffset }
             : null);
@@ -23,7 +25,10 @@ export function useClipboard(params) {
         const tsv = formatSelectionAsTsv(items.value, visibleCols.value, norm);
         internalClipboardRef.value = tsv;
         copyRange.value = norm;
-        void navigator.clipboard.writeText(tsv).catch(() => { });
+        void navigator.clipboard.writeText(tsv).catch((err) => {
+            if (typeof console !== 'undefined')
+                console.warn('[OGrid] Clipboard write failed:', err);
+        });
     };
     const handleCut = () => {
         if (editable.value === false)
@@ -62,58 +67,13 @@ export function useClipboard(params) {
         const currentCols = visibleCols.value;
         const parsedRows = parseTsvClipboard(text);
         beginBatch?.();
-        for (let r = 0; r < parsedRows.length; r++) {
-            const cells = parsedRows[r];
-            for (let c = 0; c < cells.length; c++) {
-                const targetRow = anchorRow + r;
-                const targetCol = anchorCol + c;
-                if (targetRow >= currentItems.length || targetCol >= currentCols.length)
-                    continue;
-                const item = currentItems[targetRow];
-                const col = currentCols[targetCol];
-                const colEditable = col.editable === true ||
-                    (typeof col.editable === 'function' && col.editable(item));
-                if (!colEditable)
-                    continue;
-                const rawValue = cells[c] ?? '';
-                const oldValue = getCellValue(item, col);
-                const result = parseValue(rawValue, oldValue, item, col);
-                if (!result.valid)
-                    continue;
-                callback({
-                    item,
-                    columnId: col.columnId,
-                    oldValue,
-                    newValue: result.value,
-                    rowIndex: targetRow,
-                });
-            }
-        }
+        const pasteEvents = applyPastedValues(parsedRows, anchorRow, anchorCol, currentItems, currentCols);
+        for (const evt of pasteEvents)
+            callback(evt);
         if (cutRange.value) {
-            const cut = cutRange.value;
-            for (let r = cut.startRow; r <= cut.endRow; r++) {
-                for (let c = cut.startCol; c <= cut.endCol; c++) {
-                    if (r >= currentItems.length || c >= currentCols.length)
-                        continue;
-                    const item = currentItems[r];
-                    const col = currentCols[c];
-                    const colEditable = col.editable === true ||
-                        (typeof col.editable === 'function' && col.editable(item));
-                    if (!colEditable)
-                        continue;
-                    const oldValue = getCellValue(item, col);
-                    const result = parseValue('', oldValue, item, col);
-                    if (!result.valid)
-                        continue;
-                    callback({
-                        item,
-                        columnId: col.columnId,
-                        oldValue,
-                        newValue: result.value,
-                        rowIndex: r,
-                    });
-                }
-            }
+            const cutEvents = applyCutClear(cutRange.value, currentItems, currentCols);
+            for (const evt of cutEvents)
+                callback(evt);
             cutRange.value = null;
         }
         endBatch?.();

package/dist/esm/composables/useColumnChooserState.js

@@ -1,4 +1,4 @@
-import { ref, watch, onUnmounted } from 'vue';
+import { ref, computed, watch, onUnmounted } from 'vue';
 /**
  * Returns open/setOpen, handleToggle, handleClose, handleCheckboxChange, handleSelectAll, handleClearAll.
  */
@@ -51,18 +51,15 @@ export function useColumnChooserState(params) {
         });
     };
     const handleClearAll = () => {
+        // Required columns are silently skipped — no feedback is provided to the user
         columns.value.forEach((col) => {
             if (!col.required && visibleColumns.value.has(col.columnId)) {
                 onVisibilityChange(col.columnId, false);
             }
         });
     };
-    const visibleCount = ref(visibleColumns.value.size);
-    const totalCount = ref(columns.value.length);
-    watch([visibleColumns, columns], () => {
-        visibleCount.value = visibleColumns.value.size;
-        totalCount.value = columns.value.length;
-    }, { immediate: true });
+    const visibleCount = computed(() => visibleColumns.value.size);
+    const totalCount = computed(() => columns.value.length);
     return {
         open,
         setOpen,

package/dist/esm/composables/useColumnHeaderFilterState.js

@@ -6,6 +6,8 @@ import { useDateFilterState } from './useDateFilterState';
 const EMPTY_OPTIONS = [];
 export function useColumnHeaderFilterState(params) {
     const { filterType, onSort, } = params;
+    // Access params.selectedValues as a getter so hasActiveFilter tracks the reactive prop
+    // (when params is Vue's reactive props object, this is reactive; plain objects are snapshots)
     const safeSelectedValues = () => params.selectedValues ?? EMPTY_OPTIONS;
     // Shared state
     const headerRef = ref(null);
@@ -15,30 +17,30 @@ export function useColumnHeaderFilterState(params) {
     const setFilterOpen = (open) => {
         isFilterOpen.value = open;
     };
-    const isFilterOpenGetter = () => isFilterOpen.value;
-    // Compose sub-hooks
+    // Compose sub-hooks — pass the ref directly so Vue's reactivity system
+    // can properly track dependencies (instead of a getter function wrapper)
     const textFilterState = useTextFilterState({
         textValue: params.textValue,
         onTextChange: params.onTextChange,
-        isFilterOpen: isFilterOpenGetter,
+        isFilterOpen,
     });
     const multiSelectFilterState = useMultiSelectFilterState({
         selectedValues: params.selectedValues,
         onFilterChange: params.onFilterChange,
         options: params.options,
-        isFilterOpen: isFilterOpenGetter,
+        isFilterOpen,
     });
     const peopleFilterState = usePeopleFilterState({
         selectedUser: params.selectedUser,
         onUserChange: params.onUserChange,
         peopleSearch: params.peopleSearch,
-        isFilterOpen: isFilterOpenGetter,
+        isFilterOpen,
         filterType,
     });
     const dateFilterState = useDateFilterState({
         dateValue: params.dateValue,
         onDateChange: params.onDateChange,
-        isFilterOpen: isFilterOpenGetter,
+        isFilterOpen,
     });
     // Close popover resets position
     watch(isFilterOpen, (open) => {
@@ -66,7 +68,8 @@ export function useColumnHeaderFilterState(params) {
                 isFilterOpen.value = false;
             }
         };
-        clickOutsideTimeout = setTimeout(() => document.addEventListener('mousedown', clickOutsideHandler), 0);
+        clickOutsideTimeout = setTimeout(() => { if (clickOutsideHandler)
+            document.addEventListener('mousedown', clickOutsideHandler); }, 0);
         document.addEventListener('keydown', keyDownHandler, true);
     };
     const cleanupListeners = () => {

package/dist/esm/composables/useColumnHeaderMenuState.js

@@ -34,10 +34,8 @@ export function useColumnHeaderMenuState(params) {
         const col = currentColumn.value;
         return col?.sortable !== false;
     });
-    const isResizable = computed(() => {
-        // All columns are resizable by default (no per-column resizable flag in core)
-        return true;
-    });
+    // All columns are resizable by default (no per-column resizable flag in core)
+    const isResizable = ref(true);
     const handlePinLeft = () => {
         if (openForColumn.value && canPinLeft.value) {
             onPinColumn(openForColumn.value, 'left');

package/dist/esm/composables/useColumnPinning.js

@@ -22,8 +22,8 @@ export function useColumnPinning(params) {
         onColumnPinned?.(columnId, side);
     };
     const unpinColumn = (columnId) => {
-        const next = { ...pinnedColumns.value };
-        delete next[columnId];
+        const { [columnId]: _removed, ...next } = pinnedColumns.value;
+        void _removed;
         internalPinnedColumns.value = next;
         onColumnPinned?.(columnId, null);
     };

package/dist/esm/composables/useColumnReorder.js

@@ -62,7 +62,14 @@ export function useColumnReorder(params) {
                     const tableEl = tableRef.value;
                     if (!tableEl || !draggedColumnId)
                         return;
-                    const result = calculateDropTarget(latestMouseX, columnOrder.value, draggedColumnId, draggedPinState, tableEl, pinnedColumns?.value);
+                    const result = calculateDropTarget({
+                        mouseX: latestMouseX,
+                        columnOrder: columnOrder.value,
+                        draggedColumnId,
+                        draggedPinState,
+                        tableElement: tableEl,
+                        pinnedColumns: pinnedColumns?.value,
+                    });
                     if (result) {
                         targetIndex = result.targetIndex;
                         dropIndicatorX.value = result.indicatorX;