@alaarab/ogrid-vue 2.0.15 → 2.0.17

package/dist/esm/components/createDataGridTable.js

@@ -29,6 +29,60 @@ export function createDataGridTable(ui) {
             const onWrapperMousedown = (e) => { lastMouseShift.value = e.shiftKey; };
             const onContextmenu = (e) => e.preventDefault();
             const stopPropagation = (e) => e.stopPropagation();
+            // 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).
+            const columnMetaCache = computed(() => {
+                const layout = state.layout.value;
+                const pinning = state.pinning.value;
+                const { visibleCols, columnSizingOverrides, measuredColumnWidths } = layout;
+                const { leftOffsets, rightOffsets } = pinning;
+                const freezeCols = propsRef.value.freezeCols;
+                const cellStyles = {};
+                const cellClasses = {};
+                const hdrStyles = {};
+                const hdrClasses = {};
+                for (let colIdx = 0; colIdx < visibleCols.length; colIdx++) {
+                    const col = visibleCols[colIdx];
+                    const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
+                    const isPinnedLeft = col.pinned === 'left';
+                    const isPinnedRight = col.pinned === 'right';
+                    const columnWidth = getColumnWidth(col);
+                    const hasResizeOverride = !!columnSizingOverrides[col.columnId];
+                    const measuredW = measuredColumnWidths[col.columnId];
+                    const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+                    const effectiveMinWidth = hasResizeOverride ? columnWidth : Math.max(baseMinWidth, measuredW ?? 0);
+                    const tdStyle = {
+                        minWidth: `${effectiveMinWidth}px`,
+                        width: `${columnWidth}px`,
+                        maxWidth: `${columnWidth}px`,
+                    };
+                    const hdrStyle = {
+                        minWidth: `${effectiveMinWidth}px`,
+                        width: `${columnWidth}px`,
+                        maxWidth: `${columnWidth}px`,
+                    };
+                    const tdClassParts = ['ogrid-data-cell'];
+                    const hdrClassParts = ['ogrid-header-cell'];
+                    if (isPinnedLeft || (isFreezeCol && colIdx === 0)) {
+                        tdClassParts.push('ogrid-data-cell--pinned-left');
+                        tdStyle.left = `${leftOffsets[col.columnId] ?? 0}px`;
+                        hdrClassParts.push('ogrid-header-cell--pinned-left');
+                        hdrStyle.left = `${leftOffsets[col.columnId] ?? 0}px`;
+                    }
+                    else if (isPinnedRight) {
+                        tdClassParts.push('ogrid-data-cell--pinned-right');
+                        tdStyle.right = `${rightOffsets[col.columnId] ?? 0}px`;
+                        hdrClassParts.push('ogrid-header-cell--pinned-right');
+                        hdrStyle.right = `${rightOffsets[col.columnId] ?? 0}px`;
+                    }
+                    cellStyles[col.columnId] = tdStyle;
+                    cellClasses[col.columnId] = tdClassParts.join(' ');
+                    hdrStyles[col.columnId] = hdrStyle;
+                    hdrClasses[col.columnId] = hdrClassParts.join(' ');
+                }
+                return { cellStyles, cellClasses, hdrStyles, hdrClasses };
+            });
             return () => {
                 const p = props.gridProps;
                 const layout = state.layout.value;
@@ -45,7 +99,7 @@ export function createDataGridTable(ui) {
                 const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * pageSize : 0;
                 const { selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
                 const { editingCell: _editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
-                const { setActiveCell, handleCellMouseDown, handleSelectAllCells, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange: _cutRange, copyRange: _copyRange, canUndo, canRedo, onUndo, onRedo, isDragging: _isDragging, } = interaction;
+                const { setActiveCell, setSelectionRange, handleCellMouseDown, handleSelectAllCells, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange: _cutRange, copyRange: _copyRange, canUndo, canRedo, onUndo, onRedo, isDragging: _isDragging, } = interaction;
                 const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
                 const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError: _onCellError } = viewModels;
                 const items = p.items;
@@ -78,7 +132,7 @@ export function createDataGridTable(ui) {
                     const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInput);
                     if (descriptor.mode === 'editing-inline') {
                         const editorProps = buildInlineEditorProps(item, col, descriptor, editCallbacks);
-                        return h(ui.InlineCellEditor, {
+                        return h('div', { class: 'ogrid-editing-cell' }, h(ui.InlineCellEditor, {
                             value: editorProps.value,
                             item: editorProps.item,
                             column: editorProps.column,
@@ -86,7 +140,7 @@ export function createDataGridTable(ui) {
                             editorType: editorProps.editorType,
                             onCommit: editorProps.onCommit,
                             onCancel: editorProps.onCancel,
-                        });
+                        }));
                     }
                     if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
                         const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValue, editCallbacks);
@@ -137,53 +191,22 @@ export function createDataGridTable(ui) {
                         ] : []),
                     ]);
                 };
