@alaarab/ogrid-angular 2.1.15 → 2.3.0

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, validateRowIds, computeNextSortState, mergeFilter, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, parseValue, UndoRedoStack, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, getCellValue, computeTabNavigation, applyFillValues, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, getScrollTopForRow, validateVirtualScrollConfig, GRID_BORDER_RADIUS, getStatusBarParts, GRID_CONTEXT_MENU_ITEMS, formatShortcut, injectGlobalStyles, buildHeaderRows, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, measureColumnContentWidth, getPaginationViewModel, ROW_NUMBER_COLUMN_WIDTH, reorderColumnArray, findCtrlArrowTarget, measureRange } from '@alaarab/ogrid-core';
+import { FormulaEngine, getCellValue, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, processClientSideDataAsync, validateRowIds, computeNextSortState, mergeFilter, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, parseValue, UndoRedoStack, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyCellDeletion, getScrollTopForRow, computeTabNavigation, applyFillValues, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, computeVisibleColumnRange, validateVirtualScrollConfig, GRID_BORDER_RADIUS, getStatusBarParts, GRID_CONTEXT_MENU_ITEMS, formatShortcut, injectGlobalStyles, partitionColumnsForVirtualization, buildHeaderRows, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, measureColumnContentWidth, getPaginationViewModel, ROW_NUMBER_COLUMN_WIDTH, reorderColumnArray, findCtrlArrowTarget, measureRange } from '@alaarab/ogrid-core';
 export * from '@alaarab/ogrid-core';
 export { CELL_PADDING, CHECKBOX_COLUMN_WIDTH, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, ROW_NUMBER_COLUMN_WIDTH, SIDEBAR_TRANSITION_MS, Z_INDEX, debounce, getCellRenderDescriptor, getHeaderFilterConfig, isInSelectionRange, normalizeSelectionRange, resolveCellDisplayContent, resolveCellStyle, toUserLike } from '@alaarab/ogrid-core';
 import { Injectable, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ViewChild, inject, DestroyRef, signal, computed, effect, NgZone, EventEmitter, Injector, EnvironmentInjector, createComponent } from '@angular/core';
@@ -14,6 +14,213 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+var FormulaEngineService = class {
+  constructor() {
+    this.destroyRef = inject(DestroyRef);
+    // --- Internal state ---
+    this.engine = null;
+    this.initialLoaded = false;
+    // --- Data references (updated via configure or setData) ---
+    this.items = [];
+    this.flatColumns = [];
+    // --- Signals ---
+    /** Whether formula support is currently enabled. */
+    this.enabled = signal(false);
+    /** Last recalculation result, for UI to react to formula changes. */
+    this.lastRecalcResult = signal(null);
+    /** Number of formulas currently registered. */
+    this.formulaCount = computed(() => {
+      this.lastRecalcResult();
+      return this.engine?.getAllFormulas().length ?? 0;
+    });
+    this.destroyRef.onDestroy(() => {
+      this.engine?.clear();
+      this.engine = null;
+    });
+  }
+  /**
+   * Configure the formula engine. Call this when the grid component initializes.
+   *
+   * Lazily creates the FormulaEngine only when `formulas: true`.
+   */
+  configure(options) {
+    const { formulas, initialFormulas, formulaFunctions, onFormulaRecalc, namedRanges, sheets } = options;
+    this.onFormulaRecalcFn = onFormulaRecalc;
+    if (formulas && !this.engine) {
+      this.engine = new FormulaEngine({
+        customFunctions: formulaFunctions,
+        namedRanges
+      });
+      if (sheets) {
+        for (const [name, accessor] of Object.entries(sheets)) {
+          this.engine.registerSheet(name, accessor);
+        }
+      }
+      this.enabled.set(true);
+    } else if (!formulas && this.engine) {
+      this.engine.clear();
+      this.engine = null;
+      this.enabled.set(false);
+      this.lastRecalcResult.set(null);
+      this.initialLoaded = false;
+    }
+    if (formulas && this.engine && initialFormulas && !this.initialLoaded) {
+      this.initialLoaded = true;
+      const accessor = this.createAccessor();
+      const result = this.engine.loadFormulas(initialFormulas, accessor);
+      if (result.updatedCells.length > 0) {
+        this.lastRecalcResult.set(result);
+        this.onFormulaRecalcFn?.(result);
+      }
+    }
+  }
+  /**
+   * Update the data references used by the accessor bridge.
+   * Call this whenever the grid's items or columns change.
+   */
+  setData(items, flatColumns) {
+    this.items = items;
+    this.flatColumns = flatColumns;
+  }
+  /**
+   * Set or clear a formula for a cell. Triggers recalculation of dependents.
+   */
+  setFormula(col, row, formula, accessor) {
+    if (!this.engine) return;
+    const acc = accessor ?? this.createAccessor();
+    const result = this.engine.setFormula(col, row, formula, acc);
+    if (result.updatedCells.length > 0) {
+      this.lastRecalcResult.set(result);
+      this.onFormulaRecalcFn?.(result);
+    }
+  }
+  /**
+   * Notify the engine that a non-formula cell's value changed.
+   * Triggers recalculation of any formulas that depend on this cell.
+   */
+  onCellChanged(col, row, accessor) {
+    if (!this.engine) return;
+    const acc = accessor ?? this.createAccessor();
+    const result = this.engine.onCellChanged(col, row, acc);
+    if (result.updatedCells.length > 0) {
+      this.lastRecalcResult.set(result);
+      this.onFormulaRecalcFn?.(result);
+    }
+  }
+  /**
+   * Get the formula engine's computed value for a cell coordinate.
+   */
+  getValue(col, row) {
+    return this.engine?.getValue(col, row);
+  }
+  /**
+   * Check if a cell has a formula.
+   */
+  hasFormula(col, row) {
+    return this.engine?.hasFormula(col, row) ?? false;
+  }
+  /**
+   * Get the formula string for a cell.
+   */
+  getFormula(col, row) {
+    return this.engine?.getFormula(col, row);
+  }
+  /**
+   * Trigger a full recalculation of all formulas.
+   */
+  recalcAll(accessor) {
+    if (!this.engine) return;
+    const acc = accessor ?? this.createAccessor();
+    const result = this.engine.recalcAll(acc);
+    if (result.updatedCells.length > 0) {
+      this.lastRecalcResult.set(result);
+      this.onFormulaRecalcFn?.(result);
+    }
+  }
+  /**
+   * Get all formulas for serialization.
+   */
+  getAllFormulas() {
+    return this.engine?.getAllFormulas() ?? [];
+  }
+  /**
+   * Register a custom function at runtime.
+   */
+  registerFunction(name, fn) {
+    this.engine?.registerFunction(name, fn);
+  }
+  /**
+   * Clear all formulas and cached values.
+   */
+  clear() {
+    this.engine?.clear();
+    this.lastRecalcResult.set(null);
+  }
+  /**
+   * Define a named range.
+   */
+  defineNamedRange(name, ref) {
+    this.engine?.defineNamedRange(name, ref);
+  }
+  /**
+   * Remove a named range.
+   */
+  removeNamedRange(name) {
+    this.engine?.removeNamedRange(name);
+  }
+  /**
+   * Register a sheet accessor for cross-sheet references.
+   */
+  registerSheet(name, accessor) {
+    this.engine?.registerSheet(name, accessor);
+  }
+  /**
+   * Unregister a sheet accessor.
+   */
+  unregisterSheet(name) {
+    this.engine?.unregisterSheet(name);
+  }
+  /**
+   * Get all cells that a cell depends on (deep, transitive).
+   */
+  getPrecedents(col, row) {
+    return this.engine?.getPrecedents(col, row) ?? [];
+  }
+  /**
+   * Get all cells that depend on a cell (deep, transitive).
+   */
+  getDependents(col, row) {
+    return this.engine?.getDependents(col, row) ?? [];
+  }
+  /**
+   * Get full audit trail for a cell.
+   */
+  getAuditTrail(col, row) {
+    return this.engine?.getAuditTrail(col, row) ?? null;
+  }
+  // --- Private helpers ---
+  /**
+   * Create a data accessor that bridges grid data to formula coordinates.
+   */
+  createAccessor() {
+    const items = this.items;
+    const cols = this.flatColumns;
+    return {
+      getCellValue: (col, row) => {
+        if (row < 0 || row >= items.length) return null;
+        if (col < 0 || col >= cols.length) return null;
+        return getCellValue(items[row], cols[col]);
+      },
+      getRowCount: () => items.length,
+      getColumnCount: () => cols.length
+    };
+  }
+};
+FormulaEngineService = __decorateClass([
+  Injectable()
+], FormulaEngineService);
+
+// src/services/ogrid.service.ts
 var DEFAULT_PAGE_SIZE = 25;
 var EMPTY_LOADING_OPTIONS = {};
 var DEFAULT_PANELS = ["columns", "filters"];
