@alaarab/ogrid-angular 2.0.2 → 2.0.3

package/dist/esm/index.js

@@ -4,6 +4,8 @@ export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types
 // Services
 export { OGridService } from './services/ogrid.service';
 export { DataGridStateService } from './services/datagrid-state.service';
+export { ColumnReorderService } from './services/column-reorder.service';
+export { VirtualScrollService } from './services/virtual-scroll.service';
 // Components
 export { OGridLayoutComponent } from './components/ogrid-layout.component';
 export { StatusBarComponent } from './components/status-bar.component';
@@ -11,3 +13,4 @@ export { GridContextMenuComponent } from './components/grid-context-menu.compone
 export { SideBarComponent } from './components/sidebar.component';
 export { MarchingAntsOverlayComponent } from './components/marching-ants-overlay.component';
 export { EmptyStateComponent } from './components/empty-state.component';
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';

package/dist/esm/services/column-reorder.service.js

@@ -0,0 +1,180 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Injectable, signal, DestroyRef, inject } from '@angular/core';
+import { reorderColumnArray } from '@alaarab/ogrid-core';
+/** Width of the resize handle zone on the right edge of each header cell. */
+const RESIZE_HANDLE_ZONE = 8;
+/**
+ * Manages column reorder drag interactions with RAF-throttled updates.
+ * Angular signals-based port of React's useColumnReorder hook.
+ */
+let ColumnReorderService = class ColumnReorderService {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        // --- Input signals (set by consuming component) ---
+        this.columns = signal([]);
+        this.columnOrder = signal(undefined);
+        this.onColumnOrderChange = signal(undefined);
+        this.enabled = signal(true);
+        this.wrapperEl = signal(null);
+        // --- Internal state ---
+        this.isDragging = signal(false);
+        this.dropIndicatorX = signal(null);
+        // Imperative drag tracking (not reactive)
+        this.rafId = 0;
+        this.cleanupFn = null;
+        // Refs for latest values (captured in closure)
+        this.latestDropTargetIndex = null;
+        this.destroyRef.onDestroy(() => {
+            if (this.cleanupFn) {
+                this.cleanupFn();
+                this.cleanupFn = null;
+            }
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = 0;
+            }
+        });
+    }
+    /**
+     * Call this from the header cell's mousedown handler.
+     * @param columnId - The column being dragged
+     * @param event - The native MouseEvent
+     */
+    handleHeaderMouseDown(columnId, event) {
+        if (!this.enabled())
+            return;
+        if (!this.onColumnOrderChange())
+            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 = this.columns();
+        const colIndex = cols.findIndex((c) => c.columnId === columnId);
+        if (colIndex === -1)
+            return;
+        event.preventDefault();
+        const startX = event.clientX;
+        let hasMoved = false;
+        this.latestDropTargetIndex = null;
+        // Lock text selection during drag
+        const prevUserSelect = document.body.style.userSelect;
+        document.body.style.userSelect = 'none';
+        const onMove = (moveEvent) => {
+            // Require a small minimum drag distance before activating
+            if (!hasMoved && Math.abs(moveEvent.clientX - startX) < 5)
+                return;
+            if (!hasMoved) {
+                hasMoved = true;
+                this.isDragging.set(true);
+            }
+            if (this.rafId)
+                cancelAnimationFrame(this.rafId);
+            this.rafId = requestAnimationFrame(() => {
+                this.rafId = 0;
+                const wrapper = this.wrapperEl();
+                if (!wrapper)
+                    return;
+                const headerCells = wrapper.querySelectorAll('th[data-column-id]');
+                const rects = [];
+                for (let i = 0; i < headerCells.length; i++) {
+                    const th = headerCells[i];
+                    const id = th.getAttribute('data-column-id');
+                    if (!id)
+                        continue;
+                    const thRect = th.getBoundingClientRect();
+                    rects.push({
+                        columnId: id,
+                        left: thRect.left,
+                        right: thRect.right,
+                        centerX: thRect.left + thRect.width / 2,
+                    });
+                }
+                const result = this.calculateDrop(columnId, moveEvent.clientX, rects);
+                this.latestDropTargetIndex = result.dropIndex;
+                this.dropIndicatorX.set(result.indicatorX);
+            });
+        };
+        const cleanup = () => {
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
+            this.cleanupFn = null;
+            // Restore user-select
+            document.body.style.userSelect = prevUserSelect;
+            // Cancel pending RAF
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = 0;
+            }
+        };
+        const onUp = () => {
+            cleanup();
+            if (hasMoved && this.latestDropTargetIndex != null) {
+                const currentOrder = this.columnOrder() ?? this.columns().map((c) => c.columnId);
+                const newOrder = reorderColumnArray(currentOrder, columnId, this.latestDropTargetIndex);
+                this.onColumnOrderChange()?.(newOrder);
+            }
+            this.isDragging.set(false);
+            this.dropIndicatorX.set(null);
+        };
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+        this.cleanupFn = cleanup;
+    }
+    /**
+     * Calculate drop target from mouse position and header cell rects.
+     * Same logic as React's useColumnReorder inline calculation.
+     */
+    calculateDrop(draggedColumnId, mouseX, rects) {
+        if (rects.length === 0) {
+            return { dropIndex: null, indicatorX: null };
+        }
+        const order = this.columnOrder() ?? this.columns().map((c) => c.columnId);
+        const currentIndex = order.indexOf(draggedColumnId);
+        // Find which column the mouse is closest to
+        let bestIndex = 0;
+        let indicatorX = null;
+        if (mouseX <= rects[0].centerX) {
+            // Before the first column
+            bestIndex = 0;
+            indicatorX = rects[0].left;
+        }
+        else if (mouseX >= rects[rects.length - 1].centerX) {
+            // After the last column
+            bestIndex = rects.length;
+            indicatorX = rects[rects.length - 1].right;
+        }
+        else {
+            for (let i = 0; i < rects.length - 1; i++) {
+                if (mouseX >= rects[i].centerX && mouseX < rects[i + 1].centerX) {
+                    bestIndex = i + 1;
+                    indicatorX = rects[i].right;
+                    break;
+                }
+            }
+        }
+        // Map visual index back to order array index
+        const targetOrderIndex = bestIndex < rects.length
+            ? order.indexOf(rects[bestIndex]?.columnId ?? '')
+            : order.length;
+        // Check if this is a no-op (dropping at same position)
+        if (currentIndex === targetOrderIndex || currentIndex + 1 === targetOrderIndex) {
+            return { dropIndex: targetOrderIndex, indicatorX: null };
+        }
+        return { dropIndex: targetOrderIndex, indicatorX };
+    }
+};
+ColumnReorderService = __decorate([
+    Injectable()
+], ColumnReorderService);
+export { ColumnReorderService };