-                // Pre-computed pinning offsets
-                const leftOffsets = pinning.leftOffsets;
-                const rightOffsets = pinning.rightOffsets;
-                // Build column layouts
-                const columnLayouts = visibleCols.map((col, colIdx) => {
-                    const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
-                    const isPinnedLeft = col.pinned === 'left';
-                    const isPinnedRight = col.pinned === 'right';
-                    const columnWidth = getColumnWidth(col);
-                    const tdClasses = ['ogrid-data-cell'];
-                    const tdDynamicStyle = {
-                        minWidth: `${col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH}px`,
-                        width: `${columnWidth}px`,
-                        maxWidth: `${columnWidth}px`,
-                    };
-                    if (isPinnedLeft || (isFreezeCol && colIdx === 0)) {
-                        tdClasses.push('ogrid-data-cell--pinned-left');
-                        tdDynamicStyle.left = `${leftOffsets[col.columnId] ?? 0}px`;
-                    }
-                    else if (isPinnedRight) {
-                        tdClasses.push('ogrid-data-cell--pinned-right');
-                        tdDynamicStyle.right = `${rightOffsets[col.columnId] ?? 0}px`;
-                    }
-                    return { col, tdClasses: tdClasses.join(' '), tdDynamicStyle };
-                });
-                // Build header cell classes + dynamic styles
-                const getHeaderClassAndStyle = (col, colIdx) => {
-                    const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
-                    const isPinnedLeft = col.pinned === 'left';
-                    const isPinnedRight = col.pinned === 'right';
-                    const columnWidth = getColumnWidth(col);
-                    const classes = ['ogrid-header-cell'];
-                    const style = {
-                        cursor: isReorderDragging.value ? 'grabbing' : 'grab',
-                        minWidth: `${col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH}px`,
-                        width: `${columnWidth}px`,
-                        maxWidth: `${columnWidth}px`,
+                // Use the pre-computed column metadata cache (computed in setup() for memoization)
+                const { cellStyles: colCellStyles, cellClasses: colCellClasses, hdrStyles: colHdrStyles, hdrClasses: colHdrClasses } = columnMetaCache.value;
+                // Build column layouts using cached metadata
+                const columnLayouts = visibleCols.map((col) => ({
+                    col,
+                    tdClasses: colCellClasses[col.columnId] || 'ogrid-data-cell',
+                    tdDynamicStyle: colCellStyles[col.columnId] || {},
+                }));
+                // Header class+style lookup using cached metadata
+                const getHeaderClassAndStyle = (col) => {
+                    const base = colHdrStyles[col.columnId] || {};
+                    // cursor depends on drag state — add it at render time (not cached)
+                    return {
+                        classes: colHdrClasses[col.columnId] || 'ogrid-header-cell',
+                        style: { ...base, cursor: isReorderDragging.value ? 'grabbing' : 'grab' },
                     };
-                    if (isPinnedLeft || (isFreezeCol && colIdx === 0)) {
-                        classes.push('ogrid-header-cell--pinned-left');
-                        style.left = `${leftOffsets[col.columnId] ?? 0}px`;
-                    }
-                    else if (isPinnedRight) {
-                        classes.push('ogrid-header-cell--pinned-right');
-                        style.right = `${rightOffsets[col.columnId] ?? 0}px`;
-                    }
-                    return { classes: classes.join(' '), style };
                 };
                 // Dynamic wrapper style
                 const wrapperStyle = {
@@ -245,7 +268,8 @@ export function createDataGridTable(ui) {
                                                     },
                                                 }, ui.renderCheckbox({
                                                     modelValue: allSelected,
-                                                    indeterminate: someSelected,
+                                                    // Indeterminate only when some (but not all) rows are selected
+                                                    indeterminate: someSelected && !allSelected,
                                                     ariaLabel: 'Select all rows',
                                                     onChange: (c) => handleSelectAll(!!c),
                                                 })),
@@ -296,8 +320,7 @@ export function createDataGridTable(ui) {
                                                     }, cell.label);
                                                 }
                                                 const col = cell.columnDef;
