@alaarab/ogrid-angular-primeng 2.0.18 → 2.0.21

package/dist/esm/column-chooser/column-chooser.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 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { BaseColumnChooserComponent } from '@alaarab/ogrid-angular';
 let ColumnChooserComponent = class ColumnChooserComponent extends BaseColumnChooserComponent {
     // PrimeNG uses 'open' instead of 'isOpen'
@@ -17,7 +16,7 @@ ColumnChooserComponent = __decorate([
     Component({
         selector: 'ogrid-primeng-column-chooser',
         standalone: true,
-        imports: [CommonModule],
+        changeDetection: ChangeDetectionStrategy.OnPush,
         template: `
     <div style="position:relative;display:inline-block">
       <button
@@ -35,7 +34,7 @@ ColumnChooserComponent = __decorate([
 
       @if (open()) {
         <div
-          style="position:absolute;right:0;top:100%;z-index:100;min-width:220px;max-height:320px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);padding:8px 0"
+          style="position:absolute;right:0;top:100%;z-index:1000;min-width:220px;max-height:320px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);padding:8px 0"
         >
           <div style="padding:4px 12px;font-weight:600;font-size:12px;color:var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6))">
             Select Columns ({{ visibleCount() }} of {{ totalCount() }})
@@ -51,7 +50,7 @@ ColumnChooserComponent = __decorate([
               {{ col.name }}
             </label>
           }
-          <div style="display:flex;gap:4px;padding:8px 12px;border-top:1px solid var(--ogrid-border, #e0e0e0);margin-top:4px">
+          <div style="display:flex;gap:4px;padding:8px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));margin-top:4px">
             <button
               type="button"
               class="p-button p-button-text p-button-sm"

package/dist/esm/column-header-filter/column-header-filter.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, ViewChild, DestroyRef, inject, effect } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, ViewChild, DestroyRef, inject, effect, ChangeDetectionStrategy } from '@angular/core';
 import { BaseColumnHeaderFilterComponent } from '@alaarab/ogrid-angular';
 let ColumnHeaderFilterComponent = class ColumnHeaderFilterComponent extends BaseColumnHeaderFilterComponent {
     getHeaderEl() {
@@ -62,7 +61,7 @@ ColumnHeaderFilterComponent = __decorate([
     Component({
         selector: 'ogrid-primeng-column-header-filter',
         standalone: true,
-        imports: [CommonModule],
+        changeDetection: ChangeDetectionStrategy.OnPush,
         template: `
     <div style="display:flex;align-items:center;flex:1;min-width:0;gap:4px">
       <div style="flex:1;min-width:0;overflow:hidden">
@@ -71,19 +70,6 @@ ColumnHeaderFilterComponent = __decorate([
         </span>
       </div>
       <div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
-        @if (onSort) {
-          <button
-            type="button"
-            (click)="handleSortClick()"
-            [attr.aria-label]="'Sort by ' + columnName"
-            [title]="isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort'"
-            style="border:none;background:transparent;cursor:pointer;padding:2px 4px;font-size:12px;color:var(--ogrid-fg, #242424)"
-            [style.font-weight]="isSorted ? 'bold' : 'normal'"
-          >
-            {{ isSorted ? (isSortedDescending ? '\u2193' : '\u2191') : '\u21C5' }}
-          </button>
-        }
-
         @if (filterType !== 'none') {
           <button
             type="button"
@@ -103,9 +89,9 @@ ColumnHeaderFilterComponent = __decorate([
           @if (isFilterOpen()) {
             <div
               #filterPanel
-              style="position:absolute;top:100%;left:0;z-index:200;min-width:200px;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);font-weight:normal"
+              style="position:absolute;top:100%;left:0;z-index:1000;min-width:200px;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);font-weight:normal"
             >
-              <div style="padding:8px 12px;font-weight:600;font-size:12px;border-bottom:1px solid var(--ogrid-border, #e0e0e0)">
+              <div style="padding:8px 12px;font-weight:600;font-size:12px;border-bottom:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
                 Filter: {{ columnName }}
               </div>
 
@@ -116,11 +102,11 @@ ColumnHeaderFilterComponent = __decorate([
                     [value]="tempTextValue()"
                     (input)="tempTextValue.set($any($event.target).value)"
                     placeholder="Filter text..."
-                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
                     [attr.aria-label]="'Filter ' + columnName"
                   />
                 </div>
-                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, #e0e0e0)">
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
                   <button
                     type="button"
                     class="p-button p-button-text p-button-sm"
@@ -144,7 +130,7 @@ ColumnHeaderFilterComponent = __decorate([
                     [value]="searchText()"
                     (input)="searchText.set($any($event.target).value)"
                     placeholder="Search options..."
-                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;font-size:13px;margin-bottom:6px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;margin-bottom:6px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
                     [attr.aria-label]="'Search ' + columnName + ' options'"
                   />
                   @if (isLoadingOptions) {
@@ -168,7 +154,7 @@ ColumnHeaderFilterComponent = __decorate([
                     </div>
                   }
                 </div>
-                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, #e0e0e0)">
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
                   <button
                     type="button"
                     class="p-button p-button-sm"
@@ -191,7 +177,7 @@ ColumnHeaderFilterComponent = __decorate([
                     [value]="peopleSearchText()"
                     (input)="onPeopleSearchInput($any($event.target).value)"
                     placeholder="Search people..."
-                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
                     [attr.aria-label]="'Search people for ' + columnName"
                   />
                   @if (isPeopleLoading()) {
@@ -217,7 +203,7 @@ ColumnHeaderFilterComponent = __decorate([
                       type="date"
                       [value]="tempDateFrom()"
                       (change)="tempDateFrom.set($any($event.target).value)"
-                      style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                      style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
                     />
                   </label>
                   <label style="display:flex;align-items:center;gap:6px;font-size:12px">
@@ -226,11 +212,11 @@ ColumnHeaderFilterComponent = __decorate([
                       type="date"
                       [value]="tempDateTo()"
                       (change)="tempDateTo.set($any($event.target).value)"
-                      style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                      style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
                     />
                   </label>
                 </div>
-                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, #e0e0e0)">
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
                   <button
                     type="button"
                     class="p-button p-button-text p-button-sm"

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Input, signal, computed, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, } from '@angular/core';
-import { BaseDataGridTableComponent, DataGridStateService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, DEFAULT_MIN_COLUMN_WIDTH, getCellValue, resolveCellDisplayContent, resolveCellStyle, } from '@alaarab/ogrid-angular';
+import { BaseDataGridTableComponent, DataGridStateService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, DEFAULT_MIN_COLUMN_WIDTH, OGRID_THEME_VARS_CSS, } from '@alaarab/ogrid-angular';
 import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
 import { ColumnHeaderMenuComponent } from '../column-header-menu/column-header-menu.component';
 import { InlineCellEditorComponent } from './inline-cell-editor.component';
@@ -100,8 +100,26 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
                 this.primengColumnSizingOverrides.set({ ...iw });
             }
         }
-        // Rebuild props signal whenever any input changes so computed chains track it
-        this.propsSignal.set(this.buildProps());
+        // Rebuild props and only set if values actually changed (shallow compare)
+        const next = this.buildProps();
+        const prev = this.propsSignal();
+        if (!prev || !this.shallowEqual(prev, next)) {
+            this.propsSignal.set(next);
+        }
+    }
+    /** Shallow-compare two props objects by their top-level keys. */
+    shallowEqual(a, b) {
+        const aObj = a;
+        const bObj = b;
+        const keysA = Object.keys(aObj);
+        const keysB = Object.keys(bObj);
+        if (keysA.length !== keysB.length)
+            return false;
+        for (const key of keysA) {
+            if (aObj[key] !== bObj[key])
+                return false;
+        }
+        return true;
     }
     // --- Abstract method implementations ---
     getProps() {
@@ -124,94 +142,7 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
     trackByRowId(_index, item) {
         return this.getRowIdInput(item);
     }
-    getCellValueFn(item, col) {
-        return getCellValue(item, col);
-    }
-    resolveCellDisplay(col, item) {
-        const value = getCellValue(item, col);
-        const result = resolveCellDisplayContent(col, item, value);
-        return result != null ? String(result) : '';
-    }
-    getCellStyleObj(col, item) {
-        return resolveCellStyle(col, item) ?? null;
-    }
-    canEditCell(col, item) {
-        const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
-        return this.editable !== false && !!colEditable && this.onCellValueChanged != null && typeof col.cellEditor !== 'function';
-    }
-    isEditingCell(item, col) {
-        const editing = this.editingCell();
-        if (!editing)
-            return false;
-        return editing.rowId === this.getRowIdInput(item) && editing.columnId === col.columnId;
-    }
-    isEditingCellInline(item, col) {
-        return this.isEditingCell(item, col) && typeof col.cellEditor !== 'function';
-    }
-    isEditingCellPopover(item, col) {
-        return this.isEditingCell(item, col) && typeof col.cellEditor === 'function';
-    }
-    buildPopoverEditorPropsForPrimeng(item, col, rowIndex, colIdx) {
-        const oldValue = getCellValue(item, col);
-        const pendingValue = this.pendingEditorValue();
-        const displayValue = pendingValue !== undefined ? pendingValue : oldValue;
-        return {
-            value: displayValue,
-            onValueChange: (value) => this.setPendingEditorValue(value),
-            item,
-            column: col,
-            rowIndex,
-            onCommit: (newValue) => this.onCellEditorCommit(item, col, rowIndex, colIdx, newValue),
-            onCancel: () => this.cancelEdit(),
-        };
-    }
-    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';
-    }
-    isActiveCell(rowIndex, colIdx) {
-        const ac = this.activeCell();
-        if (!ac)
-            return false;
-        return ac.rowIndex === rowIndex && ac.columnIndex === colIdx + this.colOffset();
-    }
-    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;
-    }
-    isSelectionEndCell(rowIndex, colIdx) {
-        const range = this.selectionRange();
-        if (!range || this.isDragging() || this.copyRange() || this.cutRange())
-            return false;
-        return rowIndex === range.endRow && colIdx === range.endCol;
-    }
-    getCellBackground(rowIndex, colIdx) {
-        if (this.isInSelectionRange(rowIndex, colIdx))
-            return 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))';
-        return null;
-    }
     // --- PrimeNG-specific event handlers ---
-    onCellDblClickPrimeng(item, col, _rowIndex, _colIdx) {
-        if (this.canEditCell(col, item)) {
-            this.stateService.setEditingCell({ rowId: this.getRowIdInput(item), columnId: col.columnId });
-        }
-    }
-    onCellEditorCommit(item, col, rowIndex, colIdx, newValue) {
-        const oldValue = getCellValue(item, col);
-        this.stateService.commitCellEdit(item, col.columnId, oldValue, newValue, rowIndex, colIdx + this.colOffset());
-    }
     onSelectAllChangePrimeng(checked) {
         this.state().rowSelection.handleSelectAll(checked);
     }
@@ -222,19 +153,6 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
         const ids = this.selectedRowIds();
         this.state().rowSelection.updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
     }
-    getColumnHeaderMenuHandlers(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: () => { }
-        };
-    }
     onRowCheckboxChangePrimeng(item, checked, rowIndex, _e) {
         const rowId = this.getRowIdInput(item);
         this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
@@ -489,6 +407,7 @@ DataGridTableComponent = __decorate([
         [style.--data-table-column-count]="state().layout.totalColCount"
         [style.--data-table-width]="tableWidthStyle()"
         [style.--data-table-min-width]="tableMinWidthStyle()"
+        [style.--ogrid-row-height]="rowHeightCssVar()"
       >
         <div class="ogrid-table-wrapper">
           <div [class.loading-dimmed]="isLoading() && items().length > 0" class="ogrid-table-wrapper">
@@ -519,7 +438,7 @@ DataGridTableComponent = __decorate([
                       @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
                         <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-row-number-spacer"></th>
                       }
-                      @for (cell of row; track $index; let cellIdx = $index) {
+                      @for (cell of row; track cell.columnDef?.columnId ?? $index; let cellIdx = $index) {
                         @if (cell.isGroup) {
                           <th
                             [attr.colSpan]="cell.colSpan"
@@ -531,10 +450,14 @@ DataGridTableComponent = __decorate([
                         } @else {
                           @let col = asColumnDef(cell.columnDef);
                           @let pinned = isPinned(col.columnId);
+                          @let config = getFilterConfig(col);
+                          @let sortState = getSortState(col.columnId);
+                          @let ariaSort = sortState === 'asc' ? 'ascending' : sortState === 'desc' ? 'descending' : null;
                           <th
                             scope="col"
                             class="ogrid-header-cell"
                             [attr.data-column-id]="col.columnId"
+                            [attr.aria-sort]="ariaSort"
                             [attr.rowSpan]="headerRows().length > 1 && rowIdx < headerRows().length - 1 ? headerRows().length - rowIdx : null"
                             [class.ogrid-th-pinned-left]="pinned === 'left'"
                             [class.ogrid-th-pinned-right]="pinned === 'right'"
@@ -550,33 +473,32 @@ DataGridTableComponent = __decorate([
                               <ogrid-primeng-column-header-filter
                                 [columnKey]="col.columnId"
                                 [columnName]="col.name"
-                                [filterType]="getFilterConfig(col).filterType"
-                                [isSorted]="getFilterConfig(col).isSorted ?? false"
-                                [isSortedDescending]="getFilterConfig(col).isSortedDescending ?? false"
-                                [onSort]="getFilterConfig(col).onSort"
-                                [selectedValues]="getFilterConfig(col).selectedValues"
-                                [onFilterChange]="getFilterConfig(col).onFilterChange"
-                                [options]="getFilterConfig(col).options ?? []"
-                                [isLoadingOptions]="getFilterConfig(col).isLoadingOptions ?? false"
-                                [textValue]="getFilterConfig(col).textValue ?? ''"
-                                [onTextChange]="getFilterConfig(col).onTextChange"
-                                [selectedUser]="getFilterConfig(col).selectedUser"
-                                [onUserChange]="getFilterConfig(col).onUserChange"
-                                [peopleSearch]="getFilterConfig(col).peopleSearch"
-                                [dateValue]="getFilterConfig(col).dateValue"
-                                [onDateChange]="getFilterConfig(col).onDateChange"
+                                [filterType]="config.filterType"
+                                [isSorted]="config.isSorted ?? false"
+                                [isSortedDescending]="config.isSortedDescending ?? false"
+                                [onSort]="config.onSort"
+                                [selectedValues]="config.selectedValues"
+                                [onFilterChange]="config.onFilterChange"
+                                [options]="config.options ?? []"
+                                [isLoadingOptions]="config.isLoadingOptions ?? false"
+                                [textValue]="config.textValue ?? ''"
+                                [onTextChange]="config.onTextChange"
+                                [selectedUser]="config.selectedUser"
+                                [onUserChange]="config.onUserChange"
+                                [peopleSearch]="config.peopleSearch"
+                                [dateValue]="config.dateValue"
+                                [onDateChange]="config.onDateChange"
                               ></ogrid-primeng-column-header-filter>
                               @let colPinState = getPinState(col.columnId);
-                              @let colSortState = getSortState(col.columnId);
                               <column-header-menu
                                 [columnId]="col.columnId"
                                 [canPinLeft]="colPinState.canPinLeft"
                                 [canPinRight]="colPinState.canPinRight"
                                 [canUnpin]="colPinState.canUnpin"
-                                [currentSort]="colSortState"
+                                [currentSort]="sortState"
                                 [isSortable]="col.sortable !== false"
                                 [isResizable]="col.resizable !== false"
-                                [handlers]="getColumnHeaderMenuHandlers(col.columnId)"
+                                [handlers]="getColumnMenuHandlersMemoized(col.columnId)"
                               />
                             </div>
                             <div
@@ -640,44 +562,45 @@ DataGridTableComponent = __decorate([
                             [style.right.px]="pinned === 'right' ? getPinnedRightOffset(col.columnId) : null"
                             [style.text-align]="col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : null"
                           >
-                            @if (isEditingCellInline(item, col)) {
+                            @let descriptor = getCellDescriptor(item, col, rowIndex, colIdx);
+                            @if (descriptor.mode === 'editing-inline') {
                               <div class="ogrid-editing-cell">
                               <ogrid-primeng-inline-cell-editor
-                                [value]="getCellValueFn(item, col)"
+                                [value]="descriptor.value"
                                 [item]="item"
                                 [column]="col"
                                 [rowIndex]="rowIndex"
-                                [editorType]="getEditorType(col, item)"
-                                (commit)="onCellEditorCommit(item, col, rowIndex, colIdx, $event)"
+                                [editorType]="descriptor.editorType ?? 'text'"
+                                (commit)="commitEdit(item, col.columnId, descriptor.value, $event, rowIndex, descriptor.globalColIndex)"
                                 (cancel)="cancelEdit()"
                               ></ogrid-primeng-inline-cell-editor>
                               </div>
-                            } @else if (isEditingCellPopover(item, col)) {
-                              @let editorProps = buildPopoverEditorPropsForPrimeng(item, col, rowIndex, colIdx);
+                            } @else if (descriptor.mode === 'editing-popover') {
+                              @let editorProps = buildPopoverEditorProps(item, col, descriptor);
                               <ogrid-primeng-popover-cell-editor
                                 [item]="item"
                                 [column]="col"
                                 [rowIndex]="rowIndex"
-                                [globalColIndex]="colIdx + colOffset()"
-                                [displayValue]="getCellValueFn(item, col)"
+                                [globalColIndex]="descriptor.globalColIndex"
+                                [displayValue]="descriptor.displayValue"
                                 [editorProps]="editorProps"
                                 [onCancel]="cancelEditHandler"
                               ></ogrid-primeng-popover-cell-editor>
                             } @else {
                               <div
                                 [attr.data-row-index]="rowIndex"
-                                [attr.data-col-index]="colIdx + colOffset()"
-                                (mousedown)="onCellMouseDown($event, rowIndex, colIdx + colOffset())"
-                                (dblclick)="onCellDblClickPrimeng(item, col, rowIndex, colIdx)"
+                                [attr.data-col-index]="descriptor.globalColIndex"
+                                (mousedown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
+                                (dblclick)="descriptor.canEditAny ? onCellDblClick(descriptor.rowId, col.columnId) : null"
                                 (contextmenu)="onCellContextMenu($event)"
                                 class="ogrid-cell-content"
-                                [style.cursor]="canEditCell(col, item) ? 'cell' : 'default'"
-                                [style.background]="getCellBackground(rowIndex, colIdx)"
-                                [style.outline]="isActiveCell(rowIndex, colIdx) ? '2px solid var(--ogrid-selection, #217346)' : null"
-                                [style.outline-offset]="isActiveCell(rowIndex, colIdx) ? '-2px' : null"
+                                [style.cursor]="descriptor.canEditAny ? 'cell' : 'default'"
+                                [style.background]="descriptor.isInRange ? 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))' : null"
+                                [style.outline]="descriptor.isActive ? '2px solid var(--ogrid-selection, #217346)' : null"
+                                [style.outline-offset]="descriptor.isActive ? '-2px' : null"
                               >
-                                <span [style]="getCellStyleObj(col, item)">{{ resolveCellDisplay(col, item) }}</span>
-                                @if (canEditCell(col, item) && isSelectionEndCell(rowIndex, colIdx)) {
+                                <span [style]="resolveCellStyleFn(col, item)">{{ resolveCellContent(col, item, descriptor.displayValue) }}</span>
+                                @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
                                   <div
                                     (mousedown)="onFillHandleMouseDown($event)"
                                     class="ogrid-fill-handle"
@@ -749,14 +672,15 @@ DataGridTableComponent = __decorate([
         ></ogrid-context-menu>
       }
 
-      @if (statusBarConfig()) {
+      @let sbConfig = statusBarConfig();
+      @if (sbConfig) {
         <ogrid-status-bar
-          [totalCount]="statusBarConfig()!.totalCount"
-          [filteredCount]="statusBarConfig()!.filteredCount"
-          [selectedCount]="statusBarConfig()!.selectedCount ?? selectedRowIds().size"
+          [totalCount]="sbConfig.totalCount"
+          [filteredCount]="sbConfig.filteredCount"
+          [selectedCount]="sbConfig.selectedCount ?? selectedRowIds().size"
           [selectedCellCount]="selectionCellCount()"
-          [aggregation]="statusBarConfig()!.aggregation"
-          [suppressRowCount]="statusBarConfig()!.suppressRowCount"
+          [aggregation]="sbConfig.aggregation"
+          [suppressRowCount]="sbConfig.suppressRowCount"
           [classNames]="statusBarClasses"
         ></ogrid-status-bar>
       }
@@ -770,55 +694,7 @@ DataGridTableComponent = __decorate([
       }
     </div>
   `,
-        styles: [`
-    /* ─── 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);
-    }
+        styles: [OGRID_THEME_VARS_CSS, `
     :host { display: block; }
     .ogrid-root {
       position: relative;
@@ -846,6 +722,7 @@ DataGridTableComponent = __decorate([
       border-collapse: collapse;
       table-layout: fixed;
     }
+    .ogrid-table tbody tr { height: var(--ogrid-row-height, auto); }
     .ogrid-thead {
       z-index: 3;
       background: var(--ogrid-header-bg, #f5f5f5);
@@ -858,7 +735,7 @@ DataGridTableComponent = __decorate([
       max-width: 48px;
       text-align: center;
       background: var(--ogrid-header-bg, #f5f5f5);
-      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       position: sticky;
       top: 0;
       z-index: 3;
@@ -870,7 +747,7 @@ DataGridTableComponent = __decorate([
       text-align: center;
       font-weight: 600;
       background: var(--ogrid-header-bg, #f5f5f5);
-      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       position: sticky;
       top: 0;
       z-index: 3;
@@ -885,12 +762,12 @@ DataGridTableComponent = __decorate([
       text-align: center;
       font-weight: 600;
       background: var(--ogrid-header-bg, #f5f5f5);
-      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       padding: 6px 10px;
     }
     .ogrid-header-cell {
       background: var(--ogrid-header-bg, #f5f5f5);
-      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       padding: 0;
       position: relative;
       user-select: none;
@@ -915,7 +792,7 @@ DataGridTableComponent = __decorate([
       max-width: 48px;
       padding: 6px 4px;
       text-align: center;
-      border-bottom: 1px solid var(--ogrid-border, #f0f0f0);
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
     }
     .ogrid-row-number-cell {
       width: 50px;
@@ -927,14 +804,14 @@ DataGridTableComponent = __decorate([
       font-variant-numeric: tabular-nums;
       color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
       background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
-      border-bottom: 1px solid var(--ogrid-border, #f0f0f0);
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       position: sticky;
       left: 0;
       z-index: 3;
     }
     .ogrid-data-cell {
       padding: 0;
-      border-bottom: 1px solid var(--ogrid-border, #f0f0f0);
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       position: relative;
     }
     .ogrid-cell-content {
@@ -1050,7 +927,7 @@ DataGridTableComponent = __decorate([
     /* Context menu */
     .ogrid-context-menu {
       position: fixed;
-      z-index: 10000;
+      z-index: 1000;
       min-width: 160px;
       padding: 4px 0;
       background: var(--ogrid-bg, #fff);

package/dist/esm/datagrid-table/inline-cell-editor.component.js

@@ -4,119 +4,17 @@ 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 } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BaseInlineCellEditorComponent } from '@alaarab/ogrid-angular';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BaseInlineCellEditorComponent, INLINE_CELL_EDITOR_TEMPLATE, INLINE_CELL_EDITOR_STYLES } from '@alaarab/ogrid-angular';
 let InlineCellEditorComponent = class InlineCellEditorComponent extends BaseInlineCellEditorComponent {
 };
 InlineCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-primeng-inline-cell-editor',
         standalone: true,
-        imports: [CommonModule],
-        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()"
-        />
-      }
-    }
-  `,
-        styles: [`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  `],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: INLINE_CELL_EDITOR_TEMPLATE,
+        styles: [INLINE_CELL_EDITOR_STYLES],
     })
 ], InlineCellEditorComponent);
 export { InlineCellEditorComponent };

package/dist/esm/datagrid-table/popover-cell-editor.component.js

@@ -4,114 +4,23 @@ 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, ChangeDetectionStrategy, signal, effect, ViewChild, Injector, createComponent, EnvironmentInjector, inject, Input } from '@angular/core';
-/**
- * PopoverCellEditor component for Angular PrimeNG.
- * Renders custom popover editor when anchor element is set.
- */
-let PopoverCellEditorComponent = class PopoverCellEditorComponent {
-    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();
-    }
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BasePopoverCellEditorComponent, POPOVER_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES } from '@alaarab/ogrid-angular';
+let PopoverCellEditorComponent = class PopoverCellEditorComponent extends BasePopoverCellEditorComponent {
 };
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "item", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "column", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "rowIndex", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "globalColIndex", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "displayValue", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "editorProps", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "onCancel", void 0);
-__decorate([
-    ViewChild('anchorEl')
-], PopoverCellEditorComponent.prototype, "anchorRef", void 0);
-__decorate([
-    ViewChild('editorContainer')
-], PopoverCellEditorComponent.prototype, "editorContainerRef", void 0);
 PopoverCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-primeng-popover-cell-editor',
         standalone: true,
         changeDetection: ChangeDetectionStrategy.OnPush,
-        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>
-    }
-  `,
+        template: POPOVER_CELL_EDITOR_TEMPLATE,
         styles: [`
-    :host { display: contents; }
+    ${POPOVER_CELL_EDITOR_OVERLAY_STYLES}
     .ogrid-popover-anchor {
       padding: 6px 10px; min-height: 20px; cursor: default; overflow: hidden;
       text-overflow: ellipsis; white-space: nowrap;
       outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -2px;
     }
-    .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));
-    }
   `],
     })
 ], PopoverCellEditorComponent);

package/dist/esm/index.js

@@ -1,4 +1,6 @@
-// Re-export everything from angular adapter
+// Re-export all from base package for consumer convenience.
+// Note: This prevents tree-shaking of unused utilities.
+// Consider explicit named exports in a future major version.
 export * from '@alaarab/ogrid-angular';
 // PrimeNG UI components
 export { OGridComponent } from './ogrid/ogrid.component';

package/dist/esm/ogrid/ogrid.component.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, inject, ChangeDetectionStrategy, Input, signal, effect } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { OGridService, OGridLayoutComponent, } from '@alaarab/ogrid-angular';
 import { DataGridTableComponent } from '../datagrid-table/datagrid-table.component';
 import { ColumnChooserComponent } from '../column-chooser/column-chooser.component';
@@ -52,7 +51,6 @@ OGridComponent = __decorate([
         selector: 'ogrid-primeng',
         standalone: true,
         imports: [
-            CommonModule,
             OGridLayoutComponent,
             DataGridTableComponent,
             ColumnChooserComponent,

package/dist/esm/pagination-controls/pagination-controls.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 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
 let PaginationControlsComponent = class PaginationControlsComponent extends BasePaginationControlsComponent {
 };
@@ -13,7 +12,7 @@ PaginationControlsComponent = __decorate([
     Component({
         selector: 'ogrid-primeng-pagination-controls',
         standalone: true,
-        imports: [CommonModule],
+        changeDetection: ChangeDetectionStrategy.OnPush,
         template: `
     @if (vm()) {
       <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ogrid-fg, #242424)">
@@ -97,7 +96,7 @@ PaginationControlsComponent = __decorate([
             [value]="'' + pageSize"
             (change)="onPageSizeChange($any($event.target).value)"
             aria-label="Rows per page"
-            style="padding:4px 6px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+            style="padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
           >
             @for (opt of vm()!.pageSizeOptions; track opt) {
               <option [value]="opt">{{ opt }}</option>

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

@@ -54,7 +54,7 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
         message?: string;
         render?: unknown;
     } | undefined;
-    onCellError: ((error: Error) => void) | undefined;
+    onCellError: ((error: Error, info: unknown) => void) | undefined;
     ariaLabelInput: string | undefined;
     ariaLabelledByInput: string | undefined;
     showRowNumbers: boolean;
@@ -82,6 +82,8 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     readonly cancelEditHandler: () => void;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
+    /** Shallow-compare two props objects by their top-level keys. */
+    private shallowEqual;
     protected getProps(): IOGridDataGridProps<T> | undefined;
     protected getWrapperRef(): ElementRef<HTMLElement> | undefined;
     protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
@@ -90,34 +92,8 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     readonly tableMinWidthStyle: import("@angular/core").Signal<"100%" | "max-content">;
     getColumnWidth(col: IColumnDef<T>): number;
     trackByRowId(_index: number, item: T): RowId;
-    getCellValueFn(item: T, col: IColumnDef<T>): unknown;
-    resolveCellDisplay(col: IColumnDef<T>, item: T): string;
-    getCellStyleObj(col: IColumnDef<T>, item: T): Record<string, string> | null;
-    canEditCell(col: IColumnDef<T>, item: T): boolean;
-    isEditingCell(item: T, col: IColumnDef<T>): boolean;
-    isEditingCellInline(item: T, col: IColumnDef<T>): boolean;
-    isEditingCellPopover(item: T, col: IColumnDef<T>): boolean;
-    buildPopoverEditorPropsForPrimeng(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number): unknown;
-    getEditorType(col: IColumnDef<T>, _item: T): 'text' | 'select' | 'checkbox' | 'date' | 'richSelect';
-    isActiveCell(rowIndex: number, colIdx: number): boolean;
-    isInSelectionRange(rowIndex: number, colIdx: number): boolean;
-    isSelectionEndCell(rowIndex: number, colIdx: number): boolean;
-    getCellBackground(rowIndex: number, colIdx: number): string | null;
-    onCellDblClickPrimeng(item: T, col: IColumnDef<T>, _rowIndex: number, _colIdx: number): void;
-    onCellEditorCommit(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number, newValue: unknown): void;
     onSelectAllChangePrimeng(checked: boolean): void;
     onRowClickPrimeng(e: MouseEvent, item: T): void;
-    getColumnHeaderMenuHandlers(columnId: string): {
-        onPinLeft: () => void;
-        onPinRight: () => void;
-        onUnpin: () => void;
-        onSortAsc: () => void;
-        onSortDesc: () => void;
-        onClearSort: () => void;
-        onAutosizeThis: () => void;
-        onAutosizeAll: () => void;
-        onClose: () => void;
-    };
     onRowCheckboxChangePrimeng(item: T, checked: boolean, rowIndex: number, _e: Event): void;
     onResizeStartPrimeng(e: MouseEvent, col: IColumnDef<T>): void;
     private buildProps;

package/dist/types/datagrid-table/popover-cell-editor.component.d.ts

@@ -1,21 +1,3 @@
-import type { IColumnDef, ICellEditorProps } from '@alaarab/ogrid-angular';
-/**
- * PopoverCellEditor component for Angular PrimeNG.
- * Renders custom popover editor when anchor element is set.
- */
-export declare class PopoverCellEditorComponent<T> {
-    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;
+import { BasePopoverCellEditorComponent } from '@alaarab/ogrid-angular';
+export declare class PopoverCellEditorComponent<T = unknown> extends BasePopoverCellEditorComponent<T> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.0.18",
+  "version": "2.0.21",
   "description": "OGrid PrimeNG – PrimeNG Table-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.0.18"
+    "@alaarab/ogrid-angular": "2.0.21"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",