package/dist/esm/services/datagrid-state.service.js

@@ -51,8 +51,6 @@ let DataGridStateService = class DataGridStateService {
         this.rafId = 0;
         this.lastMousePos = null;
         this.autoScrollInterval = null;
-        // Window event listeners cleanup
-        this.windowCleanups = [];
         // ResizeObserver
         this.resizeObserver = null;
         // --- Derived computed ---
@@ -199,13 +197,16 @@ let DataGridStateService = class DataGridStateService {
             return p.items.length === 0 && !!p.emptyState && !p.isLoading;
         });
         // Setup window event listeners for cell selection drag
-        const onMove = (e) => this.onWindowMouseMove(e);
-        const onUp = () => this.onWindowMouseUp();
-        window.addEventListener('mousemove', onMove, true);
-        window.addEventListener('mouseup', onUp, true);
-        this.windowCleanups.push(() => {
-            window.removeEventListener('mousemove', onMove, true);
-            window.removeEventListener('mouseup', onUp, true);
+        // Using effect with cleanup return to ensure proper removal on destroy
+        effect((onCleanup) => {
+            const onMove = (e) => this.onWindowMouseMove(e);
+            const onUp = () => this.onWindowMouseUp();
+            window.addEventListener('mousemove', onMove, true);
+            window.addEventListener('mouseup', onUp, true);
+            onCleanup(() => {
+                window.removeEventListener('mousemove', onMove, true);
+                window.removeEventListener('mouseup', onUp, true);
+            });
         });
         // Initialize column sizing overrides from initial widths
         effect(() => {
@@ -240,7 +241,6 @@ let DataGridStateService = class DataGridStateService {
         });
         // Cleanup on destroy
         this.destroyRef.onDestroy(() => {
-            this.windowCleanups.forEach((fn) => fn());
             if (this.rafId)
                 cancelAnimationFrame(this.rafId);
             if (this.autoScrollInterval)
@@ -1257,6 +1257,9 @@ let DataGridStateService = class DataGridStateService {
                 this.endBatch();
             }
             this.fillDragStart = null;
+            // Remove event listeners after mouseup completes
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
         };
         window.addEventListener('mousemove', onMove, true);
         window.addEventListener('mouseup', onUp, true);

package/dist/esm/services/ogrid.service.js

@@ -72,10 +72,10 @@ let OGridService = class OGridService {
         this.internalData = signal([]);
         this.internalLoading = signal(false);
         this.internalPage = signal(1);
-        this.internalPageSize = signal(DEFAULT_PAGE_SIZE);
-        this.internalSort = signal({ field: '', direction: 'asc' });
+        this.internalPageSizeOverride = signal(null);
+        this.internalSortOverride = signal(null);
         this.internalFilters = signal({});
-        this.internalVisibleColumns = signal(new Set());
+        this.internalVisibleColumnsOverride = signal(null);
         this.internalSelectedRows = signal(new Set());
         this.columnWidthOverrides = signal({});
         this.pinnedOverrides = signal({});
@@ -91,10 +91,6 @@ let OGridService = class OGridService {
         // Filter options state
         this.serverFilterOptions = signal({});
         this.loadingFilterOptions = signal({});
-        // --- Initialization ---
-        this.sortInitialized = false;
-        this.visibleColumnsInitialized = false;
-        this.pageSizeInitialized = false;
         // --- Derived computed signals ---
         this.columns = computed(() => flattenColumns(this.columnsProp()));
         this.isServerSide = computed(() => this.dataSource() != null);
@@ -103,10 +99,23 @@ let OGridService = class OGridService {
         this.displayLoading = computed(() => this.controlledLoading() ?? this.internalLoading());
         this.defaultSortField = computed(() => this.defaultSortBy() ?? this.columns()[0]?.columnId ?? '');
         this.page = computed(() => this.controlledPage() ?? this.internalPage());
-        this.pageSize = computed(() => this.controlledPageSize() ?? this.internalPageSize());
-        this.sort = computed(() => this.controlledSort() ?? this.internalSort());
+        this.pageSize = computed(() => this.controlledPageSize() ?? this.internalPageSizeOverride() ?? this.defaultPageSize());
+        this.sort = computed(() => this.controlledSort() ?? this.internalSortOverride() ?? {
+            field: this.defaultSortField(),
+            direction: this.defaultSortDirection(),
+        });
         this.filters = computed(() => this.controlledFilters() ?? this.internalFilters());
-        this.visibleColumns = computed(() => this.controlledVisibleColumns() ?? this.internalVisibleColumns());
+        this.visibleColumns = computed(() => {
+            if (this.controlledVisibleColumns())
+                return this.controlledVisibleColumns();
+            if (this.internalVisibleColumnsOverride())
+                return this.internalVisibleColumnsOverride();
+            const cols = this.columns();
+            if (cols.length === 0)
+                return new Set();
+            const visible = cols.filter((c) => c.defaultVisible !== false).map((c) => c.columnId);
+            return new Set(visible.length > 0 ? visible : cols.map((c) => c.columnId));
+        });
         this.effectiveSelectedRows = computed(() => this.selectedRows() ?? this.internalSelectedRows());
         this.columnChooserPlacement = computed(() => {
             const prop = this.columnChooserProp();
@@ -281,30 +290,6 @@ let OGridService = class OGridService {
                 filterOptions: this.clientFilterOptions(),
             };
         });
-        // Initialize internal default values based on config
-        effect(() => {
-            if (!this.sortInitialized) {
-                this.sortInitialized = true;
-                this.internalSort.set({
-                    field: this.defaultSortField(),
-                    direction: this.defaultSortDirection(),
-                });
-            }
-        });
-        effect(() => {
-            if (!this.pageSizeInitialized) {
-                this.pageSizeInitialized = true;
-                this.internalPageSize.set(this.defaultPageSize());
-            }
-        });
-        effect(() => {
-            if (!this.visibleColumnsInitialized && this.columns().length > 0) {
-                this.visibleColumnsInitialized = true;
-                const cols = this.columns();
-                const visible = cols.filter((c) => c.defaultVisible !== false).map((c) => c.columnId);
-                this.internalVisibleColumns.set(new Set(visible.length > 0 ? visible : cols.map((c) => c.columnId)));
-            }
-        });
         // Server-side data fetching effect
         effect(() => {
             const ds = this.dataSource();
@@ -391,13 +376,13 @@ let OGridService = class OGridService {
     }
     setPageSize(size) {
         if (this.controlledPageSize() === undefined)
-            this.internalPageSize.set(size);
+            this.internalPageSizeOverride.set(size);
         this.onPageSizeChange()?.(size);
         this.setPage(1);
     }
     setSort(s) {
         if (this.controlledSort() === undefined)
-            this.internalSort.set(s);
+            this.internalSortOverride.set(s);
         this.onSortChange()?.(s);
         this.setPage(1);
     }
@@ -409,7 +394,7 @@ let OGridService = class OGridService {
     }
     setVisibleColumns(cols) {
         if (this.controlledVisibleColumns() === undefined)
-            this.internalVisibleColumns.set(cols);
+            this.internalVisibleColumnsOverride.set(cols);
         this.onVisibleColumnsChange()?.(cols);
     }
     handleSort(columnKey) {
@@ -610,6 +595,14 @@ let OGridService = class OGridService {
                     this.refreshCounter.update((c) => c + 1);
                 }
             },
+            getColumnOrder: () => this.columnOrder() ?? this.columns().map((c) => c.columnId),
+            setColumnOrder: (order) => {
+                this.onColumnOrderChange()?.(order);
+            },
+            scrollToRow: (_index, _options) => {
+                // Scrolling is handled by VirtualScrollService at the UI layer.
+                // The UI component should wire this to VirtualScrollService.scrollToRow().
+            },
         };
     }
 };

package/dist/esm/services/virtual-scroll.service.js

@@ -0,0 +1,91 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Injectable, signal, computed, DestroyRef, inject } from '@angular/core';
+import { computeVisibleRange, computeTotalHeight, getScrollTopForRow, } from '@alaarab/ogrid-core';
+/** Threshold below which virtual scrolling is a no-op (all rows rendered). */
+const PASSTHROUGH_THRESHOLD = 100;
+/**
+ * Manages virtual scrolling state using Angular signals.
+ * Port of React's useVirtualScroll hook.
+ *
+ * Uses core's pure-TS `computeVisibleRange` and `getScrollTopForRow` utilities.
+ * The UI layer (Angular Material / PrimeNG) provides the scrollable container
+ * and calls `onScroll()` / sets `containerHeight`.
+ */
+let VirtualScrollService = class VirtualScrollService {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        // --- Input signals (set by consuming component) ---
+        this.totalRows = signal(0);
+        this.config = signal({ rowHeight: 36 });
+        this.containerHeight = signal(0);
+        // --- Internal state ---
+        this.scrollTop = signal(0);
+        // Scrollable container reference for programmatic scrolling
+        this.containerEl = null;
+        // --- Derived computed signals ---
+        this.rowHeight = computed(() => this.config().rowHeight);
+        this.overscan = computed(() => this.config().overscan ?? 5);
+        this.enabled = computed(() => this.config().enabled !== false);
+        /** Whether virtual scrolling is actually active (enabled + enough rows). */
+        this.isActive = computed(() => this.enabled() && this.totalRows() >= PASSTHROUGH_THRESHOLD);
+        /** The visible range of rows with spacer offsets. */
+        this.visibleRange = computed(() => {
+            if (!this.isActive()) {
+                // Passthrough: render all rows
+                return {
+                    startIndex: 0,
+                    endIndex: Math.max(0, this.totalRows() - 1),
+                    offsetTop: 0,
+                    offsetBottom: 0,
+                };
+            }
+            return computeVisibleRange(this.scrollTop(), this.rowHeight(), this.containerHeight(), this.totalRows(), this.overscan());
+        });
+        /** Total scrollable height in pixels. */
+        this.totalHeight = computed(() => computeTotalHeight(this.totalRows(), this.rowHeight()));
+        this.destroyRef.onDestroy(() => {
+            this.containerEl = null;
+        });
+    }
+    /**
+     * Set the scrollable container element.
+     * Used for programmatic scrolling (scrollToRow).
+     */
+    setContainer(el) {
+        this.containerEl = el;
+    }
+    /**
+     * Call this from the container's scroll event handler.
+     */
+    onScroll(event) {
+        const target = event.target;
+        this.scrollTop.set(target.scrollTop);
+    }
+    /**
+     * Scroll to a specific row index.
+     * @param index - The row index to scroll to.
+     * @param align - Where to position the row: 'start' (top), 'center', or 'end' (bottom). Default: 'start'.
+     */
+    scrollToRow(index, align = 'start') {
+        const container = this.containerEl;
+        if (!container)
+            return;
+        const targetScrollTop = getScrollTopForRow(index, this.rowHeight(), this.containerHeight(), align);
+        container.scrollTo({ top: targetScrollTop, behavior: 'auto' });
+    }
+    /**
+     * Update the virtual scroll configuration.
+     */
+    updateConfig(updates) {
+        this.config.update((prev) => ({ ...prev, ...updates }));
+    }
+};
+VirtualScrollService = __decorate([
+    Injectable()
+], VirtualScrollService);
+export { VirtualScrollService };

package/dist/esm/utils/dataGridViewModel.js

@@ -0,0 +1,163 @@
+/**
+ * View model helpers for Angular DataGridTable. Core owns the logic; UI packages only render.
+ * Ported from React's dataGridViewModel.ts to eliminate duplication in Angular Material and PrimeNG packages.
+ */
+import { getCellValue, isInSelectionRange } from '@alaarab/ogrid-core';
+/**
+ * Returns ColumnHeaderFilter props from column def and grid filter/sort state.
+ * Use in Angular Material and PrimeNG DataGridTableComponent instead of inline logic.
+ */
+export function getHeaderFilterConfig(col, input) {
+    const filterable = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
+    const filterType = (filterable?.type ?? 'none');
+    const filterField = filterable?.filterField ?? col.columnId;
+    const sortable = col.sortable !== false;
+    const filterValue = input.filters[filterField];
+    const base = {
+        columnKey: col.columnId,
+        columnName: col.name,
+        filterType,
+        isSorted: input.sortBy === col.columnId,
+        isSortedDescending: input.sortBy === col.columnId && input.sortDirection === 'desc',
+        onSort: sortable ? () => input.onColumnSort(col.columnId) : undefined,
+    };
+    if (filterType === 'text') {
+        return {
+            ...base,
+            textValue: filterValue?.type === 'text' ? filterValue.value : '',
+            onTextChange: (v) => input.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
+        };
+    }
+    if (filterType === 'people') {
+        return {
+            ...base,
+            selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
+            onUserChange: (u) => input.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
+            peopleSearch: input.peopleSearch,
+        };
+    }
+    if (filterType === 'multiSelect') {
+        return {
+            ...base,
+            options: input.filterOptions[filterField] ?? [],
+            isLoadingOptions: input.loadingFilterOptions[filterField] ?? false,
+            selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
+            onFilterChange: (values) => input.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
+        };
+    }
+    if (filterType === 'date') {
+        return {
+            ...base,
+            dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
+            onDateChange: (v) => input.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
+        };
+    }
+    return base;
+}
+/**
+ * Returns a descriptor for rendering a cell. UI uses this to decide editing-inline vs editing-popover vs display
+ * and to apply isActive, isInRange, etc. without duplicating the boolean logic.
+ */
+export function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
+    const rowId = input.getRowId(item);
+    const globalColIndex = colIdx + input.colOffset;
+    const colEditable = col.editable === true ||
+        (typeof col.editable === 'function' && col.editable(item));
+    const canEditInline = input.editable !== false &&
+        !!colEditable &&
+        !!input.onCellValueChanged &&
+        typeof col.cellEditor !== 'function';
+    const canEditPopup = input.editable !== false &&
+        !!colEditable &&
+        !!input.onCellValueChanged &&
+        typeof col.cellEditor === 'function';
+    const canEditAny = canEditInline || canEditPopup;
+    const isEditing = input.editingCell?.rowId === rowId &&
+        input.editingCell?.columnId === col.columnId;
+    const isActive = input.activeCell?.rowIndex === rowIndex &&
+        input.activeCell?.columnIndex === globalColIndex;
+    const isInRange = input.selectionRange != null &&
+        isInSelectionRange(input.selectionRange, rowIndex, colIdx);
+    const isInCutRange = input.cutRange != null &&
+        isInSelectionRange(input.cutRange, rowIndex, colIdx);
+    const isInCopyRange = input.copyRange != null &&
+        isInSelectionRange(input.copyRange, rowIndex, colIdx);
+    const isSelectionEndCell = !input.isDragging &&
+        input.copyRange == null &&
+        input.cutRange == null &&
+        input.selectionRange != null &&
+        rowIndex === input.selectionRange.endRow &&
+        colIdx === input.selectionRange.endCol;
+    let mode = 'display';
+    let editorType;
+    const value = getCellValue(item, col);
+    if (isEditing && canEditInline) {
+        mode = 'editing-inline';
+        if (col.cellEditor === 'text' ||
+            col.cellEditor === 'select' ||
+            col.cellEditor === 'checkbox' ||
+            col.cellEditor === 'richSelect' ||
+            col.cellEditor === 'date') {
+            editorType = col.cellEditor;
+        }
+        else if (col.type === 'date') {
+            editorType = 'date';
+        }
+        else if (col.type === 'boolean') {
+            editorType = 'checkbox';
+        }
+        else {
+            editorType = 'text';
+        }
+    }
+    else if (isEditing && canEditPopup) {
+        mode = 'editing-popover';
+    }
+    return {
+        mode,
+        editorType,
+        value,
+        isActive,
+        isInRange,
+        isInCutRange,
+        isInCopyRange,
+        isSelectionEndCell,
+        canEditAny,
+        globalColIndex,
+        rowId,
+        rowIndex,
+        displayValue: value,
+    };
+}
+// --- Cell rendering helpers (reduce DataGridTable view-layer duplication) ---
+/**
+ * Resolves display content for a cell in display mode.
+ * Handles the renderCell → valueFormatter → String() fallback chain.
+ */
+export function resolveCellDisplayContent(col, item, displayValue) {
+    if (col.renderCell && typeof col.renderCell === 'function') {
+        const result = col.renderCell(item);
+        return result != null ? String(result) : '';
+    }
+    if (col.valueFormatter)
+        return String(col.valueFormatter(displayValue, item) ?? '');
+    if (displayValue == null)
+        return '';
+    if (col.type === 'date') {
+        const d = new Date(String(displayValue));
+        if (!Number.isNaN(d.getTime()))
+            return d.toLocaleDateString();
+    }
+    if (col.type === 'boolean') {
+        return displayValue ? 'True' : 'False';
+    }
+    return String(displayValue);
+}
+/**
+ * Resolves the cellStyle from a column def, handling both function and static values.
+ */
+export function resolveCellStyle(col, item) {
+    if (!col.cellStyle)
+        return undefined;
+    return typeof col.cellStyle === 'function' ? col.cellStyle(item) : col.cellStyle;
+}

package/dist/esm/utils/debounce.js

@@ -0,0 +1,105 @@
+/**
+ * Debounce utilities for Angular using signals.
+ * Provides functional parity with React's useDebounce and useDebouncedCallback.
+ */
+import { signal, effect } from '@angular/core';
+/**
+ * Creates a debounced signal that updates after the specified delay when the source value changes.
+ *
+ * @param source - The signal to debounce
+ * @param delayMs - Delay in milliseconds
+ * @returns A signal containing the debounced value
+ *
+ * @example
+ * ```typescript
+ * const searchQuery = signal('');
+ * const debouncedQuery = createDebouncedSignal(searchQuery, 300);
+ *
+ * effect(() => {
+ *   console.log('Debounced search:', debouncedQuery());
+ * });
+ * ```
+ */
+export function createDebouncedSignal(source, delayMs) {
+    const debouncedValue = signal(source());
+    effect((onCleanup) => {
+        const currentValue = source();
+        const timeoutId = setTimeout(() => {
+            debouncedValue.set(currentValue);
+        }, delayMs);
+        onCleanup(() => clearTimeout(timeoutId));
+    });
+    return debouncedValue;
+}
+/**
+ * Creates a debounced function that delays invoking the provided function
+ * until after `delayMs` milliseconds have elapsed since the last time it was invoked.
+ *
+ * @param fn - The function to debounce
+ * @param delayMs - Delay in milliseconds
+ * @returns A debounced version of the function
+ *
+ * @example
+ * ```typescript
+ * const saveData = (value: string) => {
+ *   console.log('Saving:', value);
+ * };
+ *
+ * const debouncedSave = createDebouncedCallback(saveData, 500);
+ *
+ * // Multiple rapid calls will only trigger once after 500ms
+ * debouncedSave('hello');
+ * debouncedSave('world');  // Only this will execute after 500ms
+ * ```
+ */
+export function createDebouncedCallback(fn, delayMs) {
+    let timeoutId = null;
+    return ((...args) => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            fn(...args);
+            timeoutId = null;
+        }, delayMs);
+    });
+}
+/**
+ * Simple debounce function (non-Angular-specific, can be used anywhere).
+ * Returns a debounced version of the provided function.
+ *
+ * @param fn - The function to debounce
+ * @param delayMs - Delay in milliseconds
+ * @returns A debounced version of the function with a `cancel()` method
+ *
+ * @example
+ * ```typescript
+ * const handleResize = debounce(() => {
+ *   console.log('Window resized');
+ * }, 200);
+ *
+ * window.addEventListener('resize', handleResize);
+ *
+ * // Later, cancel pending execution
+ * handleResize.cancel();
+ * ```
+ */
+export function debounce(fn, delayMs) {
+    let timeoutId = null;
+    const debounced = ((...args) => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            fn(...args);
+            timeoutId = null;
+        }, delayMs);
+    });
+    debounced.cancel = () => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+    };
+    return debounced;
+}