-                                                const colIdx = visibleCols.indexOf(col);
-                                                const { classes: headerClasses, style: headerStyle } = getHeaderClassAndStyle(col, colIdx);
+                                                const { classes: headerClasses, style: headerStyle } = getHeaderClassAndStyle(col);
                                                 return h('th', {
                                                     key: col.columnId,
                                                     scope: 'col',
@@ -320,7 +343,15 @@ export function createDataGridTable(ui) {
                                                         }, '\u22EE'),
                                                     ]),
                                                     h('div', {
-                                                        onMousedown: (e) => { e.stopPropagation(); handleResizeStart(e, col); },
+                                                        onMousedown: (e) => {
+                                                            // Clear cell selection/focus before resize so outlines
+                                                            // and focus rings don't persist during drag (parity with React).
+                                                            setActiveCell(null);
+                                                            setSelectionRange(null);
+                                                            wrapperRef.value?.focus({ preventScroll: true });
+                                                            e.stopPropagation();
+                                                            handleResizeStart(e, col);
+                                                        },
                                                         class: 'ogrid-resize-handle',
                                                     }),
                                                 ]);

package/dist/esm/composables/useCellSelection.js

@@ -1,27 +1,12 @@
 import { shallowRef, ref, computed, onMounted, onUnmounted } from 'vue';
-import { normalizeSelectionRange } from '../types';
+import { normalizeSelectionRange, rangesEqual, computeAutoScrollSpeed } from '@alaarab/ogrid-core';
 import { useLatestRef } from './useLatestRef';
-/** Compares two selection ranges by value. */
-function rangesEqual(a, b) {
-    if (a === b)
-        return true;
-    if (!a || !b)
-        return false;
-    return a.startRow === b.startRow && a.endRow === b.endRow &&
-        a.startCol === b.startCol && a.endCol === b.endCol;
-}
 /** DOM attribute names used for drag-range highlighting (bypasses Vue). */
 const DRAG_ATTR = 'data-drag-range';
 const DRAG_ANCHOR_ATTR = 'data-drag-anchor';
 /** Auto-scroll config */
 const AUTO_SCROLL_EDGE = 40;
-const AUTO_SCROLL_MIN_SPEED = 2;
-const AUTO_SCROLL_MAX_SPEED = 20;
 const AUTO_SCROLL_INTERVAL = 16;
-function autoScrollSpeed(distance) {
-    const t = Math.min(distance / AUTO_SCROLL_EDGE, 1);
-    return AUTO_SCROLL_MIN_SPEED + t * (AUTO_SCROLL_MAX_SPEED - AUTO_SCROLL_MIN_SPEED);
-}
 /**
  * Manages cell selection range with drag-to-select and select-all support.
  */
