@alaarab/ogrid-vue 2.0.23 → 2.1.1

package/dist/esm/composables/useDataGridState.js

@@ -24,29 +24,27 @@ const NOOP_CTX = (_e) => { };
  */
 export function useDataGridState(params) {
     const { props, wrapperRef } = params;
+    // --- Reactive refs for props consumed by sub-composables ---
+    // Only properties that sub-composables need as Ref<...> get their own computed.
+    // Everything else is read directly from props.value at the point of use to
+    // avoid unnecessary intermediate reactive layers.
     const items = computed(() => props.value.items);
-    const columnsProp = computed(() => props.value.columns);
     const getRowId = props.value.getRowId; // stable function reference, no reactivity needed
-    const visibleColumnsProp = computed(() => props.value.visibleColumns);
-    const columnOrderProp = computed(() => props.value.columnOrder);
     const rowSelectionProp = computed(() => props.value.rowSelection ?? 'none');
     const controlledSelectedRows = computed(() => props.value.selectedRows);
-    const onSelectionChangeProp = computed(() => props.value.onSelectionChange);
-    const statusBarProp = computed(() => props.value.statusBar);
-    const emptyStateProp = computed(() => props.value.emptyState);
     const editableProp = computed(() => props.value.editable);
-    const cellSelectionPropRaw = computed(() => props.value.cellSelection);
-    const cellSelection = computed(() => cellSelectionPropRaw.value !== false);
-    const onCellValueChangedProp = computed(() => props.value.onCellValueChanged);
-    const initialColumnWidths = computed(() => props.value.initialColumnWidths);
-    const onColumnResizedProp = computed(() => props.value.onColumnResized);
+    const cellSelection = computed(() => props.value.cellSelection !== false);
     const pinnedColumnsProp = computed(() => props.value.pinnedColumns);
-    const onColumnPinnedProp = computed(() => props.value.onColumnPinned);
-    const onCellErrorProp = computed(() => props.value.onCellError);
     // Undo/redo wrapping
-    const undoRedo = useUndoRedo({ onCellValueChanged: onCellValueChangedProp.value });
+    const undoRedo = useUndoRedo({ onCellValueChanged: props.value.onCellValueChanged });
     const onCellValueChanged = computed(() => undoRedo.onCellValueChanged);
-    const flatColumnsRaw = computed(() => flattenColumns(columnsProp.value));
+    /**
+     * Core's flattenColumns returns IColumnDef<unknown>[] because the generic T
+     * cannot be propagated through the group-flattening algorithm. At this call
+     * site the input is IColumnDef<T>[] (via columnsProp), so the output is
+     * guaranteed to be IColumnDef<T>[] — the cast is safe.
+     */
+    const flatColumnsRaw = computed(() => flattenColumns(props.value.columns));
     const flatColumns = computed(() => {
         const pinned = pinnedColumnsProp.value;
         if (!pinned || Object.keys(pinned).length === 0)
@@ -59,8 +57,8 @@ export function useDataGridState(params) {
         });
     });
     const visibleCols = computed(() => {
-        const vis = visibleColumnsProp.value;
-        const order = columnOrderProp.value;
+        const vis = props.value.visibleColumns;
+        const order = props.value.columnOrder;
         const filtered = vis ? flatColumns.value.filter((c) => vis.has(c.columnId)) : flatColumns.value;
         if (!order?.length)
             return filtered;
@@ -86,7 +84,10 @@ export function useDataGridState(params) {
     const hasRowNumbersCol = computed(() => !!props.value.showRowNumbers);
     const specialColsCount = computed(() => (hasCheckboxCol.value ? 1 : 0) + (hasRowNumbersCol.value ? 1 : 0));
     const totalColCount = computed(() => visibleColumnCount.value + specialColsCount.value);
-    const colOffset = specialColsCount.value; // snapshot: checkbox/rowNumbers cols are fixed at setup
+    const colOffset = specialColsCount; // reactive computed ref instead of snapshot
+    // shallowRef + mutate-in-place + triggerRef: the Map is mutated (clear/set)
+    // rather than replaced, so Vue's shallow reactivity doesn't detect the change.
+    // triggerRef forces dependents to re-evaluate after the in-place mutation.
     const rowIndexByRowId = shallowRef(new Map());
     watch(items, (newItems) => {
         const m = rowIndexByRowId.value;
@@ -99,7 +100,7 @@ export function useDataGridState(params) {
         getRowId,
         rowSelection: rowSelectionProp,
         controlledSelectedRows,
-        onSelectionChange: onSelectionChangeProp.value,
+        onSelectionChange: props.value.onSelectionChange,
     });
     const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue } = useCellEditing();
     const { activeCell, setActiveCell } = useActiveCell(wrapperRef, editingCell);
@@ -168,19 +169,19 @@ export function useDataGridState(params) {
         visibleCols,
         flatColumns,
         hasCheckboxCol,
-        initialColumnWidths: initialColumnWidths.value,
-        onColumnResized: onColumnResizedProp.value,
+        initialColumnWidths: props.value.initialColumnWidths,
+        onColumnResized: (columnId, width) => props.value.onColumnResized?.(columnId, width),
     });
     // --- Column pinning ---
     const pinningResult = useColumnPinning({
         columns: flatColumns,
         pinnedColumns: pinnedColumnsProp,
-        onColumnPinned: onColumnPinnedProp.value,
+        onColumnPinned: props.value.onColumnPinned,
     });
     // Autosize callback — updates internal column sizing state + notifies external listener
     const handleAutosizeColumn = (columnId, width) => {
         setColumnSizingOverrides({ ...columnSizingOverrides.value, [columnId]: { widthPx: width } });
-        onColumnResizedProp.value?.(columnId, width);
+        props.value.onColumnResized?.(columnId, width);
     };
     const headerMenuResult = useColumnHeaderMenuState({
         columns: flatColumns,
@@ -188,7 +189,7 @@ export function useDataGridState(params) {
         onPinColumn: pinningResult.pinColumn,
         onUnpinColumn: pinningResult.unpinColumn,
         onSort: props.value.onColumnSort,
-        onColumnResized: onColumnResizedProp.value,
+        onColumnResized: props.value.onColumnResized,
         onAutosizeColumn: handleAutosizeColumn,
         sortBy: computed(() => props.value.sortBy),
         sortDirection: computed(() => props.value.sortDirection),
@@ -196,6 +197,8 @@ export function useDataGridState(params) {
     // Measure actual column widths from the DOM after layout changes.
     // Used as a minWidth floor to prevent columns from shrinking when new data
     // loads (e.g. during server-side pagination transitions).
+    // nextTick() defers measurement to after Vue has flushed its DOM updates,
+    // ensuring header cells reflect the latest column layout before we read widths.
     const measuredColumnWidths = ref({});
     watch([visibleCols, containerWidth, columnSizingOverrides], () => {
         void nextTick(() => {
@@ -242,12 +245,12 @@ export function useDataGridState(params) {
     const rightOffsets = computed(() => pinningResult.computeRightOffsets(visibleCols.value, columnWidthMap.value, DEFAULT_MIN_COLUMN_WIDTH));
     const aggregation = computed(() => computeAggregations(items.value, visibleCols.value, cellSelection.value ? selectionRange.value : null));
     const statusBarConfig = computed(() => {
-        const base = getDataGridStatusBarConfig(statusBarProp.value, items.value.length, rowSelectionResult.selectedRowIds.value.size);
+        const base = getDataGridStatusBarConfig(props.value.statusBar, items.value.length, rowSelectionResult.selectedRowIds.value.size);
         if (!base)
             return null;
         return { ...base, aggregation: aggregation.value ?? undefined };
     });
-    const showEmptyInGrid = computed(() => items.value.length === 0 && !!emptyStateProp.value && !props.value.isLoading);
+    const showEmptyInGrid = computed(() => items.value.length === 0 && !!props.value.emptyState && !props.value.isLoading);
     const hasCellSelection = computed(() => selectionRange.value != null || activeCell.value != null);
     // --- View-model inputs ---
     const headerFilterInput = computed(() => ({
@@ -266,7 +269,7 @@ export function useDataGridState(params) {
         selectionRange: cellSelection.value ? selectionRange.value : null,
         cutRange: cellSelection.value ? cutRange.value : null,
         copyRange: cellSelection.value ? copyRange.value : null,
-        colOffset,
+        colOffset: colOffset.value,
         itemsLength: items.value.length,
         getRowId,
         editable: editableProp.value,
@@ -315,7 +318,7 @@ export function useDataGridState(params) {
         visibleCols: visibleCols.value,
         visibleColumnCount: visibleColumnCount.value,
         totalColCount: totalColCount.value,
-        colOffset,
+        colOffset: colOffset.value,
         hasCheckboxCol: hasCheckboxCol.value,
         hasRowNumbersCol: hasRowNumbersCol.value,
         rowIndexByRowId: rowIndexByRowId.value,
@@ -324,7 +327,7 @@ export function useDataGridState(params) {
         desiredTableWidth: desiredTableWidth.value,
         columnSizingOverrides: columnSizingOverrides.value,
         setColumnSizingOverrides,
-        onColumnResized: onColumnResizedProp.value,
+        onColumnResized: props.value.onColumnResized,
         measuredColumnWidths: measuredColumnWidths.value,
     }));
     const rowSelectionState = computed(() => ({
@@ -378,7 +381,7 @@ export function useDataGridState(params) {
         cellDescriptorInput: cellDescriptorInput.value,
         statusBarConfig: statusBarConfig.value,
         showEmptyInGrid: showEmptyInGrid.value,
-        onCellError: onCellErrorProp.value,
+        onCellError: props.value.onCellError,
     }));
     const pinningState = computed(() => ({
         pinnedColumns: pinningResult.pinnedColumns.value,

package/dist/esm/composables/useDateFilterState.js

@@ -4,7 +4,7 @@ export function useDateFilterState(params) {
     const tempDateFrom = ref(params.dateValue?.from ?? '');
     const tempDateTo = ref(params.dateValue?.to ?? '');
     // Sync temp state when popover opens
-    watch(() => params.isFilterOpen(), (open) => {
+    watch(params.isFilterOpen, (open) => {
         if (open) {
             tempDateFrom.value = params.dateValue?.from ?? '';
             tempDateTo.value = params.dateValue?.to ?? '';

package/dist/esm/composables/useFillHandle.js

@@ -1,11 +1,12 @@
-import { shallowRef, watch, onUnmounted } from 'vue';
-import { normalizeSelectionRange, getCellValue, parseValue } from '@alaarab/ogrid-core';
+import { shallowRef, watch, isRef, onUnmounted } from 'vue';
+import { normalizeSelectionRange, applyFillValues } from '@alaarab/ogrid-core';
 const DRAG_ATTR = 'data-drag-range';
 /**
  * Manages Excel-style fill handle drag-to-fill for cell ranges.
  */
 export function useFillHandle(params) {
-    const { items, visibleCols, editable, onCellValueChanged, selectionRange, setSelectionRange, setActiveCell, colOffset, wrapperRef, beginBatch, endBatch, visibleRange, } = params;
+    const { items, visibleCols, editable, onCellValueChanged, selectionRange, setSelectionRange, setActiveCell, wrapperRef, beginBatch, endBatch, visibleRange, } = params;
+    const getColOffset = () => isRef(params.colOffset) ? params.colOffset.value : params.colOffset;
     const fillDrag = shallowRef(null);
     let fillDragEnd = { endRow: 0, endCol: 0 };
     let rafId = 0;
@@ -29,7 +30,7 @@ export function useFillHandle(params) {
             rafId = 0;
         }
     };
-    watch(fillDrag, (drag) => {
+    watch(fillDrag, (drag, _oldDrag, onCleanup) => {
         // Guard early before setting up any state
         if (!drag || editable.value === false || !onCellValueChanged.value || !wrapperRef.value) {
             // Still cleanup if transitioning from active to inactive
@@ -38,6 +39,25 @@ export function useFillHandle(params) {
         }
         fillDragEnd = { endRow: drag.startRow, endCol: drag.startCol };
         liveFillRange = null;
+        /** Set of currently drag-marked HTMLElements — avoids O(n) full DOM scan on clear. */
+        const markedCells = new Set();
+        /** Cell lookup index built on drag start — O(1) lookups per frame. */
+        let fillCellIndex = null;
+        const buildFillCellIndex = () => {
+            const wrapper = wrapperRef.value;
+            if (!wrapper)
+                return;
+            fillCellIndex = 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') ?? '';
+                fillCellIndex.set(`${r},${c}`, el);
+            }
+        };
+        // Build the index once at fill drag start
+        buildFillCellIndex();
         const applyDragAttrs = (range) => {
             const wrapper = wrapperRef.value;
             if (!wrapper)
@@ -46,29 +66,40 @@ export function useFillHandle(params) {
             const maxR = Math.max(range.startRow, range.endRow);
             const minC = Math.min(range.startCol, range.endCol);
             const maxC = Math.max(range.startCol, range.endCol);
-            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, '');
+            const colOff = getColOffset();
+            // Un-mark cells no longer in range
+            for (const el of markedCells) {
+                const r = parseInt(el.getAttribute('data-row-index') ?? '', 10);
+                const c = parseInt(el.getAttribute('data-col-index') ?? '', 10) - colOff;
+                if (!(r >= minR && r <= maxR && c >= minC && c <= maxC)) {
+                    el.removeAttribute(DRAG_ATTR);
+                    markedCells.delete(el);
                 }
-                else {
-                    if (el.hasAttribute(DRAG_ATTR))
-                        el.removeAttribute(DRAG_ATTR);
+            }
+            // Look up only 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 = fillCellIndex?.get(key);
+                    // Handle virtual scroll recycling — if element is stale, rebuild index once
+                    if (el && !el.isConnected) {
+                        buildFillCellIndex();
+                        el = fillCellIndex?.get(key);
+                    }
+                    if (el) {
+                        if (!el.hasAttribute(DRAG_ATTR))
+                            el.setAttribute(DRAG_ATTR, '');
+                        markedCells.add(el);
+                    }
                 }
             }
         };
         const clearDragAttrs = () => {
-            const wrapper = wrapperRef.value;
-            if (!wrapper)
-                return;
-            const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
-            for (let i = 0; i < marked.length; i++)
-                marked[i].removeAttribute(DRAG_ATTR);
+            for (const el of markedCells) {
+                el.removeAttribute(DRAG_ATTR);
+            }
+            markedCells.clear();
+            fillCellIndex = null;
         };
         let lastFillMousePos = null;
         const resolveRange = (cx, cy) => {
@@ -78,6 +109,7 @@ export function useFillHandle(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;
@@ -134,35 +166,18 @@ export function useFillHandle(params) {
                 norm.endRow = Math.min(norm.endRow, vr.endIndex);
             }
             setSelectionRange(norm);
-            setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + colOffset });
+            setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + getColOffset() });
             const currentItems = items.value;
             const currentCols = visibleCols.value;
             const callback = onCellValueChanged.value;
-            const startItem = currentItems[norm.startRow];
-            const startColDef = currentCols[norm.startCol];
-            if (startItem && startColDef && callback) {
-                const startValue = getCellValue(startItem, startColDef);
-                beginBatch?.();
-                for (let row = norm.startRow; row <= norm.endRow; row++) {
-                    for (let col = norm.startCol; col <= norm.endCol; col++) {
-                        if (row === drag.startRow && col === drag.startCol)
-                            continue;
-                        if (row >= currentItems.length || col >= currentCols.length)
-                            continue;
-                        const item = currentItems[row];
-                        const colDef = currentCols[col];
-                        const colEditable = colDef.editable === true ||
-                            (typeof colDef.editable === 'function' && colDef.editable(item));
-                        if (!colEditable)
-                            continue;
-                        const oldValue = getCellValue(item, colDef);
-                        const result = parseValue(startValue, oldValue, item, colDef);
-                        if (!result.valid)
-                            continue;
-                        callback({ item, columnId: colDef.columnId, oldValue, newValue: result.value, rowIndex: row });
-                    }
+            if (callback) {
+                const fillEvents = applyFillValues(norm, drag.startRow, drag.startCol, currentItems, currentCols);
+                if (fillEvents.length > 0) {
+                    beginBatch?.();
+                    for (const evt of fillEvents)
+                        callback(evt);
+                    endBatch?.();
                 }
-                endBatch?.();
             }
             fillDrag.value = null;
             liveFillRange = null;
@@ -170,10 +185,12 @@ export function useFillHandle(params) {
         };
         window.addEventListener('mousemove', moveListener, true);
         window.addEventListener('mouseup', upListener, true);
-        // Return cleanup function - Vue will call this BEFORE next watch run
-        return () => {
+        // Register cleanup via onCleanup — Vue calls this BEFORE next watch run
+        // and on unmount. Compatible with Vue 3.3+ (unlike return-value cleanup
+        // which requires Vue 3.5+).
+        onCleanup(() => {
             cleanup();
-        };
+        });
     });
     onUnmounted(() => cleanup());
     const handleFillHandleMouseDown = (e) => {

package/dist/esm/composables/useKeyboardNavigation.js

@@ -1,17 +1,18 @@
-import { computed } from 'vue';
-import { normalizeSelectionRange, getCellValue, parseValue, findCtrlArrowTarget, computeTabNavigation } from '@alaarab/ogrid-core';
+import { isRef } from 'vue';
+import { getCellValue, computeTabNavigation, computeArrowNavigation, applyCellDeletion } from '@alaarab/ogrid-core';
 import { useLatestRef } from './useLatestRef';
 /**
  * Handles all keyboard navigation, shortcuts, and cell editing triggers for the grid.
  */
 export function useKeyboardNavigation(params) {
     // Store latest params in a ref so handleGridKeyDown is a stable callback
-    const paramsRef = useLatestRef(computed(() => params));
+    const paramsRef = useLatestRef(params);
     const handleGridKeyDown = (e) => {
         const { data, state, handlers, features } = paramsRef.value;
         const items = data.items.value;
         const visibleCols = data.visibleCols.value;
-        const { colOffset, getRowId } = data;
+        const { getRowId } = data;
+        const colOffset = isRef(data.colOffset) ? data.colOffset.value : data.colOffset;
         const hasCheckboxCol = data.hasCheckboxCol.value;
         const visibleColumnCount = data.visibleColumnCount.value;
         const activeCell = state.activeCell.value;
@@ -69,96 +70,26 @@ export function useKeyboardNavigation(params) {
                     void handlePaste();
                 }
                 break;
-            case 'ArrowDown': {
-                e.preventDefault();
-                const ctrl = e.ctrlKey || e.metaKey;
-                const newRow = ctrl
-                    ? findCtrlArrowTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
-                    : Math.min(rowIndex + 1, maxRowIndex);
-                if (shift) {
-                    setSelectionRange(normalizeSelectionRange({
-                        startRow: selectionRange?.startRow ?? rowIndex,
-                        startCol: selectionRange?.startCol ?? dataColIndex,
-                        endRow: newRow,
-                        endCol: selectionRange?.endCol ?? dataColIndex,
-                    }));
-                }
-                else {
-                    setSelectionRange({ startRow: newRow, startCol: dataColIndex, endRow: newRow, endCol: dataColIndex });
-                }
-                setActiveCell({ rowIndex: newRow, columnIndex });
-                scrollToRow?.(newRow, 'center');
-                break;
-            }
-            case 'ArrowUp': {
-                e.preventDefault();
-                const ctrl = e.ctrlKey || e.metaKey;
-                const newRowUp = ctrl
-                    ? findCtrlArrowTarget(rowIndex, 0, -1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
-                    : Math.max(rowIndex - 1, 0);
-                if (shift) {
-                    setSelectionRange(normalizeSelectionRange({
-                        startRow: selectionRange?.startRow ?? rowIndex,
-                        startCol: selectionRange?.startCol ?? dataColIndex,
-                        endRow: newRowUp,
-                        endCol: selectionRange?.endCol ?? dataColIndex,
-                    }));
-                }
-                else {
-                    setSelectionRange({ startRow: newRowUp, startCol: dataColIndex, endRow: newRowUp, endCol: dataColIndex });
-                }
-                setActiveCell({ rowIndex: newRowUp, columnIndex });
-                scrollToRow?.(newRowUp, 'center');
-                break;
-            }
-            case 'ArrowRight': {
-                e.preventDefault();
-                const ctrl = e.ctrlKey || e.metaKey;
-                let newCol;
-                if (ctrl && dataColIndex >= 0) {
-                    newCol = findCtrlArrowTarget(dataColIndex, visibleCols.length - 1, 1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
-                }
-                else {
-                    newCol = Math.min(columnIndex + 1, maxColIndex);
-                }
-                const newDataCol = newCol - colOffset;
-                if (shift) {
-                    setSelectionRange(normalizeSelectionRange({
-                        startRow: selectionRange?.startRow ?? rowIndex,
-                        startCol: selectionRange?.startCol ?? dataColIndex,
-                        endRow: selectionRange?.endRow ?? rowIndex,
-                        endCol: newDataCol,
-                    }));
-                }
-                else {
-                    setSelectionRange({ startRow: rowIndex, startCol: newDataCol, endRow: rowIndex, endCol: newDataCol });
-                }
-                setActiveCell({ rowIndex, columnIndex: newCol });
-                break;
-            }
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'ArrowRight':
             case 'ArrowLeft': {
                 e.preventDefault();
-                const ctrl = e.ctrlKey || e.metaKey;
-                let newColLeft;
-                if (ctrl && dataColIndex >= 0) {
-                    newColLeft = findCtrlArrowTarget(dataColIndex, 0, -1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
-                }
-                else {
-                    newColLeft = Math.max(columnIndex - 1, colOffset);
+                const { newRowIndex, newColumnIndex, newRange } = computeArrowNavigation({
+                    direction: e.key,
+                    rowIndex, columnIndex, dataColIndex, colOffset,
+                    maxRowIndex, maxColIndex,
+                    visibleColCount: visibleCols.length,
+                    isCtrl: e.ctrlKey || e.metaKey,
+                    isShift: shift,
+                    selectionRange,
+                    isEmptyAt,
+                });
+                setSelectionRange(newRange);
+                setActiveCell({ rowIndex: newRowIndex, columnIndex: newColumnIndex });
+                if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                    scrollToRow?.(newRowIndex, 'center');
                 }
-                const newDataColLeft = newColLeft - colOffset;
-                if (shift) {
-                    setSelectionRange(normalizeSelectionRange({
-                        startRow: selectionRange?.startRow ?? rowIndex,
-                        startCol: selectionRange?.startCol ?? dataColIndex,
-                        endRow: selectionRange?.endRow ?? rowIndex,
-                        endCol: newDataColLeft,
-                    }));
-                }
-                else {
-                    setSelectionRange({ startRow: rowIndex, startCol: newDataColLeft, endRow: rowIndex, endCol: newDataColLeft });
-                }
-                setActiveCell({ rowIndex, columnIndex: newColLeft });
                 break;
             }
             case 'Tab': {
@@ -269,24 +200,9 @@ export function useKeyboardNavigation(params) {
                 if (range == null)
                     break;
                 e.preventDefault();
-                const norm = normalizeSelectionRange(range);
-                for (let r = norm.startRow; r <= norm.endRow; r++) {
-                    for (let c = norm.startCol; c <= norm.endCol; c++) {
-                        if (r >= items.length || c >= visibleCols.length)
-                            continue;
-                        const item = items[r];
-                        const col = visibleCols[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;
-                        onCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: r });
-                    }
-                }
+                const deleteEvents = applyCellDeletion(range, items, visibleCols);
+                for (const evt of deleteEvents)
+                    onCellValueChanged(evt);
                 break;
             }
             case 'F10':

package/dist/esm/composables/useLatestRef.js

@@ -1,4 +1,4 @@
-import { customRef, unref } from 'vue';
+import { customRef, isRef, unref } from 'vue';
 /**
  * Returns a ref that always holds the latest value.
  * Useful for capturing volatile state in stable callbacks
@@ -13,7 +13,7 @@ export function useLatestRef(source) {
     return customRef((track, trigger) => ({
         get() {
             // Update value from source on every read (if source is a ref)
-            if (typeof source === 'object' && source !== null && 'value' in source) {
+            if (isRef(source)) {
                 value = source.value;
             }
             // Don't call track() - we don't want to add this to reactive dependencies

package/dist/esm/composables/useMultiSelectFilterState.js

@@ -8,7 +8,7 @@ export function useMultiSelectFilterState(params) {
     const searchText = ref('');
     const debouncedSearchText = useDebounce(searchText, SEARCH_DEBOUNCE_MS);
     // Sync temp state when popover opens
-    watch(() => params.isFilterOpen(), (open) => {
+    watch(params.isFilterOpen, (open) => {
         if (open) {
             tempSelected.value = new Set(params.selectedValues ?? EMPTY_OPTIONS);
             searchText.value = '';

package/dist/esm/composables/useOGrid.js

@@ -1,5 +1,5 @@
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
-import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, computeNextSortState, } from '@alaarab/ogrid-core';
+import { ref, computed, watch, shallowRef, onMounted, onUnmounted } from 'vue';
+import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, computeNextSortState, validateColumns, validateRowIds, } from '@alaarab/ogrid-core';
 import { useFilterOptions } from './useFilterOptions';
 import { useSideBarState } from './useSideBarState';
 const DEFAULT_PAGE_SIZE = 25;
@@ -25,10 +25,15 @@ export function useOGrid(props) {
     // Group 2: Data identity (stable or rarely changes)
     const dataProps = computed(() => {
         const p = props.value;
+        const data = ('data' in p ? p.data : undefined);
+        const dataSource = ('dataSource' in p ? p.dataSource : undefined);
+        if (data && dataSource) {
+            console.warn('[OGrid] Both data and dataSource provided. dataSource takes precedence.');
+        }
         return {
             getRowId: p.getRowId,
-            data: ('data' in p ? p.data : undefined),
-            dataSource: ('dataSource' in p ? p.dataSource : undefined),
+            data,
+            dataSource,
         };
     });
     // Group 3: Controlled state (changes on user interaction)
@@ -171,7 +176,7 @@ export function useOGrid(props) {
     // --- Server-side fetching ---
     const serverItems = ref([]);
     const serverTotalCount = ref(0);
-    const loading = ref(true);
+    const loading = ref(false);
     let fetchId = 0;
     let isDestroyed = false;
     const refreshCounter = ref(0);
@@ -208,11 +213,14 @@ export function useOGrid(props) {
                 loading.value = false;
         });
     };
-    // Initial fetch on mount
+    // Validate columns once on mount
     onMounted(() => {
+        validateColumns(columns.value);
         doFetch();
     });
-    // Subsequent fetches on page/sort/filter changes (no immediate — onMounted handles initial)
+    // Subsequent fetches on page/sort/filter changes (no immediate — onMounted handles initial).
+    // Getter functions are used for nested properties (sort.value.field) that Vue
+    // can't track through a raw ref; top-level refs are passed directly.
     watch([() => dataProps.value.dataSource, page, pageSize, () => sort.value.field, () => sort.value.direction, filters, refreshCounter], () => {
         doFetch();
     });
@@ -225,13 +233,18 @@ export function useOGrid(props) {
     const displayTotalCount = computed(() => isClientSide.value && clientItemsAndTotal.value
         ? clientItemsAndTotal.value.totalCount
         : serverTotalCount.value);
-    // Fire onFirstDataRendered once
+    // Fire onFirstDataRendered once; also validate row IDs on first data
     let firstDataRendered = false;
+    let rowIdsValidated = false;
     watch(displayItems, (items) => {
         if (!firstDataRendered && items.length > 0) {
             firstDataRendered = true;
             callbacks.value.onFirstDataRendered?.();
         }
+        if (!rowIdsValidated && items.length > 0) {
+            rowIdsValidated = true;
+            validateRowIds(items, dataProps.value.getRowId);
+        }
     });
     // With discriminated union, any defined value is active
     const hasActiveFilters = computed(() => Object.values(filters.value).some((v) => v !== undefined));
@@ -270,16 +283,21 @@ export function useOGrid(props) {
         columnProps.value.onColumnPinned?.(columnId, pinned);
     };
     // --- Side bar ---
-    const sideBarState = useSideBarState({ config: props.value.sideBar });
+    // Use a shallowRef to hold sideBarState so sideBarProps computed re-runs when config changes
+    const sideBarStateRef = shallowRef(useSideBarState({ config: props.value.sideBar }));
+    watch(() => props.value.sideBar, (newConfig) => {
+        sideBarStateRef.value = useSideBarState({ config: newConfig });
+    });
     const filterableColumns = computed(() => columns.value
         .filter((c) => c.filterable && c.filterable.type)
         .map((c) => ({
         columnId: c.columnId,
         name: c.name,
-        filterField: c.filterable.filterField ?? c.columnId,
-        filterType: c.filterable.type,
+        filterField: c.filterable?.filterField ?? c.columnId,
+        filterType: c.filterable?.type,
     })));
     const sideBarProps = computed(() => {
+        const sideBarState = sideBarStateRef.value;
         if (!sideBarState.isEnabled)
             return null;
         // Re-read reactive deps so the computed tracks them, but use getters for