@@ -75,6 +282,32 @@ var OGridService = class {
     this.virtualScroll = signal(void 0);
     this.ariaLabel = signal(void 0);
     this.ariaLabelledBy = signal(void 0);
+    this.workerSort = signal(false);
+    this.showRowNumbers = signal(false);
+    this.cellReferences = signal(false);
+    this.formulasEnabled = signal(false);
+    this.initialFormulas = signal(void 0);
+    this.onFormulaRecalc = signal(void 0);
+    this.formulaFunctions = signal(void 0);
+    this.namedRanges = signal(void 0);
+    this.sheets = signal(void 0);
+    /** Active cell reference string (e.g. 'A1') updated by DataGridTable when cellReferences is enabled. */
+    this.activeCellRef = signal(null);
+    /** Stable callback passed to DataGridTable to update activeCellRef. */
+    this.handleActiveCellChange = (ref) => {
+      this.activeCellRef.set(ref);
+    };
+    // --- Formula engine ---
+    this.formulaService = new FormulaEngineService();
+    // Stable formula method references for dataGridProps (avoid per-recompute arrow functions)
+    this.getFormulaValueFn = (col, row) => this.formulaService.getValue(col, row);
+    this.hasFormulaFn = (col, row) => this.formulaService.hasFormula(col, row);
+    this.getFormulaFn = (col, row) => this.formulaService.getFormula(col, row);
+    this.setFormulaFn = (col, row, formula) => this.formulaService.setFormula(col, row, formula ?? "");
+    this.onFormulaCellChangedFn = (col, row) => this.formulaService.onCellChanged(col, row);
+    this.getPrecedentsFn = (col, row) => this.formulaService.getPrecedents(col, row);
+    this.getDependentsFn = (col, row) => this.formulaService.getDependents(col, row);
+    this.getAuditTrailFn = (col, row) => this.formulaService.getAuditTrail(col, row);
     // --- Internal state signals ---
     this.internalData = signal([]);
     this.internalLoading = signal(false);
@@ -94,6 +327,9 @@ var OGridService = class {
     this.filterAbortController = null;
     this.refreshCounter = signal(0);
     this.firstDataRendered = signal(false);
+    // Worker sort async state
+    this.asyncClientItems = signal(null);
+    this.workerSortAbortId = 0;
     // Side bar state
     this.sideBarActivePanel = signal(null);
     // Filter options state
@@ -134,8 +370,9 @@ var OGridService = class {
       if (this.hasServerFilterOptions()) return this.serverFilterOptions();
       return deriveFilterOptionsFromData(this.displayData(), this.columns());
     });
+    /** Sync path: used when workerSort is off. */
     this.clientItemsAndTotal = computed(() => {
-      if (!this.isClientSide()) return null;
+      if (!this.isClientSide() || this.workerSort()) return null;
       const rows = processClientSideData(
         this.displayData(),
         this.columns(),
@@ -148,12 +385,18 @@ var OGridService = class {
       const paged = rows.slice(start, start + this.pageSize());
       return { items: paged, totalCount: total };
     });
+    /** Resolved client items — sync or async depending on workerSort. */
+    this.resolvedClientItems = computed(() => {
+      const syncResult = this.clientItemsAndTotal();
+      if (syncResult) return syncResult;
+      return this.asyncClientItems();
+    });
     this.displayItems = computed(() => {
-      const cit = this.clientItemsAndTotal();
+      const cit = this.resolvedClientItems();
       return this.isClientSide() && cit ? cit.items : this.serverItems();
     });
     this.displayTotalCount = computed(() => {
-      const cit = this.clientItemsAndTotal();
+      const cit = this.resolvedClientItems();
       return this.isClientSide() && cit ? cit.totalCount : this.serverTotalCount();
     });
     this.hasActiveFilters = computed(() => {
@@ -256,6 +499,12 @@ var OGridService = class {
       rowSelection: this.rowSelection(),
       selectedRows: this.effectiveSelectedRows(),
       onSelectionChange: this.handleSelectionChangeFn,
+      showRowNumbers: this.showRowNumbers() || this.cellReferences(),
+      showColumnLetters: !!this.cellReferences(),
+      showNameBox: !!this.cellReferences(),
+      onActiveCellChange: this.cellReferences() ? this.handleActiveCellChange : void 0,
+      currentPage: this.page(),
+      pageSize: this.pageSize(),
       statusBar: this.statusBarConfig(),
       isLoading: this.isLoadingResolved(),
       filters: this.filters(),
@@ -276,7 +525,18 @@ var OGridService = class {
         onClearAll: this.clearAllFiltersFn,
         message: this.emptyState()?.message,
         render: this.emptyState()?.render
-      }
+      },
+      formulas: this.formulasEnabled(),
+      ...this.formulaService.enabled() ? {
+        getFormulaValue: this.getFormulaValueFn,
+        hasFormula: this.hasFormulaFn,
+        getFormula: this.getFormulaFn,
+        setFormula: this.setFormulaFn,
+        onFormulaCellChanged: this.onFormulaCellChangedFn,
+        getPrecedents: this.getPrecedentsFn,
+        getDependents: this.getDependentsFn,
+        getAuditTrail: this.getAuditTrailFn
+      } : {}
     }));
     this.pagination = computed(() => ({
       page: this.page(),
@@ -323,6 +583,34 @@ var OGridService = class {
         validateColumns(cols);
       }
     });
+    effect((onCleanup) => {
+      if (!this.isClientSide() || !this.workerSort()) return;
+      const data = this.displayData();
+      const cols = this.columns();
+      const filters = this.filters();
+      const sortField = this.sort().field;
+      const sortDir = this.sort().direction;
+      const page = this.page();
+      const ps = this.pageSize();
+      const abortId = ++this.workerSortAbortId;
+      processClientSideDataAsync(data, cols, filters, sortField, sortDir).then((rows) => {
+        if (abortId !== this.workerSortAbortId) return;
+        const total = rows.length;
+        const start = (page - 1) * ps;
+        const paged = rows.slice(start, start + ps);
+        this.asyncClientItems.set({ items: paged, totalCount: total });
+      }).catch(() => {
+        if (abortId !== this.workerSortAbortId) return;
+        const rows = processClientSideData(data, cols, filters, sortField, sortDir);
+        const total = rows.length;
+        const start = (page - 1) * ps;
+        const paged = rows.slice(start, start + ps);
+        this.asyncClientItems.set({ items: paged, totalCount: total });
+      });
+      onCleanup(() => {
+        this.workerSortAbortId++;
+      });
+    });
     effect((onCleanup) => {
       const ds = this.dataSource();
       if (!this.isServerSide() || !ds) {
@@ -405,6 +693,21 @@ var OGridService = class {
         this.sideBarActivePanel.set(parsed.defaultPanel);
       }
     });
+    effect(() => {
+      this.formulaService.configure({
+        formulas: this.formulasEnabled(),
+        initialFormulas: this.initialFormulas(),
+        formulaFunctions: this.formulaFunctions(),
+        onFormulaRecalc: this.onFormulaRecalc(),
+        namedRanges: this.namedRanges(),
+        sheets: this.sheets()
+      });
+    });
+    effect(() => {
+      const items = this.displayItems();
+      const cols = this.columns();
+      this.formulaService.setData(items, cols);
+    });
     this.destroyRef.onDestroy(() => {
       this.fetchAbortController?.abort();
       this.filterAbortController?.abort();
@@ -486,6 +789,13 @@ var OGridService = class {
   // --- Configure from props ---
   configure(props) {
     this.columnsProp.set(props.columns);
+    if (Object.keys(this.pinnedOverrides()).length === 0) {
+      const initial = {};
+      for (const col of flattenColumns(props.columns)) {
+        if (col.pinned) initial[col.columnId] = col.pinned;
+      }
+      if (Object.keys(initial).length > 0) this.pinnedOverrides.set(initial);
+    }
     this.getRowId.set(props.getRowId);
     if ("data" in props && props.data !== void 0) this.data.set(props.data);
     if ("dataSource" in props && props.dataSource !== void 0) this.dataSource.set(props.dataSource);
@@ -528,6 +838,15 @@ var OGridService = class {
     if (props.columnChooser !== void 0) this.columnChooserProp.set(props.columnChooser);
     if (props.columnReorder !== void 0) this.columnReorder.set(props.columnReorder);
     if (props.virtualScroll !== void 0) this.virtualScroll.set(props.virtualScroll);
+    if (props.workerSort !== void 0) this.workerSort.set(props.workerSort);
+    if (props.showRowNumbers !== void 0) this.showRowNumbers.set(props.showRowNumbers);
+    if (props.cellReferences !== void 0) this.cellReferences.set(props.cellReferences);
+    if (props.formulas !== void 0) this.formulasEnabled.set(props.formulas);
+    if (props.initialFormulas !== void 0) this.initialFormulas.set(props.initialFormulas);
+    if (props.onFormulaRecalc) this.onFormulaRecalc.set(props.onFormulaRecalc);
+    if (props.formulaFunctions !== void 0) this.formulaFunctions.set(props.formulaFunctions);
+    if (props.namedRanges !== void 0) this.namedRanges.set(props.namedRanges);
+    if (props.sheets !== void 0) this.sheets.set(props.sheets);
     if (props.entityLabelPlural !== void 0) this.entityLabelPlural.set(props.entityLabelPlural);
     if (props.className !== void 0) this.className.set(props.className);
     if (props.layoutMode !== void 0) this.layoutMode.set(props.layoutMode);
@@ -1065,7 +1384,7 @@ var DataGridInteractionHelper = class {
     const maxColIndex = visibleColumnCount - 1 + colOffset;
     if (items.length === 0) return;
     if (activeCell === null) {
-      if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Home", "End"].includes(e.key)) {
+      if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Home", "End", "PageDown", "PageUp"].includes(e.key)) {
         this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
         e.preventDefault();
       }
@@ -1221,6 +1540,36 @@ var DataGridInteractionHelper = class {
         this.setActiveCell({ rowIndex: newRowEnd, columnIndex: maxColIndex });
         break;
       }
+      case "PageDown":
+      case "PageUp": {
+        e.preventDefault();
+        let pageSize = 10;
+        let rowHeight = 36;
+        if (wrapperEl) {
+          const firstRow = wrapperEl.querySelector("tbody tr");
+          if (firstRow && firstRow.offsetHeight > 0) {
+            rowHeight = firstRow.offsetHeight;
+            pageSize = Math.max(1, Math.floor(wrapperEl.clientHeight / rowHeight));
+          }
+        }
+        const pgDir = e.key === "PageDown" ? 1 : -1;
+        const newRowPage = Math.max(0, Math.min(rowIndex + pgDir * pageSize, maxRowIndex));
+        if (shift) {
+          this.setSelectionRange(normalizeSelectionRange({
+            startRow: selectionRange?.startRow ?? rowIndex,
+            startCol: selectionRange?.startCol ?? dataColIndex,
+            endRow: newRowPage,
+            endCol: selectionRange?.endCol ?? dataColIndex
+          }));
+        } else {
+          this.setSelectionRange({ startRow: newRowPage, startCol: dataColIndex, endRow: newRowPage, endCol: dataColIndex });
+        }
+        this.setActiveCell({ rowIndex: newRowPage, columnIndex });
+        if (wrapperEl) {
+          wrapperEl.scrollTop = getScrollTopForRow(newRowPage, rowHeight, wrapperEl.clientHeight, "center");
+        }
+        break;
+      }
       case "Enter":
       case "F2": {
         e.preventDefault();
@@ -1294,20 +1643,8 @@ var DataGridInteractionHelper = class {
         const range = selectionRange ?? (activeCell != null ? { startRow: activeCell.rowIndex, startCol: activeCell.columnIndex - colOffset, endRow: activeCell.rowIndex, endCol: activeCell.columnIndex - colOffset } : null);
         if (range == null) break;
         e.preventDefault();
-        const norm = normalizeSelectionRange(range);
-        for (let r = norm.startRow; r <= norm.endRow; r++) {
-          for (let c = norm.startCol; c <= norm.endCol; c++) {
-            if (r >= items.length || c >= visibleCols.length) continue;
-            const item = items[r];
-            const col = visibleCols[c];
-            const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
-            if (!colEditable) continue;
-            const oldValue = getCellValue(item, col);
-            const result = parseValue("", oldValue, item, col);
-            if (!result.valid) continue;
-            wrappedOnCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: r });
-          }
-        }
+        const deleteEvents = applyCellDeletion(normalizeSelectionRange(range), items, visibleCols);
+        for (const evt of deleteEvents) wrappedOnCellValueChanged(evt);
         break;
       }
       case "F10":
@@ -2229,6 +2566,10 @@ var VirtualScrollService = class {
     this.containerHeight = signal(0);
     // --- Internal state ---
     this.scrollTop = signal(0);
+    this.scrollLeft = signal(0);
+    // --- Column virtualization inputs ---
+    this.columnWidths = signal([]);
+    this.containerWidth = signal(0);
     // Scrollable container reference for programmatic scrolling
     this.containerEl = null;
     // --- Derived computed signals ---
@@ -2258,6 +2599,21 @@ var VirtualScrollService = class {
     });
     /** Total scrollable height in pixels. */
     this.totalHeight = computed(() => computeTotalHeight(this.totalRows(), this.rowHeight()));
+    // --- Column virtualization ---
+    this.columnsEnabled = computed(() => this.config().columns === true);
+    this.columnOverscan = computed(() => this.config().columnOverscan ?? 2);
+    /** The visible column range with spacer widths, or null when column virtualization is off. */
+    this.columnRange = computed(() => {
+      if (!this.columnsEnabled()) return null;
+      const widths = this.columnWidths();
+      if (widths.length === 0) return null;
+      return computeVisibleColumnRange(
+        this.scrollLeft(),
+        widths,
+        this.containerWidth(),
+        this.columnOverscan()
+      );
+    });
     this.destroyRef.onDestroy(() => {
       this.containerEl = null;
     });
@@ -2271,10 +2627,12 @@ var VirtualScrollService = class {
   }
   /**
    * Call this from the container's scroll event handler.
+   * Tracks both vertical and horizontal scroll positions.
    */
   onScroll(event) {
     const target = event.target;
     this.scrollTop.set(target.scrollTop);
+    this.scrollLeft.set(target.scrollLeft);
   }
   /**
    * Scroll to a specific row index.
@@ -2682,6 +3040,8 @@ var OGridLayoutComponent = class {
     this.hasPagination = false;
     this.sideBar = null;
     this.fullScreen = false;
+    this.showNameBox = false;
+    this.activeCellRef = null;
     this.isFullScreen = false;
     this.borderRadius = GRID_BORDER_RADIUS;
     this.escListener = null;
@@ -2729,6 +3089,12 @@ __decorateClass([
 __decorateClass([
   Input()
 ], OGridLayoutComponent.prototype, "fullScreen", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "showNameBox", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "activeCellRef", 2);
 OGridLayoutComponent = __decorateClass([
   Component({
     selector: "ogrid-layout",
@@ -2778,18 +3144,28 @@ OGridLayoutComponent = __decorateClass([
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-fullscreen-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-name-box {
+      display: inline-flex; align-items: center; padding: 0 8px;
+      font-family: 'Consolas', 'Courier New', monospace; font-size: 12px;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 3px;
+      height: 24px; margin-right: 8px; background: var(--ogrid-bg, #fff);
+      min-width: 40px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+    }
   `],
     template: `
     <div [class]="rootClass">
       <div class="ogrid-layout-container" [style.border-radius.px]="isFullScreen ? 0 : borderRadius">
         <!-- Toolbar strip -->
-        @if (hasToolbar || fullScreen) {
+        @if (hasToolbar || fullScreen || showNameBox) {
           <div
             class="ogrid-layout-toolbar"
             [class.ogrid-layout-toolbar--has-below]="hasToolbarBelow"
             [class.ogrid-layout-toolbar--no-below]="!hasToolbarBelow"
           >
             <div class="ogrid-layout-toolbar-left">
+              @if (showNameBox) {
+                <div class="ogrid-name-box">{{ activeCellRef ?? '\u2014' }}</div>
+              }
               <ng-content select="[toolbar]"></ng-content>
             </div>
             <div class="ogrid-layout-toolbar-right">
@@ -3404,6 +3780,53 @@ var BaseDataGridTableComponent = class {
       if (!this.vsEnabled()) return 0;
       return this.vsVisibleRange().startIndex;
     });
+    // Column virtualization
+    this.vsColumnsEnabled = computed(() => this.virtualScrollService.columnsEnabled());
+    this.vsColumnRange = computed(() => this.virtualScrollService.columnRange());
+    /** Partitioned columns for column virtualization: pinned-left, virtualized-unpinned, pinned-right, with spacer widths. */
+    this.vsColumnPartition = computed(() => {
+      if (!this.vsColumnsEnabled()) return null;
+      const cols = this.visibleCols();
+      const range = this.vsColumnRange();
+      const props = this.getProps();
+      const pinnedCols = props?.pinnedColumns;
+      return partitionColumnsForVirtualization(cols, range, pinnedCols);
+    });
+    /** Column layouts filtered by column virtualization range (or all if column virt is off). */
+    this.vsColumnLayouts = computed(() => {
+      const allLayouts = this.columnLayouts();
+      const partition = this.vsColumnPartition();
+      if (!partition) return allLayouts;
+      const visibleIds = /* @__PURE__ */ new Set();
+      for (const col of partition.pinnedLeft) visibleIds.add(col.columnId);
+      for (const col of partition.virtualizedUnpinned) visibleIds.add(col.columnId);
+      for (const col of partition.pinnedRight) visibleIds.add(col.columnId);
+      return allLayouts.filter((layout) => visibleIds.has(layout.col.columnId));
+    });
+    /** Visible columns filtered by column virtualization range (or all if column virt is off). */
+    this.vsVisibleCols = computed(() => {
+      const allCols = this.visibleCols();
+      const partition = this.vsColumnPartition();
+      if (!partition) return allCols;
+      const visibleIds = /* @__PURE__ */ new Set();
+      for (const col of partition.pinnedLeft) visibleIds.add(col.columnId);
+      for (const col of partition.virtualizedUnpinned) visibleIds.add(col.columnId);
+      for (const col of partition.pinnedRight) visibleIds.add(col.columnId);
+      return allCols.filter((col) => visibleIds.has(col.columnId));
+    });
+    /** Left spacer width for column virtualization (in pixels). */
+    this.vsLeftSpacerWidth = computed(() => this.vsColumnPartition()?.leftSpacerWidth ?? 0);
+    /** Right spacer width for column virtualization (in pixels). */
+    this.vsRightSpacerWidth = computed(() => this.vsColumnPartition()?.rightSpacerWidth ?? 0);
+    /** Map from columnId to its global index in visibleCols. Used to maintain correct colIdx for cell descriptors during column virtualization. */
+    this.globalColIndexMap = computed(() => {
+      const cols = this.visibleCols();
+      const map = /* @__PURE__ */ new Map();
+      for (let i = 0; i < cols.length; i++) {
+        map.set(cols[i].columnId, i);
+      }
+      return map;
+    });
     // Popover editing
     this.popoverAnchorEl = computed(() => this.editingState().popoverAnchorEl);
     this.pendingEditorValueForPopover = computed(() => this.editingState().pendingEditorValue);
@@ -3527,6 +3950,10 @@ var BaseDataGridTableComponent = class {
       this.measuredColumnWidths.set(measured);
     }
   }
+  /** Get global column index for a column (correct even during column virtualization). */
+  getGlobalColIndex(col) {
+    return this.globalColIndexMap().get(col.columnId) ?? 0;
+  }
   /**
    * Initialize base wiring effects. Must be called from subclass constructor.
    *
@@ -3577,16 +4004,26 @@ var BaseDataGridTableComponent = class {
           this.virtualScrollService.updateConfig({
             enabled: p.virtualScroll.enabled,
             rowHeight: p.virtualScroll.rowHeight,
-            overscan: p.virtualScroll.overscan
+            overscan: p.virtualScroll.overscan,
+            columns: p.virtualScroll.columns,
+            columnOverscan: p.virtualScroll.columnOverscan
           });
         }
       }
     });
+    effect(() => {
+      const layouts = this.columnLayouts();
+      const props = this.getProps();
+      const pinnedCols = props?.pinnedColumns ?? {};
+      const unpinnedWidths = layouts.filter((l) => !l.pinnedLeft && !l.pinnedRight && !pinnedCols[l.col.columnId]).map((l) => l.width);
+      this.virtualScrollService.columnWidths.set(unpinnedWidths);
+    });
     effect(() => {
       const el = this.wrapperElSignal();
       if (el) {
         this.virtualScrollService.setContainer(el);
         this.virtualScrollService.containerHeight.set(el.clientHeight);
+        this.virtualScrollService.containerWidth.set(el.clientWidth);
       }
     });
   }
@@ -3658,8 +4095,8 @@ var BaseDataGridTableComponent = class {
       return "";
     }
   }
-  resolveCellStyleFn(col, item) {
-    return resolveCellStyle(col, item);
+  resolveCellStyleFn(col, item, displayValue) {
+    return resolveCellStyle(col, item, displayValue);
   }
   buildPopoverEditorProps(item, col, descriptor) {
     return buildPopoverEditorProps(item, col, descriptor, this.pendingEditorValue(), {
@@ -4393,7 +4830,12 @@ var BaseInlineCellEditorComponent = class {
       const el = this.inputEl?.nativeElement;
       if (el) {
         el.focus();
-        if (el instanceof HTMLInputElement && el.type === "text") {
+        if (el instanceof HTMLInputElement && el.type === "date") {
+          try {
+            el.showPicker();
+          } catch {
+          }
+        } else if (el instanceof HTMLInputElement && el.type === "text") {
           el.select();
         }
       }
@@ -4515,6 +4957,7 @@ var BaseInlineCellEditorComponent = class {
     dropdown.style.maxHeight = `${maxH}px`;
     dropdown.style.zIndex = "9999";
     dropdown.style.right = "auto";
+    dropdown.style.textAlign = "left";
     if (flipUp) {
       dropdown.style.top = "auto";
       dropdown.style.bottom = `${window.innerHeight - rect.top}px`;
@@ -4599,7 +5042,7 @@ var INLINE_CELL_EDITOR_TEMPLATE = `
             style="width:100%;padding:0;border:none;background:transparent;color:inherit;font:inherit;font-size:13px;outline:none;min-width:0"
           />
           <div #richSelectDropdown role="listbox"
-               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2)">
+               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left">
             @for (opt of filteredOptions(); track opt; let i = $index) {
               <div role="option"
                    [attr.aria-selected]="i === highlightedIndex()"
@@ -4623,7 +5066,7 @@ var INLINE_CELL_EDITOR_TEMPLATE = `
             <span style="margin-left:4px;font-size:10px;opacity:0.5">&#9662;</span>
           </div>
           <div #selectDropdown role="listbox"
-               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2)">
+               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left">
             @for (opt of selectOptions(); track opt; let i = $index) {
               <div role="option"
                    [attr.aria-selected]="i === highlightedIndex()"
@@ -4763,4 +5206,4 @@ __decorateClass([
   ViewChild("editorContainer")
 ], BasePopoverCellEditorComponent.prototype, "editorContainerRef", 2);
 
-export { BaseColumnChooserComponent, BaseColumnHeaderFilterComponent, BaseDataGridTableComponent, BaseInlineCellEditorComponent, BaseOGridComponent, BasePaginationControlsComponent, BasePopoverCellEditorComponent, ColumnReorderService, DataGridEditingHelper, DataGridInteractionHelper, DataGridLayoutHelper, DataGridStateService, EmptyStateComponent, GridContextMenuComponent, INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, MarchingAntsOverlayComponent, OGRID_THEME_VARS_CSS, OGridLayoutComponent, OGridService, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, SideBarComponent, StatusBarComponent, VirtualScrollService, createDebouncedCallback, createDebouncedSignal, createLatestCallback };
+export { BaseColumnChooserComponent, BaseColumnHeaderFilterComponent, BaseDataGridTableComponent, BaseInlineCellEditorComponent, BaseOGridComponent, BasePaginationControlsComponent, BasePopoverCellEditorComponent, ColumnReorderService, DataGridEditingHelper, DataGridInteractionHelper, DataGridLayoutHelper, DataGridStateService, EmptyStateComponent, FormulaEngineService, GridContextMenuComponent, INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, MarchingAntsOverlayComponent, OGRID_THEME_VARS_CSS, OGridLayoutComponent, OGridService, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, SideBarComponent, StatusBarComponent, VirtualScrollService, createDebouncedCallback, createDebouncedSignal, createLatestCallback };

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

@@ -134,6 +134,34 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly vsBottomSpacerHeight: import("@angular/core").Signal<number>;
     readonly vsVisibleItems: import("@angular/core").Signal<T[]>;
     readonly vsStartIndex: import("@angular/core").Signal<number>;
+    readonly vsColumnsEnabled: import("@angular/core").Signal<boolean>;
+    readonly vsColumnRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").IVisibleColumnRange | null>;
+    /** Partitioned columns for column virtualization: pinned-left, virtualized-unpinned, pinned-right, with spacer widths. */
+    readonly vsColumnPartition: import("@angular/core").Signal<{
+        pinnedLeft: import("@alaarab/ogrid-core").IColumnDef<T>[];
+        virtualizedUnpinned: import("@alaarab/ogrid-core").IColumnDef<T>[];
+        pinnedRight: import("@alaarab/ogrid-core").IColumnDef<T>[];
+        leftSpacerWidth: number;
+        rightSpacerWidth: number;
+    } | null>;
+    /** Column layouts filtered by column virtualization range (or all if column virt is off). */
+    readonly vsColumnLayouts: import("@angular/core").Signal<{
+        col: IColumnDef<T>;
+        pinnedLeft: boolean;
+        pinnedRight: boolean;
+        minWidth: number;
+        width: number;
+    }[]>;
+    /** Visible columns filtered by column virtualization range (or all if column virt is off). */
+    readonly vsVisibleCols: import("@angular/core").Signal<IColumnDef<T>[]>;
+    /** Left spacer width for column virtualization (in pixels). */
+    readonly vsLeftSpacerWidth: import("@angular/core").Signal<number>;
+    /** Right spacer width for column virtualization (in pixels). */
+    readonly vsRightSpacerWidth: import("@angular/core").Signal<number>;
+    /** Map from columnId to its global index in visibleCols. Used to maintain correct colIdx for cell descriptors during column virtualization. */
+    readonly globalColIndexMap: import("@angular/core").Signal<Map<string, number>>;
+    /** Get global column index for a column (correct even during column virtualization). */
+    getGlobalColIndex(col: IColumnDef<T>): number;
     readonly popoverAnchorEl: import("@angular/core").Signal<HTMLElement | null>;
     readonly pendingEditorValueForPopover: import("@angular/core").Signal<unknown>;
     readonly allowOverflowX: import("@angular/core").Signal<boolean>;
@@ -217,7 +245,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     };
     getCellDescriptor(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number): CellRenderDescriptor;
     resolveCellContent(col: IColumnDef<T>, item: T, displayValue: unknown): unknown;
-    resolveCellStyleFn(col: IColumnDef<T>, item: T): Record<string, string> | undefined;
+    resolveCellStyleFn(col: IColumnDef<T>, item: T, displayValue?: unknown): Record<string, string> | undefined;
     buildPopoverEditorProps(item: T, col: IColumnDef<T>, descriptor: CellRenderDescriptor): unknown;
     /** Check if a specific cell is the active cell (PrimeNG inline template helper). */
     isActiveCell(rowIndex: number, colIdx: number): boolean;

package/dist/types/components/inline-cell-editor-template.d.ts

@@ -2,5 +2,5 @@
  * Shared inline cell editor template used by all Angular UI packages.
  * The template is identical across Material, PrimeNG, and Radix implementations.
  */
-export declare const INLINE_CELL_EDITOR_TEMPLATE = "\n    @switch (editorType) {\n      @case ('text') {\n        <input\n          #inputEl\n          type=\"text\"\n          [value]=\"localValue()\"\n          (input)=\"localValue.set($any($event.target).value)\"\n          (keydown)=\"onTextKeyDown($event)\"\n          (blur)=\"onTextBlur()\"\n          [style]=\"getInputStyle()\"\n        />\n      }\n      @case ('richSelect') {\n        <div #richSelectWrapper\n             style=\"width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative\">\n          <input\n            #richSelectInput\n            type=\"text\"\n            [value]=\"searchText()\"\n            (input)=\"onRichSelectSearch($any($event.target).value)\"\n            (keydown)=\"onRichSelectKeyDown($event)\"\n            placeholder=\"Search...\"\n            style=\"width:100%;padding:0;border:none;background:transparent;color:inherit;font:inherit;font-size:13px;outline:none;min-width:0\"\n          />\n          <div #richSelectDropdown role=\"listbox\"\n               style=\"position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2)\">\n            @for (opt of filteredOptions(); track opt; let i = $index) {\n              <div role=\"option\"\n                   [attr.aria-selected]=\"i === highlightedIndex()\"\n                   (click)=\"commitValue(opt)\"\n                   [style]=\"i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424)'\">\n                {{ getDisplayText(opt) }}\n              </div>\n            }\n            @if (filteredOptions().length === 0) {\n              <div style=\"padding:6px 8px;color:var(--ogrid-muted, #999)\">No matches</div>\n            }\n          </div>\n        </div>\n      }\n      @case ('select') {\n        <div #selectWrapper tabindex=\"0\"\n             style=\"width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative\"\n             (keydown)=\"onCustomSelectKeyDown($event)\">\n          <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;font-size:13px;color:inherit\">\n            <span>{{ getDisplayText(value) }}</span>\n            <span style=\"margin-left:4px;font-size:10px;opacity:0.5\">&#9662;</span>\n          </div>\n          <div #selectDropdown role=\"listbox\"\n               style=\"position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2)\">\n            @for (opt of selectOptions(); track opt; let i = $index) {\n              <div role=\"option\"\n                   [attr.aria-selected]=\"i === highlightedIndex()\"\n                   (click)=\"commitValue(opt)\"\n                   [style]=\"i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424)'\">\n                {{ getDisplayText(opt) }}\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @case ('checkbox') {\n        <div style=\"display:flex;align-items:center;justify-content:center;width:100%;height:100%\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"!!localValue()\"\n            (change)=\"commitValue($any($event.target).checked)\"\n            (keydown)=\"onCheckboxKeyDown($event)\"\n          />\n        </div>\n      }\n      @case ('date') {\n        <input\n          #inputEl\n          type=\"date\"\n          [value]=\"localValue()\"\n          (change)=\"commitValue($any($event.target).value)\"\n          (keydown)=\"onTextKeyDown($event)\"\n          (blur)=\"onTextBlur()\"\n          [style]=\"getInputStyle()\"\n        />\n      }\n      @default {\n        <input\n          #inputEl\n          type=\"text\"\n          [value]=\"localValue()\"\n          (input)=\"localValue.set($any($event.target).value)\"\n          (keydown)=\"onTextKeyDown($event)\"\n          (blur)=\"onTextBlur()\"\n          [style]=\"getInputStyle()\"\n        />\n      }\n    }\n";
+export declare const INLINE_CELL_EDITOR_TEMPLATE = "\n    @switch (editorType) {\n      @case ('text') {\n        <input\n          #inputEl\n          type=\"text\"\n          [value]=\"localValue()\"\n          (input)=\"localValue.set($any($event.target).value)\"\n          (keydown)=\"onTextKeyDown($event)\"\n          (blur)=\"onTextBlur()\"\n          [style]=\"getInputStyle()\"\n        />\n      }\n      @case ('richSelect') {\n        <div #richSelectWrapper\n             style=\"width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative\">\n          <input\n            #richSelectInput\n            type=\"text\"\n            [value]=\"searchText()\"\n            (input)=\"onRichSelectSearch($any($event.target).value)\"\n            (keydown)=\"onRichSelectKeyDown($event)\"\n            placeholder=\"Search...\"\n            style=\"width:100%;padding:0;border:none;background:transparent;color:inherit;font:inherit;font-size:13px;outline:none;min-width:0\"\n          />\n          <div #richSelectDropdown role=\"listbox\"\n               style=\"position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left\">\n            @for (opt of filteredOptions(); track opt; let i = $index) {\n              <div role=\"option\"\n                   [attr.aria-selected]=\"i === highlightedIndex()\"\n                   (click)=\"commitValue(opt)\"\n                   [style]=\"i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424)'\">\n                {{ getDisplayText(opt) }}\n              </div>\n            }\n            @if (filteredOptions().length === 0) {\n              <div style=\"padding:6px 8px;color:var(--ogrid-muted, #999)\">No matches</div>\n            }\n          </div>\n        </div>\n      }\n      @case ('select') {\n        <div #selectWrapper tabindex=\"0\"\n             style=\"width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative\"\n             (keydown)=\"onCustomSelectKeyDown($event)\">\n          <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;font-size:13px;color:inherit\">\n            <span>{{ getDisplayText(value) }}</span>\n            <span style=\"margin-left:4px;font-size:10px;opacity:0.5\">&#9662;</span>\n          </div>\n          <div #selectDropdown role=\"listbox\"\n               style=\"position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left\">\n            @for (opt of selectOptions(); track opt; let i = $index) {\n              <div role=\"option\"\n                   [attr.aria-selected]=\"i === highlightedIndex()\"\n                   (click)=\"commitValue(opt)\"\n                   [style]=\"i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424)'\">\n                {{ getDisplayText(opt) }}\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @case ('checkbox') {\n        <div style=\"display:flex;align-items:center;justify-content:center;width:100%;height:100%\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"!!localValue()\"\n            (change)=\"commitValue($any($event.target).checked)\"\n            (keydown)=\"onCheckboxKeyDown($event)\"\n          />\n        </div>\n      }\n      @case ('date') {\n        <input\n          #inputEl\n          type=\"date\"\n          [value]=\"localValue()\"\n          (change)=\"commitValue($any($event.target).value)\"\n          (keydown)=\"onTextKeyDown($event)\"\n          (blur)=\"onTextBlur()\"\n          [style]=\"getInputStyle()\"\n        />\n      }\n      @default {\n        <input\n          #inputEl\n          type=\"text\"\n          [value]=\"localValue()\"\n          (input)=\"localValue.set($any($event.target).value)\"\n          (keydown)=\"onTextKeyDown($event)\"\n          (blur)=\"onTextBlur()\"\n          [style]=\"getInputStyle()\"\n        />\n      }\n    }\n";
 export declare const INLINE_CELL_EDITOR_STYLES = "\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n";

package/dist/types/components/ogrid-layout.component.d.ts

@@ -6,6 +6,8 @@ export declare class OGridLayoutComponent {
     hasPagination: boolean;
     sideBar: SideBarProps | null;
     fullScreen: boolean;
+    showNameBox: boolean;
+    activeCellRef: string | null;
     isFullScreen: boolean;
     readonly borderRadius = 6;
     private escListener;

package/dist/types/index.d.ts

@@ -13,6 +13,8 @@ export { DataGridEditingHelper } from './services/datagrid-editing.service';
 export { DataGridInteractionHelper } from './services/datagrid-interaction.service';
 export { ColumnReorderService } from './services/column-reorder.service';
 export { VirtualScrollService } from './services/virtual-scroll.service';
+export { FormulaEngineService } from './services/formula-engine.service';
+export type { FormulaEngineConfig } from './services/formula-engine.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/formula-engine.service.d.ts

@@ -0,0 +1,133 @@
+/**
+ * FormulaEngineService — Angular service for integrating the formula engine with the grid.
+ *
+ * Lazily creates a FormulaEngine instance when configured with `formulas: true`.
+ * Provides an accessor bridge between grid data and formula coordinates.
+ * Uses Angular signals for reactive state.
+ *
+ * Port of React's useFormulaEngine hook.
+ */
+import type { IGridDataAccessor, IFormulaFunction, IRecalcResult, IColumnDef, IAuditEntry, IAuditTrail } from '@alaarab/ogrid-core';
+export interface FormulaEngineConfig {
+    /** Enable formula support. */
+    formulas?: boolean;
+    /** Initial formulas to load on first configure. */
+    initialFormulas?: Array<{
+        col: number;
+        row: number;
+        formula: string;
+    }>;
+    /** Custom formula functions to register. */
+    formulaFunctions?: Record<string, IFormulaFunction>;
+    /** Called when recalculation produces cascading updates. */
+    onFormulaRecalc?: (result: IRecalcResult) => void;
+    /** Named ranges: name → cell/range reference string. */
+    namedRanges?: Record<string, string>;
+    /** Sheet accessors for cross-sheet references. */
+    sheets?: Record<string, IGridDataAccessor>;
+}
+/**
+ * Per-component injectable service that wraps FormulaEngine from @alaarab/ogrid-core.
+ *
+ * Not providedIn: 'root' — provide it per component so each grid instance
+ * gets its own formula engine.
+ */
+export declare class FormulaEngineService<T = unknown> {
+    private destroyRef;
+    private engine;
+    private initialLoaded;
+    private onFormulaRecalcFn;
+    private items;
+    private flatColumns;
+    /** Whether formula support is currently enabled. */
+    readonly enabled: import("@angular/core").WritableSignal<boolean>;
+    /** Last recalculation result, for UI to react to formula changes. */
+    readonly lastRecalcResult: import("@angular/core").WritableSignal<IRecalcResult | null>;
+    /** Number of formulas currently registered. */
+    readonly formulaCount: import("@angular/core").Signal<number>;
+    constructor();
+    /**
+     * Configure the formula engine. Call this when the grid component initializes.
+     *
+     * Lazily creates the FormulaEngine only when `formulas: true`.
+     */
+    configure(options: FormulaEngineConfig): void;
+    /**
+     * Update the data references used by the accessor bridge.
+     * Call this whenever the grid's items or columns change.
+     */
+    setData(items: T[], flatColumns: IColumnDef<T>[]): void;
+    /**
+     * Set or clear a formula for a cell. Triggers recalculation of dependents.
+     */
+    setFormula(col: number, row: number, formula: string | null, accessor?: IGridDataAccessor): void;
+    /**
+     * Notify the engine that a non-formula cell's value changed.
+     * Triggers recalculation of any formulas that depend on this cell.
+     */
+    onCellChanged(col: number, row: number, accessor?: IGridDataAccessor): void;
+    /**
+     * Get the formula engine's computed value for a cell coordinate.
+     */
+    getValue(col: number, row: number): unknown | undefined;
+    /**
+     * Check if a cell has a formula.
+     */
+    hasFormula(col: number, row: number): boolean;
+    /**
+     * Get the formula string for a cell.
+     */
+    getFormula(col: number, row: number): string | undefined;
+    /**
+     * Trigger a full recalculation of all formulas.
+     */
+    recalcAll(accessor?: IGridDataAccessor): void;
+    /**
+     * Get all formulas for serialization.
+     */
+    getAllFormulas(): Array<{
+        col: number;
+        row: number;
+        formula: string;
+    }>;
+    /**
+     * Register a custom function at runtime.
+     */
+    registerFunction(name: string, fn: IFormulaFunction): void;
+    /**
+     * Clear all formulas and cached values.
+     */
+    clear(): void;
+    /**
+     * Define a named range.
+     */
+    defineNamedRange(name: string, ref: string): void;
+    /**
+     * Remove a named range.
+     */
+    removeNamedRange(name: string): void;
+    /**
+     * Register a sheet accessor for cross-sheet references.
+     */
+    registerSheet(name: string, accessor: IGridDataAccessor): void;
+    /**
+     * Unregister a sheet accessor.
+     */
+    unregisterSheet(name: string): void;
+    /**
+     * Get all cells that a cell depends on (deep, transitive).
+     */
+    getPrecedents(col: number, row: number): IAuditEntry[];
+    /**
+     * Get all cells that depend on a cell (deep, transitive).
+     */
+    getDependents(col: number, row: number): IAuditEntry[];
+    /**
+     * Get full audit trail for a cell.
+     */
+    getAuditTrail(col: number, row: number): IAuditTrail | null;
+    /**
+     * Create a data accessor that bridges grid data to formula coordinates.
+     */
+    private createAccessor;
+}

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

@@ -1,4 +1,4 @@
-import type { RowId, IOGridApi, IFilters, FilterValue, IRowSelectionChangeEvent, IStatusBarProps, IColumnDefinition, IDataSource, ISideBarDef, IVirtualScrollConfig, SideBarPanelId } from '../types';
+import type { RowId, IOGridApi, IFilters, FilterValue, IRowSelectionChangeEvent, IStatusBarProps, IColumnDefinition, IDataSource, ISideBarDef, IVirtualScrollConfig, SideBarPanelId, IFormulaFunction, IRecalcResult, IGridDataAccessor } from '../types';
 import type { IOGridProps, IOGridDataGridProps } from '../types';
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from '../types';
 import type { SideBarProps } from '../components/sidebar.component';
@@ -108,6 +108,32 @@ export declare class OGridService<T> {
     readonly virtualScroll: import("@angular/core").WritableSignal<IVirtualScrollConfig | undefined>;
     readonly ariaLabel: import("@angular/core").WritableSignal<string | undefined>;
     readonly ariaLabelledBy: import("@angular/core").WritableSignal<string | undefined>;
+    readonly workerSort: import("@angular/core").WritableSignal<boolean>;
+    readonly showRowNumbers: import("@angular/core").WritableSignal<boolean>;
+    readonly cellReferences: import("@angular/core").WritableSignal<boolean>;
+    readonly formulasEnabled: import("@angular/core").WritableSignal<boolean>;
+    readonly initialFormulas: import("@angular/core").WritableSignal<{
+        col: number;
+        row: number;
+        formula: string;
+    }[] | undefined>;
+    readonly onFormulaRecalc: import("@angular/core").WritableSignal<((result: IRecalcResult) => void) | undefined>;
+    readonly formulaFunctions: import("@angular/core").WritableSignal<Record<string, IFormulaFunction> | undefined>;
+    readonly namedRanges: import("@angular/core").WritableSignal<Record<string, string> | undefined>;
+    readonly sheets: import("@angular/core").WritableSignal<Record<string, IGridDataAccessor> | undefined>;
+    /** Active cell reference string (e.g. 'A1') updated by DataGridTable when cellReferences is enabled. */
+    readonly activeCellRef: import("@angular/core").WritableSignal<string | null>;
+    /** Stable callback passed to DataGridTable to update activeCellRef. */
+    private readonly handleActiveCellChange;
+    private readonly formulaService;
+    private readonly getFormulaValueFn;
+    private readonly hasFormulaFn;
+    private readonly getFormulaFn;
+    private readonly setFormulaFn;
+    private readonly onFormulaCellChangedFn;
+    private readonly getPrecedentsFn;
+    private readonly getDependentsFn;
+    private readonly getAuditTrailFn;
     private readonly internalData;
     private readonly internalLoading;
     private readonly internalPage;
@@ -125,6 +151,8 @@ export declare class OGridService<T> {
     private filterAbortController;
     private readonly refreshCounter;
     private readonly firstDataRendered;
+    private readonly asyncClientItems;
+    private workerSortAbortId;
     private readonly sideBarActivePanel;
     private readonly serverFilterOptions;
     private readonly loadingFilterOptions;
@@ -147,10 +175,16 @@ export declare class OGridService<T> {
     readonly multiSelectFilterFields: import("@angular/core").Signal<string[]>;
     readonly hasServerFilterOptions: import("@angular/core").Signal<boolean>;
     readonly clientFilterOptions: import("@angular/core").Signal<Record<string, string[]>>;
+    /** Sync path: used when workerSort is off. */
     readonly clientItemsAndTotal: import("@angular/core").Signal<{
         items: T[];
         totalCount: number;
     } | null>;
+    /** Resolved client items — sync or async depending on workerSort. */
+    readonly resolvedClientItems: import("@angular/core").Signal<{
+        items: T[];
+        totalCount: number;
+    } | null>;
     readonly displayItems: import("@angular/core").Signal<T[]>;
     readonly displayTotalCount: import("@angular/core").Signal<number>;
     readonly hasActiveFilters: import("@angular/core").Signal<boolean>;

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

@@ -1,4 +1,4 @@
-import type { IVisibleRange, IVirtualScrollConfig } from '@alaarab/ogrid-core';
+import type { IVisibleRange, IVisibleColumnRange, IVirtualScrollConfig } from '@alaarab/ogrid-core';
 /**
  * Manages virtual scrolling state using Angular signals.
  * Port of React's useVirtualScroll hook.
@@ -13,6 +13,9 @@ export declare class VirtualScrollService {
     readonly config: import("@angular/core").WritableSignal<IVirtualScrollConfig>;
     readonly containerHeight: import("@angular/core").WritableSignal<number>;
     readonly scrollTop: import("@angular/core").WritableSignal<number>;
+    readonly scrollLeft: import("@angular/core").WritableSignal<number>;
+    readonly columnWidths: import("@angular/core").WritableSignal<number[]>;
+    readonly containerWidth: import("@angular/core").WritableSignal<number>;
     private containerEl;
     readonly rowHeight: import("@angular/core").Signal<number>;
     readonly overscan: import("@angular/core").Signal<number>;
@@ -24,6 +27,10 @@ export declare class VirtualScrollService {
     readonly visibleRange: import("@angular/core").Signal<IVisibleRange>;
     /** Total scrollable height in pixels. */
     readonly totalHeight: import("@angular/core").Signal<number>;
+    readonly columnsEnabled: import("@angular/core").Signal<boolean>;
+    readonly columnOverscan: import("@angular/core").Signal<number>;
+    /** The visible column range with spacer widths, or null when column virtualization is off. */
+    readonly columnRange: import("@angular/core").Signal<IVisibleColumnRange | null>;
     constructor();
     /**
      * Set the scrollable container element.
@@ -32,6 +39,7 @@ export declare class VirtualScrollService {
     setContainer(el: HTMLElement | null): void;
     /**
      * Call this from the container's scroll event handler.
+     * Tracks both vertical and horizontal scroll positions.
      */
     onScroll(event: Event): void;
     /**

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, IVirtualScrollConfig, 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, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, } from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-core';
-import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef, IVirtualScrollConfig } from '@alaarab/ogrid-core';
+import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef, IVirtualScrollConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail } from '@alaarab/ogrid-core';
 /** Base props shared by both client-side and server-side OGrid modes. */
 interface IOGridBaseProps<T> {
     columns: (IColumnDef<T> | IColumnGroupDef<T>)[];
@@ -63,6 +63,8 @@ interface IOGridBaseProps<T> {
     sideBar?: boolean | ISideBarDef;
     columnReorder?: boolean;
     virtualScroll?: IVirtualScrollConfig;
+    /** Offload sort/filter to a Web Worker for large datasets. Falls back to sync when sort column has a custom compare. */
+    workerSort?: boolean;
     /** Fixed row height in pixels. Overrides default row height (36px). */
     rowHeight?: number;
     pageSizeOptions?: number[];
@@ -70,6 +72,24 @@ interface IOGridBaseProps<T> {
     onError?: (error: unknown) => void;
     onCellError?: (error: Error, info: unknown) => void;
     showRowNumbers?: boolean;
+    /** Enable Excel-style cell references: column letter headers, row numbers, and name box. Implies showRowNumbers. */
+    cellReferences?: boolean;
+    /** Enable Excel-like formula support. When true, cells starting with '=' are treated as formulas. Default: false. */
+    formulas?: boolean;
+    /** Initial formulas to load when the formula engine initializes. */
+    initialFormulas?: Array<{
+        col: number;
+        row: number;
+        formula: string;
+    }>;
+    /** Called when formula recalculation produces updated cell values (e.g. cascade from an edited cell). */
+    onFormulaRecalc?: (result: IRecalcResult) => void;
+    /** Custom formula functions to register with the formula engine (e.g. { MYFUNC: { minArgs: 1, maxArgs: 1, evaluate: ... } }). */
+    formulaFunctions?: Record<string, IFormulaFunction>;
+    /** Named ranges for the formula engine: name → cell/range ref string (e.g. { Revenue: 'A1:A10' }). */
+    namedRanges?: Record<string, string>;
+    /** Sheet accessors for cross-sheet formula references (e.g. { Sheet2: accessor }). */
+    sheets?: Record<string, IGridDataAccessor>;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
@@ -121,6 +141,9 @@ export interface IOGridDataGridProps<T> {
     selectedRows?: Set<RowId>;
     onSelectionChange?: (event: IRowSelectionChangeEvent<T>) => void;
     showRowNumbers?: boolean;
+    showColumnLetters?: boolean;
+    showNameBox?: boolean;
+    onActiveCellChange?: (ref: string | null) => void;
     currentPage?: number;
     pageSize?: number;
     statusBar?: IStatusBarProps;
@@ -145,4 +168,22 @@ export interface IOGridDataGridProps<T> {
     'aria-labelledby'?: string;
     /** Custom keydown handler. Called before grid's built-in handling. Call event.preventDefault() to suppress grid default. */
     onKeyDown?: (event: KeyboardEvent) => void;
+    /** Enable formula support. When true, cell values starting with '=' are treated as formulas. */
+    formulas?: boolean;
+    /** Get the formula engine's computed value for a cell, or undefined if no formula. */
+    getFormulaValue?: (col: number, row: number) => unknown;
+    /** Check if a cell has a formula. */
+    hasFormula?: (col: number, row: number) => boolean;
+    /** Get the formula string for a cell. */
+    getFormula?: (col: number, row: number) => string | undefined;
+    /** Set a formula for a cell (called from edit commit when value starts with '='). */
+    setFormula?: (col: number, row: number, formula: string | null) => void;
+    /** Notify the formula engine that a non-formula cell changed. */
+    onFormulaCellChanged?: (col: number, row: number) => void;
+    /** Get all cells that a cell depends on (deep, transitive). */
+    getPrecedents?: (col: number, row: number) => IAuditEntry[];
+    /** Get all cells that depend on a cell (deep, transitive). */
+    getDependents?: (col: number, row: number) => IAuditEntry[];
+    /** Get full audit trail for a cell. */
+    getAuditTrail?: (col: number, row: number) => IAuditTrail | null;
 }

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, IVirtualScrollConfig, } 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, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, } from './dataGridTypes';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.1.15",
+  "version": "2.3.0",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.15"
+    "@alaarab/ogrid-core": "2.3.0"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",