@@ -191,16 +176,16 @@ export function useCellSelection(params) {
         let dx = 0;
         let dy = 0;
         if (lastMousePos.cy < rect.top + AUTO_SCROLL_EDGE) {
-            dy = -autoScrollSpeed(rect.top + AUTO_SCROLL_EDGE - lastMousePos.cy);
+            dy = -computeAutoScrollSpeed(rect.top + AUTO_SCROLL_EDGE - lastMousePos.cy);
         }
         else if (lastMousePos.cy > rect.bottom - AUTO_SCROLL_EDGE) {
-            dy = autoScrollSpeed(lastMousePos.cy - (rect.bottom - AUTO_SCROLL_EDGE));
+            dy = computeAutoScrollSpeed(lastMousePos.cy - (rect.bottom - AUTO_SCROLL_EDGE));
         }
         if (lastMousePos.cx < rect.left + AUTO_SCROLL_EDGE) {
-            dx = -autoScrollSpeed(rect.left + AUTO_SCROLL_EDGE - lastMousePos.cx);
+            dx = -computeAutoScrollSpeed(rect.left + AUTO_SCROLL_EDGE - lastMousePos.cx);
         }
         else if (lastMousePos.cx > rect.right - AUTO_SCROLL_EDGE) {
-            dx = autoScrollSpeed(lastMousePos.cx - (rect.right - AUTO_SCROLL_EDGE));
+            dx = computeAutoScrollSpeed(lastMousePos.cx - (rect.right - AUTO_SCROLL_EDGE));
         }
         if (dx === 0 && dy === 0) {
             stopAutoScroll();
@@ -218,13 +203,13 @@ export function useCellSelection(params) {
                 let sdx = 0;
                 let sdy = 0;
                 if (p.cy < r.top + AUTO_SCROLL_EDGE)
-                    sdy = -autoScrollSpeed(r.top + AUTO_SCROLL_EDGE - p.cy);
+                    sdy = -computeAutoScrollSpeed(r.top + AUTO_SCROLL_EDGE - p.cy);
                 else if (p.cy > r.bottom - AUTO_SCROLL_EDGE)
-                    sdy = autoScrollSpeed(p.cy - (r.bottom - AUTO_SCROLL_EDGE));
+                    sdy = computeAutoScrollSpeed(p.cy - (r.bottom - AUTO_SCROLL_EDGE));
                 if (p.cx < r.left + AUTO_SCROLL_EDGE)
-                    sdx = -autoScrollSpeed(r.left + AUTO_SCROLL_EDGE - p.cx);
+                    sdx = -computeAutoScrollSpeed(r.left + AUTO_SCROLL_EDGE - p.cx);
                 else if (p.cx > r.right - AUTO_SCROLL_EDGE)
-                    sdx = autoScrollSpeed(p.cx - (r.right - AUTO_SCROLL_EDGE));
+                    sdx = computeAutoScrollSpeed(p.cx - (r.right - AUTO_SCROLL_EDGE));
                 if (sdx === 0 && sdy === 0) {
                     stopAutoScroll();
                     return;

package/dist/esm/composables/useClipboard.js

@@ -1,5 +1,5 @@
 import { ref, shallowRef } from 'vue';
-import { getCellValue, parseValue, normalizeSelectionRange } from '@alaarab/ogrid-core';
+import { getCellValue, parseValue, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard } from '@alaarab/ogrid-core';
 /**
  * Manages copy, cut, and paste operations for cell ranges with TSV clipboard format.
  */
@@ -20,23 +20,7 @@ export function useClipboard(params) {
         if (range == null)
             return;
         const norm = normalizeSelectionRange(range);
-        const currentItems = items.value;
-        const currentCols = visibleCols.value;
-        const rows = [];
-        for (let r = norm.startRow; r <= norm.endRow; r++) {
-            const cells = [];
-            for (let c = norm.startCol; c <= norm.endCol; c++) {
-                if (r >= currentItems.length || c >= currentCols.length)
-                    break;
-                const item = currentItems[r];
-                const col = currentCols[c];
-                const raw = getCellValue(item, col);
-                const val = col.valueFormatter ? col.valueFormatter(raw, item) : raw;
-                cells.push(val != null && val !== '' ? String(val).replace(/\t/g, ' ').replace(/\n/g, ' ') : '');
-            }
-            rows.push(cells.join('\t'));
-        }
-        const tsv = rows.join('\r\n');
+        const tsv = formatSelectionAsTsv(items.value, visibleCols.value, norm);
         internalClipboardRef.value = tsv;
         copyRange.value = norm;
         void navigator.clipboard.writeText(tsv).catch(() => { });
@@ -76,10 +60,10 @@ export function useClipboard(params) {
         const anchorCol = norm ? norm.startCol : 0;
         const currentItems = items.value;
         const currentCols = visibleCols.value;
-        const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
+        const parsedRows = parseTsvClipboard(text);
         beginBatch?.();
-        for (let r = 0; r < lines.length; r++) {
-            const cells = lines[r].split('\t');
+        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;

package/dist/esm/composables/useDataGridState.js

@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '@alaarab/ogrid-core';
 import { useRowSelection } from './useRowSelection';
 import { useCellEditing } from './useCellEditing';
@@ -191,6 +191,40 @@ export function useDataGridState(params) {
         sortBy: computed(() => props.value.sortBy),
         sortDirection: computed(() => props.value.sortDirection),
     });
+    // 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).
+    const measuredColumnWidths = ref({});
+    watch([visibleCols, containerWidth, columnSizingOverrides], () => {
+        void nextTick(() => {
+            const wrapper = wrapperRef.value;
+            if (!wrapper)
+                return;
+            const headerCells = wrapper.querySelectorAll('th[data-column-id]');
+            if (headerCells.length === 0)
+                return;
+            const measured = {};
+            headerCells.forEach((cell) => {
+                const colId = cell.getAttribute('data-column-id');
+                if (colId)
+                    measured[colId] = cell.offsetWidth;
+            });
+            // Only update if widths actually changed to avoid reactive loops
+            const prev = measuredColumnWidths.value;
+            const keys = Object.keys(measured);
+            let changed = keys.length !== Object.keys(prev).length;
+            if (!changed) {
+                for (const key of keys) {
+                    if (prev[key] !== measured[key]) {
+                        changed = true;
+                        break;
+                    }
+                }
+            }
+            if (changed)
+                measuredColumnWidths.value = measured;
+        });
+    }, { flush: 'post' });
     // Build column width map for pinning offset computation
     const columnWidthMap = computed(() => {
         const map = {};
@@ -289,6 +323,7 @@ export function useDataGridState(params) {
         columnSizingOverrides: columnSizingOverrides.value,
         setColumnSizingOverrides,
         onColumnResized: onColumnResizedProp.value,
+        measuredColumnWidths: measuredColumnWidths.value,
     }));
     const rowSelectionState = computed(() => ({
         selectedRowIds: rowSelectionResult.selectedRowIds.value,

package/dist/esm/composables/useKeyboardNavigation.js

@@ -1,30 +1,6 @@
 import { computed } from 'vue';
-import { normalizeSelectionRange, getCellValue, parseValue } from '@alaarab/ogrid-core';
+import { normalizeSelectionRange, getCellValue, parseValue, findCtrlArrowTarget, computeTabNavigation } from '@alaarab/ogrid-core';
 import { useLatestRef } from './useLatestRef';
-/**
- * Excel-style Ctrl+Arrow: find the target position along a 1D axis.
- */
-function findCtrlTarget(pos, edge, step, isEmpty) {
-    if (pos === edge)
-        return pos;
-    const next = pos + step;
-    if (!isEmpty(pos) && !isEmpty(next)) {
-        let p = next;
-        while (p !== edge) {
-            if (isEmpty(p + step))
-                return p;
-            p += step;
-        }
-        return edge;
-    }
-    let p = next;
-    while (p !== edge) {
-        if (!isEmpty(p))
-            return p;
-        p += step;
-    }
-    return edge;
-}
 /**
  * Handles all keyboard navigation, shortcuts, and cell editing triggers for the grid.
  */
@@ -97,7 +73,7 @@ export function useKeyboardNavigation(params) {
                 e.preventDefault();
                 const ctrl = e.ctrlKey || e.metaKey;
                 const newRow = ctrl
-                    ? findCtrlTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
+                    ? findCtrlArrowTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
                     : Math.min(rowIndex + 1, maxRowIndex);
                 if (shift) {
                     setSelectionRange(normalizeSelectionRange({
@@ -118,7 +94,7 @@ export function useKeyboardNavigation(params) {
                 e.preventDefault();
                 const ctrl = e.ctrlKey || e.metaKey;
                 const newRowUp = ctrl
-                    ? findCtrlTarget(rowIndex, 0, -1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
+                    ? findCtrlArrowTarget(rowIndex, 0, -1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
                     : Math.max(rowIndex - 1, 0);
                 if (shift) {
                     setSelectionRange(normalizeSelectionRange({
@@ -140,7 +116,7 @@ export function useKeyboardNavigation(params) {
                 const ctrl = e.ctrlKey || e.metaKey;
                 let newCol;
                 if (ctrl && dataColIndex >= 0) {
-                    newCol = findCtrlTarget(dataColIndex, visibleCols.length - 1, 1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
+                    newCol = findCtrlArrowTarget(dataColIndex, visibleCols.length - 1, 1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
                 }
                 else {
                     newCol = Math.min(columnIndex + 1, maxColIndex);
@@ -165,7 +141,7 @@ export function useKeyboardNavigation(params) {
                 const ctrl = e.ctrlKey || e.metaKey;
                 let newColLeft;
                 if (ctrl && dataColIndex >= 0) {
-                    newColLeft = findCtrlTarget(dataColIndex, 0, -1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
+                    newColLeft = findCtrlArrowTarget(dataColIndex, 0, -1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
                 }
                 else {
                     newColLeft = Math.max(columnIndex - 1, colOffset);
@@ -187,26 +163,7 @@ export function useKeyboardNavigation(params) {
             }
             case 'Tab': {
                 e.preventDefault();
-                let newRowTab = rowIndex;
-                let newColTab = columnIndex;
-                if (e.shiftKey) {
-                    if (columnIndex > colOffset) {
-                        newColTab = columnIndex - 1;
-                    }
-                    else if (rowIndex > 0) {
-                        newRowTab = rowIndex - 1;
-                        newColTab = maxColIndex;
-                    }
-                }
-                else {
-                    if (columnIndex < maxColIndex) {
-                        newColTab = columnIndex + 1;
-                    }
-                    else if (rowIndex < maxRowIndex) {
-                        newRowTab = rowIndex + 1;
-                        newColTab = colOffset;
-                    }
-                }
+                const { rowIndex: newRowTab, columnIndex: newColTab } = computeTabNavigation(rowIndex, columnIndex, maxRowIndex, maxColIndex, colOffset, e.shiftKey);
                 const newDataColTab = newColTab - colOffset;
                 setSelectionRange({ startRow: newRowTab, startCol: newDataColTab, endRow: newRowTab, endCol: newDataColTab });
                 setActiveCell({ rowIndex: newRowTab, columnIndex: newColTab });

package/dist/esm/composables/useUndoRedo.js

@@ -1,50 +1,40 @@
 import { ref } from 'vue';
+import { UndoRedoStack } from '@alaarab/ogrid-core';
 /**
  * Wraps onCellValueChanged with an undo/redo history stack.
  * Supports batch operations: changes between beginBatch/endBatch are one undo step.
  */
 export function useUndoRedo(params) {
     const { onCellValueChanged, maxUndoDepth = 100 } = params;
-    let history = [];
-    let redoStack = [];
-    let batch = null;
+    const stack = new UndoRedoStack(maxUndoDepth);
     const canUndo = ref(false);
     const canRedo = ref(false);
     const updateFlags = () => {
-        canUndo.value = history.length > 0;
-        canRedo.value = redoStack.length > 0;
+        canUndo.value = stack.canUndo;
+        canRedo.value = stack.canRedo;
     };
     const wrapped = onCellValueChanged
         ? (event) => {
-            if (batch !== null) {
-                batch.push(event);
-            }
-            else {
-                history = [...history, [event]].slice(-maxUndoDepth);
-                redoStack = [];
+            stack.record(event);
+            if (!stack.isBatching) {
                 updateFlags();
             }
             onCellValueChanged(event);
         }
         : undefined;
     const beginBatch = () => {
-        batch = [];
+        stack.beginBatch();
     };
     const endBatch = () => {
-        const b = batch;
-        batch = null;
-        if (!b || b.length === 0)
-            return;
-        history = [...history, b].slice(-maxUndoDepth);
-        redoStack = [];
+        stack.endBatch();
         updateFlags();
     };
     const undo = () => {
-        if (!onCellValueChanged || history.length === 0)
+        if (!onCellValueChanged)
+            return;
+        const lastBatch = stack.undo();
+        if (!lastBatch)
             return;
-        const lastBatch = history[history.length - 1];
-        history = history.slice(0, -1);
-        redoStack = [...redoStack, lastBatch];
         updateFlags();
         for (let i = lastBatch.length - 1; i >= 0; i--) {
             const ev = lastBatch[i];
@@ -52,11 +42,11 @@ export function useUndoRedo(params) {
         }
     };
     const redo = () => {
-        if (!onCellValueChanged || redoStack.length === 0)
+        if (!onCellValueChanged)
+            return;
+        const nextBatch = stack.redo();
+        if (!nextBatch)
             return;
-        const nextBatch = redoStack[redoStack.length - 1];
-        redoStack = redoStack.slice(0, -1);
-        history = [...history, nextBatch];
         updateFlags();
         for (const ev of nextBatch) {
             onCellValueChanged(ev);

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

@@ -24,6 +24,10 @@ export interface DataGridLayoutState<T> {
         widthPx: number;
     }>) => void;
     onColumnResized?: (columnId: string, width: number) => void;
+    /** DOM-measured column widths from the previous layout pass.
+     *  UI packages use these as a minWidth floor to prevent columns from
+     *  shrinking when new data loads (e.g. during server-side pagination). */
+    measuredColumnWidths: Record<string, number>;
 }
 export interface DataGridRowSelectionState {
     selectedRowIds: Set<RowId>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue",
-  "version": "2.0.15",
+  "version": "2.0.17",
   "description": "OGrid Vue – Vue 3 composables, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.15"
+    "@alaarab/ogrid-core": "2.0.17"
   },
   "peerDependencies": {
     "vue": "^3.3.0"