package/dist/esm/utils/index.js

@@ -0,0 +1,8 @@
+/**
+ * Shared utilities for Angular DataGridTable view layer.
+ */
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, } from './dataGridViewModel';
+// Debounce utilities
+export { createDebouncedSignal, createDebouncedCallback, debounce, } from './debounce';
+// Latest ref utilities
+export { createLatestRef, createLatestCallback, } from './latestRef';

package/dist/esm/utils/latestRef.js

@@ -0,0 +1,46 @@
+/**
+ * Latest ref utility for Angular using signals.
+ * Provides functional parity with React's useLatestRef.
+ */
+/**
+ * Creates a stable wrapper function that always calls the latest version of the provided function.
+ * Useful for event handlers and callbacks where you want a stable reference but need to call
+ * the latest implementation.
+ *
+ * @param fn - Signal containing the function to wrap
+ * @returns A stable function that always invokes the latest version
+ *
+ * @example
+ * ```typescript
+ * class MyService {
+ *   readonly onSave = signal<(value: string) => void>((val) => console.log('Default:', val));
+ *   readonly stableOnSave = createLatestCallback(this.onSave);
+ *
+ *   constructor() {
+ *     // Setup event listener with stable reference
+ *     effect((onCleanup) => {
+ *       // stableOnSave never changes, so this effect only runs once
+ *       const callback = () => this.stableOnSave('data');
+ *       window.addEventListener('click', callback);
+ *       onCleanup(() => window.removeEventListener('click', callback));
+ *     });
+ *   }
+ *
+ *   updateHandler(newFn: (value: string) => void) {
+ *     // Even though we change the function, the callback reference stays stable
+ *     this.onSave.set(newFn);
+ *   }
+ * }
+ * ```
+ */
+export function createLatestCallback(fn) {
+    // Return a stable function that always calls the current value of the signal
+    return ((...args) => {
+        return fn()(...args);
+    });
+}
+/**
+ * Alias for createLatestCallback for consistency with React/Vue naming.
+ * @deprecated Use createLatestCallback instead
+ */
+export const createLatestRef = createLatestCallback;

