@alaarab/ogrid-angular 2.0.6 → 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);
@@ -63,6 +64,36 @@ export class BaseDataGridTableComponent {
         this.showEmptyInGrid = computed(() => this.state().viewModels.showEmptyInGrid);
         this.headerFilterInput = computed(() => this.state().viewModels.headerFilterInput);
         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)
@@ -142,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);
             }
         });
     }
@@ -171,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) {
@@ -186,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;
@@ -287,16 +357,13 @@ export class BaseDataGridTableComponent {
     }
     // --- Column pinning methods ---
     onPinColumn(columnId, side) {
-        const props = this.getProps();
-        props?.onColumnPinned?.(columnId, side);
+        this.state().pinning.pinColumn(columnId, side);
     }
     onUnpinColumn(columnId) {
-        const props = this.getProps();
-        props?.onColumnPinned?.(columnId, null);
+        this.state().pinning.unpinColumn(columnId);
     }
     isPinned(columnId) {
-        const props = this.getProps();
-        return props?.pinnedColumns?.[columnId];
+        return this.state().pinning.isPinned(columnId);
     }
     getPinState(columnId) {
         const pinned = this.isPinned(columnId);

package/dist/esm/components/marching-ants-overlay.component.js

@@ -52,7 +52,7 @@ let MarchingAntsOverlayComponent = class MarchingAntsOverlayComponent {
             const selRange = this.selectionRange();
             const clipRange = this.copyRange() ?? this.cutRange();
             const colOff = this.colOffset();
-            const _version = this.columnSizingVersion(); // Track column resize changes
+            void this.columnSizingVersion(); // Track column resize changes
             if (this.resizeObserver) {
                 this.resizeObserver.disconnect();
                 this.resizeObserver = null;

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/datagrid-state.service.js

@@ -53,6 +53,10 @@ let DataGridStateService = class DataGridStateService {
         this.autoScrollInterval = null;
         // ResizeObserver
         this.resizeObserver = null;
+        // Header menu state (for column pinning UI)
+        this.headerMenuIsOpenSig = signal(false);
+        this.headerMenuOpenForColumnSig = signal(null);
+        this.headerMenuAnchorElementSig = signal(null);
         // --- Derived computed ---
         this.propsResolved = computed(() => this.props());
         this.cellSelection = computed(() => {
@@ -949,6 +953,59 @@ let DataGridStateService = class DataGridStateService {
         this.fillDragStart = { startRow: range.startRow, startCol: range.startCol };
         this.setupFillHandleDrag();
     }
+    // --- Column pinning ---
+    pinColumn(columnId, side) {
+        const props = this.props();
+        props?.onColumnPinned?.(columnId, side);
+    }
+    unpinColumn(columnId) {
+        const props = this.props();
+        props?.onColumnPinned?.(columnId, null);
+    }
+    isPinned(columnId) {
+        const props = this.props();
+        return props?.pinnedColumns?.[columnId];
+    }
+    getPinState(columnId) {
+        const pinned = this.isPinned(columnId);
+        return {
+            canPinLeft: pinned !== 'left',
+            canPinRight: pinned !== 'right',
+            canUnpin: !!pinned,
+        };
+    }
+    // --- Header menu ---
+    openHeaderMenu(columnId, anchorEl) {
+        this.headerMenuOpenForColumnSig.set(columnId);
+        this.headerMenuAnchorElementSig.set(anchorEl);
+        this.headerMenuIsOpenSig.set(true);
+    }
+    closeHeaderMenu() {
+        this.headerMenuIsOpenSig.set(false);
+        this.headerMenuOpenForColumnSig.set(null);
+        this.headerMenuAnchorElementSig.set(null);
+    }
+    headerMenuPinLeft() {
+        const col = this.headerMenuOpenForColumnSig();
+        if (col && this.isPinned(col) !== 'left') {
+            this.pinColumn(col, 'left');
+            this.closeHeaderMenu();
+        }
+    }
+    headerMenuPinRight() {
+        const col = this.headerMenuOpenForColumnSig();
+        if (col && this.isPinned(col) !== 'right') {
+            this.pinColumn(col, 'right');
+            this.closeHeaderMenu();
+        }
+    }
+    headerMenuUnpin() {
+        const col = this.headerMenuOpenForColumnSig();
+        if (col && this.isPinned(col)) {
+            this.unpinColumn(col);
+            this.closeHeaderMenu();
+        }
+    }
     // --- Get state result ---
     getState() {
         const p = this.props();
@@ -1048,7 +1105,29 @@ let DataGridStateService = class DataGridStateService {
             showEmptyInGrid: this.showEmptyInGrid(),
             onCellError: p?.onCellError,
         };
-        return { layout, rowSelection, editing, interaction, contextMenu, viewModels };
+        // --- Pinning ---
+        const openForColumn = this.headerMenuOpenForColumnSig();
+        const currentPinState = openForColumn ? (p?.pinnedColumns?.[openForColumn]) : undefined;
+        const pinning = {
+            pinnedColumns: p?.pinnedColumns ?? {},
+            pinColumn: (columnId, side) => this.pinColumn(columnId, side),
+            unpinColumn: (columnId) => this.unpinColumn(columnId),
+            isPinned: (columnId) => this.isPinned(columnId),
+            headerMenu: {
+                isOpen: this.headerMenuIsOpenSig(),
+                openForColumn,
+                anchorElement: this.headerMenuAnchorElementSig(),
+                open: (columnId, anchorEl) => this.openHeaderMenu(columnId, anchorEl),
+                close: () => this.closeHeaderMenu(),
+                handlePinLeft: () => this.headerMenuPinLeft(),
+                handlePinRight: () => this.headerMenuPinRight(),
+                handleUnpin: () => this.headerMenuUnpin(),
+                canPinLeft: currentPinState !== 'left',
+                canPinRight: currentPinState !== 'right',
+                canUnpin: !!currentPinState,
+            },
+        };
+        return { layout, rowSelection, editing, interaction, contextMenu, viewModels, pinning };
     }
     // --- Private helpers ---
     getEffectiveRange() {

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

@@ -52,6 +52,7 @@ let OGridService = class OGridService {
         this.suppressHorizontalScroll = signal(undefined);
         this.editable = signal(undefined);
         this.cellSelection = signal(undefined);
+        this.density = signal('normal');
         this.onCellValueChanged = signal(undefined);
         this.onUndo = signal(undefined);
         this.onRedo = signal(undefined);
@@ -66,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 ---
@@ -225,6 +227,7 @@ let OGridService = class OGridService {
             freezeCols: this.freezeCols(),
             editable: this.editable(),
             cellSelection: this.cellSelection(),
+            density: this.density(),
             onCellValueChanged: this.onCellValueChanged(),
             onUndo: this.onUndo(),
             onRedo: this.onRedo(),
@@ -243,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: {
@@ -428,7 +432,7 @@ let OGridService = class OGridService {
     handleColumnPinned(columnId, pinned) {
         this.pinnedOverrides.update((prev) => {
             if (pinned === null) {
-                const { [columnId]: _, ...rest } = prev;
+                const { [columnId]: _removed, ...rest } = prev;
                 return rest;
             }
             return { ...prev, [columnId]: pinned };
@@ -487,6 +491,8 @@ let OGridService = class OGridService {
             this.editable.set(props.editable);
         if (props.cellSelection !== undefined)
             this.cellSelection.set(props.cellSelection);
+        if (props.density !== undefined)
+            this.density.set(props.density);
         if (props.onCellValueChanged)
             this.onCellValueChanged.set(props.onCellValueChanged);
         if (props.onUndo)
@@ -515,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

@@ -13,7 +13,7 @@ import type { HeaderFilterConfig, CellRenderDescriptor } from '../utils';
  * 2. Call `initBase()` in the constructor (effects require injection context)
  * 3. Implement abstract accessors for propsInput, wrapperRef, and tableContainerRef
  */
-export declare abstract class BaseDataGridTableComponent<T = any> {
+export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly stateService: DataGridStateService<T>;
     readonly columnReorderService: ColumnReorderService<T>;
     readonly virtualScrollService: VirtualScrollService;
@@ -27,6 +27,7 @@ export declare abstract class BaseDataGridTableComponent<T = any> {
     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>;
@@ -103,6 +104,15 @@ export declare abstract class BaseDataGridTableComponent<T = any> {
         onCellValueChanged?: ((event: import("@alaarab/ogrid-core").ICellValueChangedEvent<T>) => void) | undefined;
         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>[]>;
@@ -123,10 +133,16 @@ export declare abstract class BaseDataGridTableComponent<T = any> {
     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';
@@ -6,10 +7,9 @@ export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types
 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 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/datagrid-state.service.d.ts

@@ -115,6 +115,26 @@ export interface DataGridViewModelState<T> {
     showEmptyInGrid: boolean;
     onCellError?: (error: Error) => void;
 }
+/** Column pinning state and column header menu. */
+export interface DataGridPinningState {
+    pinnedColumns: Record<string, 'left' | 'right'>;
+    pinColumn: (columnId: string, side: 'left' | 'right') => void;
+    unpinColumn: (columnId: string) => void;
+    isPinned: (columnId: string) => 'left' | 'right' | undefined;
+    headerMenu: {
+        isOpen: boolean;
+        openForColumn: string | null;
+        anchorElement: HTMLElement | null;
+        open: (columnId: string, anchorEl: HTMLElement) => void;
+        close: () => void;
+        handlePinLeft: () => void;
+        handlePinRight: () => void;
+        handleUnpin: () => void;
+        canPinLeft: boolean;
+        canPinRight: boolean;
+        canUnpin: boolean;
+    };
+}
 export interface DataGridStateResult<T> {
     layout: DataGridLayoutState<T>;
     rowSelection: DataGridRowSelectionState;
@@ -122,6 +142,7 @@ export interface DataGridStateResult<T> {
     interaction: DataGridCellInteractionState;
     contextMenu: DataGridContextMenuState;
     viewModels: DataGridViewModelState<T>;
+    pinning: DataGridPinningState;
 }
 /**
  * Single orchestration service for DataGridTable. Takes grid props,
@@ -161,6 +182,9 @@ export declare class DataGridStateService<T> {
     private lastMousePos;
     private autoScrollInterval;
     private resizeObserver;
+    private readonly headerMenuIsOpenSig;
+    private readonly headerMenuOpenForColumnSig;
+    private readonly headerMenuAnchorElementSig;
     private readonly propsResolved;
     readonly cellSelection: import("@angular/core").Signal<boolean>;
     private readonly wrappedOnCellValueChanged;
@@ -227,6 +251,19 @@ export declare class DataGridStateService<T> {
     redo(): void;
     handleGridKeyDown(e: KeyboardEvent): void;
     handleFillHandleMouseDown(e: MouseEvent): void;
+    pinColumn(columnId: string, side: 'left' | 'right'): void;
+    unpinColumn(columnId: string): void;
+    isPinned(columnId: string): 'left' | 'right' | undefined;
+    getPinState(columnId: string): {
+        canPinLeft: boolean;
+        canPinRight: boolean;
+        canUnpin: boolean;
+    };
+    openHeaderMenu(columnId: string, anchorEl: HTMLElement): void;
+    closeHeaderMenu(): void;
+    headerMenuPinLeft(): void;
+    headerMenuPinRight(): void;
+    headerMenuUnpin(): void;
     getState(): DataGridStateResult<T>;
     private getEffectiveRange;
     private onWindowMouseMove;

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. */
@@ -86,6 +86,7 @@ export declare class OGridService<T> {
     readonly suppressHorizontalScroll: import("@angular/core").WritableSignal<boolean | undefined>;
     readonly editable: import("@angular/core").WritableSignal<boolean | undefined>;
     readonly cellSelection: import("@angular/core").WritableSignal<boolean | undefined>;
+    readonly density: import("@angular/core").WritableSignal<"compact" | "normal" | "comfortable">;
     readonly onCellValueChanged: import("@angular/core").WritableSignal<((event: ICellValueChangedEvent<T>) => void) | undefined>;
     readonly onUndo: import("@angular/core").WritableSignal<(() => void) | undefined>;
     readonly onRedo: import("@angular/core").WritableSignal<(() => void) | undefined>;
@@ -100,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>)[];
@@ -32,6 +32,7 @@ interface IOGridBaseProps<T> {
     freezeCols?: number;
     editable?: boolean;
     cellSelection?: boolean;
+    density?: 'compact' | 'normal' | 'comfortable';
     onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
     onUndo?: () => void;
     onRedo?: () => void;
@@ -56,6 +57,7 @@ interface IOGridBaseProps<T> {
     layoutMode?: 'content' | 'fill';
     suppressHorizontalScroll?: boolean;
     sideBar?: boolean | ISideBarDef;
+    virtualScroll?: IVirtualScrollConfig;
     pageSizeOptions?: number[];
     onFirstDataRendered?: () => void;
     onError?: (error: unknown) => void;
@@ -99,6 +101,7 @@ export interface IOGridDataGridProps<T> {
     loadingMessage?: string;
     editable?: boolean;
     cellSelection?: boolean;
+    density?: 'compact' | 'normal' | 'comfortable';
     onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
     onUndo?: () => void;
     onRedo?: () => void;
@@ -117,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.6",
+  "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,13 +16,26 @@
     "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.6"
+    "@alaarab/ogrid-core": "2.0.7"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",
@@ -39,5 +52,7 @@
     "typescript": "^5.9.3"
   },
   "sideEffects": false,
-  "publishConfig": { "access": "public" }
+  "publishConfig": {
+    "access": "public"
+  }
 }