@alaarab/ogrid-angular 2.0.19 → 2.0.22

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

@@ -20,6 +20,8 @@ export class BaseDataGridTableComponent {
         this.virtualScrollService = new VirtualScrollService();
         this.lastMouseShift = false;
         this.columnSizingVersion = signal(0);
+        /** Dirty flag — set when column layout changes, cleared after measurement. */
+        this.measureDirty = true;
         /** DOM-measured column widths from the last layout pass.
          *  Used as a minWidth floor to prevent columns from shrinking
          *  when new data loads (e.g. server-side pagination). */
@@ -38,6 +40,10 @@ export class BaseDataGridTableComponent {
         this.isLoading = computed(() => this.getProps()?.isLoading ?? false);
         this.loadingMessage = computed(() => 'Loading\u2026');
         this.layoutModeFit = computed(() => (this.getProps()?.layoutMode ?? 'fill') === 'content');
+        this.rowHeightCssVar = computed(() => {
+            const rh = this.getProps()?.rowHeight;
+            return rh ? `${rh}px` : null;
+        });
         this.ariaLabel = computed(() => this.getProps()?.['aria-label'] ?? 'Data grid');
         this.ariaLabelledBy = computed(() => this.getProps()?.['aria-labelledby']);
         this.emptyState = computed(() => this.getProps()?.emptyState);
@@ -152,34 +158,44 @@ export class BaseDataGridTableComponent {
                 };
             });
         });
-        // Compute sticky offsets for pinned columns (cumulative left/right positions)
+        // Compute sticky offsets for pinned columns (single pass from both ends)
         this.pinningOffsets = computed(() => {
             const layouts = this.columnLayouts();
             const leftOffsets = {};
             const rightOffsets = {};
-            // Left offsets: start after checkbox and row number columns
             let leftAcc = 0;
             if (this.hasCheckboxCol())
                 leftAcc += CHECKBOX_COLUMN_WIDTH;
             if (this.hasRowNumbersCol())
                 leftAcc += ROW_NUMBER_COLUMN_WIDTH;
-            for (const layout of layouts) {
-                if (layout.pinnedLeft) {
-                    leftOffsets[layout.col.columnId] = leftAcc;
-                    leftAcc += layout.width + CELL_PADDING;
-                }
-            }
-            // Right offsets: walk from the end
             let rightAcc = 0;
-            for (let i = layouts.length - 1; i >= 0; i--) {
-                const layout = layouts[i];
-                if (layout.pinnedRight) {
-                    rightOffsets[layout.col.columnId] = rightAcc;
-                    rightAcc += layout.width + CELL_PADDING;
+            const len = layouts.length;
+            for (let i = 0; i < len; i++) {
+                // Left-pinned: walk forward
+                const leftLayout = layouts[i];
+                if (leftLayout.pinnedLeft) {
+                    leftOffsets[leftLayout.col.columnId] = leftAcc;
+                    leftAcc += leftLayout.width + CELL_PADDING;
+                }
+                // Right-pinned: walk backward
+                const ri = len - 1 - i;
+                const rightLayout = layouts[ri];
+                if (rightLayout.pinnedRight) {
+                    rightOffsets[rightLayout.col.columnId] = rightAcc;
+                    rightAcc += rightLayout.width + CELL_PADDING;
                 }
             }
             return { leftOffsets, rightOffsets };
         });
+        /** Memoized column menu handlers — avoids recreating objects on every CD cycle */
+        this.columnMenuHandlersMap = computed(() => {
+            const cols = this.visibleCols();
+            const map = new Map();
+            for (const col of cols) {
+                map.set(col.columnId, this.buildColumnMenuHandlers(col.columnId));
+            }
+            return map;
+        });
     }
     /** Lifecycle hook — populate element signals from @ViewChild refs */
     ngAfterViewInit() {
@@ -191,9 +207,12 @@ export class BaseDataGridTableComponent {
             this.tableContainerElSignal.set(tableContainer);
         this.measureColumnWidths();
     }
-    /** Lifecycle hook — re-measure column widths after each view update */
+    /** Lifecycle hook — re-measure column widths only when layout changed */
     ngAfterViewChecked() {
-        this.measureColumnWidths();
+        if (this.measureDirty) {
+            this.measureDirty = false;
+            this.measureColumnWidths();
+        }
     }
     /** Measure actual th widths from the DOM and update the measuredColumnWidths signal.
      *  Only updates the signal when values actually change, to avoid render loops. */
@@ -255,6 +274,14 @@ export class BaseDataGridTableComponent {
                 this.columnReorderService.enabled.set(p.columnReorder === true);
             }
         });
