@alaarab/ogrid-react 2.0.17 → 2.0.18

package/dist/esm/hooks/index.js

@@ -27,6 +27,7 @@ export { useSideBarState } from './useSideBarState';
 export { useTableLayout } from './useTableLayout';
 export { useColumnReorder } from './useColumnReorder';
 export { useVirtualScroll } from './useVirtualScroll';
+export { useListVirtualizer } from './useListVirtualizer';
 export { useLatestRef } from './useLatestRef';
 export { usePaginationControls } from './usePaginationControls';
 export { useDataGridTableOrchestration } from './useDataGridTableOrchestration';

package/dist/esm/hooks/useDataGridTableOrchestration.js

@@ -35,7 +35,7 @@ export function useDataGridTableOrchestration(params) {
     const { headerMenu } = pinning;
     const handlePasteVoid = useCallback(() => { void handlePaste(); }, [handlePaste]);
     // ── Props destructuring ─────────────────────────────────────────────────
-    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
+    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
     // ── Derived values ──────────────────────────────────────────────────────
     const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * propPageSize : 0;
     const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
@@ -117,8 +117,6 @@ export function useDataGridTableOrchestration(params) {
         emptyState,
         layoutMode,
         rowSelection,
-        freezeRows,
-        freezeCols,
         suppressHorizontalScroll,
         isLoading,
         loadingMessage,

package/dist/esm/hooks/useListVirtualizer.js

@@ -0,0 +1,29 @@
+/**
+ * Lightweight list virtualizer for fixed-height items in a scrollable container.
+ * Zero external dependencies — uses only React state and refs.
+ */
+import { useRef, useState, useCallback, useMemo } from 'react';
+export function useListVirtualizer(opts) {
+    const { count, itemHeight, containerHeight = 250, overscan = 5 } = opts;
+    const containerRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const onScroll = useCallback(() => {
+        if (containerRef.current) {
+            setScrollTop(containerRef.current.scrollTop);
+        }
+    }, []);
+    const totalHeight = count * itemHeight;
+    const visibleItems = useMemo(() => {
+        if (count === 0)
+            return [];
+        const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+        const visibleCount = Math.ceil(containerHeight / itemHeight);
+        const endIndex = Math.min(count - 1, startIndex + visibleCount + overscan * 2);
+        const items = [];
+        for (let i = startIndex; i <= endIndex; i++) {
+            items.push({ index: i, offsetTop: i * itemHeight });
+        }
+        return items;
+    }, [count, itemHeight, containerHeight, overscan, scrollTop]);
+    return { totalHeight, visibleItems, containerRef, onScroll };
+}

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, showRowNumbers, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, columnReorder, virtualScroll, density = 'normal', '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, 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'
@@ -395,8 +395,6 @@ export function useOGrid(props, ref) {
         onColumnPinned: handleColumnPinned,
         pinnedColumns: pinnedOverrides,
         initialColumnWidths: columnWidthOverrides,
-        freezeRows,
-        freezeCols,
         editable,
         cellSelection,
         onCellValueChanged,
@@ -434,7 +432,7 @@ export function useOGrid(props, ref) {
     }), [
         displayItems, columnsProp, getRowId, sort.field, sort.direction, handleSort,
         visibleColumns, columnOrder, onColumnOrderChange, handleColumnResized,
-        handleColumnPinned, pinnedOverrides, columnWidthOverrides, freezeRows, freezeCols,
+        handleColumnPinned, pinnedOverrides, columnWidthOverrides,
         editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo,
         rowSelection, effectiveSelectedRows, handleSelectionChange, showRowNumbers, page, pageSize, statusBarConfig,
         isLoadingResolved, filters, handleFilterChange, clientFilterOptions, dataSource,

package/dist/esm/index.js

@@ -2,7 +2,7 @@
 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, useSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, usePaginationControls, useDataGridTableOrchestration, } 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, useSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useListVirtualizer, useLatestRef, usePaginationControls, useDataGridTableOrchestration, } from './hooks';
 // Constants
 export { GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from './constants/domHelpers';
 // Components

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

@@ -55,6 +55,8 @@ export { useColumnReorder } from './useColumnReorder';
 export type { UseColumnReorderParams, UseColumnReorderResult, } from './useColumnReorder';
 export { useVirtualScroll } from './useVirtualScroll';
 export type { IVirtualScrollConfig, UseVirtualScrollParams, UseVirtualScrollResult, } from './useVirtualScroll';
+export { useListVirtualizer } from './useListVirtualizer';
+export type { UseListVirtualizerOptions, UseListVirtualizerResult, VirtualItem, } from './useListVirtualizer';
 export { useLatestRef } from './useLatestRef';
 export { usePaginationControls } from './usePaginationControls';
 export type { UsePaginationControlsProps, UsePaginationControlsResult, } from './usePaginationControls';

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

@@ -37,8 +37,6 @@ export interface UseDataGridTableOrchestrationResult<T> {
     emptyState: IOGridDataGridProps<T>['emptyState'];
     layoutMode: 'fill' | 'content';
     rowSelection: IOGridDataGridProps<T>['rowSelection'];
-    freezeRows: IOGridDataGridProps<T>['freezeRows'];
-    freezeCols: IOGridDataGridProps<T>['freezeCols'];
     suppressHorizontalScroll: IOGridDataGridProps<T>['suppressHorizontalScroll'];
     isLoading: boolean;
     loadingMessage: string;

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

@@ -0,0 +1,29 @@
+/**
+ * Lightweight list virtualizer for fixed-height items in a scrollable container.
+ * Zero external dependencies — uses only React state and refs.
+ */
+export interface UseListVirtualizerOptions {
+    /** Total number of items in the list. */
+    count: number;
+    /** Height of each item in pixels (uniform). */
+    itemHeight: number;
+    /** Container height in pixels. Defaults to 250. */
+    containerHeight?: number;
+    /** Extra items to render above/below the visible window. Defaults to 5. */
+    overscan?: number;
+}
+export interface VirtualItem {
+    index: number;
+    offsetTop: number;
+}
+export interface UseListVirtualizerResult {
+    /** Total scrollable height (count * itemHeight). */
+    totalHeight: number;
+    /** Items currently visible (plus overscan buffer). */
+    visibleItems: VirtualItem[];
+    /** Ref to attach to the scrollable container div. */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Scroll handler to attach to the scrollable container div. */
+    onScroll: () => void;
+}
+export declare function useListVirtualizer(opts: UseListVirtualizerOptions): UseListVirtualizerResult;

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 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, useSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, usePaginationControls, useDataGridTableOrchestration, } 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, useSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useListVirtualizer, useLatestRef, usePaginationControls, useDataGridTableOrchestration, } 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, DataGridPinningState, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSelectStateParams, UseSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UsePaginationControlsProps, UsePaginationControlsResult, UseDataGridTableOrchestrationParams, UseDataGridTableOrchestrationResult, } from './hooks';
 export { GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from './constants/domHelpers';
 export { OGridLayout } from './components/OGridLayout';

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

@@ -30,8 +30,6 @@ interface IOGridBaseProps<T> {
     onColumnResized?: (columnId: string, width: number) => void;
     /** Called when a column is pinned or unpinned. */
     onColumnPinned?: (columnId: string, pinned: 'left' | 'right' | null) => void;
-    freezeRows?: number;
-    freezeCols?: number;
     editable?: boolean;
     /** Enable spreadsheet-like cell selection (active cell, range, fill handle, clipboard, context menu). Default: true. */
     cellSelection?: boolean;
@@ -118,10 +116,6 @@ export interface IOGridDataGridProps<T> {
     pinnedColumns?: Record<string, 'left' | 'right'>;
     /** Initial column width overrides (from restored state). */
     initialColumnWidths?: Record<string, number>;
-    /** Number of rows to freeze (sticky), e.g. 1 = header row. */
-    freezeRows?: number;
-    /** Number of data columns to freeze (sticky left). */
-    freezeCols?: number;
     layoutMode?: 'content' | 'fill';
     /** When true, horizontal scrolling is suppressed (overflow-x hidden). */
     suppressHorizontalScroll?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.17"
+    "@alaarab/ogrid-core": "2.0.18"
   },
   "peerDependencies": {
     "@tanstack/react-virtual": "^3.0.0",