@alaarab/ogrid-react 2.0.2 → 2.0.4

package/dist/esm/components/BaseInlineCellEditor.js

@@ -87,7 +87,11 @@ export function BaseInlineCellEditor(props) {
     });
     React.useEffect(() => {
         const input = wrapperRef.current?.querySelector('input');
-        input?.focus();
+        if (input) {
+            input.focus();
+            // Select all text for easy replacement (like Excel)
+            input.select();
+        }
     }, []);
     // Rich select (shared across all frameworks)
     if (editorType === 'richSelect') {

package/dist/esm/hooks/index.js

@@ -19,7 +19,11 @@ export { useDateFilterState } from './useDateFilterState';
 export { useColumnChooserState } from './useColumnChooserState';
 export { useInlineCellEditorState } from './useInlineCellEditorState';
 export { useColumnResize } from './useColumnResize';
+export { useColumnPinning } from './useColumnPinning';
+export { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
 export { useRichSelectState } from './useRichSelectState';
 export { useSideBarState } from './useSideBarState';
 export { useTableLayout } from './useTableLayout';
+export { useColumnReorder } from './useColumnReorder';
+export { useVirtualScroll } from './useVirtualScroll';
 export { useLatestRef } from './useLatestRef';

package/dist/esm/hooks/useCellSelection.js

@@ -9,8 +9,9 @@ function rangesEqual(a, b) {
     return a.startRow === b.startRow && a.endRow === b.endRow &&
         a.startCol === b.startCol && a.endCol === b.endCol;
 }
-/** DOM attribute name used for drag-range highlighting (bypasses React). */
+/** DOM attribute names used for drag-range highlighting (bypasses React). */
 const DRAG_ATTR = 'data-drag-range';
+const DRAG_ANCHOR_ATTR = 'data-drag-anchor';
 /** Auto-scroll config */
 const AUTO_SCROLL_EDGE = 40; // px from wrapper edge to trigger
 const AUTO_SCROLL_MIN_SPEED = 2;
@@ -84,6 +85,9 @@ export function useCellSelection(params) {
             // setIsDragging(true) is deferred to the first mousemove to avoid
             // a true→false toggle on simple clicks (which causes 2 extra renders).
             isDraggingRef.current = true;
+            // Apply drag attrs immediately for the initial cell so the anchor styling shows
+            // even before the first mousemove. This ensures instant visual feedback.
+            setTimeout(() => applyDragAttrsRef.current?.(initial), 0);
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps -- setSelectionRange is a stable callback
@@ -102,12 +106,16 @@ export function useCellSelection(params) {
     }, [rowCount, visibleColCount, colOffset, setActiveCell]);
     /** Last known mouse position during drag — used by mouseUp to flush pending RAF work. */
     const lastMousePosRef = useRef(null);
+    // Ref to expose applyDragAttrs outside useEffect so it can be called from mouseDown
+    const applyDragAttrsRef = useRef(null);
     // Window mouse move/up for drag selection.
     // Performance: during drag, we update a ref + toggle DOM attributes via rAF.
     // React state is only committed on mouseup (single re-render instead of 60-120/s).
     useEffect(() => {
         const colOff = colOffset; // capture for closure
-        /** Toggle DRAG_ATTR on cell-content divs to show the range highlight via CSS. */
+        /** Toggle DRAG_ATTR on cells to show the range highlight via CSS.
+         *  Also sets edge box-shadows for a green border around the selection range,
+         *  and marks the anchor cell with DRAG_ANCHOR_ATTR (white background). */
         const applyDragAttrs = (range) => {
             const wrapper = wrapperRef.current;
             if (!wrapper)
@@ -116,6 +124,7 @@ export function useCellSelection(params) {
             const maxR = Math.max(range.startRow, range.endRow);
             const minC = Math.min(range.startCol, range.endCol);
             const maxC = Math.max(range.startCol, range.endCol);
+            const anchor = dragStartRef.current;
             const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
             for (let i = 0; i < cells.length; i++) {
                 const el = cells[i];
@@ -125,20 +134,51 @@ export function useCellSelection(params) {
                 if (inRange) {
                     if (!el.hasAttribute(DRAG_ATTR))
                         el.setAttribute(DRAG_ATTR, '');
+                    // Anchor cell gets white background instead of green
+                    const isAnchor = anchor && r === anchor.row && c === anchor.col;
+                    if (isAnchor) {
+                        if (!el.hasAttribute(DRAG_ANCHOR_ATTR))
+                            el.setAttribute(DRAG_ANCHOR_ATTR, '');
+                    }
+                    else {
+                        if (el.hasAttribute(DRAG_ANCHOR_ATTR))
+                            el.removeAttribute(DRAG_ANCHOR_ATTR);
+                    }
+                    // Edge borders via inset box-shadow (no layout shift)
+                    const shadows = [];
+                    if (r === minR)
+                        shadows.push('inset 0 2px 0 0 var(--ogrid-selection, #217346)');
+                    if (r === maxR)
+                        shadows.push('inset 0 -2px 0 0 var(--ogrid-selection, #217346)');
+                    if (c === minC)
+                        shadows.push('inset 2px 0 0 0 var(--ogrid-selection, #217346)');
+                    if (c === maxC)
+                        shadows.push('inset -2px 0 0 0 var(--ogrid-selection, #217346)');
+                    el.style.boxShadow = shadows.length > 0 ? shadows.join(', ') : '';
                 }
                 else {
                     if (el.hasAttribute(DRAG_ATTR))
                         el.removeAttribute(DRAG_ATTR);
+                    if (el.hasAttribute(DRAG_ANCHOR_ATTR))
+                        el.removeAttribute(DRAG_ANCHOR_ATTR);
+                    if (el.style.boxShadow)
+                        el.style.boxShadow = '';
                 }
             }
         };
+        // Expose applyDragAttrs via ref so mouseDown can access it
+        applyDragAttrsRef.current = applyDragAttrs;
         const clearDragAttrs = () => {
             const wrapper = wrapperRef.current;
             if (!wrapper)
                 return;
             const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
-            for (let i = 0; i < marked.length; i++)
-                marked[i].removeAttribute(DRAG_ATTR);
+            for (let i = 0; i < marked.length; i++) {
+                const el = marked[i];
+                el.removeAttribute(DRAG_ATTR);
+                el.removeAttribute(DRAG_ANCHOR_ATTR);
+                el.style.boxShadow = '';
+            }
         };
         /** Resolve mouse coordinates to a cell range (shared by RAF callback and mouseUp flush). */
         const resolveRange = (cx, cy) => {

package/dist/esm/hooks/useColumnHeaderMenuState.js

@@ -0,0 +1,56 @@
+import { useState, useCallback } from 'react';
+/**
+ * Manages state for the column header menu (pin left/right/unpin actions).
+ * Tracks which column's menu is open, anchor element, and action handlers.
+ */
+export function useColumnHeaderMenuState(params) {
+    const { pinnedColumns, onPinColumn, onUnpinColumn } = params;
+    const [isOpen, setIsOpen] = useState(false);
+    const [openForColumn, setOpenForColumn] = useState(null);
+    const [anchorElement, setAnchorElement] = useState(null);
+    const open = useCallback((columnId, anchorEl) => {
+        setOpenForColumn(columnId);
+        setAnchorElement(anchorEl);
+        setIsOpen(true);
+    }, []);
+    const close = useCallback(() => {
+        setIsOpen(false);
+        setOpenForColumn(null);
+        setAnchorElement(null);
+    }, []);
+    const currentPinState = openForColumn ? pinnedColumns[openForColumn] : undefined;
+    const canPinLeft = currentPinState !== 'left';
+    const canPinRight = currentPinState !== 'right';
+    const canUnpin = !!currentPinState;
+    const handlePinLeft = useCallback(() => {
+        if (openForColumn && canPinLeft) {
+            onPinColumn(openForColumn, 'left');
+            close();
+        }
+    }, [openForColumn, canPinLeft, onPinColumn, close]);
+    const handlePinRight = useCallback(() => {
+        if (openForColumn && canPinRight) {
+            onPinColumn(openForColumn, 'right');
+            close();
+        }
+    }, [openForColumn, canPinRight, onPinColumn, close]);
+    const handleUnpin = useCallback(() => {
+        if (openForColumn && canUnpin) {
+            onUnpinColumn(openForColumn);
+            close();
+        }
+    }, [openForColumn, canUnpin, onUnpinColumn, close]);
+    return {
+        isOpen,
+        openForColumn,
+        anchorElement,
+        open,
+        close,
+        handlePinLeft,
+        handlePinRight,
+        handleUnpin,
+        canPinLeft,
+        canPinRight,
+        canUnpin,
+    };
+}

package/dist/esm/hooks/useColumnPinning.js

@@ -0,0 +1,67 @@
+import { useState, useCallback, useMemo } from 'react';
+/**
+ * Manages column pinning state (left/right sticky positioning).
+ * Supports controlled and uncontrolled modes.
+ * Initializes from column.pinned definitions and pinnedColumns prop.
+ */
+export function useColumnPinning(params) {
+    const { columns, pinnedColumns: controlledPinnedColumns, onColumnPinned } = params;
+    // Initialize internal state from column.pinned definitions
+    const initialPinnedColumns = useMemo(() => {
+        const initial = {};
+        for (const col of columns) {
+            if (col.pinned) {
+                initial[col.columnId] = col.pinned;
+            }
+        }
+        return initial;
+    }, []); // Only on mount
+    const [internalPinnedColumns, setInternalPinnedColumns] = useState(initialPinnedColumns);
+    // Use controlled state if provided, otherwise internal
+    const pinnedColumns = controlledPinnedColumns ?? internalPinnedColumns;
+    const pinColumn = useCallback((columnId, side) => {
+        const next = { ...pinnedColumns, [columnId]: side };
+        setInternalPinnedColumns(next);
+        onColumnPinned?.(columnId, side);
+    }, [pinnedColumns, onColumnPinned]);
+    const unpinColumn = useCallback((columnId) => {
+        const next = { ...pinnedColumns };
+        delete next[columnId];
+        setInternalPinnedColumns(next);
+        onColumnPinned?.(columnId, null);
+    }, [pinnedColumns, onColumnPinned]);
+    const isPinned = useCallback((columnId) => {
+        return pinnedColumns[columnId];
+    }, [pinnedColumns]);
+    const computeLeftOffsets = useCallback((visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth) => {
+        const offsets = {};
+        let left = hasCheckboxColumn ? checkboxColumnWidth : 0;
+        for (const col of visibleCols) {
+            if (pinnedColumns[col.columnId] === 'left') {
+                offsets[col.columnId] = left;
+                left += columnWidths[col.columnId] ?? defaultWidth;
+            }
+        }
+        return offsets;
+    }, [pinnedColumns]);
+    const computeRightOffsets = useCallback((visibleCols, columnWidths, defaultWidth) => {
+        const offsets = {};
+        let right = 0;
+        for (let i = visibleCols.length - 1; i >= 0; i--) {
+            const col = visibleCols[i];
+            if (pinnedColumns[col.columnId] === 'right') {
+                offsets[col.columnId] = right;
+                right += columnWidths[col.columnId] ?? defaultWidth;
+            }
+        }
+        return offsets;
+    }, [pinnedColumns]);
+    return {
+        pinnedColumns,
+        pinColumn,
+        unpinColumn,
+        isPinned,
+        computeLeftOffsets,
+        computeRightOffsets,
+    };
+}

package/dist/esm/hooks/useColumnReorder.js

@@ -0,0 +1,136 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+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;
+/**
+ * Convert Record<string, 'left' | 'right'> to the { left?, right? } shape core expects.
+ */
+function toPinnedColumnsShape(pinned) {
+    if (!pinned)
+        return undefined;
+    const left = [];
+    const right = [];
+    for (const [id, side] of Object.entries(pinned)) {
+        if (side === 'left')
+            left.push(id);
+        else if (side === 'right')
+            right.push(id);
+    }
+    if (left.length === 0 && right.length === 0)
+        return undefined;
+    return {
+        ...(left.length > 0 ? { left } : {}),
+        ...(right.length > 0 ? { right } : {}),
+    };
+}
+/**
+ * Manages column reorder drag interactions with RAF-throttled updates.
+ * @param params - Columns, order, change callback, enabled flag, and wrapper ref.
+ * @returns Drag state and mousedown handler for header cells.
+ */
+export function useColumnReorder(params) {
+    const { columns, columnOrder, onColumnOrderChange, enabled = true, pinnedColumns, wrapperRef, } = params;
+    const [isDragging, setIsDragging] = useState(false);
+    const [dropIndicatorX, setDropIndicatorX] = useState(null);
+    const rafRef = useRef(0);
+    // Refs for latest values so the window listeners capture current state
+    const columnsRef = useRef(columns);
+    columnsRef.current = columns;
+    const columnOrderRef = useRef(columnOrder);
+    columnOrderRef.current = columnOrder;
+    const onColumnOrderChangeRef = useRef(onColumnOrderChange);
+    onColumnOrderChangeRef.current = onColumnOrderChange;
+    const pinnedColumnsRef = useRef(pinnedColumns);
+    pinnedColumnsRef.current = pinnedColumns;
+    // Track active drag state for cleanup on unmount
+    const cleanupRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = null;
+            }
+        };
+    }, []);
+    const handleHeaderMouseDown = useCallback((columnId, event) => {
+        if (!enabled)
+            return;
+        if (!onColumnOrderChangeRef.current)
+            return;
+        // Gate on left-click only
+        if (event.button !== 0)
+            return;
+        // Skip if in resize handle zone (right 8px of the header cell)
+        const target = event.currentTarget;
+        const rect = target.getBoundingClientRect();
+        if (event.clientX > rect.right - RESIZE_HANDLE_ZONE)
+            return;
+        // Skip column groups — only reorder leaf columns
+        const cols = columnsRef.current;
+        const colIndex = cols.findIndex((c) => c.columnId === columnId);
+        if (colIndex === -1)
+            return;
+        event.preventDefault();
+        const startX = event.clientX;
+        let hasMoved = false;
+        let latestDropTargetIndex = null;
+        // Determine pin state of the dragged column
+        const pinnedShape = toPinnedColumnsShape(pinnedColumnsRef.current);
+        const draggedPinState = getPinStateForColumn(columnId, pinnedShape);
+        // Lock text selection and set grabbing cursor during drag
+        const prevUserSelect = document.body.style.userSelect;
+        const prevCursor = document.body.style.cursor;
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'grabbing';
+        const onMove = (moveEvent) => {
+            // Require a small minimum drag distance before activating
+            if (!hasMoved && Math.abs(moveEvent.clientX - startX) < 5)
+                return;
+            if (!hasMoved) {
+                hasMoved = true;
+                setIsDragging(true);
+            }
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = 0;
+                const wrapper = wrapperRef.current;
+                if (!wrapper)
+                    return;
+                const currentOrder = columnOrderRef.current ?? columnsRef.current.map((c) => c.columnId);
+                const result = calculateDropTarget(moveEvent.clientX, currentOrder, columnId, draggedPinState, wrapper, pinnedShape);
+                if (result) {
+                    latestDropTargetIndex = result.targetIndex;
+                    setDropIndicatorX(result.indicatorX);
+                }
+            });
+        };
+        const cleanup = () => {
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
+            cleanupRef.current = null;
+            // Restore user-select and cursor
+            document.body.style.userSelect = prevUserSelect;
+            document.body.style.cursor = prevCursor;
+            // Cancel pending RAF
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = 0;
+            }
+        };
+        const onUp = () => {
+            cleanup();
+            if (hasMoved && latestDropTargetIndex != null) {
+                const currentOrder = columnOrderRef.current ?? columnsRef.current.map((c) => c.columnId);
+                const newOrder = reorderColumnArray(currentOrder, columnId, latestDropTargetIndex);
+                onColumnOrderChangeRef.current?.(newOrder);
+            }
+            setIsDragging(false);
+            setDropIndicatorX(null);
+        };
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+        cleanupRef.current = cleanup;
+    }, [enabled, wrapperRef]);
+    return { isDragging, dropIndicatorX, handleHeaderMouseDown };
+}

