@alaarab/ogrid-angular-primeng 2.0.8 → 2.0.11

package/dist/esm/datagrid-table/datagrid-table.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, signal, computed, effect, viewChild, ChangeDetectionStrategy, } from '@angular/core';
+import { Component, Input, signal, computed, 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';
@@ -13,52 +13,42 @@ import { PopoverCellEditorComponent } from './popover-cell-editor.component';
 let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTableComponent {
     constructor() {
         super();
-        this.wrapperRef = viewChild('wrapper');
-        this.tableContainerRefEl = viewChild('tableContainer');
-        // Inputs mapped from IOGridDataGridProps
-        this.itemsInput = input.required({ alias: 'items' });
-        this.columns = input.required();
-        this.getRowIdInput = input.required({ alias: 'getRowId' });
-        this.sortBy = input(undefined);
-        this.sortDirection = input('asc');
-        this.onColumnSort = input.required();
-        this.visibleColumns = input.required();
-        this.columnOrder = input(undefined);
-        this.onColumnOrderChange = input(undefined);
-        this.onColumnResized = input(undefined);
-        this.onColumnPinned = input(undefined);
-        this.pinnedColumnsInput = input(undefined, { alias: 'pinnedColumns' });
-        this.initialColumnWidths = input(undefined);
-        this.freezeRowsInput = input(undefined, { alias: 'freezeRows' });
-        this.freezeColsInput = input(undefined, { alias: 'freezeCols' });
-        this.layoutMode = input('fill');
-        this.suppressHorizontalScroll = input(undefined);
-        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.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);
-        this.statusBar = input(undefined);
-        this.filters = input.required();
-        this.onFilterChange = input.required();
-        this.filterOptions = input({});
-        this.loadingFilterOptions = input({});
-        this.peopleSearch = input(undefined);
-        this.getUserByEmail = input(undefined);
-        this.emptyStateInput = input(undefined, { alias: 'emptyState' });
-        this.onCellError = input(undefined);
-        this.ariaLabelInput = input(undefined, { alias: 'aria-label' });
-        this.ariaLabelledByInput = input(undefined, { alias: 'aria-labelledby' });
-        this.showRowNumbers = input(false);
-        this.currentPageInput = input(1, { alias: 'currentPage' });
-        this.pageSizeInput = input(25, { alias: 'pageSize' });
+        this.sortBy = undefined;
+        this.sortDirection = 'asc';
+        this.columnOrder = undefined;
+        this.onColumnOrderChange = undefined;
+        this.onColumnResized = undefined;
+        this.onColumnPinned = undefined;
+        this.pinnedColumnsInput = undefined;
+        this.initialColumnWidths = undefined;
+        this.freezeRowsInput = undefined;
+        this.freezeColsInput = undefined;
+        this.layoutMode = 'fill';
+        this.suppressHorizontalScroll = undefined;
+        this.isLoadingInput = false;
+        this.loadingMessageInput = 'Loading\u2026';
+        this.editable = undefined;
+        this.cellSelection = undefined;
+        this.onCellValueChanged = undefined;
+        this.onUndoInput = undefined;
+        this.onRedoInput = undefined;
+        this.canUndoInput = undefined;
+        this.canRedoInput = undefined;
+        this.rowSelectionMode = 'none';
+        this.selectedRows = undefined;
+        this.onSelectionChange = undefined;
+        this.statusBar = undefined;
+        this.filterOptions = {};
+        this.loadingFilterOptions = {};
+        this.peopleSearch = undefined;
+        this.getUserByEmail = undefined;
+        this.emptyStateInput = undefined;
+        this.onCellError = undefined;
+        this.ariaLabelInput = undefined;
+        this.ariaLabelledByInput = undefined;
+        this.showRowNumbers = false;
+        this.currentPageInput = 1;
+        this.pageSizeInput = 25;
         this.defaultMinWidth = DEFAULT_MIN_COLUMN_WIDTH;
         this.statusBarClasses = {
             statusBar: 'ogrid-status-bar',
@@ -68,17 +58,20 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
         };
         // PrimeNG uses flat number overrides for column sizing
         this.primengColumnSizingOverrides = signal({});
+        this.propsSignal = signal(undefined);
         this.resizeStartX = 0;
         this.resizeColumnId = '';
         this.resizeStartWidth = 0;
+        // Bound method reference for template
+        this.cancelEditHandler = () => this.cancelEdit();
         // --- PrimeNG-specific computed signals ---
-        this.resolvedAriaLabel = computed(() => this.ariaLabelInput() ?? (this.ariaLabelledByInput() ? undefined : 'Data grid'));
+        this.resolvedAriaLabel = computed(() => this.ariaLabelInput ?? (this.ariaLabelledByInput ? undefined : 'Data grid'));
         this.tableWidthStyle = computed(() => {
             if (this.showEmptyInGrid())
                 return '100%';
             if (this.allowOverflowX())
                 return 'fit-content';
-            if (this.layoutMode() === 'content')
+            if (this.layoutMode === 'content')
                 return 'fit-content';
             return '100%';
         });
@@ -87,28 +80,32 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
                 return '100%';
             if (this.allowOverflowX())
                 return 'max-content';
-            if (this.layoutMode() === 'content')
+            if (this.layoutMode === 'content')
                 return 'max-content';
             return '100%';
         });
         this.initBase();
