@alaarab/ogrid-angular-primeng 2.0.6 → 2.0.7

package/dist/esm/column-header-menu/column-header-menu.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, ViewChild } from '@angular/core';
+import { Component, input, computed, viewChild, ChangeDetectionStrategy } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { MenuModule } from 'primeng/menu';
 import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-core';
@@ -14,93 +14,54 @@ import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-core';
  */
 let ColumnHeaderMenuComponent = class ColumnHeaderMenuComponent {
     constructor() {
-        this.pinLeft = new EventEmitter();
-        this.pinRight = new EventEmitter();
-        this.unpin = new EventEmitter();
-        this._canPinLeft = true;
-        this._canPinRight = true;
-        this._canUnpin = false;
-        this.menuModel = [];
-    }
-    set canPinLeft(value) {
-        this._canPinLeft = value;
-        this.updateMenuModel();
-    }
-    set canPinRight(value) {
-        this._canPinRight = value;
-        this.updateMenuModel();
-    }
-    set canUnpin(value) {
-        this._canUnpin = value;
-        this.updateMenuModel();
-    }
-    ngOnInit() {
-        this.updateMenuModel();
-    }
-    updateMenuModel() {
-        this.menuModel = [
+        this.columnId = input.required();
+        this.canPinLeft = input(true);
+        this.canPinRight = input(true);
+        this.canUnpin = input(false);
+        this.onPinLeft = input(undefined);
+        this.onPinRight = input(undefined);
+        this.onUnpin = input(undefined);
+        this.menuRef = viewChild('menu');
+        this.menuModel = computed(() => [
             {
                 label: COLUMN_HEADER_MENU_ITEMS[0].label,
-                disabled: !this._canPinLeft,
+                disabled: !this.canPinLeft(),
                 command: () => this.handlePinLeft(),
             },
             {
                 label: COLUMN_HEADER_MENU_ITEMS[1].label,
-                disabled: !this._canPinRight,
+                disabled: !this.canPinRight(),
                 command: () => this.handlePinRight(),
             },
             {
                 label: COLUMN_HEADER_MENU_ITEMS[2].label,
-                disabled: !this._canUnpin,
+                disabled: !this.canUnpin(),
                 command: () => this.handleUnpin(),
             },
-        ];
+        ]);
     }
     handlePinLeft() {
-        if (this._canPinLeft) {
-            this.pinLeft.emit();
+        if (this.canPinLeft()) {
+            this.onPinLeft()?.();
         }
     }
     handlePinRight() {
-        if (this._canPinRight) {
-            this.pinRight.emit();
+        if (this.canPinRight()) {
+            this.onPinRight()?.();
         }
     }
     handleUnpin() {
-        if (this._canUnpin) {
-            this.unpin.emit();
+        if (this.canUnpin()) {
+            this.onUnpin()?.();
         }
     }
 };
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "columnId", void 0);
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "canPinLeft", null);
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "canPinRight", null);
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "canUnpin", null);
-__decorate([
-    Output()
-], ColumnHeaderMenuComponent.prototype, "pinLeft", void 0);
-__decorate([
-    Output()
-], ColumnHeaderMenuComponent.prototype, "pinRight", void 0);
-__decorate([
-    Output()
-], ColumnHeaderMenuComponent.prototype, "unpin", void 0);
-__decorate([
-    ViewChild('menu')
-], ColumnHeaderMenuComponent.prototype, "menu", void 0);
 ColumnHeaderMenuComponent = __decorate([
     Component({
         selector: 'column-header-menu',
         standalone: true,
         imports: [ButtonModule, MenuModule],
+        changeDetection: ChangeDetectionStrategy.OnPush,
         template: `
     <button
       pButton
@@ -108,12 +69,12 @@ ColumnHeaderMenuComponent = __decorate([
       icon="pi pi-ellipsis-v"
       class="p-button-text p-button-sm column-header-menu-trigger"
       (click)="menu.toggle($event)"
-      [attr.aria-label]="'Column options for ' + columnId"
+      [attr.aria-label]="'Column options for ' + columnId()"
     ></button>
 
     <p-menu
       #menu
-      [model]="menuModel"
+      [model]="menuModel()"
       [popup]="true"
       appendTo="body"
     ></p-menu>

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

@@ -4,23 +4,20 @@ 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, inject, signal, computed, effect, viewChild, ChangeDetectionStrategy, } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, DEFAULT_MIN_COLUMN_WIDTH, buildHeaderRows, getCellValue, getHeaderFilterConfig, resolveCellDisplayContent, resolveCellStyle, } from '@alaarab/ogrid-angular';
+import { Component, input, signal, computed, effect, viewChild, ChangeDetectionStrategy, } from '@angular/core';
+import { BaseDataGridTableComponent, DataGridStateService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, DEFAULT_MIN_COLUMN_WIDTH, getCellValue, resolveCellDisplayContent, resolveCellStyle, } 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';
-let DataGridTableComponent = class DataGridTableComponent {
+let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTableComponent {
     constructor() {
-        this.stateService = inject(DataGridStateService);
-        this.columnReorderService = new ColumnReorderService();
-        this.virtualScrollService = new VirtualScrollService();
+        super();
         this.wrapperRef = viewChild('wrapper');
-        this.tableContainerRef = viewChild('tableContainer');
+        this.tableContainerRefEl = viewChild('tableContainer');
         // Inputs mapped from IOGridDataGridProps
-        this.items = input.required();
+        this.itemsInput = input.required({ alias: 'items' });
         this.columns = input.required();
-        this.getRowIdFn = input.required({ alias: 'getRowId' });
+        this.getRowIdInput = input.required({ alias: 'getRowId' });
         this.sortBy = input(undefined);
         this.sortDirection = input('asc');
         this.onColumnSort = input.required();
@@ -29,21 +26,21 @@ let DataGridTableComponent = class DataGridTableComponent {
         this.onColumnOrderChange = input(undefined);
         this.onColumnResized = input(undefined);
         this.onColumnPinned = input(undefined);
-        this.pinnedColumns = input(undefined);
+        this.pinnedColumnsInput = input(undefined, { alias: 'pinnedColumns' });
         this.initialColumnWidths = input(undefined);
-        this.freezeRows = input(undefined);
-        this.freezeCols = input(undefined);
+        this.freezeRowsInput = input(undefined, { alias: 'freezeRows' });
+        this.freezeColsInput = input(undefined, { alias: 'freezeCols' });
         this.layoutMode = input('fill');
         this.suppressHorizontalScroll = input(undefined);
-        this.isLoading = input(false);
-        this.loadingMessage = input('Loading\u2026');
+        this.isLoadingInput = input(false, { alias: 'isLoading' });
+        this.loadingMessageInput = input('Loading\u2026', { alias: 'loadingMessage' });
         this.editable = input(undefined);
         this.cellSelection = input(undefined);
         this.onCellValueChanged = input(undefined);
-        this.onUndo = input(undefined);
-        this.onRedo = input(undefined);
-        this.canUndo = input(undefined);
-        this.canRedo = input(undefined);
+        this.onUndoInput = input(undefined, { alias: 'onUndo' });
+        this.onRedoInput = input(undefined, { alias: 'onRedo' });
+        this.canUndoInput = input(undefined, { alias: 'canUndo' });
+        this.canRedoInput = input(undefined, { alias: 'canRedo' });
         this.rowSelectionMode = input('none', { alias: 'rowSelection' });
         this.selectedRows = input(undefined);
         this.onSelectionChange = input(undefined);
@@ -54,13 +51,13 @@ let DataGridTableComponent = class DataGridTableComponent {
         this.loadingFilterOptions = input({});
         this.peopleSearch = input(undefined);
         this.getUserByEmail = input(undefined);
-        this.emptyState = input(undefined);
+        this.emptyStateInput = input(undefined, { alias: 'emptyState' });
         this.onCellError = input(undefined);
-        this.ariaLabel = input(undefined, { alias: 'aria-label' });
-        this.ariaLabelledBy = input(undefined, { alias: 'aria-labelledby' });
+        this.ariaLabelInput = input(undefined, { alias: 'aria-label' });
+        this.ariaLabelledByInput = input(undefined, { alias: 'aria-labelledby' });
         this.showRowNumbers = input(false);
-        this.currentPage = input(1);
-        this.pageSize = input(25);
+        this.currentPageInput = input(1, { alias: 'currentPage' });
+        this.pageSizeInput = input(25, { alias: 'pageSize' });
         this.defaultMinWidth = DEFAULT_MIN_COLUMN_WIDTH;
         this.statusBarClasses = {
             statusBar: 'ogrid-status-bar',
@@ -68,27 +65,15 @@ let DataGridTableComponent = class DataGridTableComponent {
             statusBarLabel: 'ogrid-status-bar-label',
             statusBarValue: 'ogrid-status-bar-value',
         };
-        // Column sizing
-        this.columnSizingOverrides = signal({});
+        // PrimeNG uses flat number overrides for column sizing
+        this.primengColumnSizingOverrides = signal({});
         this.resizeStartX = 0;
         this.resizeColumnId = '';
         this.resizeStartWidth = 0;
-        // Last shift state for row checkbox
-        this.lastMouseShift = false;
-        this.columnSizingVersion = signal(0);
-        this.state = computed(() => this.stateService.getState());
-        this.tableContainerEl = computed(() => this.tableContainerRef()?.nativeElement ?? null);
-        this.resolvedAriaLabel = computed(() => this.ariaLabel() ?? (this.ariaLabelledBy() ? undefined : 'Data grid'));
-        this.rowNumberOffset = computed(() => this.state().layout.hasRowNumbersCol ? (this.currentPage() - 1) * this.pageSize() : 0);
-        this.headerRows = computed(() => buildHeaderRows(this.columns(), this.visibleColumns()));
-        this.allowOverflowX = computed(() => {
-            const s = this.state();
-            return !this.suppressHorizontalScroll() && s.layout.containerWidth > 0 &&
-                (s.layout.minTableWidth > s.layout.containerWidth || s.layout.desiredTableWidth > s.layout.containerWidth);
-        });
+        // --- PrimeNG-specific computed signals ---
+        this.resolvedAriaLabel = computed(() => this.ariaLabelInput() ?? (this.ariaLabelledByInput() ? undefined : 'Data grid'));
         this.tableWidthStyle = computed(() => {
-            const s = this.state();
-            if (s.viewModels.showEmptyInGrid)
+            if (this.showEmptyInGrid())
                 return '100%';
             if (this.allowOverflowX())
                 return 'fit-content';
@@ -97,8 +82,7 @@ let DataGridTableComponent = class DataGridTableComponent {
             return '100%';
         });
         this.tableMinWidthStyle = computed(() => {
-            const s = this.state();
-            if (s.viewModels.showEmptyInGrid)
+            if (this.showEmptyInGrid())
                 return '100%';
             if (this.allowOverflowX())
                 return 'max-content';
@@ -106,55 +90,35 @@ let DataGridTableComponent = class DataGridTableComponent {
                 return 'max-content';
             return '100%';
         });
-        this.selectedCellCount = computed(() => {
-            const range = this.state().interaction.selectionRange;
-            if (!range)
-                return undefined;
-            return (Math.abs(range.endRow - range.startRow) + 1) *
-                (Math.abs(range.endCol - range.startCol) + 1);
-        });
-        // Wire inputs to DataGridStateService
-        effect(() => {
-            const props = this.buildProps();
-            this.stateService.props.set(props);
-        });
-        effect(() => {
-            const el = this.wrapperRef()?.nativeElement ?? null;
-            this.stateService.wrapperEl.set(el);
-            this.columnReorderService.wrapperEl.set(el);
-        });
-        // Wire column reorder service inputs
-        effect(() => {
-            const cols = this.state().layout.visibleCols;
-            this.columnReorderService.columns.set(cols);
-            this.columnReorderService.columnOrder.set(this.columnOrder());
-            this.columnReorderService.onColumnOrderChange.set(this.onColumnOrderChange());
-            this.columnReorderService.enabled.set(!!this.onColumnOrderChange());
-        });
-        // Wire virtual scroll service inputs
-        effect(() => {
-            this.virtualScrollService.totalRows.set(this.items().length);
-        });
+        this.initBase();
         // Initialize column sizing from initial widths
         effect(() => {
             const iw = this.initialColumnWidths();
             if (iw) {
-                this.columnSizingOverrides.set({ ...iw });
+                this.primengColumnSizingOverrides.set({ ...iw });
             }
         });
     }
-    trackByRowId(_index, item) {
-        return this.getRowIdFn()(item);
+    // --- Abstract method implementations ---
+    getProps() {
+        return this.buildProps();
+    }
+    getWrapperRef() {
+        return this.wrapperRef();
     }
+    getTableContainerRef() {
+        return this.tableContainerRefEl();
+    }
+    // --- Column width override (PrimeNG uses flat number instead of { widthPx }) ---
     getColumnWidth(col) {
-        const override = this.columnSizingOverrides()[col.columnId];
+        const override = this.primengColumnSizingOverrides()[col.columnId];
         if (override)
             return override;
-        return col.idealWidth ?? col.defaultWidth ?? undefined;
+        return col.idealWidth ?? col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
     }
-    getFilterConfig(col) {
-        const s = this.state();
-        return getHeaderFilterConfig(col, s.viewModels.headerFilterInput);
+    // --- PrimeNG-specific helpers ---
+    trackByRowId(_index, item) {
+        return this.getRowIdInput()(item);
     }
     getCellValueFn(item, col) {
         return getCellValue(item, col);
@@ -171,10 +135,10 @@ let DataGridTableComponent = class DataGridTableComponent {
         return this.editable() !== false && !!colEditable && this.onCellValueChanged() != null && typeof col.cellEditor !== 'function';
     }
     isEditingCell(item, col) {
-        const editing = this.state().editing.editingCell;
+        const editing = this.editingCell();
         if (!editing)
             return false;
-        return editing.rowId === this.getRowIdFn()(item) && editing.columnId === col.columnId;
+        return editing.rowId === this.getRowIdInput()(item) && editing.columnId === col.columnId;
     }
     getEditorType(col, _item) {
         if (col.cellEditor === 'text' || col.cellEditor === 'select' || col.cellEditor === 'checkbox' || col.cellEditor === 'date' || col.cellEditor === 'richSelect') {
@@ -187,13 +151,13 @@ let DataGridTableComponent = class DataGridTableComponent {
         return 'text';
     }
     isActiveCell(rowIndex, colIdx) {
-        const ac = this.state().interaction.activeCell;
+        const ac = this.activeCell();
         if (!ac)
             return false;
-        return ac.rowIndex === rowIndex && ac.columnIndex === colIdx + this.state().layout.colOffset;
+        return ac.rowIndex === rowIndex && ac.columnIndex === colIdx + this.colOffset();
     }
     isInSelectionRange(rowIndex, colIdx) {
-        const range = this.state().interaction.selectionRange;
+        const range = this.selectionRange();
         if (!range)
             return false;
         const minR = Math.min(range.startRow, range.endRow);
@@ -203,9 +167,8 @@ let DataGridTableComponent = class DataGridTableComponent {
         return rowIndex >= minR && rowIndex <= maxR && colIdx >= minC && colIdx <= maxC;
     }
     isSelectionEndCell(rowIndex, colIdx) {
-        const s = this.state();
-        const range = s.interaction.selectionRange;
-        if (!range || s.interaction.isDragging || s.interaction.copyRange || s.interaction.cutRange)
+        const range = this.selectionRange();
+        if (!range || this.isDragging() || this.copyRange() || this.cutRange())
             return false;
         return rowIndex === range.endRow && colIdx === range.endCol;
     }
@@ -214,71 +177,50 @@ let DataGridTableComponent = class DataGridTableComponent {
             return 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))';
         return null;
     }
-    // --- Event handlers ---
-    onMouseDown(e) {
-        this.lastMouseShift = e.shiftKey;
-    }
-    onGridKeyDown(e) {
-        this.state().interaction.handleGridKeyDown(e);
-    }
-    onCellMouseDown(e, rowIndex, globalColIndex) {
-        this.state().interaction.handleCellMouseDown(e, rowIndex, globalColIndex);
-    }
-    onCellDblClick(item, col, rowIndex, colIdx) {
+    // --- PrimeNG-specific event handlers ---
+    onCellDblClickPrimeng(item, col, _rowIndex, _colIdx) {
         if (this.canEditCell(col, item)) {
-            this.stateService.setEditingCell({ rowId: this.getRowIdFn()(item), columnId: col.columnId });
+            this.stateService.setEditingCell({ rowId: this.getRowIdInput()(item), columnId: col.columnId });
         }
     }
-    onCellContextMenu(e) {
-        this.state().contextMenu.handleCellContextMenu(e);
-    }
     onCellEditorCommit(item, col, rowIndex, colIdx, newValue) {
         const oldValue = getCellValue(item, col);
-        this.stateService.commitCellEdit(item, col.columnId, oldValue, newValue, rowIndex, colIdx + this.state().layout.colOffset);
+        this.stateService.commitCellEdit(item, col.columnId, oldValue, newValue, rowIndex, colIdx + this.colOffset());
     }
-    onFillHandleMouseDown(e) {
-        this.state().interaction.handleFillHandleMouseDown(e);
-    }
-    onSelectAllChange(checked) {
+    onSelectAllChangePrimeng(checked) {
         this.state().rowSelection.handleSelectAll(checked);
     }
-    onRowClick(e, item) {
+    onRowClickPrimeng(e, item) {
         if (this.rowSelectionMode() !== 'single')
             return;
-        const rowId = this.getRowIdFn()(item);
-        const ids = this.state().rowSelection.selectedRowIds;
+        const rowId = this.getRowIdInput()(item);
+        const ids = this.selectedRowIds();
         this.state().rowSelection.updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
     }
-    onRowCheckboxChange(item, checked, rowIndex, e) {
-        const rowId = this.getRowIdFn()(item);
+    onRowCheckboxChangePrimeng(item, checked, rowIndex, _e) {
+        const rowId = this.getRowIdInput()(item);
         this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
     }
-    handlePaste() {
-        void this.state().interaction.handlePaste();
-    }
-    onHeaderMouseDown(columnId, event) {
-        this.columnReorderService.handleHeaderMouseDown(columnId, event);
-    }
-    onResizeStart(e, col) {
+    onResizeStartPrimeng(e, col) {
         e.preventDefault();
         this.resizeStartX = e.clientX;
         this.resizeColumnId = col.columnId;
-        this.resizeStartWidth = this.getColumnWidth(col) ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+        this.resizeStartWidth = this.getColumnWidth(col);
         const onMove = (me) => {
             const delta = me.clientX - this.resizeStartX;
             const minW = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
             const newWidth = Math.max(minW, this.resizeStartWidth + delta);
-            this.columnSizingOverrides.update((prev) => ({ ...prev, [this.resizeColumnId]: newWidth }));
+            this.primengColumnSizingOverrides.update((prev) => ({ ...prev, [this.resizeColumnId]: newWidth }));
             this.columnSizingVersion.update(v => v + 1);
         };
         const onUp = () => {
             window.removeEventListener('mousemove', onMove, true);
             window.removeEventListener('mouseup', onUp, true);
-            const finalWidth = this.columnSizingOverrides()[this.resizeColumnId];
+            const finalWidth = this.primengColumnSizingOverrides()[this.resizeColumnId];
             if (finalWidth) {
                 this.onColumnResized()?.(this.resizeColumnId, finalWidth);
                 const overrides = {};
-                for (const [id, w] of Object.entries(this.columnSizingOverrides())) {
+                for (const [id, w] of Object.entries(this.primengColumnSizingOverrides())) {
                     overrides[id] = { widthPx: w };
                 }
                 this.state().layout.setColumnSizingOverrides(overrides);
@@ -287,29 +229,12 @@ let DataGridTableComponent = class DataGridTableComponent {
         window.addEventListener('mousemove', onMove, true);
         window.addEventListener('mouseup', onUp, true);
     }
-    // --- Column pinning methods ---
-    onPinColumn(columnId, side) {
-        this.onColumnPinned()?.(columnId, side);
-    }
-    onUnpinColumn(columnId) {
-        this.onColumnPinned()?.(columnId, null);
-    }
-    isPinned(columnId) {
-        return this.pinnedColumns()?.[columnId];
-    }
-    getPinState(columnId) {
-        const pinned = this.isPinned(columnId);
-        return {
-            canPinLeft: pinned !== 'left',
-            canPinRight: pinned !== 'right',
-            canUnpin: !!pinned,
-        };
-    }
+    // --- Build props ---
     buildProps() {
         return {
-            items: this.items(),
+            items: this.itemsInput(),
             columns: this.columns(),
-            getRowId: this.getRowIdFn(),
+            getRowId: this.getRowIdInput(),
             sortBy: this.sortBy(),
             sortDirection: this.sortDirection(),
             onColumnSort: this.onColumnSort(),
@@ -318,27 +243,27 @@ let DataGridTableComponent = class DataGridTableComponent {
             onColumnOrderChange: this.onColumnOrderChange(),
             onColumnResized: this.onColumnResized(),
             onColumnPinned: this.onColumnPinned(),
-            pinnedColumns: this.pinnedColumns(),
+            pinnedColumns: this.pinnedColumnsInput(),
             initialColumnWidths: this.initialColumnWidths(),
-            freezeRows: this.freezeRows(),
-            freezeCols: this.freezeCols(),
+            freezeRows: this.freezeRowsInput(),
+            freezeCols: this.freezeColsInput(),
             layoutMode: this.layoutMode(),
             suppressHorizontalScroll: this.suppressHorizontalScroll(),
-            isLoading: this.isLoading(),
-            loadingMessage: this.loadingMessage(),
+            isLoading: this.isLoadingInput(),
+            loadingMessage: this.loadingMessageInput(),
             editable: this.editable(),
             cellSelection: this.cellSelection(),
             onCellValueChanged: this.onCellValueChanged(),
-            onUndo: this.onUndo(),
-            onRedo: this.onRedo(),
-            canUndo: this.canUndo(),
-            canRedo: this.canRedo(),
+            onUndo: this.onUndoInput(),
+            onRedo: this.onRedoInput(),
+            canUndo: this.canUndoInput(),
+            canRedo: this.canRedoInput(),
             rowSelection: this.rowSelectionMode(),
             selectedRows: this.selectedRows(),
             onSelectionChange: this.onSelectionChange(),
             showRowNumbers: this.showRowNumbers(),
-            currentPage: this.currentPage(),
-            pageSize: this.pageSize(),
+            currentPage: this.currentPageInput(),
+            pageSize: this.pageSizeInput(),
             statusBar: this.statusBar(),
             filters: this.filters(),
             onFilterChange: this.onFilterChange(),
@@ -346,10 +271,10 @@ let DataGridTableComponent = class DataGridTableComponent {
             loadingFilterOptions: this.loadingFilterOptions(),
             peopleSearch: this.peopleSearch(),
             getUserByEmail: this.getUserByEmail(),
-            emptyState: this.emptyState(),
+            emptyState: this.emptyStateInput(),
             onCellError: this.onCellError(),
-            'aria-label': this.ariaLabel(),
-            'aria-labelledby': this.ariaLabelledBy(),
+            'aria-label': this.ariaLabelInput(),
+            'aria-labelledby': this.ariaLabelledByInput(),
         };
     }
 };
@@ -358,7 +283,6 @@ DataGridTableComponent = __decorate([
         selector: 'ogrid-primeng-datagrid-table',
         standalone: true,
         imports: [
-            CommonModule,
             StatusBarComponent,
             GridContextMenuComponent,
             MarchingAntsOverlayComponent,
@@ -377,7 +301,7 @@ DataGridTableComponent = __decorate([
         role="region"
         [attr.aria-label]="resolvedAriaLabel()"
         [attr.aria-labelledby]="ariaLabelledBy()"
-        [attr.data-empty]="state().viewModels.showEmptyInGrid ? 'true' : null"
+        [attr.data-empty]="showEmptyInGrid() ? 'true' : null"
         [attr.data-column-count]="state().layout.totalColCount"
         [attr.data-freeze-rows]="freezeRows() != null && freezeRows()! >= 1 ? freezeRows() : null"
         [attr.data-freeze-cols]="freezeCols() != null && freezeCols()! >= 1 ? freezeCols() : null"
@@ -385,7 +309,7 @@ DataGridTableComponent = __decorate([
         [attr.data-has-selection]="rowSelectionMode() !== 'none' ? 'true' : null"
         (contextmenu)="$event.preventDefault()"
         (keydown)="onGridKeyDown($event)"
-        (mousedown)="onMouseDown($event)"
+        (mousedown)="onWrapperMouseDown($event)"
         style="flex:1;min-height:0;overflow:auto;outline:none;position:relative;font-size:13px;color:var(--ogrid-fg, #242424)"
         [style.--data-table-column-count]="state().layout.totalColCount"
         [style.--data-table-width]="tableWidthStyle()"
@@ -400,7 +324,7 @@ DataGridTableComponent = __decorate([
                 <thead style="position:sticky;top:0;z-index:3;background:var(--ogrid-header-bg, #f5f5f5)">
                   @for (row of headerRows(); track $index; let rowIdx = $index) {
                     <tr>
-                      @if (rowIdx === headerRows().length - 1 && state().layout.hasCheckboxCol) {
+                      @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
                         <th
                           scope="col"
                           rowSpan="1"
@@ -408,17 +332,17 @@ DataGridTableComponent = __decorate([
                         >
                           <input
                             type="checkbox"
-                            [checked]="state().rowSelection.allSelected"
-                            [indeterminate]="state().rowSelection.someSelected && !state().rowSelection.allSelected"
-                            (change)="onSelectAllChange($any($event.target).checked)"
+                            [checked]="allSelected()"
+                            [indeterminate]="someSelected() && !allSelected()"
+                            (change)="onSelectAllChangePrimeng($any($event.target).checked)"
                             aria-label="Select all rows"
                           />
                         </th>
                       }
-                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && state().layout.hasCheckboxCol) {
+                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasCheckboxCol()) {
                         <th [attr.rowSpan]="headerRows().length - 1"></th>
                       }
-                      @if (rowIdx === headerRows().length - 1 && state().layout.hasRowNumbersCol) {
+                      @if (rowIdx === headerRows().length - 1 && hasRowNumbersCol()) {
                         <th
                           scope="col"
                           rowSpan="1"
@@ -427,7 +351,7 @@ DataGridTableComponent = __decorate([
                           #
                         </th>
                       }
-                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && state().layout.hasRowNumbersCol) {
+                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
                         <th [attr.rowSpan]="headerRows().length - 1" style="width:50px;min-width:50px"></th>
                       }
                       @for (cell of row; track $index; let cellIdx = $index) {
@@ -440,55 +364,56 @@ DataGridTableComponent = __decorate([
                             {{ cell.label }}
                           </th>
                         } @else {
-                          @let pinned = isPinned(cell.columnDef!.columnId);
+                          @let col = asColumnDef(cell.columnDef);
+                          @let pinned = isPinned(col.columnId);
                           <th
                             scope="col"
-                            [attr.data-column-id]="cell.columnDef!.columnId"
+                            [attr.data-column-id]="col.columnId"
                             [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'"
                             style="padding:6px 8px;text-align:left;font-weight:600;border-bottom:1px solid var(--ogrid-border, #e0e0e0);position:relative"
-                            [style.min-width.px]="cell.columnDef!.minWidth ?? defaultMinWidth"
-                            [style.width.px]="getColumnWidth(cell.columnDef!)"
-                            [style.max-width.px]="getColumnWidth(cell.columnDef!)"
+                            [style.min-width.px]="col.minWidth ?? defaultMinWidth"
+                            [style.width.px]="getColumnWidth(col)"
+                            [style.max-width.px]="getColumnWidth(col)"
                             [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
-                            (mousedown)="onHeaderMouseDown(cell.columnDef!.columnId, $event)"
+                            (mousedown)="onHeaderMouseDown(col.columnId, $event)"
                           >
                             <div style="display:flex;align-items:center;gap:4px;">
                               <ogrid-primeng-column-header-filter
-                                [columnKey]="cell.columnDef!.columnId"
-                                [columnName]="cell.columnDef!.name"
-                                [filterType]="getFilterConfig(cell.columnDef!).filterType"
-                                [isSorted]="getFilterConfig(cell.columnDef!).isSorted ?? false"
-                                [isSortedDescending]="getFilterConfig(cell.columnDef!).isSortedDescending ?? false"
-                                [onSort]="getFilterConfig(cell.columnDef!).onSort"
-                                [selectedValues]="getFilterConfig(cell.columnDef!).selectedValues"
-                                [onFilterChange]="getFilterConfig(cell.columnDef!).onFilterChange"
-                                [options]="getFilterConfig(cell.columnDef!).options ?? []"
-                                [isLoadingOptions]="getFilterConfig(cell.columnDef!).isLoadingOptions ?? false"
-                                [textValue]="getFilterConfig(cell.columnDef!).textValue ?? ''"
-                                [onTextChange]="getFilterConfig(cell.columnDef!).onTextChange"
-                                [selectedUser]="getFilterConfig(cell.columnDef!).selectedUser"
-                                [onUserChange]="getFilterConfig(cell.columnDef!).onUserChange"
-                                [peopleSearch]="getFilterConfig(cell.columnDef!).peopleSearch"
-                                [dateValue]="getFilterConfig(cell.columnDef!).dateValue"
-                                [onDateChange]="getFilterConfig(cell.columnDef!).onDateChange"
+                                [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"
                               ></ogrid-primeng-column-header-filter>
-                              @let pinState = getPinState(cell.columnDef!.columnId);
+                              @let colPinState = getPinState(col.columnId);
                               <column-header-menu
-                                [columnId]="cell.columnDef!.columnId"
-                                [onPinLeft]="() => onPinColumn(cell.columnDef!.columnId, 'left')"
-                                [onPinRight]="() => onPinColumn(cell.columnDef!.columnId, 'right')"
-                                [onUnpin]="() => onUnpinColumn(cell.columnDef!.columnId)"
-                                [canPinLeft]="pinState.canPinLeft"
-                                [canPinRight]="pinState.canPinRight"
-                                [canUnpin]="pinState.canUnpin"
+                                [columnId]="col.columnId"
+                                [onPinLeft]="() => onPinColumn(col.columnId, 'left')"
+                                [onPinRight]="() => onPinColumn(col.columnId, 'right')"
+                                [onUnpin]="() => onUnpinColumn(col.columnId)"
+                                [canPinLeft]="colPinState.canPinLeft"
+                                [canPinRight]="colPinState.canPinRight"
+                                [canUnpin]="colPinState.canUnpin"
                               />
                             </div>
                             <div
                               style="position:absolute;top:0;right:0;bottom:0;width:4px;cursor:col-resize"
-                              (mousedown)="onResizeStart($event, cell.columnDef!)"
-                              [attr.aria-label]="'Resize ' + cell.columnDef!.name"
+                              (mousedown)="onResizeStartPrimeng($event, col)"
+                              [attr.aria-label]="'Resize ' + col.name"
                             ></div>
                           </th>
                         }
@@ -497,15 +422,17 @@ DataGridTableComponent = __decorate([
                   }
                 </thead>
 
-                @if (!state().viewModels.showEmptyInGrid) {
+                @if (!showEmptyInGrid()) {
                   <tbody>
                     @for (item of items(); track trackByRowId($index, item); let rowIndex = $index) {
+                      @let rowId = getRowIdInput()(item);
+                      @let isSelected = selectedRowIds().has(rowId);
                       <tr
-                        [attr.data-row-id]="getRowIdFn()(item)"
-                        [style.background]="state().rowSelection.selectedRowIds.has(getRowIdFn()(item)) ? 'var(--ogrid-selected-bg, #e8f0fe)' : null"
-                        (click)="onRowClick($event, item)"
+                        [attr.data-row-id]="rowId"
+                        [style.background]="isSelected ? 'var(--ogrid-selected-bg, #e8f0fe)' : null"
+                        (click)="onRowClickPrimeng($event, item)"
                       >
-                        @if (state().layout.hasCheckboxCol) {
+                        @if (hasCheckboxCol()) {
                           <td
                             style="width:48px;min-width:48px;max-width:48px;padding:6px 4px;text-align:center;border-bottom:1px solid var(--ogrid-border, #f0f0f0)"
                             [attr.data-row-index]="rowIndex"
@@ -514,20 +441,20 @@ DataGridTableComponent = __decorate([
                           >
                             <input
                               type="checkbox"
-                              [checked]="state().rowSelection.selectedRowIds.has(getRowIdFn()(item))"
-                              (change)="onRowCheckboxChange(item, $any($event.target).checked, rowIndex, $event)"
+                              [checked]="isSelected"
+                              (change)="onRowCheckboxChangePrimeng(item, $any($event.target).checked, rowIndex, $event)"
                               [attr.aria-label]="'Select row ' + (rowIndex + 1)"
                             />
                           </td>
                         }
-                        @if (state().layout.hasRowNumbersCol) {
+                        @if (hasRowNumbersCol()) {
                           <td
                             style="width:50px;min-width:50px;max-width:50px;padding:6px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ogrid-text-secondary,#666);background:var(--ogrid-bg-subtle,#fafafa);border-bottom:1px solid var(--ogrid-border,#f0f0f0);position:sticky;left:0;z-index:3"
                           >
                             {{ rowNumberOffset() + rowIndex + 1 }}
                           </td>
                         }
-                        @for (col of state().layout.visibleCols; track col.columnId; let colIdx = $index) {
+                        @for (col of visibleCols(); track col.columnId; let colIdx = $index) {
                           @let pinned = isPinned(col.columnId);
                           <td
                             [class.ogrid-td-pinned-left]="pinned === 'left'"
@@ -546,14 +473,14 @@ DataGridTableComponent = __decorate([
                                 [rowIndex]="rowIndex"
                                 [editorType]="getEditorType(col, item)"
                                 (commit)="onCellEditorCommit(item, col, rowIndex, colIdx, $event)"
-                                (cancel)="state().editing.setEditingCell(null)"
+                                (cancel)="cancelEdit()"
                               ></ogrid-primeng-inline-cell-editor>
                             } @else {
                               <div
                                 [attr.data-row-index]="rowIndex"
-                                [attr.data-col-index]="colIdx + state().layout.colOffset"
-                                (mousedown)="onCellMouseDown($event, rowIndex, colIdx + state().layout.colOffset)"
-                                (dblclick)="onCellDblClick(item, col, rowIndex, colIdx)"
+                                [attr.data-col-index]="colIdx + colOffset()"
+                                (mousedown)="onCellMouseDown($event, rowIndex, colIdx + colOffset())"
+                                (dblclick)="onCellDblClickPrimeng(item, col, rowIndex, colIdx)"
                                 (contextmenu)="onCellContextMenu($event)"
                                 style="padding:6px 10px;min-height:20px;cursor:default;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
                                 [style.cursor]="canEditCell(col, item) ? 'cell' : 'default'"
@@ -588,7 +515,7 @@ DataGridTableComponent = __decorate([
                 [columnSizingVersion]="columnSizingVersion()"
               ></ogrid-marching-ants-overlay>
 
-              @if (state().viewModels.showEmptyInGrid && emptyState()) {
+              @if (showEmptyInGrid() && emptyState()) {
                 <div style="display:flex;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:var(--ogrid-muted, #999)">
                   <div>
                     <div style="font-weight:600;margin-bottom:8px">No results found</div>
@@ -610,31 +537,31 @@ DataGridTableComponent = __decorate([
         <div class="ogrid-drop-indicator" [style.left.px]="columnReorderService.dropIndicatorX()"></div>
       }
 
-      @if (state().contextMenu.menuPosition) {
+      @if (menuPosition()) {
         <ogrid-context-menu
-          [x]="state().contextMenu.menuPosition!.x"
-          [y]="state().contextMenu.menuPosition!.y"
-          [hasSelection]="state().interaction.hasCellSelection"
-          [canUndoProp]="state().interaction.canUndo"
-          [canRedoProp]="state().interaction.canRedo"
-          (copy)="state().interaction.handleCopy()"
-          (cut)="state().interaction.handleCut()"
+          [x]="menuPosition()!.x"
+          [y]="menuPosition()!.y"
+          [hasSelection]="hasCellSelection()"
+          [canUndoProp]="canUndo()"
+          [canRedoProp]="canRedo()"
+          (copy)="handleCopy()"
+          (cut)="handleCut()"
           (paste)="handlePaste()"
-          (selectAll)="state().interaction.handleSelectAllCells()"
-          (undoAction)="state().interaction.onUndo?.()"
-          (redoAction)="state().interaction.onRedo?.()"
-          (close)="state().contextMenu.closeContextMenu()"
+          (selectAll)="handleSelectAllCells()"
+          (undoAction)="onUndo()"
+          (redoAction)="onRedo()"
+          (close)="closeContextMenu()"
         ></ogrid-context-menu>
       }
 
-      @if (state().viewModels.statusBarConfig) {
+      @if (statusBarConfig()) {
         <ogrid-status-bar
-          [totalCount]="state().viewModels.statusBarConfig!.totalCount"
-          [filteredCount]="state().viewModels.statusBarConfig!.filteredCount"
-          [selectedCount]="state().viewModels.statusBarConfig!.selectedCount ?? state().rowSelection.selectedRowIds.size"
-          [selectedCellCount]="selectedCellCount()"
-          [aggregation]="state().viewModels.statusBarConfig!.aggregation"
-          [suppressRowCount]="state().viewModels.statusBarConfig!.suppressRowCount"
+          [totalCount]="statusBarConfig()!.totalCount"
+          [filteredCount]="statusBarConfig()!.filteredCount"
+          [selectedCount]="statusBarConfig()!.selectedCount ?? selectedRowIds().size"
+          [selectedCellCount]="selectionCellCount()"
+          [aggregation]="statusBarConfig()!.aggregation"
+          [suppressRowCount]="statusBarConfig()!.suppressRowCount"
           [classNames]="statusBarClasses"
         ></ogrid-status-bar>
       }

package/dist/types/column-header-menu/column-header-menu.component.d.ts

@@ -1,4 +1,3 @@
-import { EventEmitter } from '@angular/core';
 import type { Menu } from 'primeng/menu';
 import type { MenuItem } from 'primeng/api';
 /**
@@ -6,20 +5,15 @@ import type { MenuItem } from 'primeng/api';
  * Uses PrimeNG Menu component.
  */
 export declare class ColumnHeaderMenuComponent {
-    columnId: string;
-    set canPinLeft(value: boolean);
-    set canPinRight(value: boolean);
-    set canUnpin(value: boolean);
-    pinLeft: EventEmitter<void>;
-    pinRight: EventEmitter<void>;
-    unpin: EventEmitter<void>;
-    menu: Menu;
-    private _canPinLeft;
-    private _canPinRight;
-    private _canUnpin;
-    menuModel: MenuItem[];
-    ngOnInit(): void;
-    private updateMenuModel;
+    readonly columnId: import("@angular/core").InputSignal<string>;
+    readonly canPinLeft: import("@angular/core").InputSignal<boolean>;
+    readonly canPinRight: import("@angular/core").InputSignal<boolean>;
+    readonly canUnpin: import("@angular/core").InputSignal<boolean>;
+    readonly onPinLeft: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly onPinRight: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly onUnpin: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly menuRef: import("@angular/core").Signal<Menu | undefined>;
+    readonly menuModel: import("@angular/core").Signal<MenuItem[]>;
     handlePinLeft(): void;
     handlePinRight(): void;
     handleUnpin(): void;

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

@@ -1,15 +1,12 @@
 import { ElementRef } from '@angular/core';
-import { ColumnReorderService, VirtualScrollService } from '@alaarab/ogrid-angular';
-import type { IColumnDef, IColumnGroupDef, RowId, HeaderFilterConfig } from '@alaarab/ogrid-angular';
-export declare class DataGridTableComponent<T = unknown> {
-    private readonly stateService;
-    readonly columnReorderService: ColumnReorderService<T>;
-    readonly virtualScrollService: VirtualScrollService;
-    readonly wrapperRef: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
-    readonly tableContainerRef: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
-    readonly items: import("@angular/core").InputSignal<T[]>;
+import { BaseDataGridTableComponent } from '@alaarab/ogrid-angular';
+import type { IOGridDataGridProps, IColumnDef, IColumnGroupDef, RowId } from '@alaarab/ogrid-angular';
+export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTableComponent<T> {
+    private readonly wrapperRef;
+    private readonly tableContainerRefEl;
+    readonly itemsInput: import("@angular/core").InputSignal<T[]>;
     readonly columns: import("@angular/core").InputSignal<(IColumnDef<T> | IColumnGroupDef<T>)[]>;
-    readonly getRowIdFn: import("@angular/core").InputSignal<(item: T) => RowId>;
+    readonly getRowIdInput: import("@angular/core").InputSignal<(item: T) => RowId>;
     readonly sortBy: import("@angular/core").InputSignal<string | undefined>;
     readonly sortDirection: import("@angular/core").InputSignal<"asc" | "desc">;
     readonly onColumnSort: import("@angular/core").InputSignal<(columnKey: string) => void>;
@@ -18,14 +15,14 @@ export declare class DataGridTableComponent<T = unknown> {
     readonly onColumnOrderChange: import("@angular/core").InputSignal<((order: string[]) => void) | undefined>;
     readonly onColumnResized: import("@angular/core").InputSignal<((columnId: string, width: number) => void) | undefined>;
     readonly onColumnPinned: import("@angular/core").InputSignal<((columnId: string, pinned: "left" | "right" | null) => void) | undefined>;
-    readonly pinnedColumns: import("@angular/core").InputSignal<Record<string, "left" | "right"> | undefined>;
+    readonly pinnedColumnsInput: import("@angular/core").InputSignal<Record<string, "left" | "right"> | undefined>;
     readonly initialColumnWidths: import("@angular/core").InputSignal<Record<string, number> | undefined>;
-    readonly freezeRows: import("@angular/core").InputSignal<number | undefined>;
-    readonly freezeCols: import("@angular/core").InputSignal<number | undefined>;
+    readonly freezeRowsInput: import("@angular/core").InputSignal<number | undefined>;
+    readonly freezeColsInput: import("@angular/core").InputSignal<number | undefined>;
     readonly layoutMode: import("@angular/core").InputSignal<"fill" | "content">;
     readonly suppressHorizontalScroll: import("@angular/core").InputSignal<boolean | undefined>;
-    readonly isLoading: import("@angular/core").InputSignal<boolean>;
-    readonly loadingMessage: import("@angular/core").InputSignal<string>;
+    readonly isLoadingInput: import("@angular/core").InputSignal<boolean>;
+    readonly loadingMessageInput: import("@angular/core").InputSignal<string>;
     readonly editable: import("@angular/core").InputSignal<boolean | undefined>;
     readonly cellSelection: import("@angular/core").InputSignal<boolean | undefined>;
     readonly onCellValueChanged: import("@angular/core").InputSignal<((event: {
@@ -35,10 +32,10 @@ export declare class DataGridTableComponent<T = unknown> {
         newValue: unknown;
         rowIndex: number;
     }) => void) | undefined>;
-    readonly onUndo: import("@angular/core").InputSignal<(() => void) | undefined>;
-    readonly onRedo: import("@angular/core").InputSignal<(() => void) | undefined>;
-    readonly canUndo: import("@angular/core").InputSignal<boolean | undefined>;
-    readonly canRedo: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly onUndoInput: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly onRedoInput: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly canUndoInput: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly canRedoInput: import("@angular/core").InputSignal<boolean | undefined>;
     readonly rowSelectionMode: import("@angular/core").InputSignal<"none" | "single" | "multiple">;
     readonly selectedRows: import("@angular/core").InputSignal<Set<RowId> | undefined>;
     readonly onSelectionChange: import("@angular/core").InputSignal<((event: {
@@ -52,18 +49,18 @@ export declare class DataGridTableComponent<T = unknown> {
     readonly loadingFilterOptions: import("@angular/core").InputSignal<Record<string, boolean>>;
     readonly peopleSearch: import("@angular/core").InputSignal<((query: string) => Promise<unknown[]>) | undefined>;
     readonly getUserByEmail: import("@angular/core").InputSignal<((email: string) => Promise<unknown>) | undefined>;
-    readonly emptyState: import("@angular/core").InputSignal<{
+    readonly emptyStateInput: import("@angular/core").InputSignal<{
         onClearAll: () => void;
         hasActiveFilters: boolean;
         message?: string;
         render?: unknown;
     } | undefined>;
     readonly onCellError: import("@angular/core").InputSignal<((error: Error) => void) | undefined>;
-    readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
-    readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+    readonly ariaLabelInput: import("@angular/core").InputSignal<string | undefined>;
+    readonly ariaLabelledByInput: import("@angular/core").InputSignal<string | undefined>;
     readonly showRowNumbers: import("@angular/core").InputSignal<boolean>;
-    readonly currentPage: import("@angular/core").InputSignal<number>;
-    readonly pageSize: import("@angular/core").InputSignal<number>;
+    readonly currentPageInput: import("@angular/core").InputSignal<number>;
+    readonly pageSizeInput: import("@angular/core").InputSignal<number>;
     readonly defaultMinWidth = 80;
     readonly statusBarClasses: {
         statusBar: string;
@@ -71,25 +68,19 @@ export declare class DataGridTableComponent<T = unknown> {
         statusBarLabel: string;
         statusBarValue: string;
     };
-    private readonly columnSizingOverrides;
+    private readonly primengColumnSizingOverrides;
     private resizeStartX;
     private resizeColumnId;
     private resizeStartWidth;
-    private lastMouseShift;
-    private columnSizingVersion;
     constructor();
-    readonly state: import("@angular/core").Signal<import("@alaarab/ogrid-angular").DataGridStateResult<T>>;
-    readonly tableContainerEl: import("@angular/core").Signal<HTMLDivElement | null>;
+    protected getProps(): IOGridDataGridProps<T> | undefined;
+    protected getWrapperRef(): ElementRef<HTMLElement> | undefined;
+    protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
     readonly resolvedAriaLabel: import("@angular/core").Signal<string | undefined>;
-    readonly rowNumberOffset: import("@angular/core").Signal<number>;
-    readonly headerRows: import("@angular/core").Signal<import("@alaarab/ogrid-core").HeaderRow<T>[]>;
-    readonly allowOverflowX: import("@angular/core").Signal<boolean>;
     readonly tableWidthStyle: import("@angular/core").Signal<"100%" | "fit-content">;
     readonly tableMinWidthStyle: import("@angular/core").Signal<"100%" | "max-content">;
-    readonly selectedCellCount: import("@angular/core").Signal<number | undefined>;
+    getColumnWidth(col: IColumnDef<T>): number;
     trackByRowId(_index: number, item: T): RowId;
-    getColumnWidth(col: IColumnDef<T>): number | undefined;
-    getFilterConfig(col: IColumnDef<T>): HeaderFilterConfig;
     getCellValueFn(item: T, col: IColumnDef<T>): unknown;
     resolveCellDisplay(col: IColumnDef<T>, item: T): string;
     getCellStyleObj(col: IColumnDef<T>, item: T): Record<string, string> | null;
@@ -100,26 +91,11 @@ export declare class DataGridTableComponent<T = unknown> {
     isInSelectionRange(rowIndex: number, colIdx: number): boolean;
     isSelectionEndCell(rowIndex: number, colIdx: number): boolean;
     getCellBackground(rowIndex: number, colIdx: number): string | null;
-    onMouseDown(e: MouseEvent): void;
-    onGridKeyDown(e: KeyboardEvent): void;
-    onCellMouseDown(e: MouseEvent, rowIndex: number, globalColIndex: number): void;
-    onCellDblClick(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number): void;
-    onCellContextMenu(e: MouseEvent): void;
+    onCellDblClickPrimeng(item: T, col: IColumnDef<T>, _rowIndex: number, _colIdx: number): void;
     onCellEditorCommit(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number, newValue: unknown): void;
-    onFillHandleMouseDown(e: MouseEvent): void;
-    onSelectAllChange(checked: boolean): void;
-    onRowClick(e: MouseEvent, item: T): void;
-    onRowCheckboxChange(item: T, checked: boolean, rowIndex: number, e: Event): void;
-    handlePaste(): void;
-    onHeaderMouseDown(columnId: string, event: MouseEvent): void;
-    onResizeStart(e: MouseEvent, col: IColumnDef<T>): void;
-    onPinColumn(columnId: string, side: 'left' | 'right'): void;
-    onUnpinColumn(columnId: string): void;
-    isPinned(columnId: string): 'left' | 'right' | undefined;
-    getPinState(columnId: string): {
-        canPinLeft: boolean;
-        canPinRight: boolean;
-        canUnpin: boolean;
-    };
+    onSelectAllChangePrimeng(checked: boolean): void;
+    onRowClickPrimeng(e: MouseEvent, item: T): void;
+    onRowCheckboxChangePrimeng(item: T, checked: boolean, rowIndex: number, _e: Event): void;
+    onResizeStartPrimeng(e: MouseEvent, col: IColumnDef<T>): void;
     private buildProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "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",
@@ -22,7 +22,7 @@
   "files": ["dist", "README.md", "LICENSE"],
   "engines": { "node": ">=18" },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.0.6"
+    "@alaarab/ogrid-angular": "2.0.7"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",