@alaarab/ogrid-vue 2.0.11 → 2.0.12

package/dist/esm/components/MarchingAntsOverlay.js

@@ -6,7 +6,7 @@
  *
  * Uses SVG rects positioned via cell data-attribute measurements.
  */
-import { defineComponent, ref, computed, watch, onMounted, onUnmounted, h } from 'vue';
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, h, toValue } from 'vue';
 import { Z_INDEX, measureRange, injectGlobalStyles } from '@alaarab/ogrid-core';
 export const MarchingAntsOverlay = defineComponent({
     name: 'MarchingAntsOverlay',
@@ -37,7 +37,9 @@ export const MarchingAntsOverlay = defineComponent({
         let ro;
         const clipRange = computed(() => props.copyRange ?? props.cutRange);
         const measureAll = () => {
-            const container = props.containerRef.value;
+            // Use toValue to handle both Ref<HTMLElement> and raw HTMLElement
+            // (Vue templates may auto-unwrap refs passed as props)
+            const container = toValue(props.containerRef);
             if (!container) {
                 selRect.value = null;
                 clipRect.value = null;
@@ -51,7 +53,7 @@ export const MarchingAntsOverlay = defineComponent({
             injectGlobalStyles('ogrid-marching-ants-keyframes', '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}');
         });
         // Measure when any range changes; re-measure on resize, column changes, data changes
-        watch([() => props.selectionRange, clipRange, () => props.containerRef.value, () => props.items, () => props.visibleColumns, () => props.columnSizingOverrides, () => props.columnOrder], () => {
+        watch([() => props.selectionRange, clipRange, () => toValue(props.containerRef), () => props.items, () => props.visibleColumns, () => props.columnSizingOverrides, () => props.columnOrder], () => {
             if (!props.selectionRange && !clipRange.value) {
                 selRect.value = null;
                 clipRect.value = null;
@@ -59,7 +61,7 @@ export const MarchingAntsOverlay = defineComponent({
             }
             // Delay one frame so cells are rendered
             rafId = requestAnimationFrame(measureAll);
-            const container = props.containerRef.value;
+            const container = toValue(props.containerRef);
             if (container) {
                 ro?.disconnect();
                 ro = new ResizeObserver(measureAll);

package/dist/esm/components/StatusBar.js

@@ -23,8 +23,8 @@ export const StatusBar = defineComponent({
                 style: {
                     marginTop: 'auto',
                     padding: '6px 12px',
-                    borderTop: '1px solid rgba(0,0,0,0.12)',
-                    backgroundColor: 'rgba(0,0,0,0.04)',
+                    borderTop: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
+                    backgroundColor: 'var(--ogrid-header-bg, rgba(0,0,0,0.04))',
                     display: 'flex',
                     alignItems: 'center',
                     gap: '16px',
@@ -37,11 +37,11 @@ export const StatusBar = defineComponent({
                     alignItems: 'center',
                     gap: '4px',
                     ...(i < parts.length - 1
-                        ? { marginRight: '16px', borderRight: '1px solid rgba(0,0,0,0.12)', paddingRight: '16px' }
+                        ? { marginRight: '16px', borderRight: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))', paddingRight: '16px' }
                         : {}),
                 },
             }, [
-                h('span', { style: { color: 'rgba(0,0,0,0.6)' } }, p.label),
+                h('span', { style: { color: 'var(--ogrid-fg-secondary, rgba(0,0,0,0.6))' } }, p.label),
                 h('span', { style: { fontWeight: '600' } }, p.value.toLocaleString()),
             ])));
         };

package/dist/esm/components/createDataGridTable.js

@@ -0,0 +1,481 @@
+/**
+ * Shared DataGridTable factory for Vue UI packages.
+ *
+ * Both vue-vuetify and vue-primevue DataGridTable components are 97% identical —
+ * they only differ in which checkbox and spinner components they render.
+ * This factory extracts all shared logic into one place.
+ */
+import { defineComponent, computed, h, Teleport } from 'vue';
+import { useDataGridTableSetup, } from '../composables';
+import { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from '../utils';
+import { buildHeaderRows, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '@alaarab/ogrid-core';
+import { StatusBar } from './StatusBar';
+import { MarchingAntsOverlay } from './MarchingAntsOverlay';
+const NOOP = () => { };
+/**
+ * Creates a DataGridTable component with framework-specific UI bindings.
+ * All grid logic, layout, and interaction handling is shared.
+ */
+export function createDataGridTable(ui) {
+    return defineComponent({
+        name: 'DataGridTable',
+        props: {
+            gridProps: { type: Object, required: true },
+        },
+        setup(props) {
+            const propsRef = computed(() => props.gridProps);
+            const { wrapperRef, tableContainerRef, tableRef, lastMouseShift, state, columnReorder: { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown: handleReorderMouseDown }, virtualScroll: { containerRef: vsContainerRef, visibleRange, totalHeight: _totalHeight, scrollToRow: _scrollToRow }, virtualScrollEnabled, columnResize: { handleResizeStart, getColumnWidth }, } = useDataGridTableSetup({ props: propsRef });
+            // Stable handlers — avoid creating new closures per render
+            const onWrapperMousedown = (e) => { lastMouseShift.value = e.shiftKey; };
+            const onContextmenu = (e) => e.preventDefault();
+            const stopPropagation = (e) => e.stopPropagation();
+            return () => {
+                const p = props.gridProps;
+                const layout = state.layout.value;
+                const rowSel = state.rowSelection.value;
+                const editing = state.editing.value;
+                const interaction = state.interaction.value;
+                const ctxMenu = state.contextMenu.value;
+                const viewModels = state.viewModels.value;
+                const pinning = state.pinning.value;
+                const { headerMenu } = pinning;
+                const { visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset: _colOffset, containerWidth, minTableWidth, desiredTableWidth, } = layout;
+                const currentPage = p.currentPage ?? 1;
+                const pageSize = p.pageSize ?? 25;
+                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 { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
+                const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError: _onCellError } = viewModels;
+                const items = p.items;
+                const getRowId = p.getRowId;
+                const layoutMode = p.layoutMode ?? 'fill';
+                const rowSelection = p.rowSelection ?? 'none';
+                const freezeRows = p.freezeRows;
+                const freezeCols = p.freezeCols;
+                const suppressHorizontalScroll = p.suppressHorizontalScroll;
+                const isLoading = p.isLoading ?? false;
+                const loadingMessage = p.loadingMessage ?? 'Loading\u2026';
+                const ariaLabel = p['aria-label'];
+                const ariaLabelledBy = p['aria-labelledby'];
+                const fitToContent = layoutMode === 'content';
+                const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
+                const headerRows = buildHeaderRows(p.columns, p.visibleColumns);
+                const editCallbacks = { commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit };
+                const interactionHandlers = { handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu };
+                const handleSingleRowClick = (e) => {
+                    if (rowSelection !== 'single')
+                        return;
+                    const tr = e.currentTarget;
+                    const rowId = tr.dataset.rowId;
+                    if (!rowId)
+                        return;
+                    rowSel.updateSelection(selectedRowIds.has(rowId) ? new Set() : new Set([rowId]));
+                };
+                // Render a cell's content
+                const renderCellContent = (item, col, rowIndex, colIdx) => {
+                    const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInput);
+                    if (descriptor.mode === 'editing-inline') {
+                        const editorProps = buildInlineEditorProps(item, col, descriptor, editCallbacks);
+                        return h(ui.InlineCellEditor, {
+                            value: editorProps.value,
+                            item: editorProps.item,
+                            column: editorProps.column,
+                            rowIndex: editorProps.rowIndex,
+                            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);
+                        const CustomEditor = col.cellEditor;
+                        return h('div', [
+                            h('div', {
+                                ref: (el) => { if (el)
+                                    setPopoverAnchorEl(el); },
+                                class: 'ogrid-popover-anchor',
+                                'aria-hidden': 'true',
+                            }),
+                            popoverAnchorEl
+                                ? h(CustomEditor, editorProps)
+                                : null,
+                        ]);
+                    }
+                    // Display mode
+                    const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
+                    const cellStyle = resolveCellStyle(col, item);
+                    const interactionProps2 = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
+                    const cellClasses = ['ogrid-cell-content'];
+                    if (col.type === 'numeric')
+                        cellClasses.push('ogrid-cell-content--numeric');
+                    else if (col.type === 'boolean')
+                        cellClasses.push('ogrid-cell-content--boolean');
+                    if (descriptor.canEditAny)
+                        cellClasses.push('ogrid-cell-content--editable');
+                    if (descriptor.isActive && !descriptor.isInRange)
+                        cellClasses.push('ogrid-cell-content--active');
+                    if (descriptor.isInRange)
+                        cellClasses.push('ogrid-cell-in-range');
+                    if (descriptor.isInCutRange)
+                        cellClasses.push('ogrid-cell-cut');
+                    const styledContent = cellStyle
+                        ? h('span', { style: cellStyle }, content)
+                        : content;
+                    return h('div', {
+                        ...interactionProps2,
+                        class: cellClasses.join(' '),
+                    }, [
+                        styledContent,
+                        ...(descriptor.canEditAny && descriptor.isSelectionEndCell ? [
+                            h('div', {
+                                onMousedown: handleFillHandleMouseDown,
+                                'aria-label': 'Fill handle',
+                                class: 'ogrid-fill-handle',
+                            }),
+                        ] : []),
+                    ]);
+                };
+                // 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`,
+                    };
+                    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 = {
+                    position: 'relative',
+                    flex: '1',
+                    minHeight: '0',
+                    width: fitToContent ? 'fit-content' : '100%',
+                    maxWidth: '100%',
+                    overflowX: suppressHorizontalScroll ? 'hidden' : allowOverflowX ? 'auto' : 'hidden',
+                    overflowY: 'auto',
+                    backgroundColor: '#fff',
+                    willChange: 'scroll-position',
+                };
+                return h('div', { class: 'ogrid-outer-container' }, [
+                    // Scrollable wrapper
+                    h('div', {
+                        ref: (el) => { wrapperRef.value = el; vsContainerRef.value = el; },
+                        tabindex: 0,
+                        role: 'region',
+                        'aria-label': ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'),
+                        'aria-labelledby': ariaLabelledBy,
+                        onMousedown: onWrapperMousedown,
+                        onKeydown: handleGridKeyDown,
+                        onContextmenu,
+                        'data-overflow-x': allowOverflowX ? 'true' : 'false',
+                        style: wrapperStyle,
+                    }, [
+                        h('div', { class: 'ogrid-scroll-wrapper' }, [
+                            h('div', { style: { minWidth: allowOverflowX ? `${minTableWidth}px` : undefined } }, [
+                                h('div', {
+                                    ref: (el) => { tableContainerRef.value = el; },
+                                    class: ['ogrid-table-container', isLoading && items.length > 0 ? 'ogrid-table-container--loading' : ''],
+                                }, [
+                                    // Drop indicator for column reorder
+                                    ...(isReorderDragging.value && dropIndicatorX.value !== null ? [
+                                        h('div', {
+                                            class: 'ogrid-drop-indicator',
+                                            style: { left: `${dropIndicatorX.value}px` },
+                                        }),
+                                    ] : []),
+                                    // Table
+                                    h('table', {
+                                        ref: (el) => { tableRef.value = el; },
+                                        class: 'ogrid-table',
+                                        style: { minWidth: `${minTableWidth}px` },
+                                        'data-freeze-rows': freezeRows != null && freezeRows >= 1 ? freezeRows : undefined,
+                                        'data-freeze-cols': freezeCols != null && freezeCols >= 1 ? freezeCols : undefined,
+                                    }, [
+                                        // Header
+                                        h('thead', { class: 'ogrid-thead' }, headerRows.map((row, rowIdx) => h('tr', { key: rowIdx, class: 'ogrid-header-row' }, [
+                                            // Checkbox header cell
+                                            ...(rowIdx === headerRows.length - 1 && hasCheckboxCol ? [
+                                                h('th', {
+                                                    class: 'ogrid-checkbox-header',
+                                                    style: {
+                                                        width: `${CHECKBOX_COLUMN_WIDTH}px`,
+                                                        minWidth: `${CHECKBOX_COLUMN_WIDTH}px`,
+                                                        maxWidth: `${CHECKBOX_COLUMN_WIDTH}px`,
+                                                    },
+                                                }, ui.renderCheckbox({
+                                                    modelValue: allSelected,
+                                                    indeterminate: someSelected,
+                                                    ariaLabel: 'Select all rows',
+                                                    onChange: (c) => handleSelectAll(!!c),
+                                                })),
+                                            ] : []),
+                                            // Checkbox spacer in group header row
+                                            ...(rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol ? [
+                                                h('th', {
+                                                    rowSpan: headerRows.length - 1,
+                                                    class: 'ogrid-checkbox-spacer',
+                                                    style: { width: `${CHECKBOX_COLUMN_WIDTH}px`, minWidth: `${CHECKBOX_COLUMN_WIDTH}px` },
+                                                }),
+                                            ] : []),
+                                            // Row numbers header
+                                            ...(rowIdx === headerRows.length - 1 && hasRowNumbersCol ? [
+                                                h('th', {
+                                                    class: 'ogrid-row-number-header',
+                                                    style: {
+                                                        width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                                        minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                                        maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                                        position: 'sticky',
+                                                        left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : '0',
+                                                        zIndex: 3,
+                                                    },
+                                                }, '#'),
+                                            ] : []),
+                                            // Row numbers spacer
+                                            ...(rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol ? [
+                                                h('th', {
+                                                    rowSpan: headerRows.length - 1,
+                                                    class: 'ogrid-row-number-spacer',
+                                                    style: {
+                                                        width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                                        position: 'sticky',
+                                                        left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : '0',
+                                                        zIndex: 3,
+                                                    },
+                                                }),
+                                            ] : []),
+                                            // Header cells
+                                            ...row.map((cell, cellIdx) => {
+                                                if (cell.isGroup) {
+                                                    return h('th', {
+                                                        key: cellIdx,
+                                                        colSpan: cell.colSpan,
+                                                        scope: 'colgroup',
+                                                        class: 'ogrid-column-group-header',
+                                                    }, cell.label);
+                                                }
+                                                const col = cell.columnDef;
+                                                const colIdx = visibleCols.indexOf(col);
+                                                const { classes: headerClasses, style: headerStyle } = getHeaderClassAndStyle(col, colIdx);
+                                                return h('th', {
+                                                    key: col.columnId,
+                                                    scope: 'col',
+                                                    'data-column-id': col.columnId,
+                                                    rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : undefined,
+                                                    class: headerClasses,
+                                                    style: headerStyle,
+                                                    onMousedown: (e) => handleReorderMouseDown(col.columnId, e),
+                                                }, [
+                                                    h('div', { class: 'ogrid-header-content' }, [
+                                                        h(ui.ColumnHeaderFilter, getHeaderFilterConfig(col, headerFilterInput)),
+                                                        h('button', {
+                                                            onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                headerMenu.open(col.columnId, e.currentTarget);
+                                                            },
+                                                            'aria-label': 'Column options',
+                                                            title: 'Column options',
+                                                            class: 'ogrid-column-menu-btn',
+                                                        }, '\u22EE'),
+                                                    ]),
+                                                    h('div', {
+                                                        onMousedown: (e) => { e.stopPropagation(); handleResizeStart(e, col); },
+                                                        class: 'ogrid-resize-handle',
+                                                    }),
+                                                ]);
+                                            }),
+                                        ]))),
+                                        // Body
+                                        ...(!showEmptyInGrid ? [
+                                            h('tbody', {}, (() => {
+                                                const vsEnabled = virtualScrollEnabled.value;
+                                                const vr = visibleRange.value;
+                                                const startIdx = vsEnabled ? vr.startIndex : 0;
+                                                const endIdx = vsEnabled ? Math.min(vr.endIndex, items.length - 1) : items.length - 1;
+                                                const rows = [];
+                                                if (vsEnabled && vr.offsetTop > 0) {
+                                                    rows.push(h('tr', { key: '__vs-top', style: { height: `${vr.offsetTop}px` } }));
+                                                }
+                                                for (let rowIndex = startIdx; rowIndex <= endIdx; rowIndex++) {
+                                                    const item = items[rowIndex];
+                                                    if (!item)
+                                                        continue;
+                                                    const rowIdStr = getRowId(item);
+                                                    const isSelected = selectedRowIds.has(rowIdStr);
+                                                    rows.push(h('tr', {
+                                                        key: rowIdStr,
+                                                        'data-row-id': rowIdStr,
+                                                        onClick: handleSingleRowClick,
+                                                        style: { cursor: rowSelection === 'single' ? 'pointer' : undefined },
+                                                    }, [
+                                                        // Checkbox cell
+                                                        ...(hasCheckboxCol ? [
+                                                            h('td', {
+                                                                class: 'ogrid-checkbox-cell',
+                                                                style: {
+                                                                    width: `${CHECKBOX_COLUMN_WIDTH}px`,
+                                                                    minWidth: `${CHECKBOX_COLUMN_WIDTH}px`,
+                                                                    maxWidth: `${CHECKBOX_COLUMN_WIDTH}px`,
+                                                                },
+                                                            }, h('div', {
+                                                                'data-row-index': rowIndex,
+                                                                'data-col-index': 0,
+                                                                onClick: stopPropagation,
+                                                                class: 'ogrid-checkbox-wrapper',
+                                                            }, ui.renderCheckbox({
+                                                                modelValue: isSelected,
+                                                                ariaLabel: `Select row ${rowIndex + 1}`,
+                                                                onChange: (checked) => handleRowCheckboxChange(rowIdStr, checked, rowIndex, lastMouseShift.value),
+                                                            }))),
+                                                        ] : []),
+                                                        // Row numbers cell
+                                                        ...(hasRowNumbersCol ? [
+                                                            h('td', {
+                                                                class: 'ogrid-row-number-cell',
+                                                                style: {
+                                                                    width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                                                    minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                                                    maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                                                    padding: '6px',
+                                                                    position: 'sticky',
+                                                                    left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : '0',
+                                                                    zIndex: 2,
+                                                                },
+                                                            }, String(rowNumberOffset + rowIndex + 1)),
+                                                        ] : []),
+                                                        // Data cells
+                                                        ...columnLayouts.map((cl, colIdx) => h('td', {
+                                                            key: cl.col.columnId,
+                                                            'data-column-id': cl.col.columnId,
+                                                            class: cl.tdClasses,
+                                                            style: cl.tdDynamicStyle,
+                                                        }, [renderCellContent(item, cl.col, rowIndex, colIdx)])),
+                                                    ]));
+                                                }
+                                                if (vsEnabled && vr.offsetBottom > 0) {
+                                                    rows.push(h('tr', { key: '__vs-bottom', style: { height: `${vr.offsetBottom}px` } }));
+                                                }
+                                                return rows;
+                                            })()),
+                                        ] : []),
+                                    ]),
+                                    // Empty state
+                                    ...(showEmptyInGrid && p.emptyState ? [
+                                        ui.renderEmptyState(p.emptyState),
+                                    ] : []),
+                                ]),
+                            ]),
+                        ]),
+                    ]),
+                    // Context menu (teleported to body)
+                    ...(menuPosition ? [
+                        h(Teleport, { to: 'body' }, h(ui.GridContextMenu, {
+                            x: menuPosition.x,
+                            y: menuPosition.y,
+                            hasSelection: hasCellSelection,
+                            canUndo,
+                            canRedo,
+                            onUndo: onUndo ?? NOOP,
+                            onRedo: onRedo ?? NOOP,
+                            onCopy: handleCopy,
+                            onCut: handleCut,
+                            onPaste: () => { void handlePaste(); },
+                            onSelectAll: handleSelectAllCells,
+                            onClose: closeContextMenu,
+                        })),
+                    ] : []),
+                    // Marching ants overlay
+                    h(MarchingAntsOverlay, {
+                        containerRef: tableContainerRef,
+                        selectionRange,
+                        copyRange: _copyRange,
+                        cutRange: _cutRange,
+                        colOffset: _colOffset,
+                        items,
+                        visibleColumns: p.visibleColumns instanceof Set ? Array.from(p.visibleColumns) : p.visibleColumns,
+                        columnSizingOverrides: layout.columnSizingOverrides,
+                        columnOrder: p.columnOrder,
+                    }),
+                    // Column header menu
+                    h(ui.ColumnHeaderMenu, {
+                        isOpen: headerMenu.isOpen,
+                        anchorElement: headerMenu.anchorElement,
+                        onClose: headerMenu.close,
+                        onPinLeft: headerMenu.handlePinLeft,
+                        onPinRight: headerMenu.handlePinRight,
+                        onUnpin: headerMenu.handleUnpin,
+                        onSortAsc: headerMenu.handleSortAsc,
+                        onSortDesc: headerMenu.handleSortDesc,
+                        onClearSort: headerMenu.handleClearSort,
+                        onAutosizeThis: headerMenu.handleAutosizeThis,
+                        onAutosizeAll: headerMenu.handleAutosizeAll,
+                        canPinLeft: headerMenu.canPinLeft,
+                        canPinRight: headerMenu.canPinRight,
+                        canUnpin: headerMenu.canUnpin,
+                        currentSort: headerMenu.currentSort,
+                        isSortable: headerMenu.isSortable,
+                        isResizable: headerMenu.isResizable,
+                    }),
+                    // Status bar
+                    ...(statusBarConfig ? [
+                        h(StatusBar, {
+                            totalCount: statusBarConfig.totalCount,
+                            filteredCount: statusBarConfig.filteredCount,
+                            selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size,
+                            selectedCellCount: selectionRange
+                                ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1)
+                                : undefined,
+                            aggregation: statusBarConfig.aggregation,
+                            suppressRowCount: statusBarConfig.suppressRowCount,
+                        }),
+                    ] : []),
+                    // Loading overlay
+                    ...(isLoading ? [
+                        h('div', { class: 'ogrid-loading-overlay' }, ui.renderSpinner(loadingMessage)),
+                    ] : []),
+                ]);
+            };
+        },
+    });
+}

package/dist/esm/composables/useColumnHeaderMenuState.js

@@ -1,10 +1,11 @@
 import { ref, computed } from 'vue';
+import { measureColumnContentWidth } from '@alaarab/ogrid-core';
 /**
  * Manages state for the column header menu (pin/unpin, sort, autosize actions).
  * Tracks which column's menu is open, anchor element, and action handlers.
  */
 export function useColumnHeaderMenuState(params) {
-    const { columns, pinnedColumns, onPinColumn, onUnpinColumn, onSort, onAutosizeColumn, onAutosizeAllColumns, sortBy, sortDirection, } = params;
+    const { columns, pinnedColumns, onPinColumn, onUnpinColumn, onSort, onColumnResized, onAutosizeColumn, sortBy, sortDirection, } = params;
     const isOpen = ref(false);
     const openForColumn = ref(null);
     const anchorElement = ref(null);
@@ -74,16 +75,21 @@ export function useColumnHeaderMenuState(params) {
         }
     };
     const handleAutosizeThis = () => {
-        if (openForColumn.value && onAutosizeColumn) {
-            onAutosizeColumn(openForColumn.value);
-            close();
-        }
+        const resizer = onAutosizeColumn ?? onColumnResized;
+        if (!openForColumn.value || !resizer || !isResizable.value)
+            return;
+        const col = currentColumn.value;
+        resizer(openForColumn.value, measureColumnContentWidth(openForColumn.value, col?.minWidth));
+        close();
     };
     const handleAutosizeAll = () => {
-        if (onAutosizeAllColumns) {
-            onAutosizeAllColumns();
-            close();
-        }
+        const resizer = onAutosizeColumn ?? onColumnResized;
+        if (!resizer)
+            return;
+        columns.value.forEach((col) => {
+            resizer(col.columnId, measureColumnContentWidth(col.columnId, col.minWidth));
+        });
+        close();
     };
     return {
         isOpen,

package/dist/esm/composables/useDataGridState.js

@@ -1,5 +1,5 @@
 import { ref, computed } from 'vue';
-import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations } from '@alaarab/ogrid-core';
+import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '@alaarab/ogrid-core';
 import { useRowSelection } from './useRowSelection';
 import { useCellEditing } from './useCellEditing';
 import { useActiveCell } from './useActiveCell';
@@ -175,17 +175,35 @@ export function useDataGridState(params) {
         pinnedColumns: pinnedColumnsProp,
         onColumnPinned: onColumnPinnedProp.value,
     });
+    // Autosize callback — updates internal column sizing state + notifies external listener
+    const handleAutosizeColumn = (columnId, width) => {
+        setColumnSizingOverrides({ ...columnSizingOverrides.value, [columnId]: { widthPx: width } });
+        onColumnResizedProp.value?.(columnId, width);
+    };
     const headerMenuResult = useColumnHeaderMenuState({
         columns: flatColumns,
         pinnedColumns: pinningResult.pinnedColumns,
         onPinColumn: pinningResult.pinColumn,
         onUnpinColumn: pinningResult.unpinColumn,
         onSort: props.value.onColumnSort,
-        onAutosizeColumn: props.value.onAutosizeColumn,
-        onAutosizeAllColumns: props.value.onAutosizeAllColumns,
+        onColumnResized: onColumnResizedProp.value,
+        onAutosizeColumn: handleAutosizeColumn,
         sortBy: computed(() => props.value.sortBy),
         sortDirection: computed(() => props.value.sortDirection),
     });
+    // Build column width map for pinning offset computation
+    const columnWidthMap = computed(() => {
+        const map = {};
+        for (const col of visibleCols.value) {
+            const override = columnSizingOverrides.value[col.columnId];
+            map[col.columnId] = override
+                ? override.widthPx
+                : (col.idealWidth ?? col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
+        }
+        return map;
+    });
+    const leftOffsets = computed(() => pinningResult.computeLeftOffsets(visibleCols.value, columnWidthMap.value, DEFAULT_MIN_COLUMN_WIDTH, hasCheckboxCol.value, CHECKBOX_COLUMN_WIDTH));
+    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);
@@ -330,8 +348,8 @@ export function useDataGridState(params) {
         pinColumn: pinningResult.pinColumn,
         unpinColumn: pinningResult.unpinColumn,
         isPinned: pinningResult.isPinned,
-        computeLeftOffsets: pinningResult.computeLeftOffsets,
-        computeRightOffsets: pinningResult.computeRightOffsets,
+        leftOffsets: leftOffsets.value,
+        rightOffsets: rightOffsets.value,
         headerMenu: {
             isOpen: headerMenuResult.isOpen.value,
             openForColumn: headerMenuResult.openForColumn.value,

package/dist/esm/composables/useOGrid.js

@@ -1,5 +1,5 @@
 import { ref, computed, watch } from 'vue';
-import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, } from '@alaarab/ogrid-core';
+import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, computeNextSortState, } from '@alaarab/ogrid-core';
 import { useFilterOptions } from './useFilterOptions';
 import { useSideBarState } from './useSideBarState';
 const DEFAULT_PAGE_SIZE = 25;
@@ -126,22 +126,8 @@ export function useOGrid(props) {
             internalVisibleColumns.value = cols;
         callbacks.value.onVisibleColumnsChange?.(cols);
     };
-    const handleSort = (columnKey) => {
-        const currentSort = sort.value;
-        if (currentSort.field === columnKey) {
-            // Cycle: asc → desc → clear
-            if (currentSort.direction === 'asc') {
-                setSort({ field: columnKey, direction: 'desc' });
-            }
-            else {
-                // Clear sort (empty field means no column is sorted)
-                setSort({ field: '', direction: 'asc' });
-            }
-        }
-        else {
-            // Start new sort
-            setSort({ field: columnKey, direction: 'asc' });
-        }
+    const handleSort = (columnKey, direction) => {
+        setSort(computeNextSortState(sort.value, columnKey, direction));
     };
     const handleFilterChange = (key, value) => {
         setFilters(mergeFilter(filters.value, key, value));
@@ -340,6 +326,9 @@ export function useOGrid(props) {
             rowSelection: p.rowSelection ?? 'none',
             selectedRows: effectiveSelectedRows.value,
             onSelectionChange: handleSelectionChange,
+            showRowNumbers: p.showRowNumbers,
+            currentPage: page.value,
+            pageSize: pageSize.value,
             statusBar: statusBarConfig.value,
             isLoading: isLoadingResolved.value,
             filters: filters.value,
@@ -350,7 +339,9 @@ export function useOGrid(props) {
             getUserByEmail: ds?.getUserByEmail,
             layoutMode: p.layoutMode,
             suppressHorizontalScroll: p.suppressHorizontalScroll,
+            columnReorder: p.columnReorder,
             virtualScroll: p.virtualScroll,
+            density: p.density ?? 'normal',
             'aria-label': p['aria-label'],
             'aria-labelledby': p['aria-labelledby'],
             emptyState: {

package/dist/esm/index.js

@@ -8,3 +8,5 @@ export { StatusBar } from './components/StatusBar';
 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, useColumnPinning, useColumnHeaderMenuState, useDataGridTableSetup, } from './composables';
 // View model utilities (for UI packages)
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './utils';
+// DataGridTable factory (for UI packages)
+export { createDataGridTable } from './components/createDataGridTable';

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

@@ -0,0 +1,53 @@
+/**
+ * Shared DataGridTable factory for Vue UI packages.
+ *
+ * Both vue-vuetify and vue-primevue DataGridTable components are 97% identical —
+ * they only differ in which checkbox and spinner components they render.
+ * This factory extracts all shared logic into one place.
+ */
+import { type PropType, type VNode, type Component } from 'vue';
+import type { IOGridDataGridProps } from '../types';
+/** Framework-specific component bindings passed by each UI package */
+export interface IDataGridTableUIBindings {
+    /** Render a checkbox (Vuetify VCheckbox vs PrimeVue Checkbox) */
+    renderCheckbox: (props: {
+        modelValue: boolean;
+        indeterminate?: boolean;
+        ariaLabel: string;
+        onChange: (checked: boolean) => void;
+    }) => VNode;
+    /** Render a loading spinner with message */
+    renderSpinner: (message: string) => VNode;
+    /** Package-local ColumnHeaderFilter component */
+    ColumnHeaderFilter: Component;
+    /** Package-local ColumnHeaderMenu component */
+    ColumnHeaderMenu: Component;
+    /** Package-local InlineCellEditor component */
+    InlineCellEditor: Component;
+    /** Package-local GridContextMenu component */
+    GridContextMenu: Component;
+    /** Package-local renderEmptyState function */
+    renderEmptyState: (emptyState: {
+        render?: () => unknown;
+        message?: string | null;
+        hasActiveFilters?: boolean;
+        onClearAll?: () => void;
+    }) => VNode;
+}
+/**
+ * Creates a DataGridTable component with framework-specific UI bindings.
+ * All grid logic, layout, and interaction handling is shared.
+ */
+export declare function createDataGridTable(ui: IDataGridTableUIBindings): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    gridProps: {
+        type: PropType<IOGridDataGridProps<unknown>>;
+        required: true;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    gridProps: {
+        type: PropType<IOGridDataGridProps<unknown>>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -6,10 +6,12 @@ export interface UseColumnHeaderMenuStateParams<T = unknown> {
     onPinColumn: (columnId: string, side: 'left' | 'right') => void;
     onUnpinColumn: (columnId: string) => void;
     onSort?: (columnId: string, direction: 'asc' | 'desc' | null) => void;
-    onAutosizeColumn?: (columnId: string) => void;
-    onAutosizeAllColumns?: () => void;
+    onColumnResized?: (columnId: string, width: number) => void;
+    onAutosizeColumn?: (columnId: string, width: number) => void;
     sortBy?: Ref<string | undefined>;
     sortDirection?: Ref<'asc' | 'desc' | undefined>;
+    data?: Ref<unknown[]>;
+    getRowId?: (item: unknown) => string | number;
 }
 export interface UseColumnHeaderMenuStateResult {
     isOpen: Ref<boolean>;

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

@@ -121,12 +121,8 @@ export interface DataGridPinningState {
     pinColumn: (columnId: string, side: 'left' | 'right') => void;
     unpinColumn: (columnId: string) => void;
     isPinned: (columnId: string) => 'left' | 'right' | undefined;
-    computeLeftOffsets: (visibleCols: {
-        columnId: string;
-    }[], columnWidths: Record<string, number>, defaultWidth: number, hasCheckboxColumn: boolean, checkboxColumnWidth: number) => Record<string, number>;
-    computeRightOffsets: (visibleCols: {
-        columnId: string;
-    }[], columnWidths: Record<string, number>, defaultWidth: number) => Record<string, number>;
+    leftOffsets: Record<string, number>;
+    rightOffsets: Record<string, number>;
     headerMenu: {
         isOpen: boolean;
         openForColumn: string | null;

package/dist/types/index.d.ts

@@ -8,4 +8,5 @@ export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelec
 export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, 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, UseColumnPinningParams, UseColumnPinningResult, UseColumnHeaderMenuStateParams, UseColumnHeaderMenuStateResult, UseDataGridTableSetupParams, UseDataGridTableSetupResult, } from './composables';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './utils';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, CellInteractionProps, } from './utils';
+export { createDataGridTable, type IDataGridTableUIBindings } from './components/createDataGridTable';
 export type { SideBarProps, SideBarFilterColumn } from './components/SideBar';

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

@@ -42,6 +42,8 @@ interface IOGridBaseProps<T> {
     rowSelection?: RowSelectionMode;
     selectedRows?: Set<RowId>;
     onSelectionChange?: (event: IRowSelectionChangeEvent<T>) => void;
+    /** Show Excel-style row numbers column at the start of the grid (1, 2, 3...). Default: false. */
+    showRowNumbers?: boolean;
     statusBar?: boolean | IStatusBarProps;
     defaultPageSize?: number;
     defaultSortBy?: string;
@@ -102,17 +104,15 @@ export interface IOGridDataGridProps<T> {
     getRowId: (item: T) => RowId;
     sortBy?: string;
     sortDirection: 'asc' | 'desc';
-    onColumnSort: (columnKey: string) => void;
+    onColumnSort: (columnKey: string, direction?: 'asc' | 'desc' | null) => void;
     visibleColumns: Set<string>;
     /** Optional column display order (column ids). When set, visible columns are ordered by this array. */
     columnOrder?: string[];
     onColumnOrderChange?: (order: string[]) => void;
     /** Called when a column is resized by the user. */
     onColumnResized?: (columnId: string, width: number) => void;
-    /** Called when user requests autosize for a single column. */
-    onAutosizeColumn?: (columnId: string) => void;
-    /** Called when user requests autosize for all columns. */
-    onAutosizeAllColumns?: () => void;
+    /** Called when user requests autosize for a single column (with measured width). */
+    onAutosizeColumn?: (columnId: string, width: number) => void;
     /** Called when a column is pinned or unpinned. */
     onColumnPinned?: (columnId: string, pinned: 'left' | 'right' | null) => void;
     /** Runtime pin overrides (from restored state or programmatic changes). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "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.11"
+    "@alaarab/ogrid-core": "2.0.12"
   },
   "peerDependencies": {
     "vue": "^3.3.0"