@alaarab/ogrid-angular 2.0.7 → 2.0.8

package/dist/esm/components/base-datagrid-table.component.js

@@ -3,7 +3,7 @@ import { DataGridStateService } from '../services/datagrid-state.service';
 import { ColumnReorderService } from '../services/column-reorder.service';
 import { VirtualScrollService } from '../services/virtual-scroll.service';
 import { buildHeaderRows, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-core';
-import { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, } from '../utils';
+import { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, } from '../utils';
 /**
  * Abstract base class containing all shared TypeScript logic for DataGridTable components.
  * Framework-specific UI packages extend this with their templates and style overrides.
@@ -23,6 +23,7 @@ export class BaseDataGridTableComponent {
         // --- Delegated state ---
         this.state = computed(() => this.stateService.getState());
         this.tableContainerEl = computed(() => this.getTableContainerRef()?.nativeElement ?? null);
+        this.allItems = computed(() => this.getProps()?.items ?? []);
         this.items = computed(() => this.getProps()?.items ?? []);
         this.getRowId = computed(() => this.getProps()?.getRowId ?? ((item) => item['id']));
         this.isLoading = computed(() => this.getProps()?.isLoading ?? false);
@@ -65,6 +66,34 @@ export class BaseDataGridTableComponent {
         this.cellDescriptorInput = computed(() => this.state().viewModels.cellDescriptorInput);
         // Pinning state
         this.pinnedColumnsMap = computed(() => this.state().pinning.pinnedColumns);
+        // Virtual scrolling
+        this.vsEnabled = computed(() => this.virtualScrollService.isActive());
+        this.vsVisibleRange = computed(() => this.virtualScrollService.visibleRange());
+        this.vsTopSpacerHeight = computed(() => {
+            if (!this.vsEnabled())
+                return 0;
+            return this.vsVisibleRange().offsetTop;
+        });
+        this.vsBottomSpacerHeight = computed(() => {
+            if (!this.vsEnabled())
+                return 0;
+            return this.vsVisibleRange().offsetBottom;
+        });
+        this.vsVisibleItems = computed(() => {
+            const items = this.allItems();
+            if (!this.vsEnabled())
+                return items;
+            const range = this.vsVisibleRange();
+            return items.slice(range.startIndex, Math.min(range.endIndex + 1, items.length));
+        });
+        this.vsStartIndex = computed(() => {
+            if (!this.vsEnabled())
+                return 0;
+            return this.vsVisibleRange().startIndex;
+        });
+        // Popover editing
+        this.popoverAnchorEl = computed(() => this.state().editing.popoverAnchorEl);
+        this.pendingEditorValueForPopover = computed(() => this.state().editing.pendingEditorValue);
         this.allowOverflowX = computed(() => {
             const p = this.getProps();
             if (p?.suppressHorizontalScroll)
@@ -144,6 +173,21 @@ export class BaseDataGridTableComponent {
             const p = this.getProps();
             if (p) {
                 this.virtualScrollService.totalRows.set(p.items.length);
+                if (p.virtualScroll) {
+                    this.virtualScrollService.updateConfig({
+                        enabled: p.virtualScroll.enabled,
+                        rowHeight: p.virtualScroll.rowHeight,
+                        overscan: p.virtualScroll.overscan,
+                    });
+                }
+            }
+        });
+        // Wire wrapper element to virtual scroll for scroll events + container height
+        effect(() => {
+            const el = this.getWrapperRef()?.nativeElement;
+            if (el) {
+                this.virtualScrollService.setContainer(el);
+                this.virtualScrollService.containerHeight.set(el.clientHeight);
             }
         });
     }
@@ -173,6 +217,13 @@ export class BaseDataGridTableComponent {
     resolveCellStyleFn(col, item) {
         return resolveCellStyle(col, item);
     }
+    buildPopoverEditorProps(item, col, descriptor) {
+        return buildPopoverEditorProps(item, col, descriptor, this.pendingEditorValue(), {
+            setPendingEditorValue: (value) => this.setPendingEditorValue(value),
+            commitCellEdit: (item, columnId, oldValue, newValue, rowIndex, globalColIndex) => this.commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex),
+            cancelPopoverEdit: () => this.cancelPopoverEdit(),
+        });
+    }
     getSelectValues(col) {
         const params = col.cellEditorParams;
         if (params && typeof params === 'object' && 'values' in params) {
@@ -188,6 +239,23 @@ export class BaseDataGridTableComponent {
             return '';
         return d.toISOString().split('T')[0];
     }
+    // --- Virtual scroll event handler ---
+    onWrapperScroll(event) {
+        this.virtualScrollService.onScroll(event);
+    }
+    // --- Popover editor helpers ---
+    setPopoverAnchorEl(el) {
+        this.state().editing.setPopoverAnchorEl(el);
+    }
+    setPendingEditorValue(value) {
+        this.state().editing.setPendingEditorValue(value);
+    }
+    cancelPopoverEdit() {
+        this.state().editing.cancelPopoverEdit();
+    }
+    commitPopoverEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+        this.state().editing.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+    }
     // --- Event handlers ---
     onWrapperMouseDown(event) {
         this.lastMouseShift = event.shiftKey;

package/dist/esm/index.js

@@ -1,5 +1,7 @@
 // Re-export core types + utils
 export * from '@alaarab/ogrid-core';
+// Explicitly re-export constants for test resolution
+export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, DEFAULT_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 // Services
 export { OGridService } from './services/ogrid.service';

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

@@ -67,6 +67,7 @@ let OGridService = class OGridService {
         this.onFirstDataRendered = signal(undefined);
         this.onError = signal(undefined);
         this.columnChooserProp = signal(undefined);
+        this.virtualScroll = signal(undefined);
         this.ariaLabel = signal(undefined);
         this.ariaLabelledBy = signal(undefined);
         // --- Internal state signals ---
@@ -245,6 +246,7 @@ let OGridService = class OGridService {
             getUserByEmail: this.dataSource()?.getUserByEmail?.bind(this.dataSource()),
             layoutMode: this.layoutMode(),
             suppressHorizontalScroll: this.suppressHorizontalScroll(),
+            virtualScroll: this.virtualScroll(),
             'aria-label': this.ariaLabel(),
             'aria-labelledby': this.ariaLabelledBy(),
             emptyState: {
@@ -519,6 +521,8 @@ let OGridService = class OGridService {
             this.onError.set(props.onError);
         if (props.columnChooser !== undefined)
             this.columnChooserProp.set(props.columnChooser);
+        if (props.virtualScroll !== undefined)
+            this.virtualScroll.set(props.virtualScroll);
         if (props.entityLabelPlural !== undefined)
             this.entityLabelPlural.set(props.entityLabelPlural);
         if (props.className !== undefined)

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

@@ -28,7 +28,7 @@ let VirtualScrollService = class VirtualScrollService {
         // Scrollable container reference for programmatic scrolling
         this.containerEl = null;
         // --- Derived computed signals ---
-        this.rowHeight = computed(() => this.config().rowHeight);
+        this.rowHeight = computed(() => this.config().rowHeight ?? 36);
         this.overscan = computed(() => this.config().overscan ?? 5);
         this.enabled = computed(() => this.config().enabled !== false);
         /** Whether virtual scrolling is actually active (enabled + enough rows). */

package/dist/esm/utils/dataGridViewModel.js

@@ -1,163 +1,6 @@
 /**
- * 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.
+ * View model helpers for Angular DataGridTable.
+ * Pure functions live in @alaarab/ogrid-core. This file re-exports them.
  */
-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;
-}
+// Re-export everything from core's dataGridViewModel
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, } from '@alaarab/ogrid-core';

