@alaarab/ogrid-angular-primeng 2.0.6 → 2.0.8

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

@@ -4,23 +4,21 @@ 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 {
+import { PopoverCellEditorComponent } from './popover-cell-editor.component';
+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 +27,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 +52,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 +66,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 +83,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,62 +91,43 @@ 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);
     }
     resolveCellDisplay(col, item) {
         const value = getCellValue(item, col);
-        return resolveCellDisplayContent(col, item, value);
+        const result = resolveCellDisplayContent(col, item, value);
+        return result != null ? String(result) : '';
     }
     getCellStyleObj(col, item) {
         return resolveCellStyle(col, item) ?? null;
@@ -171,10 +137,30 @@ 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;
+    }
+    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') {
@@ -187,13 +173,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 +189,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 +199,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 +251,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 +265,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 +293,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 +305,6 @@ DataGridTableComponent = __decorate([
         selector: 'ogrid-primeng-datagrid-table',
         standalone: true,
         imports: [
-            CommonModule,
             StatusBarComponent,
             GridContextMenuComponent,
             MarchingAntsOverlayComponent,
@@ -366,6 +312,7 @@ DataGridTableComponent = __decorate([
             ColumnHeaderFilterComponent,
             ColumnHeaderMenuComponent,
             InlineCellEditorComponent,
+            PopoverCellEditorComponent,
         ],
         changeDetection: ChangeDetectionStrategy.OnPush,
         providers: [DataGridStateService],
@@ -377,7 +324,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 +332,8 @@ DataGridTableComponent = __decorate([
         [attr.data-has-selection]="rowSelectionMode() !== 'none' ? 'true' : null"
         (contextmenu)="$event.preventDefault()"
         (keydown)="onGridKeyDown($event)"
-        (mousedown)="onMouseDown($event)"
+        (mousedown)="onWrapperMouseDown($event)"
+        (scroll)="onWrapperScroll($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 +348,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 +356,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 +375,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 +388,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 +446,21 @@ DataGridTableComponent = __decorate([
                   }
                 </thead>
 
-                @if (!state().viewModels.showEmptyInGrid) {
+                @if (!showEmptyInGrid()) {
                   <tbody>
-                    @for (item of items(); track trackByRowId($index, item); let rowIndex = $index) {
+                    @if (vsEnabled() && vsTopSpacerHeight() > 0) {
+                      <tr [style.height.px]="vsTopSpacerHeight()"></tr>
+                    }
+                    @for (item of vsVisibleItems(); track trackByRowId($index, item); let localIdx = $index) {
+                      @let rowIndex = vsStartIndex() + localIdx;
+                      @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 +469,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'"
@@ -538,7 +493,7 @@ DataGridTableComponent = __decorate([
                             [style.max-width.px]="getColumnWidth(col)"
                             [style.text-align]="col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : null"
                           >
-                            @if (isEditingCell(item, col)) {
+                            @if (isEditingCellInline(item, col)) {
                               <ogrid-primeng-inline-cell-editor
                                 [value]="getCellValueFn(item, col)"
                                 [item]="item"
@@ -546,14 +501,25 @@ 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 if (isEditingCellPopover(item, col)) {
+                              @let editorProps = buildPopoverEditorPropsForPrimeng(item, col, rowIndex, colIdx);
+                              <ogrid-primeng-popover-cell-editor
+                                [item]="item"
+                                [column]="col"
+                                [rowIndex]="rowIndex"
+                                [globalColIndex]="colIdx + colOffset()"
+                                [displayValue]="getCellValueFn(item, col)"
+                                [editorProps]="editorProps"
+                                [onCancel]="() => cancelEdit()"
+                              ></ogrid-primeng-popover-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'"
@@ -575,6 +541,9 @@ DataGridTableComponent = __decorate([
                         }
                       </tr>
                     }
+                    @if (vsEnabled() && vsBottomSpacerHeight() > 0) {
+                      <tr [style.height.px]="vsBottomSpacerHeight()"></tr>
+                    }
                   </tbody>
                 }
               </table>
@@ -588,7 +557,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 +579,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>
       }