@alaarab/ogrid-angular-primeng 2.0.9 → 2.0.12

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, ViewEncapsulation, } 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,43 @@ 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.columnReorder = 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',
@@ -66,19 +57,29 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
             statusBarLabel: 'ogrid-status-bar-label',
             statusBarValue: 'ogrid-status-bar-value',
         };
+        this.contextMenuClasses = {
+            contextMenu: 'ogrid-context-menu',
+            contextMenuItem: 'ogrid-context-menu-item',
+            contextMenuItemLabel: 'ogrid-context-menu-item-label',
+            contextMenuItemShortcut: 'ogrid-context-menu-item-shortcut',
+            contextMenuDivider: 'ogrid-context-menu-divider',
+        };
         // 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 +88,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 +124,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 +139,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 +207,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 +218,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(columnId),
+            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 +258,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 +272,191 @@ 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,
+            columnReorder: this.columnReorder,
+            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()
+], DataGridTableComponent.prototype, "columnReorder", 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',
@@ -315,13 +472,15 @@ DataGridTableComponent = __decorate([
             PopoverCellEditorComponent,
         ],
         changeDetection: ChangeDetectionStrategy.OnPush,
+        encapsulation: ViewEncapsulation.None,
         providers: [DataGridStateService],
         template: `
-    <div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column">
+    <div class="ogrid-root">
       <div
         #wrapper
         tabindex="0"
         role="region"
+        class="ogrid-scroll-wrapper"
         [attr.aria-label]="resolvedAriaLabel()"
         [attr.aria-labelledby]="ariaLabelledBy()"
         [attr.data-empty]="showEmptyInGrid() ? 'true' : null"
@@ -329,31 +488,24 @@ 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)"
         (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()"
         [style.--data-table-min-width]="tableMinWidthStyle()"
       >
-        <div style="position:relative">
-          <div [class.loading-dimmed]="isLoading() && items().length > 0" style="position:relative">
-            <div #tableContainer style="position:relative">
-              <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)">
+        <div class="ogrid-table-wrapper">
+          <div [class.loading-dimmed]="isLoading() && items().length > 0" class="ogrid-table-wrapper">
+            <div #tableContainer class="ogrid-table-wrapper">
+              <table class="ogrid-table">
+                <thead class="ogrid-thead">
                   @for (row of headerRows(); track $index; let rowIdx = $index) {
                     <tr>
                       @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
-                        <th
-                          scope="col"
-                          rowSpan="1"
-                          style="width:48px;min-width:48px;max-width:48px;padding:6px 4px;text-align:center;border-bottom:1px solid var(--ogrid-border, #e0e0e0)"
-                        >
+                        <th scope="col" rowSpan="1" class="ogrid-checkbox-header">
                           <input
                             type="checkbox"
                             [checked]="allSelected()"
@@ -367,23 +519,19 @@ DataGridTableComponent = __decorate([
                         <th [attr.rowSpan]="headerRows().length - 1"></th>
                       }
                       @if (rowIdx === headerRows().length - 1 && hasRowNumbersCol()) {
-                        <th
-                          scope="col"
-                          rowSpan="1"
-                          style="width:50px;min-width:50px;max-width:50px;padding:6px;text-align:center;font-weight:600;background:var(--ogrid-bg-subtle,#fafafa);color:var(--ogrid-text-secondary,#666);border-bottom:1px solid var(--ogrid-border,#e0e0e0);position:sticky;left:0;z-index:4"
-                        >
+                        <th scope="col" rowSpan="1" class="ogrid-row-number-header">
                           #
                         </th>
                       }
                       @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
-                        <th [attr.rowSpan]="headerRows().length - 1" style="width:50px;min-width:50px"></th>
+                        <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-row-number-spacer"></th>
                       }
                       @for (cell of row; track $index; let cellIdx = $index) {
                         @if (cell.isGroup) {
                           <th
                             [attr.colSpan]="cell.colSpan"
                             scope="colgroup"
-                            style="padding:6px 8px;text-align:center;font-weight:600;border-bottom:1px solid var(--ogrid-border, #e0e0e0)"
+                            class="ogrid-column-group-header"
                           >
                             {{ cell.label }}
                           </th>
@@ -392,18 +540,20 @@ DataGridTableComponent = __decorate([
                           @let pinned = isPinned(col.columnId);
                           <th
                             scope="col"
+                            class="ogrid-header-cell"
                             [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]="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)"
                           >
-                            <div style="display:flex;align-items:center;gap:4px;">
+                            <div class="ogrid-header-content">
                               <ogrid-primeng-column-header-filter
                                 [columnKey]="col.columnId"
                                 [columnName]="col.name"
@@ -424,18 +574,20 @@ 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
-                              style="position:absolute;top:0;right:0;bottom:0;width:4px;cursor:col-resize"
+                              class="ogrid-resize-handle"
                               (mousedown)="onResizeStartPrimeng($event, col)"
                               [attr.aria-label]="'Resize ' + col.name"
                             ></div>
@@ -453,7 +605,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"
@@ -462,7 +614,7 @@ DataGridTableComponent = __decorate([
                       >
                         @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)"
+                            class="ogrid-checkbox-cell"
                             [attr.data-row-index]="rowIndex"
                             [attr.data-col-index]="0"
                             (click)="$event.stopPropagation()"
@@ -476,21 +628,23 @@ DataGridTableComponent = __decorate([
                           </td>
                         }
                         @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"
-                          >
+                          <td class="ogrid-row-number-cell">
+
                             {{ rowNumberOffset() + rowIndex + 1 }}
                           </td>
                         }
                         @for (col of visibleCols(); track col.columnId; let colIdx = $index) {
                           @let pinned = isPinned(col.columnId);
                           <td
+                            [attr.data-column-id]="col.columnId"
                             [class.ogrid-td-pinned-left]="pinned === 'left'"
                             [class.ogrid-td-pinned-right]="pinned === 'right'"
-                            style="padding:0;border-bottom:1px solid var(--ogrid-border, #f0f0f0);position:relative"
+                            class="ogrid-data-cell"
                             [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 +666,7 @@ DataGridTableComponent = __decorate([
                                 [globalColIndex]="colIdx + colOffset()"
                                 [displayValue]="getCellValueFn(item, col)"
                                 [editorProps]="editorProps"
-                                [onCancel]="() => cancelEdit()"
+                                [onCancel]="cancelEditHandler"
                               ></ogrid-primeng-popover-cell-editor>
                             } @else {
                               <div
@@ -521,7 +675,7 @@ DataGridTableComponent = __decorate([
                                 (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"
+                                class="ogrid-cell-content"
                                 [style.cursor]="canEditCell(col, item) ? 'cell' : 'default'"
                                 [style.background]="getCellBackground(rowIndex, colIdx)"
                                 [style.outline]="isActiveCell(rowIndex, colIdx) ? '2px solid var(--ogrid-selection, #217346)' : null"
@@ -531,7 +685,7 @@ DataGridTableComponent = __decorate([
                                 @if (canEditCell(col, item) && isSelectionEndCell(rowIndex, colIdx)) {
                                   <div
                                     (mousedown)="onFillHandleMouseDown($event)"
-                                    style="position:absolute;bottom:-3px;right:-3px;width:7px;height:7px;background:var(--ogrid-selection, #217346);cursor:crosshair;z-index:2"
+                                    class="ogrid-fill-handle"
                                     aria-label="Fill handle"
                                   ></div>
                                 }
@@ -555,12 +709,15 @@ 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()) {
-                <div style="display:flex;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:var(--ogrid-muted, #999)">
+                <div class="ogrid-empty-container">
                   <div>
-                    <div style="font-weight:600;margin-bottom:8px">No results found</div>
+                    <div class="ogrid-empty-title">No results found</div>
                     <ogrid-empty-state
                       [message]="emptyState()?.message"
                       [hasActiveFilters]="emptyState()?.hasActiveFilters ?? false"
@@ -586,6 +743,7 @@ DataGridTableComponent = __decorate([
           [hasSelection]="hasCellSelection()"
           [canUndoProp]="canUndo()"
           [canRedoProp]="canRedo()"
+          [classNames]="contextMenuClasses"
           (copy)="handleCopy()"
           (cut)="handleCut()"
           (paste)="handlePaste()"
@@ -609,18 +767,229 @@ DataGridTableComponent = __decorate([
       }
 
       @if (isLoading()) {
-        <div
-          style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.7);z-index:10"
-          aria-live="polite"
-        >
-          <div style="display:flex;align-items:center;gap:8px;color:var(--ogrid-fg, #242424)">
-            <span style="font-size:14px">{{ loadingMessage() }}</span>
+        <div class="ogrid-loading-overlay" aria-live="polite">
+          <div class="ogrid-loading-content">
+            <span class="ogrid-loading-text">{{ loadingMessage() }}</span>
           </div>
         </div>
       }
     </div>
   `,
         styles: [`
+    /* ─── OGrid Theme Variables ─── */
+    :root {
+      --ogrid-bg: #ffffff;
+      --ogrid-fg: rgba(0, 0, 0, 0.87);
+      --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+      --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+      --ogrid-border: rgba(0, 0, 0, 0.12);
+      --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+      --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+      --ogrid-selected-row-bg: #e6f0fb;
+      --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+      --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+      --ogrid-accent: #0078d4;
+      --ogrid-selection-color: #217346;
+      --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+    }
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) {
+        --ogrid-bg: #1e1e1e;
+        --ogrid-fg: rgba(255, 255, 255, 0.87);
+        --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+        --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+        --ogrid-border: rgba(255, 255, 255, 0.12);
+        --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+        --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+        --ogrid-selected-row-bg: #1a3a5c;
+        --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+        --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+        --ogrid-accent: #4da6ff;
+        --ogrid-selection-color: #2ea043;
+        --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+      }
+    }
+    [data-theme="dark"] {
+      --ogrid-bg: #1e1e1e;
+      --ogrid-fg: rgba(255, 255, 255, 0.87);
+      --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+      --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+      --ogrid-border: rgba(255, 255, 255, 0.12);
+      --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+      --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+      --ogrid-selected-row-bg: #1a3a5c;
+      --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+      --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+      --ogrid-accent: #4da6ff;
+      --ogrid-selection-color: #2ea043;
+      --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+    }
+    :host { display: block; }
+    .ogrid-root {
+      position: relative;
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .ogrid-scroll-wrapper {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      position: relative;
+      background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-table-wrapper {
+      position: relative;
+    }
+    .ogrid-table {
+      width: var(--data-table-width, 100%);
+      min-width: var(--data-table-min-width, 100%);
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    .ogrid-thead {
+      z-index: 3;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      position: sticky;
+      top: 0;
+    }
+    .ogrid-checkbox-header {
+      width: 48px;
+      min-width: 48px;
+      max-width: 48px;
+      text-align: center;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      position: sticky;
+      top: 0;
+      z-index: 3;
+    }
+    .ogrid-row-number-header {
+      width: 50px;
+      min-width: 50px;
+      max-width: 50px;
+      text-align: center;
+      font-weight: 600;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      position: sticky;
+      top: 0;
+      z-index: 3;
+    }
+    .ogrid-row-number-spacer {
+      width: 50px;
+      min-width: 50px;
+      max-width: 50px;
+      background: var(--ogrid-header-bg, #f5f5f5);
+    }
+    .ogrid-column-group-header {
+      text-align: center;
+      font-weight: 600;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      padding: 6px 10px;
+    }
+    .ogrid-header-cell {
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      padding: 0;
+      position: relative;
+      user-select: none;
+    }
+    .ogrid-header-content {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 10px;
+    }
+    .ogrid-resize-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 4px;
+      cursor: col-resize;
+    }
+    .ogrid-checkbox-cell {
+      width: 48px;
+      min-width: 48px;
+      max-width: 48px;
+      padding: 6px 4px;
+      text-align: center;
+      border-bottom: 1px solid var(--ogrid-border, #f0f0f0);
+    }
+    .ogrid-row-number-cell {
+      width: 50px;
+      min-width: 50px;
+      max-width: 50px;
+      padding: 6px;
+      text-align: center;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+      border-bottom: 1px solid var(--ogrid-border, #f0f0f0);
+      position: sticky;
+      left: 0;
+      z-index: 3;
+    }
+    .ogrid-data-cell {
+      padding: 0;
+      border-bottom: 1px solid var(--ogrid-border, #f0f0f0);
+      position: relative;
+    }
+    .ogrid-cell-content {
+      padding: 6px 10px;
+      min-height: 20px;
+      cursor: default;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ogrid-scroll-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important; }
+    .ogrid-fill-handle {
+      position: absolute;
+      bottom: -3px;
+      right: -3px;
+      width: 7px;
+      height: 7px;
+      background: var(--ogrid-selection, #217346);
+      cursor: crosshair;
+      z-index: 2;
+    }
+    .ogrid-empty-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 48px 24px;
+      text-align: center;
+      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+    }
+    .ogrid-empty-title {
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    .ogrid-loading-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));
+      z-index: 10;
+    }
+    .ogrid-loading-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--ogrid-fg, #242424);
+    }
+    .ogrid-loading-text {
+      font-size: 14px;
+    }
     .loading-dimmed {
       opacity: 0.5;
       pointer-events: none;
@@ -637,6 +1006,7 @@ DataGridTableComponent = __decorate([
     }
     .ogrid-th-pinned-left {
       position: sticky;
+      top: 0;
       left: 0;
       z-index: 10;
       background: var(--ogrid-header-bg, #f5f5f5);
@@ -644,6 +1014,7 @@ DataGridTableComponent = __decorate([
     }
     .ogrid-th-pinned-right {
       position: sticky;
+      top: 0;
       right: 0;
       z-index: 10;
       background: var(--ogrid-header-bg, #f5f5f5);
@@ -663,6 +1034,97 @@ 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;
+    }
+
+    /* Context menu */
+    .ogrid-context-menu {
+      position: fixed;
+      z-index: 10000;
+      min-width: 160px;
+      padding: 4px 0;
+      background: var(--ogrid-bg, #fff);
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-radius: 6px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    }
+    .ogrid-context-menu-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 24px;
+      width: 100%;
+      padding: 6px 12px;
+      border: none;
+      background: none;
+      font-size: 13px;
+      text-align: left;
+      cursor: pointer;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-context-menu-item:hover:not(:disabled) {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+    }
+    .ogrid-context-menu-item:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .ogrid-context-menu-item-label {
+      flex: 1;
+    }
+    .ogrid-context-menu-item-shortcut {
+      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+      font-size: 0.85em;
+    }
+    .ogrid-context-menu-divider {
+      height: 1px;
+      margin: 4px 0;
+      background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
+    }
+    ::ng-deep .p-checkbox:focus-visible {
+      outline: 2px solid var(--primary-color, #6366f1);
+      outline-offset: 2px;
+    }
+
+    /* PrimeNG Menu popup overrides — must use !important to win over PrimeNG's CSS-variable-based defaults */
+    .p-menu {
+      background: var(--ogrid-bg, #ffffff) !important;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
+      border-radius: 4px !important;
+      padding: 4px 0 !important;
+    }
+    .p-menu-overlay {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
+    }
+    .p-menu-item-content {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+    .p-menu-item-link {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+      padding: 6px 12px !important;
+    }
+    .p-menu-item-label {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+      font-size: 0.875rem !important;
+    }
+    .p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+    .p-menu-separator {
+      border-color: var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
+      margin: 4px 0 !important;
+    }
   `],
     })
 ], DataGridTableComponent);