@alaarab/ogrid-react 2.0.3 → 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,6 +19,8 @@ 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';

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/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, columnReorder, virtualScroll, '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'
@@ -409,6 +409,9 @@ export function useOGrid(props, ref) {
         rowSelection,
         selectedRows: effectiveSelectedRows,
         onSelectionChange: handleSelectionChange,
+        showRowNumbers,
+        currentPage: page,
+        pageSize,
         statusBar: statusBarConfig,
         isLoading: isLoadingResolved,
         filters,
@@ -421,6 +424,7 @@ export function useOGrid(props, ref) {
         suppressHorizontalScroll,
         columnReorder,
         virtualScroll,
+        density,
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
         emptyState: {
@@ -434,10 +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, columnReorder, virtualScroll,
-        ariaLabel, ariaLabelledBy,
+        density, ariaLabel, ariaLabelledBy,
         hasActiveFilters, clearAllFilters, emptyState,
     ]);
     const pagination = useMemo(() => ({

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 // 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, useColumnReorder, useVirtualScroll, useLatestRef, } from './hooks';

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

@@ -39,6 +39,10 @@ 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';

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/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/index.d.ts

@@ -1,4 +1,4 @@
-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 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, useColumnReorder, useVirtualScroll, useLatestRef, } from './hooks';

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

@@ -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;
@@ -72,6 +74,8 @@ interface IOGridBaseProps<T> {
     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. */
@@ -134,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;
@@ -153,6 +163,8 @@ export interface IOGridDataGridProps<T> {
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.0.3",
+  "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,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.3",
+    "@alaarab/ogrid-core": "2.0.4",
     "@tanstack/react-virtual": "^3.11.0"
   },
   "peerDependencies": {