package/dist/esm/hooks/useDataGridState.js

@@ -11,6 +11,8 @@ import { useFillHandle } from './useFillHandle';
 import { useUndoRedo } from './useUndoRedo';
 import { useLatestRef } from './useLatestRef';
 import { useTableLayout } from './useTableLayout';
+import { useColumnPinning } from './useColumnPinning';
+import { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
 // Stable no-op handlers used when cellSelection is disabled (module-scope = no re-renders)
 const NOOP = () => { };
 const NOOP_ASYNC = async () => { };
@@ -23,7 +25,7 @@ const NOOP_CTX = (_e) => { };
  */
 export function useDataGridState(params) {
     const { props, wrapperRef } = params;
-    const { items, columns, getRowId, visibleColumns, columnOrder, rowSelection = 'none', selectedRows: controlledSelectedRows, onSelectionChange, statusBar, emptyState, editable, cellSelection: cellSelectionProp, onCellValueChanged: onCellValueChangedProp, initialColumnWidths, onColumnResized, pinnedColumns, onCellError, } = props;
+    const { items, columns, getRowId, visibleColumns, columnOrder, rowSelection = 'none', selectedRows: controlledSelectedRows, onSelectionChange, showRowNumbers, statusBar, emptyState, editable, cellSelection: cellSelectionProp, onCellValueChanged: onCellValueChangedProp, initialColumnWidths, onColumnResized, pinnedColumns, onColumnPinned, onCellError, } = props;
     const cellSelection = cellSelectionProp !== false;
     // Wrap onCellValueChanged with undo/redo tracking — all edits are recorded automatically
     const undoRedo = useUndoRedo({ onCellValueChanged: onCellValueChangedProp });
@@ -63,8 +65,10 @@ export function useDataGridState(params) {
     }, [flatColumns, visibleColumns, columnOrder]);
     const visibleColumnCount = visibleCols.length;
     const hasCheckboxCol = rowSelection === 'multiple';
-    const totalColCount = visibleColumnCount + (hasCheckboxCol ? 1 : 0);
-    const colOffset = hasCheckboxCol ? 1 : 0;
+    const hasRowNumbersCol = !!showRowNumbers;
+    const specialColsCount = (hasCheckboxCol ? 1 : 0) + (hasRowNumbersCol ? 1 : 0);
+    const totalColCount = visibleColumnCount + specialColsCount;
+    const colOffset = specialColsCount;
     const rowIndexByRowId = useMemo(() => {
         const m = new Map();
         items.forEach((item, idx) => m.set(getRowId(item), idx));
@@ -136,6 +140,16 @@ export function useDataGridState(params) {
         initialColumnWidths,
         onColumnResized,
     });
+    const pinningResult = useColumnPinning({
+        columns: flatColumns,
+        pinnedColumns,
+        onColumnPinned,
+    });
+    const headerMenuResult = useColumnHeaderMenuState({
+        pinnedColumns: pinningResult.pinnedColumns,
+        onPinColumn: pinningResult.pinColumn,
+        onUnpinColumn: pinningResult.unpinColumn,
+    });
     const aggregation = useMemo(() => computeAggregations(items, visibleCols, cellSelection ? selectionRange : null), [items, visibleCols, selectionRange, cellSelection]);
     const statusBarConfig = useMemo(() => {
         const base = getDataGridStatusBarConfig(statusBar, items.length, selectedRowIds.size);
@@ -250,11 +264,11 @@ export function useDataGridState(params) {
     // --- Memoize each sub-object so downstream consumers only re-render when their slice changes ---
     const layoutState = useMemo(() => ({
         flatColumns, visibleCols, visibleColumnCount, totalColCount, colOffset,
-        hasCheckboxCol, rowIndexByRowId, containerWidth, minTableWidth,
+        hasCheckboxCol, hasRowNumbersCol, rowIndexByRowId, containerWidth, minTableWidth,
         desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, onColumnResized,
     }), [
         flatColumns, visibleCols, visibleColumnCount, totalColCount, colOffset,
-        hasCheckboxCol, rowIndexByRowId, containerWidth, minTableWidth,
+        hasCheckboxCol, hasRowNumbersCol, rowIndexByRowId, containerWidth, minTableWidth,
         desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, onColumnResized,
     ]);
     const rowSelectionState = useMemo(() => ({
@@ -302,6 +316,27 @@ export function useDataGridState(params) {
     const viewModelsState = useMemo(() => ({
         headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError,
     }), [headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError]);
+    const pinningState = useMemo(() => ({
+        pinnedColumns: pinningResult.pinnedColumns,
+        pinColumn: pinningResult.pinColumn,
+        unpinColumn: pinningResult.unpinColumn,
+        isPinned: pinningResult.isPinned,
+        computeLeftOffsets: pinningResult.computeLeftOffsets,
+        computeRightOffsets: pinningResult.computeRightOffsets,
+        headerMenu: {
+            isOpen: headerMenuResult.isOpen,
+            openForColumn: headerMenuResult.openForColumn,
+            anchorElement: headerMenuResult.anchorElement,
+            open: headerMenuResult.open,
+            close: headerMenuResult.close,
+            handlePinLeft: headerMenuResult.handlePinLeft,
+            handlePinRight: headerMenuResult.handlePinRight,
+            handleUnpin: headerMenuResult.handleUnpin,
+            canPinLeft: headerMenuResult.canPinLeft,
+            canPinRight: headerMenuResult.canPinRight,
+            canUnpin: headerMenuResult.canUnpin,
+        },
+    }), [pinningResult, headerMenuResult]);
     return {
         layout: layoutState,
         rowSelection: rowSelectionState,
@@ -309,5 +344,6 @@ export function useDataGridState(params) {
         interaction: interactionState,
         contextMenu: contextMenuState,
         viewModels: viewModelsState,
+        pinning: pinningState,
     };
 }

package/dist/esm/hooks/useOGrid.js

@@ -11,7 +11,7 @@ const EMPTY_LOADING_OPTIONS = {};
  * @returns Grouped props for DataGridTable, pagination controls, column chooser, layout, and filters.
  */
 export function useOGrid(props, ref) {
-    const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, onColumnResized, onColumnPinned, freezeRows, freezeCols, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, toolbarBelow, emptyState, entityLabelPlural = 'items', className, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, onColumnResized, onColumnPinned, freezeRows, freezeCols, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, toolbarBelow, emptyState, entityLabelPlural = 'items', className, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, showRowNumbers, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, columnReorder, virtualScroll, density = 'normal', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
     // Resolve column chooser placement
     const columnChooserPlacement = columnChooserProp === false ? 'none'
         : columnChooserProp === 'sidebar' ? 'sidebar'
@@ -265,6 +265,14 @@ export function useOGrid(props, ref) {
                 setRefreshCounter(refreshCounterRef.current);
             }
         },
+        getColumnOrder: () => columnOrder ?? columns.map((c) => c.columnId),
+        setColumnOrder: (order) => {
+            onColumnOrderChange?.(order);
+        },
+        scrollToRow: () => {
+            // No-op at orchestration level — DataGridTable components implement
+            // this via useVirtualScroll.scrollToIndex when virtual scrolling is active.
+        },
     }), [
         visibleColumns,
         sort,
@@ -401,6 +409,9 @@ export function useOGrid(props, ref) {
         rowSelection,
         selectedRows: effectiveSelectedRows,
         onSelectionChange: handleSelectionChange,
+        showRowNumbers,
+        currentPage: page,
+        pageSize,
         statusBar: statusBarConfig,
         isLoading: isLoadingResolved,
         filters,
@@ -411,6 +422,9 @@ export function useOGrid(props, ref) {
         getUserByEmail: dataSource?.getUserByEmail,
         layoutMode,
         suppressHorizontalScroll,
+        columnReorder,
+        virtualScroll,
+        density,
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
         emptyState: {
@@ -424,9 +438,10 @@ export function useOGrid(props, ref) {
         visibleColumns, columnOrder, onColumnOrderChange, handleColumnResized,
         handleColumnPinned, pinnedOverrides, columnWidthOverrides, freezeRows, freezeCols,
         editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo,
-        rowSelection, effectiveSelectedRows, handleSelectionChange, statusBarConfig,
+        rowSelection, effectiveSelectedRows, handleSelectionChange, showRowNumbers, page, pageSize, statusBarConfig,
         isLoadingResolved, filters, handleFilterChange, clientFilterOptions, dataSource,
-        loadingFilterOptions, layoutMode, suppressHorizontalScroll, ariaLabel, ariaLabelledBy,
+        loadingFilterOptions, layoutMode, suppressHorizontalScroll, columnReorder, virtualScroll,
+        density, ariaLabel, ariaLabelledBy,
         hasActiveFilters, clearAllFilters, emptyState,
     ]);
     const pagination = useMemo(() => ({

package/dist/esm/hooks/useVirtualScroll.js

@@ -0,0 +1,69 @@
+import { useMemo, useCallback, useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+/** Threshold below which virtual scrolling is a no-op (all rows rendered). */
+const PASSTHROUGH_THRESHOLD = 100;
+/**
+ * Wraps TanStack Virtual for row virtualization.
+ * When disabled or when totalRows < threshold, returns a pass-through (all rows visible).
+ * @param params - Total rows, row height, enabled flag, overscan, and container ref.
+ * @returns Virtualizer instance, total height, visible range, and scrollToIndex helper.
+ */
+export function useVirtualScroll(params) {
+    const { totalRows, rowHeight, enabled, overscan = 5, containerRef, } = params;
+    const isActive = enabled && totalRows >= PASSTHROUGH_THRESHOLD;
+    const getScrollElement = useCallback(() => containerRef.current, [containerRef]);
+    const virtualizer = useVirtualizer({
+        count: isActive ? totalRows : 0,
+        getScrollElement,
+        estimateSize: () => rowHeight,
+        overscan,
+        enabled: isActive,
+    });
+    const passthroughRange = useMemo(() => ({
+        startIndex: 0,
+        endIndex: Math.max(0, totalRows - 1),
+        offsetTop: 0,
+        offsetBottom: 0,
+    }), [totalRows]);
+    const activeRange = useMemo(() => {
+        if (!isActive)
+            return passthroughRange;
+        const virtualItems = virtualizer.getVirtualItems();
+        if (virtualItems.length === 0) {
+            return { startIndex: 0, endIndex: -1, offsetTop: 0, offsetBottom: 0 };
+        }
+        const first = virtualItems[0];
+        const last = virtualItems[virtualItems.length - 1];
+        const totalSize = virtualizer.getTotalSize();
+        return {
+            startIndex: first.index,
+            endIndex: last.index,
+            offsetTop: first.start,
+            offsetBottom: Math.max(0, totalSize - last.end),
+        };
+    }, [isActive, virtualizer, passthroughRange]);
+    const totalHeight = isActive
+        ? virtualizer.getTotalSize()
+        : totalRows * rowHeight;
+    const scrollToIndexRef = useRef(virtualizer);
+    scrollToIndexRef.current = virtualizer;
+    const scrollToIndex = useCallback((index) => {
+        if (isActive) {
+            scrollToIndexRef.current?.scrollToIndex(index, { align: 'auto' });
+        }
+        else {
+            // When not virtualized, scroll the container directly
+            const container = containerRef.current;
+            if (container) {
+                const top = index * rowHeight;
+                container.scrollTo({ top, behavior: 'auto' });
+            }
+        }
+    }, [isActive, containerRef, rowHeight]);
+    return {
+        virtualizer: isActive ? virtualizer : null,
+        totalHeight,
+        visibleRange: activeRange,
+        scrollToIndex,
+    };
+}

package/dist/esm/index.js

@@ -1,8 +1,8 @@
 // Constants (re-exported from core)
-export { CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
+export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 // Hooks
-export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useLatestRef, } from './hooks';
+export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, } from './hooks';
 // Components
 export { OGridLayout } from './components/OGridLayout';
 export { StatusBar } from './components/StatusBar';

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

@@ -39,10 +39,18 @@ export { useInlineCellEditorState } from './useInlineCellEditorState';
 export type { UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, } from './useInlineCellEditorState';
 export { useColumnResize } from './useColumnResize';
 export type { UseColumnResizeParams, UseColumnResizeResult, } from './useColumnResize';
+export { useColumnPinning } from './useColumnPinning';
+export type { UseColumnPinningParams, UseColumnPinningResult, } from './useColumnPinning';
+export { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
+export type { UseColumnHeaderMenuStateParams, UseColumnHeaderMenuStateResult, } from './useColumnHeaderMenuState';
 export { useRichSelectState } from './useRichSelectState';
 export type { UseRichSelectStateParams, UseRichSelectStateResult } from './useRichSelectState';
 export { useSideBarState } from './useSideBarState';
 export type { UseSideBarStateParams, UseSideBarStateResult } from './useSideBarState';
 export { useTableLayout } from './useTableLayout';
 export type { UseTableLayoutParams, UseTableLayoutResult } from './useTableLayout';
+export { useColumnReorder } from './useColumnReorder';
+export type { UseColumnReorderParams, UseColumnReorderResult, } from './useColumnReorder';
+export { useVirtualScroll } from './useVirtualScroll';
+export type { IVirtualScrollConfig, UseVirtualScrollParams, UseVirtualScrollResult, } from './useVirtualScroll';
 export { useLatestRef } from './useLatestRef';

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

@@ -0,0 +1,23 @@
+export interface UseColumnHeaderMenuStateParams {
+    pinnedColumns: Record<string, 'left' | 'right'>;
+    onPinColumn: (columnId: string, side: 'left' | 'right') => void;
+    onUnpinColumn: (columnId: string) => void;
+}
+export interface UseColumnHeaderMenuStateResult {
+    isOpen: boolean;
+    openForColumn: string | null;
+    anchorElement: HTMLElement | null;
+    open: (columnId: string, anchorEl: HTMLElement) => void;
+    close: () => void;
+    handlePinLeft: () => void;
+    handlePinRight: () => void;
+    handleUnpin: () => void;
+    canPinLeft: boolean;
+    canPinRight: boolean;
+    canUnpin: boolean;
+}
+/**
+ * Manages state for the column header menu (pin left/right/unpin actions).
+ * Tracks which column's menu is open, anchor element, and action handlers.
+ */
+export declare function useColumnHeaderMenuState(params: UseColumnHeaderMenuStateParams): UseColumnHeaderMenuStateResult;

package/dist/types/hooks/useColumnPinning.d.ts

@@ -0,0 +1,32 @@
+import type { IColumnDef } from '@alaarab/ogrid-core';
+export interface UseColumnPinningParams<T = unknown> {
+    columns: IColumnDef<T>[];
+    /** Controlled pinned columns state. If provided, component is controlled. */
+    pinnedColumns?: Record<string, 'left' | 'right'>;
+    /** Called when user pins/unpins a column via UI. */
+    onColumnPinned?: (columnId: string, pinned: 'left' | 'right' | null) => void;
+}
+export interface UseColumnPinningResult {
+    /** Current pinned columns (controlled or internal). */
+    pinnedColumns: Record<string, 'left' | 'right'>;
+    /** Pin a column to left or right. */
+    pinColumn: (columnId: string, side: 'left' | 'right') => void;
+    /** Unpin a column. */
+    unpinColumn: (columnId: string) => void;
+    /** Check if a column is pinned and which side. */
+    isPinned: (columnId: string) => 'left' | 'right' | undefined;
+    /** Compute sticky left offsets for pinned columns. */
+    computeLeftOffsets: (visibleCols: {
+        columnId: string;
+    }[], columnWidths: Record<string, number>, defaultWidth: number, hasCheckboxColumn: boolean, checkboxColumnWidth: number) => Record<string, number>;
+    /** Compute sticky right offsets for pinned columns. */
+    computeRightOffsets: (visibleCols: {
+        columnId: string;
+    }[], columnWidths: Record<string, number>, defaultWidth: number) => Record<string, number>;
+}
+/**
+ * Manages column pinning state (left/right sticky positioning).
+ * Supports controlled and uncontrolled modes.
+ * Initializes from column.pinned definitions and pinnedColumns prop.
+ */
+export declare function useColumnPinning<T = unknown>(params: UseColumnPinningParams<T>): UseColumnPinningResult;

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

@@ -0,0 +1,22 @@
+import type { RefObject } from 'react';
+import type { IColumnDef } from '../types';
+export interface UseColumnReorderParams<T> {
+    columns: IColumnDef<T>[];
+    columnOrder?: string[];
+    onColumnOrderChange?: (order: string[]) => void;
+    enabled?: boolean;
+    /** Pinned column configuration for zone constraints. */
+    pinnedColumns?: Record<string, 'left' | 'right'>;
+    wrapperRef: RefObject<HTMLElement | null>;
+}
+export interface UseColumnReorderResult {
+    isDragging: boolean;
+    dropIndicatorX: number | null;
+    handleHeaderMouseDown: (columnId: string, event: React.MouseEvent) => void;
+}
+/**
+ * Manages column reorder drag interactions with RAF-throttled updates.
+ * @param params - Columns, order, change callback, enabled flag, and wrapper ref.
+ * @returns Drag state and mousedown handler for header cells.
+ */
+export declare function useColumnReorder<T>(params: UseColumnReorderParams<T>): UseColumnReorderResult;

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

@@ -13,6 +13,7 @@ export interface DataGridLayoutState<T> {
     totalColCount: number;
     colOffset: number;
     hasCheckboxCol: boolean;
+    hasRowNumbersCol: boolean;
     rowIndexByRowId: Map<RowId, number>;
     containerWidth: number;
     minTableWidth: number;
@@ -121,6 +122,32 @@ export interface DataGridViewModelState<T> {
     showEmptyInGrid: boolean;
     onCellError?: (error: Error, errorInfo: React.ErrorInfo) => void;
 }
+/** Column pinning state and column header menu. */
+export interface DataGridPinningState {
+    pinnedColumns: Record<string, 'left' | 'right'>;
+    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>;
+    headerMenu: {
+        isOpen: boolean;
+        openForColumn: string | null;
+        anchorElement: HTMLElement | null;
+        open: (columnId: string, anchorEl: HTMLElement) => void;
+        close: () => void;
+        handlePinLeft: () => void;
+        handlePinRight: () => void;
+        handleUnpin: () => void;
+        canPinLeft: boolean;
+        canPinRight: boolean;
+        canUnpin: boolean;
+    };
+}
 /** Grouped result from useDataGridState. */
 export interface UseDataGridStateResult<T> {
     layout: DataGridLayoutState<T>;
@@ -129,6 +156,7 @@ export interface UseDataGridStateResult<T> {
     interaction: DataGridCellInteractionState;
     contextMenu: DataGridContextMenuState;
     viewModels: DataGridViewModelState<T>;
+    pinning: DataGridPinningState;
 }
 /**
  * Single orchestration hook for DataGridTable. Takes grid props and wrapper ref,

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

@@ -0,0 +1,33 @@
+import type { Virtualizer } from '@tanstack/react-virtual';
+import type { RefObject } from 'react';
+import type { IVisibleRange } from '@alaarab/ogrid-core';
+export type { IVirtualScrollConfig } from '@alaarab/ogrid-core';
+export interface UseVirtualScrollParams {
+    /** Total number of rows in the data set. */
+    totalRows: number;
+    /** Row height in pixels. */
+    rowHeight: number;
+    /** Whether virtual scrolling is enabled. */
+    enabled: boolean;
+    /** Number of extra rows to render outside the visible area. Default: 5. */
+    overscan?: number;
+    /** Ref to the scrollable container element. */
+    containerRef: RefObject<HTMLElement | null>;
+}
+export interface UseVirtualScrollResult {
+    /** The TanStack virtualizer instance (null when disabled). */
+    virtualizer: Virtualizer<HTMLElement, Element> | null;
+    /** Total height of all rows in pixels. */
+    totalHeight: number;
+    /** The range of visible rows with spacer offsets. */
+    visibleRange: IVisibleRange;
+    /** Scroll to a specific row index. */
+    scrollToIndex: (index: number) => void;
+}
+/**
+ * Wraps TanStack Virtual for row virtualization.
+ * When disabled or when totalRows < threshold, returns a pass-through (all rows visible).
+ * @param params - Total rows, row height, enabled flag, overscan, and container ref.
+ * @returns Virtualizer instance, total height, visible range, and scrollToIndex helper.
+ */
+export declare function useVirtualScroll(params: UseVirtualScrollParams): UseVirtualScrollResult;

package/dist/types/index.d.ts

@@ -1,8 +1,8 @@
-export { CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
-export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridDataGridProps, RowSelectionMode, RowId, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, HeaderCell, HeaderRow, SideBarPanelId, ISideBarDef, IDateFilterValue, } from './types';
+export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
+export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridDataGridProps, RowSelectionMode, RowId, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, HeaderCell, HeaderRow, SideBarPanelId, ISideBarDef, IDateFilterValue, IVirtualScrollConfig, IColumnReorderConfig, } from './types';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
-export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useLatestRef, } from './hooks';
-export type { UseFilterOptionsResult, UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseActiveCellResult, UseCellEditingResult, EditingCell, UseContextMenuResult, ContextMenuPosition, UseCellSelectionResult, UseCellSelectionParams, UseClipboardResult, UseClipboardParams, UseRowSelectionResult, UseRowSelectionParams, UseKeyboardNavigationResult, UseKeyboardNavigationParams, UseUndoRedoResult, UseUndoRedoParams, UseFillHandleResult, UseFillHandleParams, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, } from './hooks';
+export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, } from './hooks';
+export type { UseFilterOptionsResult, UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseActiveCellResult, UseCellEditingResult, EditingCell, UseContextMenuResult, ContextMenuPosition, UseCellSelectionResult, UseCellSelectionParams, UseClipboardResult, UseClipboardParams, UseRowSelectionResult, UseRowSelectionParams, UseKeyboardNavigationResult, UseKeyboardNavigationParams, UseUndoRedoResult, UseUndoRedoParams, UseFillHandleResult, UseFillHandleParams, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, } from './hooks';
 export { OGridLayout } from './components/OGridLayout';
 export type { OGridLayoutProps } from './components/OGridLayout';
 export { StatusBar } from './components/StatusBar';

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

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 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, IVirtualScrollConfig, IColumnReorderConfig, IOGridApi, } 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>)[];
@@ -43,6 +43,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;
@@ -68,6 +70,12 @@ interface IOGridBaseProps<T> {
     sideBar?: boolean | ISideBarDef;
     /** Page size options shown in the pagination dropdown. Default: [10, 20, 50, 100]. */
     pageSizeOptions?: number[];
+    /** Enable column reordering via drag-and-drop on header cells. Default: false. */
+    columnReorder?: boolean;
+    /** Virtual scrolling configuration. When provided, only visible rows are rendered for large datasets. */
+    virtualScroll?: IVirtualScrollConfig;
+    /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
+    density?: 'compact' | 'normal' | 'comfortable';
     /** Fires once when the grid first renders with data (useful for restoring column state). */
     onFirstDataRendered?: () => void;
     /** Called when server-side fetchPage fails. */
@@ -130,6 +138,12 @@ export interface IOGridDataGridProps<T> {
     rowSelection?: RowSelectionMode;
     selectedRows?: Set<RowId>;
     onSelectionChange?: (event: IRowSelectionChangeEvent<T>) => void;
+    /** Show Excel-style row numbers column. */
+    showRowNumbers?: boolean;
+    /** Current page number (1-based) for row number calculation. */
+    currentPage?: number;
+    /** Page size for row number calculation. */
+    pageSize?: number;
     statusBar?: IStatusBarProps;
     /** Unified filter model (discriminated union values). */
     filters: IFilters;
@@ -145,6 +159,12 @@ export interface IOGridDataGridProps<T> {
         message?: ReactNode;
         render?: () => ReactNode;
     };
+    /** Enable column reordering via drag-and-drop on header cells. Default: false. */
+    columnReorder?: boolean;
+    /** Virtual scrolling configuration. When provided, only visible rows are rendered for large datasets. */
+    virtualScroll?: IVirtualScrollConfig;
+    /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
+    density?: 'compact' | 'normal' | 'comfortable';
     /** Called when a cell renderer or custom editor throws an error. */
     onCellError?: (error: Error, errorInfo: React.ErrorInfo) => void;
     'aria-label'?: 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, IColumnReorderConfig, } from './dataGridTypes';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,8 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.2"
+    "@alaarab/ogrid-core": "2.0.4",
+    "@tanstack/react-virtual": "^3.11.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"