@alaarab/ogrid-vue 2.0.2 → 2.0.3

package/dist/esm/composables/index.js

@@ -14,6 +14,7 @@ export { useContextMenu } from './useContextMenu';
 export { useColumnResize } from './useColumnResize';
 export { useFilterOptions } from './useFilterOptions';
 export { useDebounce, useDebouncedCallback } from './useDebounce';
+export { useLatestRef } from './useLatestRef';
 export { useTableLayout } from './useTableLayout';
 // Headless state composables
 export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
@@ -25,3 +26,5 @@ export { useColumnChooserState } from './useColumnChooserState';
 export { useInlineCellEditorState } from './useInlineCellEditorState';
 export { useRichSelectState } from './useRichSelectState';
 export { useSideBarState } from './useSideBarState';
+export { useColumnReorder } from './useColumnReorder';
+export { useVirtualScroll } from './useVirtualScroll';

package/dist/esm/composables/useActiveCell.js

@@ -1,10 +1,11 @@
-import { ref, watch, nextTick } from 'vue';
+import { shallowRef, watch, onUnmounted } from 'vue';
 /**
  * Tracks the active cell for keyboard navigation.
  * When wrapperRef and editingCell are provided, scrolls the active cell into view when it changes (and not editing).
  */
 export function useActiveCell(wrapperRef, editingCell) {
-    const activeCell = ref(null);
+    const activeCell = shallowRef(null);
+    let pendingRaf = 0;
     // Deduplicating setter — skips update when the cell coordinates haven't actually changed.
     const setActiveCell = (cell) => {
         const prev = activeCell.value;
@@ -14,18 +15,30 @@ export function useActiveCell(wrapperRef, editingCell) {
             return;
         activeCell.value = cell;
     };
-    // Scroll active cell into view when it changes (equivalent to useLayoutEffect)
+    // Scroll active cell into view when it changes (equivalent to useLayoutEffect).
+    // Uses requestAnimationFrame to batch DOM reads (getBoundingClientRect) with the
+    // browser's layout cycle, avoiding forced reflows when rapidly clicking cells.
     watch([activeCell, () => editingCell?.value], () => {
+        // Cancel any pending scroll from a previous cell change
+        if (pendingRaf) {
+            cancelAnimationFrame(pendingRaf);
+            pendingRaf = 0;
+        }
         if (activeCell.value == null ||
             !wrapperRef?.value ||
             editingCell?.value != null)
             return;
-        // Use nextTick to ensure DOM is updated before scrolling
-        void nextTick(() => {
+        // Capture the target coordinates before the async boundary
+        const { rowIndex, columnIndex } = activeCell.value;
+        pendingRaf = requestAnimationFrame(() => {
+            pendingRaf = 0;
             const wrapper = wrapperRef.value;
-            if (!wrapper || !activeCell.value)
+            if (!wrapper)
+                return;
+            // Verify the active cell hasn't changed since we scheduled
+            const current = activeCell.value;
+            if (!current || current.rowIndex !== rowIndex || current.columnIndex !== columnIndex)
                 return;
-            const { rowIndex, columnIndex } = activeCell.value;
             const selector = `[data-row-index="${rowIndex}"][data-col-index="${columnIndex}"]`;
             const cell = wrapper.querySelector(selector);
             if (cell) {
@@ -54,5 +67,11 @@ export function useActiveCell(wrapperRef, editingCell) {
             }
         });
     }, { flush: 'post' });
+    onUnmounted(() => {
+        if (pendingRaf) {
+            cancelAnimationFrame(pendingRaf);
+            pendingRaf = 0;
+        }
+    });
     return { activeCell, setActiveCell };
 }

package/dist/esm/composables/useCellEditing.js

@@ -1,11 +1,18 @@
-import { ref } from 'vue';
+import { shallowRef, ref } from 'vue';
 /**
  * Manages cell editing state: which cell is being edited and its pending value.
+ * Optionally scrolls to the cell's row before opening the editor when virtual scrolling is active.
  */
-export function useCellEditing() {
-    const editingCell = ref(null);
+export function useCellEditing(params) {
+    const editingCell = shallowRef(null);
     const pendingEditorValue = ref(undefined);
     const setEditingCell = (cell) => {
+        if (cell && params?.scrollToRow && params?.getRowIndex) {
+            const rowIndex = params.getRowIndex(cell.rowId);
+            if (rowIndex >= 0) {
+                params.scrollToRow(rowIndex, 'center');
+            }
+        }
         editingCell.value = cell;
     };
     const setPendingEditorValue = (value) => {

package/dist/esm/composables/useCellSelection.js

@@ -1,5 +1,6 @@
-import { ref, onMounted, onUnmounted } from 'vue';
+import { shallowRef, ref, computed, onMounted, onUnmounted } from 'vue';
 import { normalizeSelectionRange } from '../types';
+import { useLatestRef } from './useLatestRef';
 /** Compares two selection ranges by value. */
 function rangesEqual(a, b) {
     if (a === b)
@@ -24,9 +25,11 @@ function autoScrollSpeed(distance) {
  * Manages cell selection range with drag-to-select and select-all support.
  */
 export function useCellSelection(params) {
-    const { colOffset, rowCount, visibleColCount, setActiveCell, wrapperRef } = params;
-    const selectionRange = ref(null);
-    const isDragging = ref(false);
+    // 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 selectionRange = shallowRef(null);
+    const isDragging = ref(false); // boolean primitive, ref is fine
     let isDraggingInternal = false;
     let dragMoved = false;
     let dragStart = null;
@@ -72,6 +75,7 @@ export function useCellSelection(params) {
         }
     };
     const handleSelectAllCells = () => {
+        const { rowCount, visibleColCount } = paramsRef.value;
         if (rowCount.value === 0 || visibleColCount.value === 0)
             return;
         setSelectionRange({

package/dist/esm/composables/useClipboard.js

@@ -1,14 +1,14 @@
-import { ref } from 'vue';
+import { ref, shallowRef } from 'vue';
 import { getCellValue, parseValue, normalizeSelectionRange } 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;
-    let cutRangeInternal = null;
-    const cutRange = ref(null);
-    const copyRange = ref(null);
-    let internalClipboard = null;
+    const cutRangeRef = ref(null);
+    const cutRange = shallowRef(null);
+    const copyRange = shallowRef(null);
+    const internalClipboardRef = ref(null);
     const getEffectiveRange = () => {
         const sel = selectionRange.value;
         const ac = activeCell.value;
@@ -38,7 +38,7 @@ export function useClipboard(params) {
             rows.push(cells.join('\t'));
         }
         const tsv = rows.join('\r\n');
-        internalClipboard = tsv;
+        internalClipboardRef.value = tsv;
         copyRange.value = norm;
         void navigator.clipboard.writeText(tsv).catch(() => { });
     };
@@ -49,7 +49,7 @@ export function useClipboard(params) {
         if (range == null || onCellValueChanged.value == null)
             return;
         const norm = normalizeSelectionRange(range);
-        cutRangeInternal = norm;
+        cutRangeRef.value = norm;
         cutRange.value = norm;
         copyRange.value = null;
         handleCopy();
@@ -68,8 +68,8 @@ export function useClipboard(params) {
         catch {
             text = '';
         }
-        if (!text.trim() && internalClipboard != null) {
-            text = internalClipboard;
+        if (!text.trim() && internalClipboardRef.value != null) {
+            text = internalClipboardRef.value;
         }
         if (!text.trim())
             return;
@@ -107,8 +107,8 @@ export function useClipboard(params) {
                 });
             }
         }
-        if (cutRangeInternal) {
-            const cut = cutRangeInternal;
+        if (cutRangeRef.value) {
+            const cut = cutRangeRef.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)
@@ -132,7 +132,7 @@ export function useClipboard(params) {
                     });
                 }
             }
-            cutRangeInternal = null;
+            cutRangeRef.value = null;
             cutRange.value = null;
         }
         endBatch?.();
@@ -141,7 +141,7 @@ export function useClipboard(params) {
     const clearClipboardRanges = () => {
         copyRange.value = null;
         cutRange.value = null;
-        cutRangeInternal = null;
+        cutRangeRef.value = null;
     };
-    return { handleCopy, handleCut, handlePaste, cutRange, copyRange, clearClipboardRanges };
+    return { handleCopy, handleCut, handlePaste, cutRange, copyRange, clearClipboardRanges, cutRangeRef };
 }

package/dist/esm/composables/useColumnReorder.js

@@ -0,0 +1,103 @@
+import { ref, onUnmounted } from 'vue';
+import { calculateDropTarget, reorderColumnArray, getPinStateForColumn, } from '@alaarab/ogrid-core';
+/** Width of the resize handle zone on the right edge of each header cell. */
+const RESIZE_HANDLE_ZONE = 8;
+/** Minimum drag distance (px) before activating reorder to prevent accidental drags on click. */
+const MIN_DRAG_DISTANCE = 5;
+/**
+ * Manages column reordering via drag-and-drop on header cells.
+ * Uses RAF-throttled mouse tracking and core's calculateDropTarget/reorderColumnArray.
+ */
+export function useColumnReorder(params) {
+    const { columnOrder, onColumnOrderChange, tableRef, pinnedColumns } = params;
+    const isDragging = ref(false);
+    const dropIndicatorX = ref(null);
+    let draggedColumnId = null;
+    let draggedPinState = 'unpinned';
+    let rafId = 0;
+    let cleanupFn = null;
+    onUnmounted(() => {
+        cleanupFn?.();
+        cleanupFn = null;
+    });
+    const handleHeaderMouseDown = (columnId, event) => {
+        if (event.button !== 0)
+            return;
+        // Skip if in resize handle zone (right 8px of the header cell)
+        const th = event.target.closest('th');
+        if (th) {
+            const rect = th.getBoundingClientRect();
+            if (event.clientX > rect.right - RESIZE_HANDLE_ZONE)
+                return;
+        }
+        event.preventDefault();
+        const table = tableRef.value;
+        if (!table)
+            return;
+        if (!onColumnOrderChange.value)
+            return;
+        draggedColumnId = columnId;
+        draggedPinState = getPinStateForColumn(columnId, pinnedColumns?.value);
+        dropIndicatorX.value = null;
+        const startX = event.clientX;
+        let hasMoved = false;
+        let latestMouseX = event.clientX;
+        let targetIndex = -1;
+        const prevCursor = document.body.style.cursor;
+        const prevUserSelect = document.body.style.userSelect;
+        document.body.style.cursor = 'grabbing';
+        document.body.style.userSelect = 'none';
+        const onMove = (moveEvent) => {
+            // Require minimum drag distance before activating
+            if (!hasMoved && Math.abs(moveEvent.clientX - startX) < MIN_DRAG_DISTANCE)
+                return;
+            if (!hasMoved) {
+                hasMoved = true;
+                isDragging.value = true;
+            }
+            latestMouseX = moveEvent.clientX;
+            if (!rafId) {
+                rafId = requestAnimationFrame(() => {
+                    rafId = 0;
+                    const tableEl = tableRef.value;
+                    if (!tableEl || !draggedColumnId)
+                        return;
+                    const result = calculateDropTarget(latestMouseX, columnOrder.value, draggedColumnId, draggedPinState, tableEl, pinnedColumns?.value);
+                    if (result) {
+                        targetIndex = result.targetIndex;
+                        dropIndicatorX.value = result.indicatorX;
+                    }
+                    else {
+                        dropIndicatorX.value = null;
+                    }
+                });
+            }
+        };
+        const cleanup = () => {
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
+            cleanupFn = null;
+            document.body.style.cursor = prevCursor;
+            document.body.style.userSelect = prevUserSelect;
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+                rafId = 0;
+            }
+        };
+        const onUp = () => {
+            cleanup();
+            if (hasMoved && draggedColumnId && targetIndex >= 0 && onColumnOrderChange.value) {
+                const newOrder = reorderColumnArray(columnOrder.value, draggedColumnId, targetIndex);
+                onColumnOrderChange.value(newOrder);
+            }
+            draggedColumnId = null;
+            isDragging.value = false;
+            dropIndicatorX.value = null;
+            targetIndex = -1;
+        };
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+        cleanupFn = cleanup;
+    };
+    return { isDragging, dropIndicatorX, handleHeaderMouseDown };
+}

package/dist/esm/composables/useContextMenu.js

@@ -1,9 +1,9 @@
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 /**
  * Manages context menu position state for right-click menus.
  */
 export function useContextMenu() {
-    const contextMenuPosition = ref(null);
+    const contextMenuPosition = shallowRef(null);
     const setContextMenuPosition = (pos) => {
         contextMenuPosition.value = pos;
     };

package/dist/esm/composables/useDebounce.js

@@ -20,20 +20,38 @@ export function useDebounce(value, delayMs) {
 }
 /**
  * Returns a stable callback that invokes the given function after the specified delay.
- * Each new call resets the timer.
+ * Each new call resets the timer. Includes `.cancel()` and `.flush()` methods.
  */
 export function useDebouncedCallback(fn, delayMs) {
     let timeoutId;
-    // Keep a reference to the latest fn
     let latestFn = fn;
+    let latestArgs;
     const debounced = ((...args) => {
         latestFn = fn;
+        latestArgs = args;
         if (timeoutId !== undefined)
             clearTimeout(timeoutId);
         timeoutId = setTimeout(() => {
             latestFn(...args);
+            latestArgs = undefined;
+            timeoutId = undefined;
         }, delayMs);
     });
+    debounced.cancel = () => {
+        if (timeoutId !== undefined)
+            clearTimeout(timeoutId);
+        timeoutId = undefined;
+        latestArgs = undefined;
+    };
+    debounced.flush = () => {
+        if (timeoutId !== undefined && latestArgs !== undefined) {
+            clearTimeout(timeoutId);
+            timeoutId = undefined;
+            const args = latestArgs;
+            latestArgs = undefined;
+            latestFn(...args);
+        }
+    };
     onUnmounted(() => {
         if (timeoutId !== undefined)
             clearTimeout(timeoutId);

package/dist/esm/composables/useFillHandle.js

@@ -1,12 +1,12 @@
-import { ref, watch, onUnmounted } from 'vue';
+import { shallowRef, watch, onUnmounted } from 'vue';
 import { normalizeSelectionRange, getCellValue, parseValue } 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, } = params;
-    const fillDrag = ref(null);
+    const { items, visibleCols, editable, onCellValueChanged, selectionRange, setSelectionRange, setActiveCell, colOffset, wrapperRef, beginBatch, endBatch, visibleRange, } = params;
+    const fillDrag = shallowRef(null);
     let fillDragEnd = { endRow: 0, endCol: 0 };
     let rafId = 0;
     let liveFillRange = null;
@@ -30,9 +30,12 @@ export function useFillHandle(params) {
         }
     };
     watch(fillDrag, (drag) => {
-        cleanup();
-        if (!drag || editable.value === false || !onCellValueChanged.value || !wrapperRef.value)
+        // Guard early before setting up any state
+        if (!drag || editable.value === false || !onCellValueChanged.value || !wrapperRef.value) {
+            // Still cleanup if transitioning from active to inactive
+            cleanup();
             return;
+        }
         fillDragEnd = { endRow: drag.startRow, endCol: drag.startCol };
         liveFillRange = null;
         const applyDragAttrs = (range) => {
@@ -124,6 +127,12 @@ export function useFillHandle(params) {
                 endRow: end.endRow,
                 endCol: end.endCol,
             });
+            // Clamp fill range to visible + overscan when virtual scrolling is active
+            const vr = visibleRange?.value;
+            if (vr) {
+                norm.startRow = Math.max(norm.startRow, vr.startIndex);
+                norm.endRow = Math.min(norm.endRow, vr.endIndex);
+            }
             setSelectionRange(norm);
             setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + colOffset });
             const currentItems = items.value;
@@ -161,6 +170,10 @@ 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 () => {
+            cleanup();
+        };
     });
     onUnmounted(() => cleanup());
     const handleFillHandleMouseDown = (e) => {

package/dist/esm/composables/useKeyboardNavigation.js

@@ -1,4 +1,6 @@
+import { computed } from 'vue';
 import { normalizeSelectionRange, getCellValue, parseValue } from '@alaarab/ogrid-core';
+import { useLatestRef } from './useLatestRef';
 /**
  * Excel-style Ctrl+Arrow: find the target position along a 1D axis.
  */
@@ -27,9 +29,10 @@ function findCtrlTarget(pos, edge, step, isEmpty) {
  * Handles all keyboard navigation, shortcuts, and cell editing triggers for the grid.
  */
 export function useKeyboardNavigation(params) {
-    // Read latest values from refs on each call — no memoization needed in Vue
+    // Store latest params in a ref so handleGridKeyDown is a stable callback
+    const paramsRef = useLatestRef(computed(() => params));
     const handleGridKeyDown = (e) => {
-        const { data, state, handlers, features } = params;
+        const { data, state, handlers, features } = paramsRef.value;
         const items = data.items.value;
         const visibleCols = data.visibleCols.value;
         const { colOffset, getRowId } = data;
@@ -44,6 +47,7 @@ export function useKeyboardNavigation(params) {
         const onCellValueChanged = features.onCellValueChanged.value;
         const rowSelection = features.rowSelection.value;
         const wrapperRef = features.wrapperRef;
+        const scrollToRow = features.scrollToRow;
         const maxRowIndex = items.length - 1;
         const maxColIndex = visibleColumnCount - 1 + colOffset;
         if (items.length === 0)
@@ -107,6 +111,7 @@ export function useKeyboardNavigation(params) {
                     setSelectionRange({ startRow: newRow, startCol: dataColIndex, endRow: newRow, endCol: dataColIndex });
                 }
                 setActiveCell({ rowIndex: newRow, columnIndex });
+                scrollToRow?.(newRow, 'center');
                 break;
             }
             case 'ArrowUp': {
@@ -127,6 +132,7 @@ export function useKeyboardNavigation(params) {
                     setSelectionRange({ startRow: newRowUp, startCol: dataColIndex, endRow: newRowUp, endCol: dataColIndex });
                 }
                 setActiveCell({ rowIndex: newRowUp, columnIndex });
+                scrollToRow?.(newRowUp, 'center');
                 break;
             }
             case 'ArrowRight': {

package/dist/esm/composables/useLatestRef.js

@@ -0,0 +1,27 @@
+import { customRef, unref } from 'vue';
+/**
+ * Returns a ref that always holds the latest value.
+ * Useful for capturing volatile state in stable callbacks
+ * without adding the value to reactive dependencies.
+ *
+ * Similar to React's useLatestRef, but uses Vue's customRef for synchronous updates.
+ * The returned ref does NOT trigger reactivity when read - it's a "silent" ref
+ * that always returns the current value without tracking dependencies.
+ */
+export function useLatestRef(source) {
+    let value = unref(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) {
+                value = source.value;
+            }
+            // Don't call track() - we don't want to add this to reactive dependencies
+            return value;
+        },
+        set(newValue) {
+            value = newValue;
+            trigger(); // Still allow setting and triggering if needed
+        },
+    }));
+}

package/dist/esm/composables/useOGrid.js

@@ -243,11 +243,20 @@ export function useOGrid(props) {
     const sideBarProps = computed(() => {
         if (!sideBarState.isEnabled)
             return null;
+        // Re-read reactive deps so the computed tracks them, but use getters for
+        // activePanel/isOpen so that a stored reference stays current after toggle/close.
+        const _activePanel = sideBarState.activePanel.value;
+        const _isOpen = sideBarState.isOpen.value;
+        void _activePanel;
+        void _isOpen;
         return {
-            activePanel: sideBarState.activePanel.value,
+            get activePanel() { return sideBarState.activePanel.value; },
             onPanelChange: sideBarState.setActivePanel,
             panels: sideBarState.panels,
             position: sideBarState.position,
+            get isOpen() { return sideBarState.isOpen.value; },
+            toggle: sideBarState.toggle,
+            close: sideBarState.close,
             columns: columnChooserColumns.value,
             visibleColumns: visibleColumns.value,
             onVisibilityChange: handleVisibilityChange,
@@ -297,6 +306,7 @@ export function useOGrid(props) {
         getUserByEmail: dataSource.value?.getUserByEmail,
         layoutMode: props.value.layoutMode,
         suppressHorizontalScroll: props.value.suppressHorizontalScroll,
+        virtualScroll: props.value.virtualScroll,
         'aria-label': props.value['aria-label'],
         'aria-labelledby': props.value['aria-labelledby'],
         emptyState: {
@@ -394,6 +404,14 @@ export function useOGrid(props) {
             if (isServerSide.value)
                 refreshCounter.value++;
         },
+        scrollToRow: () => {
+            // No-op at orchestration level — DataGridTable components implement
+            // this via useVirtualScroll.scrollToRow when virtual scrolling is active.
+        },
+        getColumnOrder: () => columnOrder.value ?? columns.value.map((c) => c.columnId),
+        setColumnOrder: (order) => {
+            onColumnOrderChange.value?.(order);
+        },
     }));
     return {
         dataGridProps,

package/dist/esm/composables/useRowSelection.js

@@ -16,7 +16,10 @@ export function useRowSelection(params) {
         return internalSelectedRows.value;
     });
     const updateSelection = (newSelectedIds) => {
-        if (controlledSelectedRows.value === undefined) {
+        if (controlledSelectedRows.value !== undefined) {
+            controlledSelectedRows.value = newSelectedIds;
+        }
+        else {
             internalSelectedRows.value = newSelectedIds;
         }
         onSelectionChange?.({

package/dist/esm/composables/useVirtualScroll.js

@@ -0,0 +1,84 @@
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { computeVisibleRange, computeTotalHeight, getScrollTopForRow, } from '@alaarab/ogrid-core';
+/**
+ * Manages virtual scrolling with RAF-throttled scroll handling and ResizeObserver
+ * for container height tracking. Uses core's computeVisibleRange for range calculation.
+ */
+export function useVirtualScroll(params) {
+    const { totalRows, rowHeight, enabled, overscan = 5 } = params;
+    const containerRef = ref(null);
+    const scrollTop = ref(0);
+    const containerHeight = ref(0);
+    let rafId = 0;
+    let resizeObserver;
+    const visibleRange = computed(() => {
+        if (!enabled.value) {
+            return { startIndex: 0, endIndex: totalRows.value - 1, offsetTop: 0, offsetBottom: 0 };
+        }
+        return computeVisibleRange(scrollTop.value, rowHeight, containerHeight.value, totalRows.value, overscan);
+    });
+    const totalHeight = computed(() => {
+        if (!enabled.value)
+            return 0;
+        return computeTotalHeight(totalRows.value, rowHeight);
+    });
+    const onScroll = () => {
+        if (!rafId) {
+            rafId = requestAnimationFrame(() => {
+                rafId = 0;
+                const el = containerRef.value;
+                if (el) {
+                    scrollTop.value = el.scrollTop;
+                }
+            });
+        }
+    };
+    const measure = () => {
+        const el = containerRef.value;
+        if (!el)
+            return;
+        containerHeight.value = el.clientHeight;
+    };
+    // Watch containerRef to attach/detach scroll listener and ResizeObserver
+    watch(containerRef, (el, prevEl) => {
+        if (prevEl) {
+            prevEl.removeEventListener('scroll', onScroll);
+            resizeObserver?.disconnect();
+        }
+        if (el) {
+            el.addEventListener('scroll', onScroll, { passive: true });
+            resizeObserver = new ResizeObserver(measure);
+            resizeObserver.observe(el);
+            measure();
+            scrollTop.value = el.scrollTop;
+        }
+    });
+    onMounted(() => {
+        const el = containerRef.value;
+        if (el) {
+            el.addEventListener('scroll', onScroll, { passive: true });
+            resizeObserver = new ResizeObserver(measure);
+            resizeObserver.observe(el);
+            measure();
+            scrollTop.value = el.scrollTop;
+        }
+    });
+    onUnmounted(() => {
+        const el = containerRef.value;
+        if (el) {
+            el.removeEventListener('scroll', onScroll);
+        }
+        resizeObserver?.disconnect();
+        if (rafId) {
+            cancelAnimationFrame(rafId);
+            rafId = 0;
+        }
+    });
+    const scrollToRow = (index, align = 'start') => {
+        const el = containerRef.value;
+        if (!el)
+            return;
+        el.scrollTop = getScrollTopForRow(index, rowHeight, containerHeight.value, align);
+    };
+    return { containerRef, visibleRange, totalHeight, scrollToRow };
+}

package/dist/esm/index.js

@@ -2,6 +2,6 @@
 export * from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 // Composables
-export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, } from './composables';
+export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, } from './composables';
 // View model utilities (for UI packages)
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './utils';

package/dist/types/components/SideBar.d.ts

@@ -15,6 +15,12 @@ export interface SideBarProps {
     onPanelChange: (panel: SideBarPanelId | null) => void;
     panels: SideBarPanelId[];
     position: 'left' | 'right';
+    /** Whether a panel is currently open. */
+    isOpen: boolean;
+    /** Toggle a specific panel open/closed. */
+    toggle: (panel: SideBarPanelId) => void;
+    /** Close the sidebar (set activePanel to null). */
+    close: () => void;
     columns: IColumnDefinition[];
     visibleColumns: Set<string>;
     onVisibilityChange: (columnKey: string, visible: boolean) => void;

package/dist/types/composables/index.d.ts

@@ -5,7 +5,7 @@ export type { UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutStat
 export { useActiveCell } from './useActiveCell';
 export type { UseActiveCellResult } from './useActiveCell';
 export { useCellEditing } from './useCellEditing';
-export type { EditingCell, UseCellEditingResult } from './useCellEditing';
+export type { EditingCell, UseCellEditingParams, UseCellEditingResult } from './useCellEditing';
 export { useCellSelection } from './useCellSelection';
 export type { UseCellSelectionParams, UseCellSelectionResult } from './useCellSelection';
 export { useClipboard } from './useClipboard';
@@ -25,6 +25,8 @@ export type { UseColumnResizeParams, UseColumnResizeResult } from './useColumnRe
 export { useFilterOptions } from './useFilterOptions';
 export type { UseFilterOptionsResult } from './useFilterOptions';
 export { useDebounce, useDebouncedCallback } from './useDebounce';
+export type { DebouncedFn } from './useDebounce';
+export { useLatestRef } from './useLatestRef';
 export { useTableLayout } from './useTableLayout';
 export type { UseTableLayoutParams, UseTableLayoutResult } from './useTableLayout';
 export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
@@ -45,3 +47,7 @@ export { useRichSelectState } from './useRichSelectState';
 export type { UseRichSelectStateParams, UseRichSelectStateResult } from './useRichSelectState';
 export { useSideBarState } from './useSideBarState';
 export type { UseSideBarStateParams, UseSideBarStateResult } from './useSideBarState';
+export { useColumnReorder } from './useColumnReorder';
+export type { UseColumnReorderParams, UseColumnReorderResult } from './useColumnReorder';
+export { useVirtualScroll } from './useVirtualScroll';
+export type { UseVirtualScrollParams, UseVirtualScrollResult } from './useVirtualScroll';

package/dist/types/composables/useActiveCell.d.ts

@@ -1,7 +1,7 @@
 import { type Ref, type ShallowRef } from 'vue';
 import type { IActiveCell, RowId } from '../types';
 export interface UseActiveCellResult {
-    activeCell: Ref<IActiveCell | null>;
+    activeCell: ShallowRef<IActiveCell | null>;
     setActiveCell: (cell: IActiveCell | null) => void;
 }
 /**

package/dist/types/composables/useCellEditing.d.ts

@@ -1,16 +1,21 @@
-import { type Ref } from 'vue';
+import { type Ref, type ShallowRef } from 'vue';
 import type { RowId } from '../types';
 export interface EditingCell {
     rowId: RowId;
     columnId: string;
 }
+export interface UseCellEditingParams {
+    scrollToRow?: (index: number, align?: 'start' | 'center' | 'end') => void;
+    getRowIndex?: (rowId: RowId) => number;
+}
 export interface UseCellEditingResult {
-    editingCell: Ref<EditingCell | null>;
+    editingCell: ShallowRef<EditingCell | null>;
     setEditingCell: (cell: EditingCell | null) => void;
     pendingEditorValue: Ref<unknown>;
     setPendingEditorValue: (value: unknown) => void;
 }
 /**
  * Manages cell editing state: which cell is being edited and its pending value.
+ * Optionally scrolls to the cell's row before opening the editor when virtual scrolling is active.
  */
-export declare function useCellEditing(): UseCellEditingResult;
+export declare function useCellEditing(params?: UseCellEditingParams): UseCellEditingResult;

package/dist/types/composables/useCellSelection.d.ts

@@ -8,7 +8,7 @@ export interface UseCellSelectionParams {
     wrapperRef: Ref<HTMLElement | null> | ShallowRef<HTMLElement | null>;
 }
 export interface UseCellSelectionResult {
-    selectionRange: Ref<ISelectionRange | null>;
+    selectionRange: ShallowRef<ISelectionRange | null>;
     setSelectionRange: (range: ISelectionRange | null) => void;
     handleCellMouseDown: (e: MouseEvent, rowIndex: number, globalColIndex: number) => void;
     handleSelectAllCells: () => void;

package/dist/types/composables/useClipboard.d.ts

@@ -1,11 +1,11 @@
-import { type Ref } from 'vue';
+import { type Ref, type ShallowRef } from 'vue';
 import type { ISelectionRange, IActiveCell, ICellValueChangedEvent, IColumnDef } from '../types';
 export interface UseClipboardParams<T> {
     items: Ref<T[]>;
     visibleCols: Ref<IColumnDef<T>[]>;
     colOffset: number;
-    selectionRange: Ref<ISelectionRange | null>;
-    activeCell: Ref<IActiveCell | null>;
+    selectionRange: Ref<ISelectionRange | null> | ShallowRef<ISelectionRange | null>;
+    activeCell: Ref<IActiveCell | null> | ShallowRef<IActiveCell | null>;
     editable: Ref<boolean | undefined>;
     onCellValueChanged: Ref<((event: ICellValueChangedEvent<T>) => void) | undefined>;
     beginBatch?: () => void;
@@ -15,9 +15,10 @@ export interface UseClipboardResult {
     handleCopy: () => void;
     handleCut: () => void;
     handlePaste: () => Promise<void>;
-    cutRange: Ref<ISelectionRange | null>;
-    copyRange: Ref<ISelectionRange | null>;
+    cutRange: ShallowRef<ISelectionRange | null>;
+    copyRange: ShallowRef<ISelectionRange | null>;
     clearClipboardRanges: () => void;
+    cutRangeRef: Ref<ISelectionRange | null>;
 }
 /**
  * Manages copy, cut, and paste operations for cell ranges with TSV clipboard format.

package/dist/types/composables/useColumnReorder.d.ts

@@ -0,0 +1,20 @@
+import { type Ref } from 'vue';
+export interface UseColumnReorderParams {
+    columnOrder: Ref<string[]>;
+    onColumnOrderChange: Ref<((order: string[]) => void) | undefined>;
+    tableRef: Ref<HTMLElement | null>;
+    pinnedColumns?: Ref<{
+        left?: string[];
+        right?: string[];
+    } | undefined>;
+}
+export interface UseColumnReorderResult {
+    isDragging: Ref<boolean>;
+    dropIndicatorX: Ref<number | null>;
+    handleHeaderMouseDown: (columnId: string, event: MouseEvent) => void;
+}
+/**
+ * Manages column reordering via drag-and-drop on header cells.
+ * Uses RAF-throttled mouse tracking and core's calculateDropTarget/reorderColumnArray.
+ */
+export declare function useColumnReorder(params: UseColumnReorderParams): UseColumnReorderResult;

package/dist/types/composables/useContextMenu.d.ts

@@ -1,10 +1,10 @@
-import { type Ref } from 'vue';
+import { type ShallowRef } from 'vue';
 export interface ContextMenuPosition {
     x: number;
     y: number;
 }
 export interface UseContextMenuResult {
-    contextMenuPosition: Ref<ContextMenuPosition | null>;
+    contextMenuPosition: ShallowRef<ContextMenuPosition | null>;
     setContextMenuPosition: (pos: ContextMenuPosition | null) => void;
     handleCellContextMenu: (e: {
         clientX: number;

package/dist/types/composables/useDebounce.d.ts

@@ -3,8 +3,15 @@ import { type Ref } from 'vue';
  * Returns a debounced ref that updates after the specified delay when the source value changes.
  */
 export declare function useDebounce<T>(value: Ref<T>, delayMs: number): Ref<T>;
+export interface DebouncedFn<T extends (...args: unknown[]) => void> {
+    (...args: Parameters<T>): void;
+    /** Cancel the pending invocation. */
+    cancel: () => void;
+    /** Execute the pending invocation immediately (no-op if nothing pending). */
+    flush: () => void;
+}
 /**
  * Returns a stable callback that invokes the given function after the specified delay.
- * Each new call resets the timer.
+ * Each new call resets the timer. Includes `.cancel()` and `.flush()` methods.
  */
-export declare function useDebouncedCallback<T extends (...args: unknown[]) => void>(fn: T, delayMs: number): T;
+export declare function useDebouncedCallback<T extends (...args: unknown[]) => void>(fn: T, delayMs: number): DebouncedFn<T>;

package/dist/types/composables/useFillHandle.d.ts

@@ -1,20 +1,22 @@
 import { type Ref, type ShallowRef } from 'vue';
 import type { ISelectionRange, IActiveCell, IColumnDef, ICellValueChangedEvent } from '../types';
+import type { IVisibleRange } from '@alaarab/ogrid-core';
 export interface UseFillHandleParams<T> {
     items: Ref<T[]>;
     visibleCols: Ref<IColumnDef<T>[]>;
     editable: Ref<boolean | undefined>;
     onCellValueChanged: Ref<((event: ICellValueChangedEvent<T>) => void) | undefined>;
-    selectionRange: Ref<ISelectionRange | null>;
+    selectionRange: Ref<ISelectionRange | null> | ShallowRef<ISelectionRange | null>;
     setSelectionRange: (range: ISelectionRange | null) => void;
     setActiveCell: (cell: IActiveCell | null) => void;
     colOffset: number;
     wrapperRef: Ref<HTMLElement | null> | ShallowRef<HTMLElement | null>;
     beginBatch?: () => void;
     endBatch?: () => void;
+    visibleRange?: Ref<IVisibleRange | null>;
 }
 export interface UseFillHandleResult {
-    fillDrag: Ref<{
+    fillDrag: ShallowRef<{
         startRow: number;
         startCol: number;
     } | null>;

package/dist/types/composables/useKeyboardNavigation.d.ts

@@ -2,6 +2,8 @@ import { type Ref, type ShallowRef } from 'vue';
 import type { RowId, IActiveCell, ISelectionRange, IColumnDef, ICellValueChangedEvent, RowSelectionMode } from '../types';
 import type { EditingCell } from './useCellEditing';
 import type { ContextMenuPosition } from './useContextMenu';
+/** Accept either Ref or ShallowRef for state fields */
+type MaybeShallowRef<T> = Ref<T> | ShallowRef<T>;
 export interface UseKeyboardNavigationParams<T> {
     data: {
         items: Ref<T[]>;
@@ -12,9 +14,9 @@ export interface UseKeyboardNavigationParams<T> {
         getRowId: (item: T) => RowId;
     };
     state: {
-        activeCell: Ref<IActiveCell | null>;
-        selectionRange: Ref<ISelectionRange | null>;
-        editingCell: Ref<EditingCell | null>;
+        activeCell: MaybeShallowRef<IActiveCell | null>;
+        selectionRange: MaybeShallowRef<ISelectionRange | null>;
+        editingCell: MaybeShallowRef<EditingCell | null>;
         selectedRowIds: Ref<Set<RowId>>;
     };
     handlers: {
@@ -35,6 +37,7 @@ export interface UseKeyboardNavigationParams<T> {
         onCellValueChanged: Ref<((event: ICellValueChangedEvent<T>) => void) | undefined>;
         rowSelection: Ref<RowSelectionMode>;
         wrapperRef: Ref<HTMLElement | null> | ShallowRef<HTMLElement | null>;
+        scrollToRow?: (index: number, align?: 'start' | 'center' | 'end') => void;
     };
 }
 export interface UseKeyboardNavigationResult {
@@ -44,3 +47,4 @@ export interface UseKeyboardNavigationResult {
  * Handles all keyboard navigation, shortcuts, and cell editing triggers for the grid.
  */
 export declare function useKeyboardNavigation<T>(params: UseKeyboardNavigationParams<T>): UseKeyboardNavigationResult;
+export {};

package/dist/types/composables/useLatestRef.d.ts

@@ -0,0 +1,11 @@
+import { type Ref } from 'vue';
+/**
+ * Returns a ref that always holds the latest value.
+ * Useful for capturing volatile state in stable callbacks
+ * without adding the value to reactive dependencies.
+ *
+ * Similar to React's useLatestRef, but uses Vue's customRef for synchronous updates.
+ * The returned ref does NOT trigger reactivity when read - it's a "silent" ref
+ * that always returns the current value without tracking dependencies.
+ */
+export declare function useLatestRef<T>(source: Ref<T> | T): Ref<T>;

package/dist/types/composables/useVirtualScroll.d.ts

@@ -0,0 +1,19 @@
+import { type Ref } from 'vue';
+import type { IVisibleRange } from '@alaarab/ogrid-core';
+export interface UseVirtualScrollParams {
+    totalRows: Ref<number>;
+    rowHeight: number;
+    enabled: Ref<boolean>;
+    overscan?: number;
+}
+export interface UseVirtualScrollResult {
+    containerRef: Ref<HTMLElement | null>;
+    visibleRange: Ref<IVisibleRange>;
+    totalHeight: Ref<number>;
+    scrollToRow: (index: number, align?: 'start' | 'center' | 'end') => void;
+}
+/**
+ * Manages virtual scrolling with RAF-throttled scroll handling and ResizeObserver
+ * for container height tracking. Uses core's computeVisibleRange for range calculation.
+ */
+export declare function useVirtualScroll(params: UseVirtualScrollParams): UseVirtualScrollResult;

package/dist/types/index.d.ts

@@ -1,9 +1,9 @@
 export * from '@alaarab/ogrid-core';
 export type { IColumnDef, ICellEditorProps, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, } from './types';
-export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, } from './types';
+export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, } from './types';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
-export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, } from './composables';
-export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, UseActiveCellResult, EditingCell, UseCellEditingResult, UseCellSelectionParams, UseCellSelectionResult, UseClipboardParams, UseClipboardResult, UseRowSelectionParams, UseRowSelectionResult, UseKeyboardNavigationParams, UseKeyboardNavigationResult, UseFillHandleParams, UseFillHandleResult, UseUndoRedoParams, UseUndoRedoResult, ContextMenuPosition, UseContextMenuResult, UseColumnResizeParams, UseColumnResizeResult, UseFilterOptionsResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, InlineCellEditorType, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, } from './composables';
+export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, } from './composables';
+export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, UseActiveCellResult, EditingCell, UseCellEditingParams, UseCellEditingResult, UseCellSelectionParams, UseCellSelectionResult, UseClipboardParams, UseClipboardResult, UseRowSelectionParams, UseRowSelectionResult, UseKeyboardNavigationParams, UseKeyboardNavigationResult, UseFillHandleParams, UseFillHandleResult, UseUndoRedoParams, UseUndoRedoResult, ContextMenuPosition, UseContextMenuResult, UseColumnResizeParams, UseColumnResizeResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UseFilterOptionsResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, InlineCellEditorType, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, DebouncedFn, } from './composables';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './utils';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, CellInteractionProps, } from './utils';
 export type { SideBarProps, SideBarFilterColumn } from './components/SideBar';

package/dist/types/types/dataGridTypes.d.ts

@@ -1,7 +1,7 @@
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from './columnTypes';
-export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IOGridApi, } from '@alaarab/ogrid-core';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IOGridApi, IVirtualScrollConfig, } from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-core';
-import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef } from '@alaarab/ogrid-core';
+import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef, IVirtualScrollConfig } from '@alaarab/ogrid-core';
 /** Base props shared by both client-side and server-side OGrid modes. */
 interface IOGridBaseProps<T> {
     columns: (IColumnDef<T> | IColumnGroupDef<T>)[];
@@ -73,6 +73,8 @@ interface IOGridBaseProps<T> {
     onError?: (error: unknown) => void;
     /** Called when a cell renderer or custom editor throws an error. */
     onCellError?: (error: Error, info: unknown) => void;
+    /** Virtual scrolling configuration. Set `enabled: true` with a fixed `rowHeight` to virtualize large datasets. */
+    virtualScroll?: IVirtualScrollConfig;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
@@ -146,6 +148,8 @@ export interface IOGridDataGridProps<T> {
     };
     /** Called when a cell renderer or custom editor throws an error. */
     onCellError?: (error: Error, info: unknown) => void;
+    /** Virtual scrolling configuration. */
+    virtualScroll?: IVirtualScrollConfig;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }

package/dist/types/types/index.d.ts

@@ -1,3 +1,3 @@
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, } from './columnTypes';
-export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, } from './dataGridTypes';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, } from './dataGridTypes';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "OGrid Vue – Vue 3 composables, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -22,7 +22,7 @@
   "files": ["dist", "README.md", "LICENSE"],
   "engines": { "node": ">=18" },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.2"
+    "@alaarab/ogrid-core": "2.0.3"
   },
   "peerDependencies": {
     "vue": "^3.3.0"