+    }
+    ngOnChanges(changes) {
         // Initialize column sizing from initial widths
-        effect(() => {
-            const iw = this.initialColumnWidths();
+        if (changes['initialColumnWidths']) {
+            const iw = this.initialColumnWidths;
             if (iw) {
                 this.primengColumnSizingOverrides.set({ ...iw });
             }
-        });
+        }
+        // Rebuild props signal whenever any input changes so computed chains track it
+        this.propsSignal.set(this.buildProps());
     }
     // --- Abstract method implementations ---
     getProps() {
-        return this.buildProps();
+        return this.propsSignal();
     }
     getWrapperRef() {
-        return this.wrapperRef();
+        return this.wrapperRef;
     }
     getTableContainerRef() {
-        return this.tableContainerRefEl();
+        return this.tableContainerRefEl;
     }
     // --- Column width override (PrimeNG uses flat number instead of { widthPx }) ---
     getColumnWidth(col) {
@@ -119,7 +116,7 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
     }
     // --- PrimeNG-specific helpers ---
     trackByRowId(_index, item) {
-        return this.getRowIdInput()(item);
+        return this.getRowIdInput(item);
     }
     getCellValueFn(item, col) {
         return getCellValue(item, col);
@@ -134,13 +131,13 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
     }
     canEditCell(col, item) {
         const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
-        return this.editable() !== false && !!colEditable && this.onCellValueChanged() != null && typeof col.cellEditor !== 'function';
+        return this.editable !== false && !!colEditable && this.onCellValueChanged != null && typeof col.cellEditor !== 'function';
     }
     isEditingCell(item, col) {
         const editing = this.editingCell();
         if (!editing)
             return false;
-        return editing.rowId === this.getRowIdInput()(item) && editing.columnId === col.columnId;
+        return editing.rowId === this.getRowIdInput(item) && editing.columnId === col.columnId;
     }
     isEditingCellInline(item, col) {
         return this.isEditingCell(item, col) && typeof col.cellEditor !== 'function';
@@ -202,7 +199,7 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
     // --- PrimeNG-specific event handlers ---
     onCellDblClickPrimeng(item, col, _rowIndex, _colIdx) {
         if (this.canEditCell(col, item)) {
-            this.stateService.setEditingCell({ rowId: this.getRowIdInput()(item), columnId: col.columnId });
+            this.stateService.setEditingCell({ rowId: this.getRowIdInput(item), columnId: col.columnId });
         }
     }
     onCellEditorCommit(item, col, rowIndex, colIdx, newValue) {
@@ -213,14 +210,27 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
         this.state().rowSelection.handleSelectAll(checked);
     }
     onRowClickPrimeng(e, item) {
-        if (this.rowSelectionMode() !== 'single')
+        if (this.rowSelectionMode !== 'single')
             return;
-        const rowId = this.getRowIdInput()(item);
+        const rowId = this.getRowIdInput(item);
         const ids = this.selectedRowIds();
         this.state().rowSelection.updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
     }
+    getColumnHeaderMenuHandlers(columnId) {
+        return {
+            onPinLeft: () => this.onPinColumn(columnId, 'left'),
+            onPinRight: () => this.onPinColumn(columnId, 'right'),
+            onUnpin: () => this.onUnpinColumn(columnId),
+            onSortAsc: () => this.onSortAsc(columnId),
+            onSortDesc: () => this.onSortDesc(columnId),
+            onClearSort: () => this.onClearSort(),
+            onAutosizeThis: () => this.onAutosizeColumn(columnId),
+            onAutosizeAll: () => this.onAutosizeAllColumns(),
+            onClose: () => { }
+        };
+    }
     onRowCheckboxChangePrimeng(item, checked, rowIndex, _e) {
-        const rowId = this.getRowIdInput()(item);
+        const rowId = this.getRowIdInput(item);
         this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
     }
     onResizeStartPrimeng(e, col) {
@@ -240,7 +250,7 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
             window.removeEventListener('mouseup', onUp, true);
             const finalWidth = this.primengColumnSizingOverrides()[this.resizeColumnId];
             if (finalWidth) {
-                this.onColumnResized()?.(this.resizeColumnId, finalWidth);
+                this.onColumnResized?.(this.resizeColumnId, finalWidth);
                 const overrides = {};
                 for (const [id, w] of Object.entries(this.primengColumnSizingOverrides())) {
                     overrides[id] = { widthPx: w };
@@ -254,52 +264,187 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
     // --- Build props ---
     buildProps() {
         return {
-            items: this.itemsInput(),
-            columns: this.columns(),
-            getRowId: this.getRowIdInput(),
-            sortBy: this.sortBy(),
-            sortDirection: this.sortDirection(),
-            onColumnSort: this.onColumnSort(),
-            visibleColumns: this.visibleColumns(),
-            columnOrder: this.columnOrder(),
-            onColumnOrderChange: this.onColumnOrderChange(),
-            onColumnResized: this.onColumnResized(),
-            onColumnPinned: this.onColumnPinned(),
-            pinnedColumns: this.pinnedColumnsInput(),
-            initialColumnWidths: this.initialColumnWidths(),
-            freezeRows: this.freezeRowsInput(),
-            freezeCols: this.freezeColsInput(),
-            layoutMode: this.layoutMode(),
-            suppressHorizontalScroll: this.suppressHorizontalScroll(),
-            isLoading: this.isLoadingInput(),
-            loadingMessage: this.loadingMessageInput(),
-            editable: this.editable(),
-            cellSelection: this.cellSelection(),
-            onCellValueChanged: this.onCellValueChanged(),
-            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.currentPageInput(),
-            pageSize: this.pageSizeInput(),
-            statusBar: this.statusBar(),
-            filters: this.filters(),
-            onFilterChange: this.onFilterChange(),
-            filterOptions: this.filterOptions(),
-            loadingFilterOptions: this.loadingFilterOptions(),
-            peopleSearch: this.peopleSearch(),
-            getUserByEmail: this.getUserByEmail(),
-            emptyState: this.emptyStateInput(),
-            onCellError: this.onCellError(),
-            'aria-label': this.ariaLabelInput(),
-            'aria-labelledby': this.ariaLabelledByInput(),
+            items: this.itemsInput,
+            columns: this.columns,
+            getRowId: this.getRowIdInput,
+            sortBy: this.sortBy,
+            sortDirection: this.sortDirection,
+            onColumnSort: this.onColumnSort,
+            visibleColumns: this.visibleColumns,
+            columnOrder: this.columnOrder,
+            onColumnOrderChange: this.onColumnOrderChange,
+            onColumnResized: this.onColumnResized,
+            onColumnPinned: this.onColumnPinned,
+            pinnedColumns: this.pinnedColumnsInput,
+            initialColumnWidths: this.initialColumnWidths,
+            freezeRows: this.freezeRowsInput,
+            freezeCols: this.freezeColsInput,
+            layoutMode: this.layoutMode,
+            suppressHorizontalScroll: this.suppressHorizontalScroll,
+            isLoading: this.isLoadingInput,
+            loadingMessage: this.loadingMessageInput,
+            editable: this.editable,
+            cellSelection: this.cellSelection,
+            onCellValueChanged: this.onCellValueChanged,
+            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.currentPageInput,
+            pageSize: this.pageSizeInput,
+            statusBar: this.statusBar,
+            filters: this.filters,
+            onFilterChange: this.onFilterChange,
+            filterOptions: this.filterOptions,
+            loadingFilterOptions: this.loadingFilterOptions,
+            peopleSearch: this.peopleSearch,
+            getUserByEmail: this.getUserByEmail,
+            emptyState: this.emptyStateInput,
+            onCellError: this.onCellError,
+            'aria-label': this.ariaLabelInput,
+            'aria-labelledby': this.ariaLabelledByInput,
         };
     }
 };
+__decorate([
+    ViewChild('wrapper')
+], DataGridTableComponent.prototype, "wrapperRef", void 0);
+__decorate([
+    ViewChild('tableContainer')
+], DataGridTableComponent.prototype, "tableContainerRefEl", void 0);
+__decorate([
+    Input({ required: true, alias: 'items' })
+], DataGridTableComponent.prototype, "itemsInput", void 0);
+__decorate([
+    Input({ required: true })
+], DataGridTableComponent.prototype, "columns", void 0);
+__decorate([
+    Input({ required: true, alias: 'getRowId' })
+], DataGridTableComponent.prototype, "getRowIdInput", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "sortBy", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "sortDirection", void 0);
+__decorate([
+    Input({ required: true })
+], DataGridTableComponent.prototype, "onColumnSort", void 0);
+__decorate([
+    Input({ required: true })
+], DataGridTableComponent.prototype, "visibleColumns", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "columnOrder", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "onColumnOrderChange", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "onColumnResized", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "onColumnPinned", void 0);
+__decorate([
+    Input({ alias: 'pinnedColumns' })
+], DataGridTableComponent.prototype, "pinnedColumnsInput", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "initialColumnWidths", void 0);
+__decorate([
+    Input({ alias: 'freezeRows' })
+], DataGridTableComponent.prototype, "freezeRowsInput", void 0);
+__decorate([
+    Input({ alias: 'freezeCols' })
+], DataGridTableComponent.prototype, "freezeColsInput", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "layoutMode", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "suppressHorizontalScroll", void 0);
+__decorate([
+    Input({ alias: 'isLoading' })
+], DataGridTableComponent.prototype, "isLoadingInput", void 0);
+__decorate([
+    Input({ alias: 'loadingMessage' })
+], DataGridTableComponent.prototype, "loadingMessageInput", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "editable", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "cellSelection", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "onCellValueChanged", void 0);
+__decorate([
+    Input({ alias: 'onUndo' })
+], DataGridTableComponent.prototype, "onUndoInput", void 0);
+__decorate([
+    Input({ alias: 'onRedo' })
+], DataGridTableComponent.prototype, "onRedoInput", void 0);
+__decorate([
+    Input({ alias: 'canUndo' })
+], DataGridTableComponent.prototype, "canUndoInput", void 0);
+__decorate([
+    Input({ alias: 'canRedo' })
+], DataGridTableComponent.prototype, "canRedoInput", void 0);
+__decorate([
+    Input({ alias: 'rowSelection' })
+], DataGridTableComponent.prototype, "rowSelectionMode", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "selectedRows", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "onSelectionChange", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "statusBar", void 0);
+__decorate([
+    Input({ required: true })
+], DataGridTableComponent.prototype, "filters", void 0);
+__decorate([
+    Input({ required: true })
+], DataGridTableComponent.prototype, "onFilterChange", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "filterOptions", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "loadingFilterOptions", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "peopleSearch", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "getUserByEmail", void 0);
+__decorate([
+    Input({ alias: 'emptyState' })
+], DataGridTableComponent.prototype, "emptyStateInput", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "onCellError", void 0);
+__decorate([
+    Input({ alias: 'aria-label' })
+], DataGridTableComponent.prototype, "ariaLabelInput", void 0);
+__decorate([
+    Input({ alias: 'aria-labelledby' })
+], DataGridTableComponent.prototype, "ariaLabelledByInput", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "showRowNumbers", void 0);
+__decorate([
+    Input({ alias: 'currentPage' })
+], DataGridTableComponent.prototype, "currentPageInput", void 0);
+__decorate([
+    Input({ alias: 'pageSize' })
+], DataGridTableComponent.prototype, "pageSizeInput", void 0);
 DataGridTableComponent = __decorate([
     Component({
         selector: 'ogrid-primeng-datagrid-table',
@@ -329,7 +474,7 @@ DataGridTableComponent = __decorate([
         [attr.data-freeze-rows]="freezeRows() != null && freezeRows()! >= 1 ? freezeRows() : null"
         [attr.data-freeze-cols]="freezeCols() != null && freezeCols()! >= 1 ? freezeCols() : null"
         [attr.data-overflow-x]="allowOverflowX() ? 'true' : 'false'"
-        [attr.data-has-selection]="rowSelectionMode() !== 'none' ? 'true' : null"
+        [attr.data-has-selection]="rowSelectionMode !== 'none' ? 'true' : null"
         (contextmenu)="$event.preventDefault()"
         (keydown)="onGridKeyDown($event)"
         (mousedown)="onWrapperMouseDown($event)"
@@ -345,7 +490,7 @@ DataGridTableComponent = __decorate([
               <table
                 style="width:var(--data-table-width, 100%);min-width:var(--data-table-min-width, 100%);border-collapse:collapse;table-layout:fixed"
               >
-                <thead style="position:sticky;top:0;z-index:3;background:var(--ogrid-header-bg, #f5f5f5)">
+                <thead style="z-index:3;background:var(--ogrid-header-bg, #f5f5f5)">
                   @for (row of headerRows(); track $index; let rowIdx = $index) {
                     <tr>
                       @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
@@ -396,10 +541,12 @@ DataGridTableComponent = __decorate([
                             [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="padding:6px 8px;text-align:left;font-weight:600;border-bottom:1px solid var(--ogrid-border, #e0e0e0);position:sticky;top:0;background:var(--ogrid-header-bg, #f5f5f5);z-index:3"
                             [style.min-width.px]="col.minWidth ?? defaultMinWidth"
                             [style.width.px]="getColumnWidth(col)"
                             [style.max-width.px]="getColumnWidth(col)"
+                            [style.left.px]="pinned === 'left' ? getPinnedLeftOffset(col.columnId) : null"
+                            [style.right.px]="pinned === 'right' ? getPinnedRightOffset(col.columnId) : null"
                             [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
                             (mousedown)="onHeaderMouseDown(col.columnId, $event)"
                           >
@@ -424,14 +571,16 @@ DataGridTableComponent = __decorate([
                                 [onDateChange]="getFilterConfig(col).onDateChange"
                               ></ogrid-primeng-column-header-filter>
                               @let colPinState = getPinState(col.columnId);
+                              @let colSortState = getSortState(col.columnId);
                               <column-header-menu
                                 [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"
+                                [currentSort]="colSortState"
+                                [isSortable]="col.sortable !== false"
+                                [isResizable]="col.resizable !== false"
+                                [handlers]="getColumnHeaderMenuHandlers(col.columnId)"
                               />
                             </div>
                             <div
@@ -453,7 +602,7 @@ DataGridTableComponent = __decorate([
                     }
                     @for (item of vsVisibleItems(); track trackByRowId($index, item); let localIdx = $index) {
                       @let rowIndex = vsStartIndex() + localIdx;
-                      @let rowId = getRowIdInput()(item);
+                      @let rowId = getRowIdInput(item);
                       @let isSelected = selectedRowIds().has(rowId);
                       <tr
                         [attr.data-row-id]="rowId"
@@ -491,6 +640,8 @@ DataGridTableComponent = __decorate([
                             [style.min-width.px]="col.minWidth ?? defaultMinWidth"
                             [style.width.px]="getColumnWidth(col)"
                             [style.max-width.px]="getColumnWidth(col)"
+                            [style.left.px]="pinned === 'left' ? getPinnedLeftOffset(col.columnId) : null"
+                            [style.right.px]="pinned === 'right' ? getPinnedRightOffset(col.columnId) : null"
                             [style.text-align]="col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : null"
                           >
                             @if (isEditingCellInline(item, col)) {
@@ -512,7 +663,7 @@ DataGridTableComponent = __decorate([
                                 [globalColIndex]="colIdx + colOffset()"
                                 [displayValue]="getCellValueFn(item, col)"
                                 [editorProps]="editorProps"
-                                [onCancel]="() => cancelEdit()"
+                                [onCancel]="cancelEditHandler"
                               ></ogrid-primeng-popover-cell-editor>
                             } @else {
                               <div
@@ -555,6 +706,9 @@ DataGridTableComponent = __decorate([
                 [cutRange]="state().interaction.cutRange"
                 [colOffset]="state().layout.colOffset"
                 [columnSizingVersion]="columnSizingVersion()"
+                [items]="items()"
+                [visibleColumns]="propsVisibleColumns()"
+                [columnOrder]="propsColumnOrder()"
               ></ogrid-marching-ants-overlay>
 
               @if (showEmptyInGrid() && emptyState()) {
@@ -637,6 +791,7 @@ DataGridTableComponent = __decorate([
     }
     .ogrid-th-pinned-left {
       position: sticky;
+      top: 0;
       left: 0;
       z-index: 10;
       background: var(--ogrid-header-bg, #f5f5f5);
@@ -644,6 +799,7 @@ DataGridTableComponent = __decorate([
     }
     .ogrid-th-pinned-right {
       position: sticky;
+      top: 0;
       right: 0;
       z-index: 10;
       background: var(--ogrid-header-bg, #f5f5f5);
@@ -663,6 +819,21 @@ DataGridTableComponent = __decorate([
       background: var(--ogrid-bg, #fff);
       border-right: 2px solid var(--ogrid-primary, #217346);
     }
+    ::ng-deep th:focus-visible,
+    ::ng-deep td:focus-visible {
+      outline: 2px solid var(--primary-color, #6366f1);
+      outline-offset: -2px;
+      z-index: 11;
+    }
+    ::ng-deep .p-button:focus-visible,
+    ::ng-deep button:focus-visible {
+      outline: 2px solid var(--primary-color, #6366f1);
+      outline-offset: 2px;
+    }
+    ::ng-deep .p-checkbox:focus-visible {
+      outline: 2px solid var(--primary-color, #6366f1);
+      outline-offset: 2px;
+    }
   `],
     })
 ], DataGridTableComponent);