package/dist/esm/utils/debounce.js

@@ -64,42 +64,5 @@ export function createDebouncedCallback(fn, delayMs) {
         }, 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;
-}
+// Re-export simple debounce from core
+export { debounce } from '@alaarab/ogrid-core';

package/dist/esm/utils/index.js

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

package/dist/types/components/base-datagrid-table.component.d.ts

@@ -27,6 +27,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     protected abstract getTableContainerRef(): ElementRef<HTMLElement> | undefined;
     readonly state: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridStateResult<T>>;
     readonly tableContainerEl: import("@angular/core").Signal<HTMLElement | null>;
+    readonly allItems: import("@angular/core").Signal<T[]>;
     readonly items: import("@angular/core").Signal<T[]>;
     readonly getRowId: import("@angular/core").Signal<(item: T) => RowId>;
     readonly isLoading: import("@angular/core").Signal<boolean>;
@@ -104,6 +105,14 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
         isDragging: boolean;
     }>;
     readonly pinnedColumnsMap: import("@angular/core").Signal<Record<string, "left" | "right">>;
+    readonly vsEnabled: import("@angular/core").Signal<boolean>;
+    readonly vsVisibleRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").IVisibleRange>;
+    readonly vsTopSpacerHeight: import("@angular/core").Signal<number>;
+    readonly vsBottomSpacerHeight: import("@angular/core").Signal<number>;
+    readonly vsVisibleItems: import("@angular/core").Signal<T[]>;
+    readonly vsStartIndex: import("@angular/core").Signal<number>;
+    readonly popoverAnchorEl: import("@angular/core").Signal<HTMLElement | null>;
+    readonly pendingEditorValueForPopover: import("@angular/core").Signal<unknown>;
     readonly allowOverflowX: import("@angular/core").Signal<boolean>;
     readonly selectionCellCount: import("@angular/core").Signal<number | undefined>;
     readonly headerRows: import("@angular/core").Signal<import("@alaarab/ogrid-core").HeaderRow<T>[]>;
