@alaarab/ogrid-react 2.0.2 → 2.0.3

package/dist/esm/hooks/index.js

@@ -22,4 +22,6 @@ export { useColumnResize } from './useColumnResize';
 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/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/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, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, columnReorder, virtualScroll, '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,
@@ -411,6 +419,8 @@ export function useOGrid(props, ref) {
         getUserByEmail: dataSource?.getUserByEmail,
         layoutMode,
         suppressHorizontalScroll,
+        columnReorder,
+        virtualScroll,
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
         emptyState: {
@@ -426,7 +436,8 @@ export function useOGrid(props, ref) {
         editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo,
         rowSelection, effectiveSelectedRows, handleSelectionChange, statusBarConfig,
         isLoadingResolved, filters, handleFilterChange, clientFilterOptions, dataSource,
-        loadingFilterOptions, layoutMode, suppressHorizontalScroll, ariaLabel, ariaLabelledBy,
+        loadingFilterOptions, layoutMode, suppressHorizontalScroll, columnReorder, virtualScroll,
+        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

@@ -2,7 +2,7 @@
 export { CHECKBOX_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

@@ -45,4 +45,8 @@ 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/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/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 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>)[];
@@ -68,6 +68,10 @@ 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;
     /** Fires once when the grid first renders with data (useful for restoring column state). */
     onFirstDataRendered?: () => void;
     /** Called when server-side fetchPage fails. */
@@ -145,6 +149,10 @@ 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;
     /** 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.3",
   "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.3",
+    "@tanstack/react-virtual": "^3.11.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"