package/dist/types/index.d.ts

@@ -7,6 +7,9 @@ export { OGridService } from './services/ogrid.service';
 export type { ColumnChooserPlacement, OGridPagination, OGridColumnChooser, OGridFilters, OGridSideBarState, } from './services/ogrid.service';
 export { DataGridStateService } from './services/datagrid-state.service';
 export type { DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridStateResult, } from './services/datagrid-state.service';
+export { ColumnReorderService } from './services/column-reorder.service';
+export { VirtualScrollService } from './services/virtual-scroll.service';
+export type { IVirtualScrollConfig } from './services/virtual-scroll.service';
 export { OGridLayoutComponent } from './components/ogrid-layout.component';
 export { StatusBarComponent } from './components/status-bar.component';
 export { GridContextMenuComponent } from './components/grid-context-menu.component';
@@ -14,3 +17,5 @@ export { SideBarComponent } from './components/sidebar.component';
 export type { SideBarProps, SideBarFilterColumn } from './components/sidebar.component';
 export { MarchingAntsOverlayComponent } from './components/marching-ants-overlay.component';
 export { EmptyStateComponent } from './components/empty-state.component';
+export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, } from './utils';
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';

package/dist/types/services/column-reorder.service.d.ts

@@ -0,0 +1,30 @@
+import type { IColumnDef } from '../types';
+/**
+ * Manages column reorder drag interactions with RAF-throttled updates.
+ * Angular signals-based port of React's useColumnReorder hook.
+ */
+export declare class ColumnReorderService<T> {
+    private destroyRef;
+    readonly columns: import("@angular/core").WritableSignal<IColumnDef<T>[]>;
+    readonly columnOrder: import("@angular/core").WritableSignal<string[] | undefined>;
+    readonly onColumnOrderChange: import("@angular/core").WritableSignal<((order: string[]) => void) | undefined>;
+    readonly enabled: import("@angular/core").WritableSignal<boolean>;
+    readonly wrapperEl: import("@angular/core").WritableSignal<HTMLElement | null>;
+    readonly isDragging: import("@angular/core").WritableSignal<boolean>;
+    readonly dropIndicatorX: import("@angular/core").WritableSignal<number | null>;
+    private rafId;
+    private cleanupFn;
+    private latestDropTargetIndex;
+    constructor();
+    /**
+     * Call this from the header cell's mousedown handler.
+     * @param columnId - The column being dragged
+     * @param event - The native MouseEvent
+     */
+    handleHeaderMouseDown(columnId: string, event: MouseEvent): void;
+    /**
+     * Calculate drop target from mouse position and header cell rects.
+     * Same logic as React's useColumnReorder inline calculation.
+     */
+    private calculateDrop;
+}