@@ -124,10 +133,16 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     getColumnWidth(col: IColumnDef<T>): number;
     getFilterConfig(col: IColumnDef<T>): HeaderFilterConfig;
     getCellDescriptor(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number): CellRenderDescriptor;
-    resolveCellContent(col: IColumnDef<T>, item: T, displayValue: unknown): string;
+    resolveCellContent(col: IColumnDef<T>, item: T, displayValue: unknown): unknown;
     resolveCellStyleFn(col: IColumnDef<T>, item: T): Record<string, string> | undefined;
+    buildPopoverEditorProps(item: T, col: IColumnDef<T>, descriptor: CellRenderDescriptor): unknown;
     getSelectValues(col: IColumnDef<T>): string[];
     formatDateForInput(value: unknown): string;
+    onWrapperScroll(event: Event): void;
+    setPopoverAnchorEl(el: HTMLElement | null): void;
+    setPendingEditorValue(value: unknown): void;
+    cancelPopoverEdit(): void;
+    commitPopoverEdit(item: T, columnId: string, oldValue: unknown, newValue: unknown, rowIndex: number, globalColIndex: number): void;
     onWrapperMouseDown(event: MouseEvent): void;
     onGridKeyDown(event: KeyboardEvent): void;
     onCellMouseDown(event: MouseEvent, rowIndex: number, globalColIndex: number): void;

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@alaarab/ogrid-core';
+export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, DEFAULT_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-core';
 export type { IColumnDef, IColumnGroupDef, IColumnDefinition, ICellEditorProps, } from './types';
 export type { IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, } from './types';
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, ICellValueChangedEvent, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, } from './types';
@@ -9,7 +10,6 @@ export { DataGridStateService } from './services/datagrid-state.service';
 export type { DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, 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';

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

@@ -1,4 +1,4 @@
-import type { RowId, IOGridApi, IFilters, FilterValue, IRowSelectionChangeEvent, IStatusBarProps, IColumnDefinition, IDataSource, ISideBarDef, SideBarPanelId } from '../types';
+import type { RowId, IOGridApi, IFilters, FilterValue, IRowSelectionChangeEvent, IStatusBarProps, IColumnDefinition, IDataSource, ISideBarDef, IVirtualScrollConfig, SideBarPanelId } from '../types';
 import type { IOGridProps, IOGridDataGridProps } from '../types';
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from '../types';
 /** Resolved column chooser placement. */
@@ -101,6 +101,7 @@ export declare class OGridService<T> {
     readonly onFirstDataRendered: import("@angular/core").WritableSignal<(() => void) | undefined>;
     readonly onError: import("@angular/core").WritableSignal<((error: unknown) => void) | undefined>;
     readonly columnChooserProp: import("@angular/core").WritableSignal<boolean | "toolbar" | "sidebar" | undefined>;
+    readonly virtualScroll: import("@angular/core").WritableSignal<IVirtualScrollConfig | undefined>;
     readonly ariaLabel: import("@angular/core").WritableSignal<string | undefined>;
     readonly ariaLabelledBy: import("@angular/core").WritableSignal<string | undefined>;
     private readonly internalData;

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

@@ -1,12 +1,4 @@
-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;
-}
+import type { IVisibleRange, IVirtualScrollConfig } from '@alaarab/ogrid-core';
 /**
  * Manages virtual scrolling state using Angular signals.
  * Port of React's useVirtualScroll hook.

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

@@ -1,8 +1,8 @@
 import type { TemplateRef } from '@angular/core';
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from './columnTypes';
-export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IOGridApi, } from '@alaarab/ogrid-core';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IOGridApi, } from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-core';
-import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef } from '@alaarab/ogrid-core';
+import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef, IVirtualScrollConfig } from '@alaarab/ogrid-core';
 /** Base props shared by both client-side and server-side OGrid modes. */
 interface IOGridBaseProps<T> {
     columns: (IColumnDef<T> | IColumnGroupDef<T>)[];
@@ -57,6 +57,7 @@ interface IOGridBaseProps<T> {
     layoutMode?: 'content' | 'fill';
     suppressHorizontalScroll?: boolean;
     sideBar?: boolean | ISideBarDef;
+    virtualScroll?: IVirtualScrollConfig;
     pageSizeOptions?: number[];
     onFirstDataRendered?: () => void;
     onError?: (error: unknown) => void;
@@ -119,6 +120,7 @@ export interface IOGridDataGridProps<T> {
     loadingFilterOptions: Record<string, boolean>;
     peopleSearch?: (query: string) => Promise<UserLike[]>;
     getUserByEmail?: (email: string) => Promise<UserLike | undefined>;
+    virtualScroll?: IVirtualScrollConfig;
     emptyState?: {
         onClearAll: () => void;
         hasActiveFilters: boolean;

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

@@ -1,3 +1,3 @@
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, } from './columnTypes';
-export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, } from './dataGridTypes';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, } from './dataGridTypes';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

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

@@ -1,107 +1,6 @@
 /**
- * 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.
+ * View model helpers for Angular DataGridTable.
+ * Pure functions live in @alaarab/ogrid-core. This file re-exports them.
  */
-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;
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, } from '@alaarab/ogrid-core';
+export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, } from '@alaarab/ogrid-core';

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

@@ -43,26 +43,4 @@ export declare function createDebouncedSignal<T>(source: Signal<T>, delayMs: num
  * ```
  */
 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;
-};
+export { debounce } from '@alaarab/ogrid-core';

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -16,11 +16,24 @@
     "build": "rimraf dist && tsc -p tsconfig.build.json",
     "test": "jest --passWithNoTests"
   },
-  "keywords": ["ogrid", "angular", "datatable", "typescript", "grid", "signals"],
+  "keywords": [
+    "ogrid",
+    "angular",
+    "datatable",
+    "typescript",
+    "grid",
+    "signals"
+  ],
   "author": "Ala Arab",
   "license": "MIT",
-  "files": ["dist", "README.md", "LICENSE"],
-  "engines": { "node": ">=18" },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
   "dependencies": {
     "@alaarab/ogrid-core": "2.0.7"
   },
@@ -39,5 +52,7 @@
     "typescript": "^5.9.3"
   },
   "sideEffects": false,
-  "publishConfig": { "access": "public" }
+  "publishConfig": {
+    "access": "public"
+  }
 }