@alaarab/ogrid-angular-primeng 2.1.3 → 2.1.5

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

@@ -1,1015 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, } from '@angular/core';
-import { BaseDataGridTableComponent, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, DEFAULT_MIN_COLUMN_WIDTH, OGRID_THEME_VARS_CSS, } from '@alaarab/ogrid-angular';
-import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
-import { ColumnHeaderMenuComponent } from '../column-header-menu/column-header-menu.component';
-import { InlineCellEditorComponent } from './inline-cell-editor.component';
-import { PopoverCellEditorComponent } from './popover-cell-editor.component';
-let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTableComponent {
-    constructor() {
-        super();
-        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.layoutMode = 'fill';
-        this.suppressHorizontalScroll = undefined;
-        this.stickyHeaderInput = 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',
-            statusBarItem: 'ogrid-status-bar-item',
-            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.tableWidthStyle = computed(() => {
-            if (this.showEmptyInGrid())
-                return '100%';
-            if (this.allowOverflowX())
-                return 'fit-content';
-            if (this.layoutMode === 'content')
-                return 'fit-content';
-            return '100%';
-        });
-        this.tableMinWidthStyle = computed(() => {
-            if (this.showEmptyInGrid())
-                return '100%';
-            if (this.allowOverflowX())
-                return 'max-content';
-            if (this.layoutMode === 'content')
-                return 'max-content';
-            return '100%';
-        });
-        this.initBase();
-    }
-    ngOnChanges(changes) {
-        // Initialize column sizing from initial widths
-        if (changes['initialColumnWidths']) {
-            const iw = this.initialColumnWidths;
-            if (iw) {
-                this.primengColumnSizingOverrides.set({ ...iw });
-            }
-        }
-        // Rebuild props and only set if values actually changed (shallow compare)
-        const next = this.buildProps();
-        const prev = this.propsSignal();
-        if (!prev || !this.shallowEqual(prev, next)) {
-            this.propsSignal.set(next);
-        }
-    }
-    /** Shallow-compare two props objects by their top-level keys. */
-    shallowEqual(a, b) {
-        const aObj = a;
-        const bObj = b;
-        const keysA = Object.keys(aObj);
-        const keysB = Object.keys(bObj);
-        if (keysA.length !== keysB.length)
-            return false;
-        for (const key of keysA) {
-            if (aObj[key] !== bObj[key])
-                return false;
-        }
-        return true;
-    }
-    // --- Abstract method implementations ---
-    getProps() {
-        return this.propsSignal();
-    }
-    getWrapperRef() {
-        return this.wrapperRef;
-    }
-    getTableContainerRef() {
-        return this.tableContainerRefEl;
-    }
-    // --- Column width override (PrimeNG uses flat number instead of { widthPx }) ---
-    getColumnWidth(col) {
-        const override = this.primengColumnSizingOverrides()[col.columnId];
-        if (override)
-            return override;
-        return col.idealWidth ?? col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-    }
-    // --- PrimeNG-specific helpers ---
-    trackByRowId(_index, item) {
-        return this.getRowIdInput(item);
-    }
-    // --- PrimeNG-specific event handlers ---
-    onSelectAllChangePrimeng(checked) {
-        this.state().rowSelection.handleSelectAll(checked);
-    }
-    onRowClickPrimeng(e, item) {
-        if (this.rowSelectionMode !== 'single')
-            return;
-        const rowId = this.getRowIdInput(item);
-        const ids = this.selectedRowIds();
-        this.state().rowSelection.updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
-    }
-    onRowCheckboxChangePrimeng(item, checked, rowIndex, _e) {
-        const rowId = this.getRowIdInput(item);
-        this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
-    }
-    onResizeStartPrimeng(e, col) {
-        e.preventDefault();
-        // Clear cell selection before resize so selection outlines don't persist during drag
-        this.state().interaction.setActiveCell?.(null);
-        this.state().interaction.setSelectionRange?.(null);
-        this.getWrapperRef()?.nativeElement.focus({ preventScroll: true });
-        this.resizeStartX = e.clientX;
-        this.resizeColumnId = col.columnId;
-        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.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.primengColumnSizingOverrides()[this.resizeColumnId];
-            if (finalWidth) {
-                this.onColumnResized?.(this.resizeColumnId, finalWidth);
-                const overrides = {};
-                for (const [id, w] of Object.entries(this.primengColumnSizingOverrides())) {
-                    overrides[id] = { widthPx: w };
-                }
-                this.state().layout.setColumnSizingOverrides(overrides);
-            }
-        };
-        window.addEventListener('mousemove', onMove, true);
-        window.addEventListener('mouseup', onUp, true);
-    }
-    // --- 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,
-            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,
-            stickyHeader: this.stickyHeaderInput,
-            '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()
-], DataGridTableComponent.prototype, "layoutMode", void 0);
-__decorate([
-    Input()
-], DataGridTableComponent.prototype, "suppressHorizontalScroll", void 0);
-__decorate([
-    Input()
-], DataGridTableComponent.prototype, "stickyHeaderInput", 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',
-        standalone: true,
-        imports: [
-            StatusBarComponent,
-            GridContextMenuComponent,
-            MarchingAntsOverlayComponent,
-            EmptyStateComponent,
-            ColumnHeaderFilterComponent,
-            ColumnHeaderMenuComponent,
-            InlineCellEditorComponent,
-            PopoverCellEditorComponent,
-        ],
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        encapsulation: ViewEncapsulation.None,
-        providers: [DataGridStateService, ColumnReorderService, VirtualScrollService],
-        template: `
-    <div class="ogrid-root">
-      <div
-        #wrapper
-        tabindex="0"
-        role="region"
-        class="ogrid-scroll-wrapper"
-        [class.ogrid-scroll-wrapper--loading-empty]="isLoading() && items().length === 0"
-        [attr.aria-label]="resolvedAriaLabel()"
-        [attr.aria-labelledby]="ariaLabelledBy()"
-        [attr.data-empty]="showEmptyInGrid() ? 'true' : null"
-        [attr.data-column-count]="state().layout.totalColCount"
-        [attr.data-overflow-x]="allowOverflowX() ? 'true' : 'false'"
-        [attr.data-has-selection]="rowSelectionMode !== 'none' ? 'true' : null"
-        (contextmenu)="$event.preventDefault()"
-        (keydown)="onGridKeyDown($event)"
-        (mousedown)="onWrapperMouseDown($event)"
-        (scroll)="onWrapperScroll($event)"
-        [style.--data-table-column-count]="state().layout.totalColCount"
-        [style.--data-table-width]="tableWidthStyle()"
-        [style.--data-table-min-width]="tableMinWidthStyle()"
-        [style.--ogrid-row-height]="rowHeightCssVar()"
-      >
-        <div class="ogrid-table-wrapper">
-          <div [class.loading-dimmed]="isLoading() && items().length > 0" class="ogrid-table-wrapper">
-            <div #tableContainer class="ogrid-table-wrapper">
-              <table class="ogrid-table">
-                <thead [class]="stickyHeader() ? 'ogrid-thead ogrid-sticky-header' : 'ogrid-thead'">
-                  @for (row of headerRows(); track $index; let rowIdx = $index) {
-                    <tr>
-                      @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
-                        <th scope="col" rowSpan="1" class="ogrid-checkbox-header">
-                          <input
-                            type="checkbox"
-                            [checked]="allSelected()"
-                            [indeterminate]="someSelected() && !allSelected()"
-                            (change)="onSelectAllChangePrimeng($any($event.target).checked)"
-                            aria-label="Select all rows"
-                          />
-                        </th>
-                      }
-                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasCheckboxCol()) {
-                        <th [attr.rowSpan]="headerRows().length - 1"></th>
-                      }
-                      @if (rowIdx === headerRows().length - 1 && hasRowNumbersCol()) {
-                        <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" class="ogrid-row-number-spacer"></th>
-                      }
-                      @for (cell of row; track cell.columnDef?.columnId ?? $index; let cellIdx = $index) {
-                        @if (cell.isGroup) {
-                          <th
-                            [attr.colSpan]="cell.colSpan"
-                            scope="colgroup"
-                            class="ogrid-column-group-header"
-                          >
-                            {{ cell.label }}
-                          </th>
-                        } @else {
-                          @let col = asColumnDef(cell.columnDef);
-                          @let pinned = isPinned(col.columnId);
-                          @let config = getFilterConfig(col);
-                          @let sortState = getSortState(col.columnId);
-                          @let ariaSort = sortState === 'asc' ? 'ascending' : sortState === 'desc' ? 'descending' : null;
-                          <th
-                            scope="col"
-                            class="ogrid-header-cell"
-                            [attr.data-column-id]="col.columnId"
-                            [attr.aria-sort]="ariaSort"
-                            [attr.rowSpan]="headerRows().length > 1 && rowIdx < headerRows().length - 1 ? headerRows().length - rowIdx : null"
-                            [class.ogrid-th-pinned-left]="pinned === 'left'"
-                            [class.ogrid-th-pinned-right]="pinned === 'right'"
-                            [style.min-width.px]="getEffectiveMinWidth(col)"
-                            [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 class="ogrid-header-content">
-                              <ogrid-primeng-column-header-filter
-                                [columnKey]="col.columnId"
-                                [columnName]="col.name"
-                                [filterType]="config.filterType"
-                                [isSorted]="config.isSorted ?? false"
-                                [isSortedDescending]="config.isSortedDescending ?? false"
-                                [onSort]="config.onSort"
-                                [selectedValues]="config.selectedValues"
-                                [onFilterChange]="config.onFilterChange"
-                                [options]="config.options ?? []"
-                                [isLoadingOptions]="config.isLoadingOptions ?? false"
-                                [textValue]="config.textValue ?? ''"
-                                [onTextChange]="config.onTextChange"
-                                [selectedUser]="config.selectedUser"
-                                [onUserChange]="config.onUserChange"
-                                [peopleSearch]="config.peopleSearch"
-                                [dateValue]="config.dateValue"
-                                [onDateChange]="config.onDateChange"
-                              ></ogrid-primeng-column-header-filter>
-                              @let colPinState = getPinState(col.columnId);
-                              <column-header-menu
-                                [columnId]="col.columnId"
-                                [canPinLeft]="colPinState.canPinLeft"
-                                [canPinRight]="colPinState.canPinRight"
-                                [canUnpin]="colPinState.canUnpin"
-                                [currentSort]="sortState"
-                                [isSortable]="col.sortable !== false"
-                                [isResizable]="col.resizable !== false"
-                                [handlers]="getColumnMenuHandlersMemoized(col.columnId)"
-                              />
-                            </div>
-                            <div
-                              class="ogrid-resize-handle"
-                              (mousedown)="onResizeStartPrimeng($event, col)"
-                              [attr.aria-label]="'Resize ' + col.name"
-                            ></div>
-                          </th>
-                        }
-                      }
-                    </tr>
-                  }
-                </thead>
-
-                @if (!showEmptyInGrid()) {
-                  <tbody>
-                    @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]="rowId"
-                        [style.background]="isSelected ? 'var(--ogrid-selected-bg, #e8f0fe)' : null"
-                        (click)="onRowClickPrimeng($event, item)"
-                      >
-                        @if (hasCheckboxCol()) {
-                          <td
-                            class="ogrid-checkbox-cell"
-                            [attr.data-row-index]="rowIndex"
-                            [attr.data-col-index]="0"
-                            (click)="$event.stopPropagation()"
-                          >
-                            <input
-                              type="checkbox"
-                              [checked]="isSelected"
-                              (change)="onRowCheckboxChangePrimeng(item, $any($event.target).checked, rowIndex, $event)"
-                              [attr.aria-label]="'Select row ' + (rowIndex + 1)"
-                            />
-                          </td>
-                        }
-                        @if (hasRowNumbersCol()) {
-                          <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'"
-                            class="ogrid-data-cell"
-                            [style.min-width.px]="getEffectiveMinWidth(col)"
-                            [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"
-                          >
-                            @let descriptor = getCellDescriptor(item, col, rowIndex, colIdx);
-                            @if (descriptor.mode === 'editing-inline') {
-                              <div class="ogrid-editing-cell">
-                              <ogrid-primeng-inline-cell-editor
-                                [value]="descriptor.value"
-                                [item]="item"
-                                [column]="col"
-                                [rowIndex]="rowIndex"
-                                [editorType]="descriptor.editorType ?? 'text'"
-                                (commit)="commitEdit(item, col.columnId, descriptor.value, $event, rowIndex, descriptor.globalColIndex)"
-                                (cancel)="cancelEdit()"
-                              ></ogrid-primeng-inline-cell-editor>
-                              </div>
-                            } @else if (descriptor.mode === 'editing-popover') {
-                              @let editorProps = buildPopoverEditorProps(item, col, descriptor);
-                              <ogrid-primeng-popover-cell-editor
-                                [item]="item"
-                                [column]="col"
-                                [rowIndex]="rowIndex"
-                                [globalColIndex]="descriptor.globalColIndex"
-                                [displayValue]="descriptor.displayValue"
-                                [editorProps]="editorProps"
-                                [onCancel]="cancelEditHandler"
-                              ></ogrid-primeng-popover-cell-editor>
-                            } @else {
-                              <div
-                                [attr.data-row-index]="rowIndex"
-                                [attr.data-col-index]="descriptor.globalColIndex"
-                                (mousedown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
-                                (dblclick)="descriptor.canEditAny ? onCellDblClick(descriptor.rowId, col.columnId) : null"
-                                (contextmenu)="onCellContextMenu($event)"
-                                class="ogrid-cell-content"
-                                [style.cursor]="descriptor.canEditAny ? 'cell' : 'default'"
-                                [style.background]="descriptor.isInRange ? 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))' : null"
-                                [style.outline]="descriptor.isActive ? '2px solid var(--ogrid-selection, #217346)' : null"
-                                [style.outline-offset]="descriptor.isActive ? '-2px' : null"
-                              >
-                                <span [style]="resolveCellStyleFn(col, item)">{{ resolveCellContent(col, item, descriptor.displayValue) }}</span>
-                                @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
-                                  <div
-                                    (mousedown)="onFillHandleMouseDown($event)"
-                                    class="ogrid-fill-handle"
-                                    aria-label="Fill handle"
-                                  ></div>
-                                }
-                              </div>
-                            }
-                          </td>
-                        }
-                      </tr>
-                    }
-                    @if (vsEnabled() && vsBottomSpacerHeight() > 0) {
-                      <tr [style.height.px]="vsBottomSpacerHeight()"></tr>
-                    }
-                  </tbody>
-                }
-              </table>
-
-              <ogrid-marching-ants-overlay
-                [containerEl]="tableContainerEl()"
-                [selectionRange]="state().interaction.selectionRange"
-                [copyRange]="state().interaction.copyRange"
-                [cutRange]="state().interaction.cutRange"
-                [colOffset]="state().layout.colOffset"
-                [columnSizingVersion]="columnSizingVersion()"
-                [items]="items()"
-                [visibleColumns]="propsVisibleColumns()"
-                [columnOrder]="propsColumnOrder()"
-              ></ogrid-marching-ants-overlay>
-
-              @if (showEmptyInGrid() && emptyState()) {
-                <div class="ogrid-empty-container">
-                  <div>
-                    <div class="ogrid-empty-title">No results found</div>
-                    <ogrid-empty-state
-                      [message]="emptyState()?.message"
-                      [hasActiveFilters]="emptyState()?.hasActiveFilters ?? false"
-                      [render]="emptyState()?.render"
-                      (clearAll)="emptyState()?.onClearAll()"
-                    ></ogrid-empty-state>
-                  </div>
-                </div>
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-
-      @if (columnReorderService.isDragging() && columnReorderService.dropIndicatorX() !== null) {
-        <div class="ogrid-drop-indicator" [style.left.px]="columnReorderService.dropIndicatorX()"></div>
-      }
-
-      @if (menuPosition()) {
-        <ogrid-context-menu
-          [x]="menuPosition()!.x"
-          [y]="menuPosition()!.y"
-          [hasSelection]="hasCellSelection()"
-          [canUndoProp]="canUndo()"
-          [canRedoProp]="canRedo()"
-          [classNames]="contextMenuClasses"
-          (copyAction)="handleCopy()"
-          (cutAction)="handleCut()"
-          (pasteAction)="handlePaste()"
-          (selectAllAction)="handleSelectAllCells()"
-          (undoAction)="onUndo()"
-          (redoAction)="onRedo()"
-          (closeAction)="closeContextMenu()"
-        ></ogrid-context-menu>
-      }
-
-      @let sbConfig = statusBarConfig();
-      @if (sbConfig) {
-        <ogrid-status-bar
-          [totalCount]="sbConfig.totalCount"
-          [filteredCount]="sbConfig.filteredCount"
-          [selectedCount]="sbConfig.selectedCount ?? selectedRowIds().size"
-          [selectedCellCount]="selectionCellCount()"
-          [aggregation]="sbConfig.aggregation"
-          [suppressRowCount]="sbConfig.suppressRowCount"
-          [classNames]="statusBarClasses"
-        ></ogrid-status-bar>
-      }
-
-      @if (isLoading()) {
-        <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_VARS_CSS, `
-    :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-scroll-wrapper--loading-empty { min-height: 200px; }
-    .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-table tbody tr { height: var(--ogrid-row-height, auto); }
-    .ogrid-thead {
-      z-index: 3;
-      background: var(--ogrid-header-bg, #f5f5f5);
-    }
-    .ogrid-sticky-header { position: sticky; top: 0; }
-    .ogrid-sticky-header .ogrid-checkbox-header,
-    .ogrid-sticky-header .ogrid-row-number-header { 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, rgba(0, 0, 0, 0.12));
-      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, rgba(0, 0, 0, 0.12));
-      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, rgba(0, 0, 0, 0.12));
-      padding: 6px 10px;
-    }
-    .ogrid-header-cell {
-      background: var(--ogrid-header-bg, #f5f5f5);
-      border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      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, rgba(0, 0, 0, 0.12));
-    }
-    .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, rgba(0, 0, 0, 0.12));
-      position: sticky;
-      left: 0;
-      z-index: 3;
-    }
-    .ogrid-data-cell {
-      padding: 0;
-      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      position: relative;
-    }
-    .ogrid-cell-content {
-      padding: 6px 10px;
-      min-height: 20px;
-      cursor: default;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .ogrid-editing-cell {
-      width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box;
-      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
-      z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: visible; padding: 0;
-    }
-    .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;
-    }
-    .ogrid-drop-indicator {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 3px;
-      background: var(--ogrid-primary, #217346);
-      pointer-events: none;
-      z-index: 100;
-      transition: left 0.05s;
-    }
-    .ogrid-th-pinned-left {
-      position: sticky;
-      top: 0;
-      left: 0;
-      z-index: 10;
-      background: var(--ogrid-header-bg, #f5f5f5);
-      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
-    }
-    .ogrid-th-pinned-right {
-      position: sticky;
-      top: 0;
-      right: 0;
-      z-index: 10;
-      background: var(--ogrid-header-bg, #f5f5f5);
-      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
-    }
-    .ogrid-td-pinned-left {
-      position: sticky;
-      left: 0;
-      z-index: 5;
-      background: var(--ogrid-bg, #fff);
-      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
-    }
-    .ogrid-td-pinned-right {
-      position: sticky;
-      right: 0;
-      z-index: 5;
-      background: var(--ogrid-bg, #fff);
-      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
-    }
-    ::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: 1000;
-      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);
-export { DataGridTableComponent };