+        // Mark measurement dirty when column layout changes
+        effect(() => {
+            // Track signals that affect column layout
+            this.visibleCols();
+            this.columnSizingOverrides();
+            this.columnSizingVersion();
+            this.measureDirty = true;
+        });
         // Wire virtual scroll service inputs
         effect(() => {
             const p = this.getProps();
@@ -314,6 +341,24 @@ export class BaseDataGridTableComponent {
     getFilterConfig(col) {
         return getHeaderFilterConfig(col, this.headerFilterInput());
     }
+    /** Build column menu handler object for a single column */
+    buildColumnMenuHandlers(columnId) {
+        return {
+            onPinLeft: () => this.onPinColumn(columnId, 'left'),
+            onPinRight: () => this.onPinColumn(columnId, 'right'),
+            onUnpin: () => this.onUnpinColumn(columnId),
+            onSortAsc: () => this.onSortAsc(columnId),
+            onSortDesc: () => this.onSortDesc(columnId),
+            onClearSort: () => this.onClearSort(columnId),
+            onAutosizeThis: () => this.onAutosizeColumn(columnId),
+            onAutosizeAll: () => this.onAutosizeAllColumns(),
+            onClose: () => { }
+        };
+    }
+    /** Get memoized handlers for a column */
+    getColumnMenuHandlersMemoized(columnId) {
+        return this.columnMenuHandlersMap().get(columnId) ?? this.buildColumnMenuHandlers(columnId);
+    }
     getCellDescriptor(item, col, rowIndex, colIdx) {
         return getCellRenderDescriptor(item, col, rowIndex, colIdx, this.cellDescriptorInput());
     }
@@ -330,6 +375,48 @@ export class BaseDataGridTableComponent {
             cancelPopoverEdit: () => this.cancelPopoverEdit(),
         });
     }
+    /** Check if a specific cell is the active cell (PrimeNG inline template helper). */
+    isActiveCell(rowIndex, colIdx) {
+        const ac = this.activeCell();
+        if (!ac)
+            return false;
+        return ac.rowIndex === rowIndex && ac.columnIndex === colIdx + this.colOffset();
+    }
+    /** Check if a cell is within the current selection range (PrimeNG inline template helper). */
+    isInSelectionRange(rowIndex, colIdx) {
+        const range = this.selectionRange();
+        if (!range)
+            return false;
+        const minR = Math.min(range.startRow, range.endRow);
+        const maxR = Math.max(range.startRow, range.endRow);
+        const minC = Math.min(range.startCol, range.endCol);
+        const maxC = Math.max(range.startCol, range.endCol);
+        return rowIndex >= minR && rowIndex <= maxR && colIdx >= minC && colIdx <= maxC;
+    }
+    /** Check if a cell is the selection end cell for fill handle display. */
+    isSelectionEndCell(rowIndex, colIdx) {
+        const range = this.selectionRange();
+        if (!range || this.isDragging() || this.copyRange() || this.cutRange())
+            return false;
+        return rowIndex === range.endRow && colIdx === range.endCol;
+    }
+    /** Get cell background color based on selection state. */
+    getCellBackground(rowIndex, colIdx) {
+        if (this.isInSelectionRange(rowIndex, colIdx))
+            return 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))';
+        return null;
+    }
+    /** Resolve editor type from column definition. */
+    getEditorType(col, _item) {
+        if (col.cellEditor === 'text' || col.cellEditor === 'select' || col.cellEditor === 'checkbox' || col.cellEditor === 'date' || col.cellEditor === 'richSelect') {
+            return col.cellEditor;
+        }
+        if (col.type === 'date')
+            return 'date';
+        if (col.type === 'boolean')
+            return 'checkbox';
+        return 'text';
+    }
     getSelectValues(col) {
         const params = col.cellEditorParams;
         if (params && typeof params === 'object' && 'values' in params) {
@@ -524,7 +611,7 @@ export class BaseDataGridTableComponent {
             ...this.columnSizingOverrides(),
             [columnId]: { widthPx: width },
         });
-        this.state().layout.onColumnResized?.(columnId, width);
+        (this.state().layout.onAutosizeColumn ?? this.state().layout.onColumnResized)?.(columnId, width);
     }
     onAutosizeAllColumns() {
         const tableEl = this.tableContainerEl() ?? undefined;
@@ -532,7 +619,7 @@ export class BaseDataGridTableComponent {
         for (const col of this.visibleCols()) {
             const width = measureColumnContentWidth(col.columnId, col.minWidth, tableEl);
             overrides[col.columnId] = { widthPx: width };
-            this.state().layout.onColumnResized?.(col.columnId, width);
+            (this.state().layout.onAutosizeColumn ?? this.state().layout.onColumnResized)?.(col.columnId, width);
         }
         this.state().layout.setColumnSizingOverrides({
             ...this.columnSizingOverrides(),

package/dist/esm/components/base-popover-cell-editor.component.js

@@ -0,0 +1,115 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Input, ViewChild, Injector, EnvironmentInjector, inject, signal, effect, createComponent } from '@angular/core';
+/**
+ * Shared popover cell editor template used by all Angular UI packages.
+ */
+export const POPOVER_CELL_EDITOR_TEMPLATE = `
+    <div #anchorEl
+      class="ogrid-popover-anchor"
+      [attr.data-row-index]="rowIndex"
+      [attr.data-col-index]="globalColIndex"
+    >
+      {{ displayValue }}
+    </div>
+    @if (showEditor()) {
+      <div class="ogrid-popover-editor-overlay" (click)="handleOverlayClick()">
+        <div class="ogrid-popover-editor-content" #editorContainer></div>
+      </div>
+    }
+`;
+/**
+ * Shared overlay + content styles for popover cell editors.
+ * Subclasses provide their own .ogrid-popover-anchor styles.
+ */
+export const POPOVER_CELL_EDITOR_OVERLAY_STYLES = `
+    :host { display: contents; }
+    .ogrid-popover-editor-overlay {
+      position: fixed; inset: 0; z-index: 1000;
+      background: rgba(0,0,0,0.3);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .ogrid-popover-editor-content {
+      background: var(--ogrid-bg, #ffffff); border-radius: 4px; padding: 16px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      max-width: 90vw; max-height: 90vh; overflow: auto;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+`;
+/**
+ * Abstract base class for Angular popover cell editors.
+ * Contains all shared inputs, ViewChild refs, effects, and overlay click handling.
+ *
+ * Subclasses only need a @Component decorator with selector, template, and
+ * framework-specific .ogrid-popover-anchor CSS styles.
+ */
+export class BasePopoverCellEditorComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.envInjector = inject(EnvironmentInjector);
+        this.showEditor = signal(false);
+        // Show editor after anchor is rendered
+        effect(() => {
+            const anchor = this.anchorRef;
+            if (anchor) {
+                setTimeout(() => this.showEditor.set(true), 0);
+            }
+        });
+        // Render custom editor component when container is available
+        effect(() => {
+            const container = this.editorContainerRef;
+            const props = this.editorProps;
+            const col = this.column;
+            if (!container || !this.showEditor() || typeof col.cellEditor !== 'function')
+                return;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const EditorComponent = col.cellEditor; // ComponentType
+            const componentRef = createComponent(EditorComponent, {
+                environmentInjector: this.envInjector,
+                elementInjector: this.injector,
+            });
+            // Pass props to component instance
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            Object.assign(componentRef.instance, props);
+            componentRef.changeDetectorRef.detectChanges();
+            // Append to DOM
+            container.nativeElement.appendChild(componentRef.location.nativeElement);
+            // Cleanup on destroy
+            return () => componentRef.destroy();
+        });
+    }
+    handleOverlayClick() {
+        this.onCancel();
+    }
+}
+__decorate([
+    Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "item", void 0);
+__decorate([
+    Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "column", void 0);
+__decorate([
+    Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "rowIndex", void 0);
+__decorate([
+    Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "globalColIndex", void 0);
+__decorate([
+    Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "displayValue", void 0);
+__decorate([
+    Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "editorProps", void 0);
+__decorate([
+    Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "onCancel", void 0);
+__decorate([
+    ViewChild('anchorEl')
+], BasePopoverCellEditorComponent.prototype, "anchorRef", void 0);
+__decorate([
+    ViewChild('editorContainer')
+], BasePopoverCellEditorComponent.prototype, "editorContainerRef", void 0);

package/dist/esm/components/empty-state.component.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 let EmptyStateComponent = class EmptyStateComponent {
     constructor() {
@@ -30,6 +30,7 @@ EmptyStateComponent = __decorate([
     Component({
         selector: 'ogrid-empty-state',
         standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
         imports: [CommonModule],
         styles: [`
     .ogrid-empty-state-clear-btn {

package/dist/esm/components/grid-context-menu.component.js

@@ -4,8 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Input, Output, EventEmitter, ViewChild, DestroyRef, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter, ViewChild, DestroyRef, inject, ChangeDetectionStrategy } from '@angular/core';
 import { GRID_CONTEXT_MENU_ITEMS, formatShortcut } from '@alaarab/ogrid-core';
 let GridContextMenuComponent = class GridContextMenuComponent {
     constructor() {
@@ -119,7 +118,7 @@ GridContextMenuComponent = __decorate([
     Component({
         selector: 'ogrid-context-menu',
         standalone: true,
-        imports: [CommonModule],
+        changeDetection: ChangeDetectionStrategy.OnPush,
         template: `
     <div
       #menuRef

package/dist/esm/components/inline-cell-editor-template.js

@@ -0,0 +1,107 @@
+/**
+ * Shared inline cell editor template used by all Angular UI packages.
+ * The template is identical across Material, PrimeNG, and Radix implementations.
+ */
+export const INLINE_CELL_EDITOR_TEMPLATE = `
+    @switch (editorType) {
+      @case ('text') {
+        <input
+          #inputEl
+          type="text"
+          [value]="localValue()"
+          (input)="localValue.set($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          [style]="getInputStyle()"
+        />
+      }
+      @case ('richSelect') {
+        <div #richSelectWrapper
+             style="width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative">
+          <input
+            #richSelectInput
+            type="text"
+            [value]="searchText()"
+            (input)="onRichSelectSearch($any($event.target).value)"
+            (keydown)="onRichSelectKeyDown($event)"
+            placeholder="Search..."
+            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)">
+            @for (opt of filteredOptions(); track opt; let i = $index) {
+              <div role="option"
+                   [attr.aria-selected]="i === highlightedIndex()"
+                   (click)="commitValue(opt)"
+                   [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)'">
+                {{ getDisplayText(opt) }}
+              </div>
+            }
+            @if (filteredOptions().length === 0) {
+              <div style="padding:6px 8px;color:var(--ogrid-muted, #999)">No matches</div>
+            }
+          </div>
+        </div>
+      }
+      @case ('select') {
+        <div #selectWrapper tabindex="0"
+             style="width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative"
+             (keydown)="onCustomSelectKeyDown($event)">
+          <div style="display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;font-size:13px;color:inherit">
+            <span>{{ getDisplayText(value) }}</span>
+            <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)">
+            @for (opt of selectOptions(); track opt; let i = $index) {
+              <div role="option"
+                   [attr.aria-selected]="i === highlightedIndex()"
+                   (click)="commitValue(opt)"
+                   [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)'">
+                {{ getDisplayText(opt) }}
+              </div>
+            }
+          </div>
+        </div>
+      }
+      @case ('checkbox') {
+        <div style="display:flex;align-items:center;justify-content:center;width:100%;height:100%">
+          <input
+            type="checkbox"
+            [checked]="!!localValue()"
+            (change)="commitValue($any($event.target).checked)"
+            (keydown)="onCheckboxKeyDown($event)"
+          />
+        </div>
+      }
+      @case ('date') {
+        <input
+          #inputEl
+          type="date"
+          [value]="localValue()"
+          (change)="commitValue($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          [style]="getInputStyle()"
+        />
+      }
+      @default {
+        <input
+          #inputEl
+          type="text"
+          [value]="localValue()"
+          (input)="localValue.set($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          [style]="getInputStyle()"
+        />
+      }
+    }
+`;
+export const INLINE_CELL_EDITOR_STYLES = `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+`;

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

@@ -4,8 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Input, signal, DestroyRef, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, Input, signal, DestroyRef, inject, ChangeDetectionStrategy } from '@angular/core';
 import { measureRange, injectGlobalStyles } from '@alaarab/ogrid-core';
 let MarchingAntsOverlayComponent = class MarchingAntsOverlayComponent {
     constructor() {
@@ -112,7 +111,7 @@ MarchingAntsOverlayComponent = __decorate([
     Component({
         selector: 'ogrid-marching-ants-overlay',
         standalone: true,
-        imports: [CommonModule],
+        changeDetection: ChangeDetectionStrategy.OnPush,
         styles: [`
     .ogrid-marching-ants-svg { position: absolute; pointer-events: none; overflow: visible; }
     .ogrid-marching-ants-svg--selection { z-index: 4; }

package/dist/esm/components/ogrid-layout.component.js

@@ -4,8 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 import { SideBarComponent } from './sidebar.component';
 import { GRID_BORDER_RADIUS } from '@alaarab/ogrid-core';
 let OGridLayoutComponent = class OGridLayoutComponent {
@@ -37,7 +36,8 @@ OGridLayoutComponent = __decorate([
         selector: 'ogrid-layout',
         standalone: true,
         encapsulation: ViewEncapsulation.None,
-        imports: [CommonModule, SideBarComponent],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        imports: [SideBarComponent],
         styles: [`
     /* ─── OGrid Theme Variables ─── */
     :root {

package/dist/esm/components/sidebar.component.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 const PANEL_WIDTH = 240;
 const TAB_WIDTH = 36;
@@ -100,6 +100,7 @@ SideBarComponent = __decorate([
     Component({
         selector: 'ogrid-sidebar',
         standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
         imports: [CommonModule],
         styles: [`
     .ogrid-sidebar-root { display: flex; flex-direction: row; flex-shrink: 0; }

package/dist/esm/components/status-bar.component.js

@@ -4,8 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { getStatusBarParts } from '@alaarab/ogrid-core';
 let StatusBarComponent = class StatusBarComponent {
     constructor() {
@@ -52,7 +51,7 @@ StatusBarComponent = __decorate([
     Component({
         selector: 'ogrid-status-bar',
         standalone: true,
-        imports: [CommonModule],
+        changeDetection: ChangeDetectionStrategy.OnPush,
         template: `
     <div [class]="classNames?.statusBar ?? ''" role="status" aria-live="polite">
       @for (part of getParts(); track part.key) {

package/dist/esm/index.js

@@ -20,4 +20,8 @@ export { BaseColumnHeaderFilterComponent } from './components/base-column-header
 export { BaseColumnChooserComponent } from './components/base-column-chooser.component';
 export { BasePaginationControlsComponent } from './components/base-pagination-controls.component';
 export { BaseInlineCellEditorComponent } from './components/base-inline-cell-editor.component';
+export { INLINE_CELL_EDITOR_TEMPLATE, INLINE_CELL_EDITOR_STYLES } from './components/inline-cell-editor-template';
+export { BasePopoverCellEditorComponent, POPOVER_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES } from './components/base-popover-cell-editor.component';
+// Shared styles
+export { OGRID_THEME_VARS_CSS } from './styles/ogrid-theme-vars';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Injectable, signal, computed, effect, DestroyRef, inject } from '@angular/core';
+import { Injectable, signal, computed, effect, DestroyRef, inject, NgZone } from '@angular/core';
 import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations, getCellValue, normalizeSelectionRange, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, UndoRedoStack, findCtrlArrowTarget, computeTabNavigation, formatSelectionAsTsv, parseTsvClipboard, rangesEqual, } from '@alaarab/ogrid-core';
 /**
  * Single orchestration service for DataGridTable. Takes grid props,
@@ -15,6 +15,7 @@ import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregat
 let DataGridStateService = class DataGridStateService {
     constructor() {
         this.destroyRef = inject(DestroyRef);
+        this.ngZone = inject(NgZone);
         // --- Input signals ---
         this.props = signal(null);
         this.wrapperEl = signal(null);
@@ -39,6 +40,9 @@ let DataGridStateService = class DataGridStateService {
         this.redoLengthSig = signal(0);
         // Fill handle state
         this.fillDragStart = null;
+        this.fillRafId = 0;
+        this.fillMoveHandler = null;
+        this.fillUpHandler = null;
         // Row selection
         this.lastClickedRow = -1;
         // Drag selection refs
@@ -61,10 +65,12 @@ let DataGridStateService = class DataGridStateService {
             const p = this.props();
             return p ? p.cellSelection !== false : true;
         });
-        // Undo/redo wrapped callback
+        // Narrow signal extractors — prevent full props() dependency in effects/computed
+        this.originalOnCellValueChanged = computed(() => this.props()?.onCellValueChanged);
+        this.initialColumnWidthsSig = computed(() => this.props()?.initialColumnWidths);
+        // Undo/redo wrapped callback — only recomputes when the actual callback reference changes
         this.wrappedOnCellValueChanged = computed(() => {
-            const p = this.props();
-            const original = p?.onCellValueChanged;
+            const original = this.originalOnCellValueChanged();
             if (!original)
                 return undefined;
             return (event) => {
@@ -202,29 +208,33 @@ let DataGridStateService = class DataGridStateService {
             return p.items.length === 0 && !!p.emptyState && !p.isLoading;
         });
         // Setup window event listeners for cell selection drag
-        // Using effect with cleanup return to ensure proper removal on destroy
+        // Run outside NgZone to avoid 60Hz change detection during drag
         effect((onCleanup) => {
             const onMove = (e) => this.onWindowMouseMove(e);
             const onUp = () => this.onWindowMouseUp();
-            window.addEventListener('mousemove', onMove, true);
-            window.addEventListener('mouseup', onUp, true);
+            this.ngZone.runOutsideAngular(() => {
+                window.addEventListener('mousemove', onMove, true);
+                window.addEventListener('mouseup', onUp, true);
+            });
             onCleanup(() => {
                 window.removeEventListener('mousemove', onMove, true);
                 window.removeEventListener('mouseup', onUp, true);
             });
         });
         // Initialize column sizing overrides from initial widths
+        // Only track initialColumnWidths, not all props
         effect(() => {
-            const p = this.props();
-            if (p?.initialColumnWidths) {
+            const widths = this.initialColumnWidthsSig();
+            if (widths) {
                 const result = {};
-                for (const [id, width] of Object.entries(p.initialColumnWidths)) {
+                for (const [id, width] of Object.entries(widths)) {
                     result[id] = { widthPx: width };
                 }
                 this.columnSizingOverridesSig.set(result);
             }
         });
         // Container width measurement via ResizeObserver
+        // Run outside NgZone — signal.set() inside still triggers Angular reactivity
         effect(() => {
             const el = this.wrapperEl();
             if (this.resizeObserver) {
@@ -240,16 +250,22 @@ let DataGridStateService = class DataGridStateService {
                     (parseFloat(cs.borderRightWidth || '0') || 0);
                 this.containerWidthSig.set(Math.max(0, rect.width - borderX));
             };
-            this.resizeObserver = new ResizeObserver(measure);
-            this.resizeObserver.observe(el);
+            this.ngZone.runOutsideAngular(() => {
+                this.resizeObserver = new ResizeObserver(measure);
+                this.resizeObserver.observe(el);
+            });
             measure();
         });
-        // Cleanup on destroy — null out refs to prevent accidental reuse after teardown
+        // Cleanup on destroy — cancel pending work and release references
         this.destroyRef.onDestroy(() => {
             if (this.rafId) {
                 cancelAnimationFrame(this.rafId);
                 this.rafId = 0;
             }
+            if (this.fillRafId) {
+                cancelAnimationFrame(this.fillRafId);
+                this.fillRafId = 0;
+            }
             if (this.autoScrollInterval) {
                 clearInterval(this.autoScrollInterval);
                 this.autoScrollInterval = null;
@@ -258,6 +274,17 @@ let DataGridStateService = class DataGridStateService {
                 this.resizeObserver.disconnect();
                 this.resizeObserver = null;
             }
+            // Remove fill-handle window listeners if active
+            if (this.fillMoveHandler) {
+                window.removeEventListener('mousemove', this.fillMoveHandler, true);
+                this.fillMoveHandler = null;
+            }
+            if (this.fillUpHandler) {
+                window.removeEventListener('mouseup', this.fillUpHandler, true);
+                this.fillUpHandler = null;
+            }
+            // Clear undo/redo stack to release closure references
+            this.undoRedoStack.clear();
         });
         // Clean up column sizing overrides for removed columns
         effect(() => {
@@ -956,6 +983,7 @@ let DataGridStateService = class DataGridStateService {
             columnSizingOverrides: this.columnSizingOverridesSig(),
             setColumnSizingOverrides: (overrides) => this.columnSizingOverridesSig.set(overrides),
             onColumnResized: p?.onColumnResized,
+            onAutosizeColumn: p?.onAutosizeColumn,
         };
         const rowSelection = {
             selectedRowIds: this.selectedRowIds(),
@@ -1191,7 +1219,6 @@ let DataGridStateService = class DataGridStateService {
         const fillStart = this.fillDragStart;
         let fillDragEnd = { endRow: fillStart.startRow, endCol: fillStart.startCol };
         let liveFillRange = null;
-        let fillRafId = 0;
         let lastFillMousePos = null;
         const resolveRange = (cx, cy) => {
             const target = document.elementFromPoint(cx, cy);
@@ -1211,10 +1238,10 @@ let DataGridStateService = class DataGridStateService {
         };
         const onMove = (e) => {
             lastFillMousePos = { cx: e.clientX, cy: e.clientY };
-            if (fillRafId)
-                cancelAnimationFrame(fillRafId);
-            fillRafId = requestAnimationFrame(() => {
-                fillRafId = 0;
+            if (this.fillRafId)
+                cancelAnimationFrame(this.fillRafId);
+            this.fillRafId = requestAnimationFrame(() => {
+                this.fillRafId = 0;
                 if (!lastFillMousePos)
                     return;
                 const newRange = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
@@ -1233,9 +1260,11 @@ let DataGridStateService = class DataGridStateService {
         const onUp = () => {
             window.removeEventListener('mousemove', onMove, true);
             window.removeEventListener('mouseup', onUp, true);
-            if (fillRafId) {
-                cancelAnimationFrame(fillRafId);
-                fillRafId = 0;
+            this.fillMoveHandler = null;
+            this.fillUpHandler = null;
+            if (this.fillRafId) {
+                cancelAnimationFrame(this.fillRafId);
+                this.fillRafId = 0;
             }
             if (lastFillMousePos) {
                 const flushed = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
@@ -1281,12 +1310,14 @@ let DataGridStateService = class DataGridStateService {
                 this.endBatch();
             }
             this.fillDragStart = null;
-            // Remove event listeners after mouseup completes
-            window.removeEventListener('mousemove', onMove, true);
-            window.removeEventListener('mouseup', onUp, true);
         };
-        window.addEventListener('mousemove', onMove, true);
-        window.addEventListener('mouseup', onUp, true);
+        // Track handlers for cleanup on destroy
+        this.fillMoveHandler = onMove;
+        this.fillUpHandler = onUp;
+        this.ngZone.runOutsideAngular(() => {
+            window.addEventListener('mousemove', onMove, true);
+            window.addEventListener('mouseup', onUp, true);
+        });
     }
 };
 DataGridStateService = __decorate([

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

@@ -37,6 +37,7 @@ let OGridService = class OGridService {
         this.columnOrder = signal(undefined);
         this.onColumnOrderChange = signal(undefined);
         this.onColumnResized = signal(undefined);
+        this.onAutosizeColumn = signal(undefined);
         this.onColumnPinned = signal(undefined);
         this.defaultPageSize = signal(DEFAULT_PAGE_SIZE);
         this.defaultSortBy = signal(undefined);
@@ -51,6 +52,7 @@ let OGridService = class OGridService {
         this.editable = signal(undefined);
         this.cellSelection = signal(undefined);
         this.density = signal('normal');
+        this.rowHeight = signal(undefined);
         this.onCellValueChanged = signal(undefined);
         this.onUndo = signal(undefined);
         this.onRedo = signal(undefined);
@@ -207,6 +209,14 @@ let OGridService = class OGridService {
             toggle: (panel) => this.sideBarActivePanel.update((p) => p === panel ? null : panel),
             close: () => this.sideBarActivePanel.set(null),
         }));
+        // --- Pre-computed stable callback references for dataGridProps ---
+        // These avoid recreating arrow functions on every dataGridProps recomputation.
+        this.handleSortFn = (columnKey, direction) => this.handleSort(columnKey, direction);
+        this.handleColumnResizedFn = (columnId, width) => this.handleColumnResized(columnId, width);
+        this.handleColumnPinnedFn = (columnId, pinned) => this.handleColumnPinned(columnId, pinned);
+        this.handleSelectionChangeFn = (event) => this.handleSelectionChange(event);
+        this.handleFilterChangeFn = (key, value) => this.handleFilterChange(key, value);
+        this.clearAllFiltersFn = () => this.setFilters({});
         // --- Data grid props computed ---
         this.dataGridProps = computed(() => ({
             items: this.displayItems(),
@@ -214,17 +224,19 @@ let OGridService = class OGridService {
             getRowId: this.getRowId(),
             sortBy: this.sort().field,
             sortDirection: this.sort().direction,
-            onColumnSort: (columnKey, direction) => this.handleSort(columnKey, direction),
+            onColumnSort: this.handleSortFn,
             visibleColumns: this.visibleColumns(),
             columnOrder: this.columnOrder(),
             onColumnOrderChange: this.onColumnOrderChange(),
-            onColumnResized: (columnId, width) => this.handleColumnResized(columnId, width),
-            onColumnPinned: (columnId, pinned) => this.handleColumnPinned(columnId, pinned),
+            onColumnResized: this.handleColumnResizedFn,
+            onAutosizeColumn: this.onAutosizeColumn(),
+            onColumnPinned: this.handleColumnPinnedFn,
             pinnedColumns: this.pinnedOverrides(),
             initialColumnWidths: this.columnWidthOverrides(),
             editable: this.editable(),
             cellSelection: this.cellSelection(),
             density: this.density(),
+            rowHeight: this.rowHeight(),
             onCellValueChanged: this.onCellValueChanged(),
             onUndo: this.onUndo(),
             onRedo: this.onRedo(),
@@ -232,11 +244,11 @@ let OGridService = class OGridService {
             canRedo: this.canRedo(),
             rowSelection: this.rowSelection(),
             selectedRows: this.effectiveSelectedRows(),
-            onSelectionChange: (event) => this.handleSelectionChange(event),
+            onSelectionChange: this.handleSelectionChangeFn,
             statusBar: this.statusBarConfig(),
             isLoading: this.isLoadingResolved(),
             filters: this.filters(),
-            onFilterChange: (key, value) => this.handleFilterChange(key, value),
+            onFilterChange: this.handleFilterChangeFn,
             filterOptions: this.clientFilterOptions(),
             loadingFilterOptions: this.dataSource()?.fetchFilterOptions ? this.loadingFilterOptions() : EMPTY_LOADING_OPTIONS,
             peopleSearch: this.dataSource()?.searchPeople?.bind(this.dataSource()),
@@ -249,7 +261,7 @@ let OGridService = class OGridService {
             'aria-labelledby': this.ariaLabelledBy(),
             emptyState: {
                 hasActiveFilters: this.hasActiveFilters(),
-                onClearAll: () => this.setFilters({}),
+                onClearAll: this.clearAllFiltersFn,
                 message: this.emptyState()?.message,
                 render: this.emptyState()?.render,
             },
@@ -369,6 +381,24 @@ let OGridService = class OGridService {
                 this.sideBarActivePanel.set(parsed.defaultPanel);
             }
         });
+        // Cleanup on destroy — reset callback signals to prevent closure retention
+        this.destroyRef.onDestroy(() => {
+            this.onPageChange.set(undefined);
+            this.onPageSizeChange.set(undefined);
+            this.onSortChange.set(undefined);
+            this.onFiltersChange.set(undefined);
+            this.onVisibleColumnsChange.set(undefined);
+            this.onColumnOrderChange.set(undefined);
+            this.onColumnResized.set(undefined);
+            this.onAutosizeColumn.set(undefined);
+            this.onColumnPinned.set(undefined);
+            this.onCellValueChanged.set(undefined);
+            this.onSelectionChange.set(undefined);
+            this.onFirstDataRendered.set(undefined);
+            this.onError.set(undefined);
+            this.onUndo.set(undefined);
+            this.onRedo.set(undefined);
+        });
     }
     // --- Setters ---
     setPage(p) {
@@ -469,6 +499,8 @@ let OGridService = class OGridService {
             this.onColumnOrderChange.set(props.onColumnOrderChange);
         if (props.onColumnResized)
             this.onColumnResized.set(props.onColumnResized);
+        if (props.onAutosizeColumn)
+            this.onAutosizeColumn.set(props.onAutosizeColumn);
         if (props.onColumnPinned)
             this.onColumnPinned.set(props.onColumnPinned);
         if (props.defaultPageSize !== undefined)
@@ -483,6 +515,8 @@ let OGridService = class OGridService {
             this.cellSelection.set(props.cellSelection);
         if (props.density !== undefined)
             this.density.set(props.density);
+        if (props.rowHeight !== undefined)
+            this.rowHeight.set(props.rowHeight);
         if (props.onCellValueChanged)
             this.onCellValueChanged.set(props.onCellValueChanged);
         if (props.onUndo)

package/dist/esm/styles/ogrid-theme-vars.js

@@ -0,0 +1,53 @@
+/**
+ * Shared OGrid CSS theme variables (light + dark mode).
+ * Used by all Angular UI packages (Material, PrimeNG, Radix) to avoid duplication.
+ */
+export const OGRID_THEME_VARS_CSS = `
+/* ─── OGrid Theme Variables ─── */
+:root {
+  --ogrid-bg: #ffffff;
+  --ogrid-fg: rgba(0, 0, 0, 0.87);
+  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-border: rgba(0, 0, 0, 0.12);
+  --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: #0078d4;
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --ogrid-bg: #1e1e1e;
+    --ogrid-fg: rgba(255, 255, 255, 0.87);
+    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-border: rgba(255, 255, 255, 0.12);
+    --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+    --ogrid-selected-row-bg: #1a3a5c;
+    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+    --ogrid-accent: #4da6ff;
+    --ogrid-selection-color: #2ea043;
+    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  }
+}
+[data-theme="dark"] {
+  --ogrid-bg: #1e1e1e;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+  --ogrid-accent: #4da6ff;
+  --ogrid-selection-color: #2ea043;
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+}`;

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

@@ -19,6 +19,8 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly virtualScrollService: VirtualScrollService;
     protected lastMouseShift: boolean;
     readonly columnSizingVersion: import("@angular/core").WritableSignal<number>;
+    /** Dirty flag — set when column layout changes, cleared after measurement. */
+    private measureDirty;
     /** DOM-measured column widths from the last layout pass.
      *  Used as a minWidth floor to prevent columns from shrinking
      *  when new data loads (e.g. server-side pagination). */
@@ -33,7 +35,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     protected abstract getTableContainerRef(): ElementRef<HTMLElement> | undefined;
     /** Lifecycle hook — populate element signals from @ViewChild refs */
     ngAfterViewInit(): void;
-    /** Lifecycle hook — re-measure column widths after each view update */
+    /** Lifecycle hook — re-measure column widths only when layout changed */
     ngAfterViewChecked(): void;
     /** Measure actual th widths from the DOM and update the measuredColumnWidths signal.
      *  Only updates the signal when values actually change, to avoid render loops. */
@@ -46,6 +48,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly isLoading: import("@angular/core").Signal<boolean>;
     readonly loadingMessage: import("@angular/core").Signal<string>;
     readonly layoutModeFit: import("@angular/core").Signal<boolean>;
+    readonly rowHeightCssVar: import("@angular/core").Signal<string | null>;
     readonly ariaLabel: import("@angular/core").Signal<string>;
     readonly ariaLabelledBy: import("@angular/core").Signal<string | undefined>;
     readonly emptyState: import("@angular/core").Signal<{
@@ -169,10 +172,46 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     visibleColIndex(col: IColumnDef<T>): number;
     getColumnWidth(col: IColumnDef<T>): number;
     getFilterConfig(col: IColumnDef<T>): HeaderFilterConfig;
+    /** Memoized column menu handlers — avoids recreating objects on every CD cycle */
+    protected readonly columnMenuHandlersMap: import("@angular/core").Signal<Map<string, {
+        onPinLeft: () => void;
+        onPinRight: () => void;
+        onUnpin: () => void;
+        onSortAsc: () => void;
+        onSortDesc: () => void;
+        onClearSort: () => void;
+        onAutosizeThis: () => void;
+        onAutosizeAll: () => void;
+        onClose: () => void;
+    }>>;
+    /** Build column menu handler object for a single column */
+    private buildColumnMenuHandlers;
+    /** Get memoized handlers for a column */
+    getColumnMenuHandlersMemoized(columnId: string): {
+        onPinLeft: () => void;
+        onPinRight: () => void;
+        onUnpin: () => void;
+        onSortAsc: () => void;
+        onSortDesc: () => void;
+        onClearSort: () => void;
+        onAutosizeThis: () => void;
+        onAutosizeAll: () => void;
+        onClose: () => void;
+    };
     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;
     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;
+    /** Check if a cell is within the current selection range (PrimeNG inline template helper). */
+    isInSelectionRange(rowIndex: number, colIdx: number): boolean;
+    /** Check if a cell is the selection end cell for fill handle display. */
+    isSelectionEndCell(rowIndex: number, colIdx: number): boolean;
+    /** Get cell background color based on selection state. */
+    getCellBackground(rowIndex: number, colIdx: number): string | null;
+    /** Resolve editor type from column definition. */
+    getEditorType(col: IColumnDef<T>, _item: T): 'text' | 'select' | 'checkbox' | 'date' | 'richSelect';
     getSelectValues(col: IColumnDef<T>): string[];
     formatDateForInput(value: unknown): string;
     getPinnedLeftOffset(columnId: string): number | null;

package/dist/types/components/base-popover-cell-editor.component.d.ts

@@ -0,0 +1,33 @@
+import type { IColumnDef, ICellEditorProps } from '../types';
+/**
+ * Shared popover cell editor template used by all Angular UI packages.
+ */
+export declare const POPOVER_CELL_EDITOR_TEMPLATE = "\n    <div #anchorEl\n      class=\"ogrid-popover-anchor\"\n      [attr.data-row-index]=\"rowIndex\"\n      [attr.data-col-index]=\"globalColIndex\"\n    >\n      {{ displayValue }}\n    </div>\n    @if (showEditor()) {\n      <div class=\"ogrid-popover-editor-overlay\" (click)=\"handleOverlayClick()\">\n        <div class=\"ogrid-popover-editor-content\" #editorContainer></div>\n      </div>\n    }\n";
+/**
+ * Shared overlay + content styles for popover cell editors.
+ * Subclasses provide their own .ogrid-popover-anchor styles.
+ */
+export declare const POPOVER_CELL_EDITOR_OVERLAY_STYLES = "\n    :host { display: contents; }\n    .ogrid-popover-editor-overlay {\n      position: fixed; inset: 0; z-index: 1000;\n      background: rgba(0,0,0,0.3);\n      display: flex; align-items: center; justify-content: center;\n    }\n    .ogrid-popover-editor-content {\n      background: var(--ogrid-bg, #ffffff); border-radius: 4px; padding: 16px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      max-width: 90vw; max-height: 90vh; overflow: auto;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n";
+/**
+ * Abstract base class for Angular popover cell editors.
+ * Contains all shared inputs, ViewChild refs, effects, and overlay click handling.
+ *
+ * Subclasses only need a @Component decorator with selector, template, and
+ * framework-specific .ogrid-popover-anchor CSS styles.
+ */
+export declare abstract class BasePopoverCellEditorComponent<T = unknown> {
+    item: T;
+    column: IColumnDef<T>;
+    rowIndex: number;
+    globalColIndex: number;
+    displayValue: unknown;
+    editorProps: ICellEditorProps<T>;
+    onCancel: () => void;
+    private anchorRef?;
+    private editorContainerRef?;
+    private readonly injector;
+    private readonly envInjector;
+    protected readonly showEditor: import("@angular/core").WritableSignal<boolean>;
+    constructor();
+    protected handleOverlayClick(): void;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * 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_STYLES = "\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n";

package/dist/types/index.d.ts

@@ -24,5 +24,8 @@ export { BaseColumnChooserComponent } from './components/base-column-chooser.com
 export type { IColumnChooserProps } from './components/base-column-chooser.component';
 export { BasePaginationControlsComponent } from './components/base-pagination-controls.component';
 export { BaseInlineCellEditorComponent } from './components/base-inline-cell-editor.component';
+export { INLINE_CELL_EDITOR_TEMPLATE, INLINE_CELL_EDITOR_STYLES } from './components/inline-cell-editor-template';
+export { BasePopoverCellEditorComponent, POPOVER_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES } from './components/base-popover-cell-editor.component';
+export { OGRID_THEME_VARS_CSS } from './styles/ogrid-theme-vars';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, } from './utils';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';

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

@@ -21,6 +21,8 @@ export interface DataGridLayoutState<T> {
         widthPx: number;
     }>) => void;
     onColumnResized?: (columnId: string, width: number) => void;
+    /** Called when user requests autosize for a single column (with measured width). */
+    onAutosizeColumn?: (columnId: string, width: number) => void;
 }
 export interface DataGridRowSelectionState {
     selectedRowIds: Set<RowId>;
@@ -113,7 +115,7 @@ export interface DataGridViewModelState<T> {
     };
     statusBarConfig: IStatusBarProps | null;
     showEmptyInGrid: boolean;
-    onCellError?: (error: Error) => void;
+    onCellError?: (error: Error, info: unknown) => void;
 }
 /** Column pinning state and column header menu. */
 export interface DataGridPinningState {
@@ -152,6 +154,7 @@ export interface DataGridStateResult<T> {
  */
 export declare class DataGridStateService<T> {
     private destroyRef;
+    private ngZone;
     readonly props: import("@angular/core").WritableSignal<IOGridDataGridProps<T> | null>;
     readonly wrapperEl: import("@angular/core").WritableSignal<HTMLElement | null>;
     private readonly editingCellSig;
@@ -171,6 +174,9 @@ export declare class DataGridStateService<T> {
     private readonly undoLengthSig;
     private readonly redoLengthSig;
     private fillDragStart;
+    private fillRafId;
+    private fillMoveHandler;
+    private fillUpHandler;
     private lastClickedRow;
     private dragStartPos;
     private dragMoved;
@@ -185,6 +191,8 @@ export declare class DataGridStateService<T> {
     private readonly headerMenuAnchorElementSig;
     private readonly propsResolved;
     readonly cellSelection: import("@angular/core").Signal<boolean>;
+    private readonly originalOnCellValueChanged;
+    private readonly initialColumnWidthsSig;
     private readonly wrappedOnCellValueChanged;
     readonly flatColumnsRaw: import("@angular/core").Signal<IColumnDef<T>[]>;
     readonly flatColumns: import("@angular/core").Signal<IColumnDef<T>[]>;

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

@@ -68,6 +68,7 @@ export declare class OGridService<T> {
     readonly columnOrder: import("@angular/core").WritableSignal<string[] | undefined>;
     readonly onColumnOrderChange: import("@angular/core").WritableSignal<((order: string[]) => void) | undefined>;
     readonly onColumnResized: import("@angular/core").WritableSignal<((columnId: string, width: number) => void) | undefined>;
+    readonly onAutosizeColumn: import("@angular/core").WritableSignal<((columnId: string, width: number) => void) | undefined>;
     readonly onColumnPinned: import("@angular/core").WritableSignal<((columnId: string, pinned: "left" | "right" | null) => void) | undefined>;
     readonly defaultPageSize: import("@angular/core").WritableSignal<number>;
     readonly defaultSortBy: import("@angular/core").WritableSignal<string | undefined>;
@@ -85,6 +86,7 @@ export declare class OGridService<T> {
     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 rowHeight: import("@angular/core").WritableSignal<number | undefined>;
     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>;
@@ -164,6 +166,12 @@ export declare class OGridService<T> {
         filterType: "text" | "multiSelect" | "people" | "date";
     }[]>;
     readonly sideBarState: import("@angular/core").Signal<OGridSideBarState>;
+    private readonly handleSortFn;
+    private readonly handleColumnResizedFn;
+    private readonly handleColumnPinnedFn;
+    private readonly handleSelectionChangeFn;
+    private readonly handleFilterChangeFn;
+    private readonly clearAllFiltersFn;
     readonly dataGridProps: import("@angular/core").Signal<IOGridDataGridProps<T>>;
     readonly pagination: import("@angular/core").Signal<OGridPagination>;
     readonly columnChooser: import("@angular/core").Signal<OGridColumnChooser>;

package/dist/types/styles/ogrid-theme-vars.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Shared OGrid CSS theme variables (light + dark mode).
+ * Used by all Angular UI packages (Material, PrimeNG, Radix) to avoid duplication.
+ */
+export declare const OGRID_THEME_VARS_CSS = "\n/* \u2500\u2500\u2500 OGrid Theme Variables \u2500\u2500\u2500 */\n:root {\n  --ogrid-bg: #ffffff;\n  --ogrid-fg: rgba(0, 0, 0, 0.87);\n  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);\n  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);\n  --ogrid-border: rgba(0, 0, 0, 0.12);\n  --ogrid-header-bg: rgba(0, 0, 0, 0.04);\n  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);\n  --ogrid-selected-row-bg: #e6f0fb;\n  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);\n  --ogrid-range-bg: rgba(33, 115, 70, 0.12);\n  --ogrid-accent: #0078d4;\n  --ogrid-selection-color: #217346;\n  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);\n}\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]) {\n    --ogrid-bg: #1e1e1e;\n    --ogrid-fg: rgba(255, 255, 255, 0.87);\n    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n    --ogrid-border: rgba(255, 255, 255, 0.12);\n    --ogrid-header-bg: rgba(255, 255, 255, 0.06);\n    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n    --ogrid-selected-row-bg: #1a3a5c;\n    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n    --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n    --ogrid-accent: #4da6ff;\n    --ogrid-selection-color: #2ea043;\n    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n  }\n}\n[data-theme=\"dark\"] {\n  --ogrid-bg: #1e1e1e;\n  --ogrid-fg: rgba(255, 255, 255, 0.87);\n  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n  --ogrid-border: rgba(255, 255, 255, 0.12);\n  --ogrid-header-bg: rgba(255, 255, 255, 0.06);\n  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n  --ogrid-selected-row-bg: #1a3a5c;\n  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n  --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n  --ogrid-accent: #4da6ff;\n  --ogrid-selection-color: #2ea043;\n  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n}";

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

@@ -27,6 +27,8 @@ interface IOGridBaseProps<T> {
     columnOrder?: string[];
     onColumnOrderChange?: (order: string[]) => void;
     onColumnResized?: (columnId: string, width: number) => void;
+    /** Called when user requests autosize for a single column (with measured width). */
+    onAutosizeColumn?: (columnId: string, width: number) => void;
     onColumnPinned?: (columnId: string, pinned: 'left' | 'right' | null) => void;
     editable?: boolean;
     cellSelection?: boolean;
@@ -57,10 +59,13 @@ interface IOGridBaseProps<T> {
     sideBar?: boolean | ISideBarDef;
     columnReorder?: boolean;
     virtualScroll?: IVirtualScrollConfig;
+    /** Fixed row height in pixels. Overrides default row height (36px). */
+    rowHeight?: number;
     pageSizeOptions?: number[];
     onFirstDataRendered?: () => void;
     onError?: (error: unknown) => void;
-    onCellError?: (error: Error) => void;
+    onCellError?: (error: Error, info: unknown) => void;
+    showRowNumbers?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
@@ -89,6 +94,8 @@ export interface IOGridDataGridProps<T> {
     columnOrder?: string[];
     onColumnOrderChange?: (order: string[]) => void;
     onColumnResized?: (columnId: string, width: number) => void;
+    /** Called when user requests autosize for a single column (with measured width). */
+    onAutosizeColumn?: (columnId: string, width: number) => void;
     onColumnPinned?: (columnId: string, pinned: 'left' | 'right' | null) => void;
     pinnedColumns?: Record<string, 'left' | 'right'>;
     initialColumnWidths?: Record<string, number>;
@@ -119,13 +126,15 @@ export interface IOGridDataGridProps<T> {
     getUserByEmail?: (email: string) => Promise<UserLike | undefined>;
     columnReorder?: boolean;
     virtualScroll?: IVirtualScrollConfig;
+    /** Fixed row height in pixels. Overrides default row height (36px). */
+    rowHeight?: number;
     emptyState?: {
         onClearAll: () => void;
         hasActiveFilters: boolean;
         message?: string;
         render?: TemplateRef<unknown>;
     };
-    onCellError?: (error: Error) => void;
+    onCellError?: (error: Error, info: unknown) => void;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.0.19",
+  "version": "2.0.22",
   "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.0.19"
+    "@alaarab/ogrid-core": "2.0.22"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",