package/dist/types/services/datagrid-state.service.d.ts

@@ -159,7 +159,6 @@ export declare class DataGridStateService<T> {
     private rafId;
     private lastMousePos;
     private autoScrollInterval;
-    private windowCleanups;
     private resizeObserver;
     private readonly propsResolved;
     readonly cellSelection: import("@angular/core").Signal<boolean>;

package/dist/types/services/ogrid.service.d.ts

@@ -105,10 +105,10 @@ export declare class OGridService<T> {
     private readonly internalData;
     private readonly internalLoading;
     private readonly internalPage;
-    private readonly internalPageSize;
-    private readonly internalSort;
+    private readonly internalPageSizeOverride;
+    private readonly internalSortOverride;
     private readonly internalFilters;
-    private readonly internalVisibleColumns;
+    private readonly internalVisibleColumnsOverride;
     private readonly internalSelectedRows;
     private readonly columnWidthOverrides;
     private readonly pinnedOverrides;
@@ -121,9 +121,6 @@ export declare class OGridService<T> {
     private readonly sideBarActivePanel;
     private readonly serverFilterOptions;
     private readonly loadingFilterOptions;
-    private sortInitialized;
-    private visibleColumnsInitialized;
-    private pageSizeInitialized;
     readonly columns: import("@angular/core").Signal<IColumnDef<T>[]>;
     readonly isServerSide: import("@angular/core").Signal<boolean>;
     readonly isClientSide: import("@angular/core").Signal<boolean>;

package/dist/types/services/virtual-scroll.service.d.ts

@@ -0,0 +1,54 @@
+import type { IVisibleRange } from '@alaarab/ogrid-core';
+export interface IVirtualScrollConfig {
+    /** Enable virtual scrolling. Default: true when provided. */
+    enabled?: boolean;
+    /** Row height in pixels (required for virtualization). */
+    rowHeight: number;
+    /** Number of rows to render outside the visible area. Default: 5. */
+    overscan?: number;
+}
+/**
+ * Manages virtual scrolling state using Angular signals.
+ * Port of React's useVirtualScroll hook.
+ *
+ * Uses core's pure-TS `computeVisibleRange` and `getScrollTopForRow` utilities.
+ * The UI layer (Angular Material / PrimeNG) provides the scrollable container
+ * and calls `onScroll()` / sets `containerHeight`.
+ */
+export declare class VirtualScrollService {
+    private destroyRef;
+    readonly totalRows: import("@angular/core").WritableSignal<number>;
+    readonly config: import("@angular/core").WritableSignal<IVirtualScrollConfig>;
+    readonly containerHeight: import("@angular/core").WritableSignal<number>;
+    readonly scrollTop: import("@angular/core").WritableSignal<number>;
+    private containerEl;
+    readonly rowHeight: import("@angular/core").Signal<number>;
+    readonly overscan: import("@angular/core").Signal<number>;
+    readonly enabled: import("@angular/core").Signal<boolean>;
+    /** Whether virtual scrolling is actually active (enabled + enough rows). */
+    readonly isActive: import("@angular/core").Signal<boolean>;
+    /** The visible range of rows with spacer offsets. */
+    readonly visibleRange: import("@angular/core").Signal<IVisibleRange>;
+    /** Total scrollable height in pixels. */
+    readonly totalHeight: import("@angular/core").Signal<number>;
+    constructor();
+    /**
+     * Set the scrollable container element.
+     * Used for programmatic scrolling (scrollToRow).
+     */
+    setContainer(el: HTMLElement | null): void;
+    /**
+     * Call this from the container's scroll event handler.
+     */
+    onScroll(event: Event): void;
+    /**
+     * Scroll to a specific row index.
+     * @param index - The row index to scroll to.
+     * @param align - Where to position the row: 'start' (top), 'center', or 'end' (bottom). Default: 'start'.
+     */
+    scrollToRow(index: number, align?: 'start' | 'center' | 'end'): void;
+    /**
+     * Update the virtual scroll configuration.
+     */
+    updateConfig(updates: Partial<IVirtualScrollConfig>): void;
+}

package/dist/types/utils/dataGridViewModel.d.ts

@@ -0,0 +1,107 @@
+/**
+ * View model helpers for Angular DataGridTable. Core owns the logic; UI packages only render.
+ * Ported from React's dataGridViewModel.ts to eliminate duplication in Angular Material and PrimeNG packages.
+ */
+import type { ColumnFilterType, IDateFilterValue } from '../types/columnTypes';
+import type { IColumnDef } from '../types/columnTypes';
+import type { RowId, UserLike, IFilters, FilterValue } from '../types/dataGridTypes';
+export interface HeaderFilterConfigInput {
+    sortBy?: string;
+    sortDirection: 'asc' | 'desc';
+    onColumnSort: (columnKey: string) => void;
+    filters: IFilters;
+    onFilterChange: (key: string, value: FilterValue | undefined) => void;
+    filterOptions: Record<string, string[]>;
+    loadingFilterOptions: Record<string, boolean>;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
+}
+/** Props to pass to ColumnHeaderFilter. */
+export interface HeaderFilterConfig {
+    columnKey: string;
+    columnName: string;
+    filterType: ColumnFilterType;
+    isSorted?: boolean;
+    isSortedDescending?: boolean;
+    onSort?: () => void;
+    selectedValues?: string[];
+    onFilterChange?: (values: string[]) => void;
+    options?: string[];
+    isLoadingOptions?: boolean;
+    textValue?: string;
+    onTextChange?: (value: string) => void;
+    selectedUser?: UserLike;
+    onUserChange?: (user: UserLike | undefined) => void;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
+    dateValue?: IDateFilterValue;
+    onDateChange?: (value: IDateFilterValue | undefined) => void;
+}
+/**
+ * Returns ColumnHeaderFilter props from column def and grid filter/sort state.
+ * Use in Angular Material and PrimeNG DataGridTableComponent instead of inline logic.
+ */
+export declare function getHeaderFilterConfig<T>(col: IColumnDef<T>, input: HeaderFilterConfigInput): HeaderFilterConfig;
+export type CellRenderMode = 'editing-inline' | 'editing-popover' | 'display';
+export interface CellRenderDescriptorInput<T> {
+    editingCell: {
+        rowId: RowId;
+        columnId: string;
+    } | null;
+    activeCell: {
+        rowIndex: number;
+        columnIndex: number;
+    } | null;
+    selectionRange: {
+        startRow: number;
+        startCol: number;
+        endRow: number;
+        endCol: number;
+    } | null;
+    cutRange: {
+        startRow: number;
+        startCol: number;
+        endRow: number;
+        endCol: number;
+    } | null;
+    copyRange: {
+        startRow: number;
+        startCol: number;
+        endRow: number;
+        endCol: number;
+    } | null;
+    colOffset: number;
+    getRowId: (item: T) => RowId;
+    editable?: boolean;
+    onCellValueChanged?: unknown;
+    /** True while user is drag-selecting cells — hides fill handle during drag. */
+    isDragging?: boolean;
+}
+export interface CellRenderDescriptor {
+    mode: CellRenderMode;
+    editorType?: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
+    value?: unknown;
+    isActive: boolean;
+    isInRange: boolean;
+    isInCutRange: boolean;
+    isInCopyRange: boolean;
+    isSelectionEndCell: boolean;
+    canEditAny: boolean;
+    globalColIndex: number;
+    rowId: RowId;
+    rowIndex: number;
+    /** Raw value for display (when mode === 'display'). */
+    displayValue?: unknown;
+}
+/**
+ * Returns a descriptor for rendering a cell. UI uses this to decide editing-inline vs editing-popover vs display
+ * and to apply isActive, isInRange, etc. without duplicating the boolean logic.
+ */
+export declare function getCellRenderDescriptor<T>(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number, input: CellRenderDescriptorInput<T>): CellRenderDescriptor;
+/**
+ * Resolves display content for a cell in display mode.
+ * Handles the renderCell → valueFormatter → String() fallback chain.
+ */
+export declare function resolveCellDisplayContent<T>(col: IColumnDef<T>, item: T, displayValue: unknown): string;
+/**
+ * Resolves the cellStyle from a column def, handling both function and static values.
+ */
+export declare function resolveCellStyle<T>(col: IColumnDef<T>, item: T): Record<string, string> | undefined;

package/dist/types/utils/debounce.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Debounce utilities for Angular using signals.
+ * Provides functional parity with React's useDebounce and useDebouncedCallback.
+ */
+import { type Signal } from '@angular/core';
+/**
+ * Creates a debounced signal that updates after the specified delay when the source value changes.
+ *
+ * @param source - The signal to debounce
+ * @param delayMs - Delay in milliseconds
+ * @returns A signal containing the debounced value
+ *
+ * @example
+ * ```typescript
+ * const searchQuery = signal('');
+ * const debouncedQuery = createDebouncedSignal(searchQuery, 300);
+ *
+ * effect(() => {
+ *   console.log('Debounced search:', debouncedQuery());
+ * });
+ * ```
+ */
+export declare function createDebouncedSignal<T>(source: Signal<T>, delayMs: number): Signal<T>;
+/**
+ * Creates a debounced function that delays invoking the provided function
+ * until after `delayMs` milliseconds have elapsed since the last time it was invoked.
+ *
+ * @param fn - The function to debounce
+ * @param delayMs - Delay in milliseconds
+ * @returns A debounced version of the function
+ *
+ * @example
+ * ```typescript
+ * const saveData = (value: string) => {
+ *   console.log('Saving:', value);
+ * };
+ *
+ * const debouncedSave = createDebouncedCallback(saveData, 500);
+ *
+ * // Multiple rapid calls will only trigger once after 500ms
+ * debouncedSave('hello');
+ * debouncedSave('world');  // Only this will execute after 500ms
+ * ```
+ */
+export declare function createDebouncedCallback<T extends (...args: unknown[]) => void>(fn: T, delayMs: number): T;
+/**
+ * Simple debounce function (non-Angular-specific, can be used anywhere).
+ * Returns a debounced version of the provided function.
+ *
+ * @param fn - The function to debounce
+ * @param delayMs - Delay in milliseconds
+ * @returns A debounced version of the function with a `cancel()` method
+ *
+ * @example
+ * ```typescript
+ * const handleResize = debounce(() => {
+ *   console.log('Window resized');
+ * }, 200);
+ *
+ * window.addEventListener('resize', handleResize);
+ *
+ * // Later, cancel pending execution
+ * handleResize.cancel();
+ * ```
+ */
+export declare function debounce<T extends (...args: unknown[]) => void>(fn: T, delayMs: number): T & {
+    cancel: () => void;
+};

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

@@ -0,0 +1,7 @@
+/**
+ * Shared utilities for Angular DataGridTable view layer.
+ */
+export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, } from './dataGridViewModel';
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, } from './dataGridViewModel';
+export { createDebouncedSignal, createDebouncedCallback, debounce, } from './debounce';
+export { createLatestRef, createLatestCallback, } from './latestRef';

package/dist/types/utils/latestRef.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Latest ref utility for Angular using signals.
+ * Provides functional parity with React's useLatestRef.
+ */
+import { type Signal } from '@angular/core';
+/**
+ * Creates a stable wrapper function that always calls the latest version of the provided function.
+ * Useful for event handlers and callbacks where you want a stable reference but need to call
+ * the latest implementation.
+ *
+ * @param fn - Signal containing the function to wrap
+ * @returns A stable function that always invokes the latest version
+ *
+ * @example
+ * ```typescript
+ * class MyService {
+ *   readonly onSave = signal<(value: string) => void>((val) => console.log('Default:', val));
+ *   readonly stableOnSave = createLatestCallback(this.onSave);
+ *
+ *   constructor() {
+ *     // Setup event listener with stable reference
+ *     effect((onCleanup) => {
+ *       // stableOnSave never changes, so this effect only runs once
+ *       const callback = () => this.stableOnSave('data');
+ *       window.addEventListener('click', callback);
+ *       onCleanup(() => window.removeEventListener('click', callback));
+ *     });
+ *   }
+ *
+ *   updateHandler(newFn: (value: string) => void) {
+ *     // Even though we change the function, the callback reference stays stable
+ *     this.onSave.set(newFn);
+ *   }
+ * }
+ * ```
+ */
+export declare function createLatestCallback<T extends (...args: unknown[]) => unknown>(fn: Signal<T>): T;
+/**
+ * Alias for createLatestCallback for consistency with React/Vue naming.
+ * @deprecated Use createLatestCallback instead
+ */
+export declare const createLatestRef: typeof createLatestCallback;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -22,7 +22,7 @@
   "files": ["dist", "README.md", "LICENSE"],
   "engines": { "node": ">=18" },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.2"
+    "@alaarab/ogrid-core": "2.0.3"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",