@alaarab/ogrid-angular-primeng 2.1.15 → 2.3.0

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, OGRID_THEME_VARS_CSS, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, OGridService, OGridLayoutComponent, BaseColumnHeaderFilterComponent, getColumnHeaderMenuItems, BaseInlineCellEditorComponent, BasePopoverCellEditorComponent, BaseDataGridTableComponent, DEFAULT_MIN_COLUMN_WIDTH, BaseColumnChooserComponent, BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
+import { INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, OGRID_THEME_VARS_CSS, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, OGridService, OGridLayoutComponent, BaseColumnHeaderFilterComponent, getColumnHeaderMenuItems, BaseInlineCellEditorComponent, BasePopoverCellEditorComponent, BaseDataGridTableComponent, DEFAULT_MIN_COLUMN_WIDTH, formatCellReference, indexToColumnLetter, BaseColumnChooserComponent, BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
 export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, BaseColumnChooserComponent, BaseColumnHeaderFilterComponent, BaseDataGridTableComponent, BaseInlineCellEditorComponent, BaseOGridComponent, BasePaginationControlsComponent, BasePopoverCellEditorComponent, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, ColumnReorderService, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, DataGridEditingHelper, DataGridInteractionHelper, DataGridLayoutHelper, DataGridStateService, EmptyStateComponent, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridContextMenuComponent, INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, MAX_PAGE_BUTTONS, MarchingAntsOverlayComponent, OGRID_THEME_VARS_CSS, OGridLayoutComponent, OGridService, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, ROW_NUMBER_COLUMN_WIDTH, SIDEBAR_TRANSITION_MS, SideBarComponent, StatusBarComponent, UndoRedoStack, VirtualScrollService, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleRange, createDebouncedCallback, createDebouncedSignal, createLatestCallback, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, toUserLike, triggerCsvDownload, validateColumns, validateRowIds } from '@alaarab/ogrid-angular';
 import { ViewChild, Component, ChangeDetectionStrategy, Input, ViewEncapsulation, inject, DestroyRef, effect, computed, signal } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
@@ -443,6 +443,9 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
     this.ariaLabelInput = void 0;
     this.ariaLabelledByInput = void 0;
     this.showRowNumbers = false;
+    this.showColumnLettersInput = false;
+    this.showNameBoxInput = false;
+    this.onActiveCellChange = void 0;
     this.currentPageInput = 1;
     this.pageSizeInput = 25;
     this.defaultMinWidth = DEFAULT_MIN_COLUMN_WIDTH;
@@ -467,6 +470,7 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
     this.resizeStartWidth = 0;
     // Bound method reference for template
     this.cancelEditHandler = () => this.cancelEdit();
+    this.showColumnLetters = computed(() => !!this.getProps()?.showColumnLetters);
     // --- PrimeNG-specific computed signals ---
     this.resolvedAriaLabel = computed(
       () => this.ariaLabelInput ?? (this.ariaLabelledByInput ? void 0 : "Data grid")
@@ -484,6 +488,19 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
       return "100%";
     });
     this.initBase();
+    effect(() => {
+      const props = this.getProps();
+      const onActiveCellChange = props?.onActiveCellChange;
+      if (!onActiveCellChange) return;
+      const ac = this.activeCell();
+      if (ac) {
+        const colIndex = ac.columnIndex - this.colOffset();
+        const rowNumber = ac.rowIndex + 1;
+        onActiveCellChange(formatCellReference(colIndex, rowNumber));
+      } else {
+        onActiveCellChange(null);
+      }
+    });
   }
   ngOnChanges(changes) {
     if (changes["initialColumnWidths"]) {
@@ -607,6 +624,9 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
       selectedRows: this.selectedRows,
       onSelectionChange: this.onSelectionChange,
       showRowNumbers: this.showRowNumbers,
+      showColumnLetters: this.showColumnLettersInput,
+      showNameBox: this.showNameBoxInput,
+      onActiveCellChange: this.onActiveCellChange,
       currentPage: this.currentPageInput,
       pageSize: this.pageSizeInput,
       statusBar: this.statusBar,
@@ -623,6 +643,9 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
       "aria-labelledby": this.ariaLabelledByInput
     };
   }
+  getColumnLetter(colIdx) {
+    return indexToColumnLetter(colIdx);
+  }
 };
 __decorateClass([
   ViewChild("wrapper")
@@ -753,6 +776,15 @@ __decorateClass([
 __decorateClass([
   Input()
 ], DataGridTableComponent.prototype, "showRowNumbers", 2);
+__decorateClass([
+  Input({ alias: "showColumnLetters" })
+], DataGridTableComponent.prototype, "showColumnLettersInput", 2);
+__decorateClass([
+  Input({ alias: "showNameBox" })
+], DataGridTableComponent.prototype, "showNameBoxInput", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "onActiveCellChange", 2);
 __decorateClass([
   Input({ alias: "currentPage" })
 ], DataGridTableComponent.prototype, "currentPageInput", 2);
@@ -800,8 +832,23 @@ DataGridTableComponent = __decorateClass([
         <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" role="grid">
+              <table class="ogrid-table" role="grid" [attr.data-virtual-scroll]="vsEnabled() ? '' : null">
                 <thead [class]="stickyHeader() ? 'ogrid-thead ogrid-sticky-header' : 'ogrid-thead'">
+                  @if (showColumnLetters()) {
+                    <tr class="ogrid-column-letter-row">
+                      @if (hasCheckboxCol()) {
+                        <th class="ogrid-column-letter-cell"></th>
+                      }
+                      @if (hasRowNumbersCol()) {
+                        <th class="ogrid-column-letter-cell"></th>
+                      }
+                      @for (col of visibleCols(); track col.columnId; let colIdx = $index) {
+                        <th class="ogrid-column-letter-cell">
+                          {{ getColumnLetter(colIdx) }}
+                        </th>
+                      }
+                    </tr>
+                  }
                   @for (row of headerRows(); track $index; let rowIdx = $index) {
                     <tr>
                       @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
@@ -938,7 +985,10 @@ DataGridTableComponent = __decorateClass([
                             {{ rowNumberOffset() + rowIndex + 1 }}
                           </td>
                         }
-                        @for (col of visibleCols(); track col.columnId; let colIdx = $index) {
+                        @if (vsColumnsEnabled() && vsLeftSpacerWidth() > 0) {
+                          <td [style.width.px]="vsLeftSpacerWidth()" [style.minWidth.px]="vsLeftSpacerWidth()" [style.maxWidth.px]="vsLeftSpacerWidth()" [style.padding]="'0'"></td>
+                        }
+                        @for (col of vsVisibleCols(); track col.columnId) {
                           @let pinned = isPinned(col.columnId);
                           <td
                             [attr.data-column-id]="col.columnId"
@@ -952,7 +1002,7 @@ DataGridTableComponent = __decorateClass([
                             [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);
+                            @let descriptor = getCellDescriptor(item, col, rowIndex, getGlobalColIndex(col));
                             @if (descriptor.mode === 'editing-inline') {
                               <div class="ogrid-editing-cell">
                               <ogrid-primeng-inline-cell-editor
@@ -980,16 +1030,20 @@ DataGridTableComponent = __decorateClass([
                               <div
                                 [attr.data-row-index]="rowIndex"
                                 [attr.data-col-index]="descriptor.globalColIndex"
+                                [attr.data-active-cell]="descriptor.isActive ? 'true' : null"
+                                [attr.data-in-range]="descriptor.isInRange ? 'true' : null"
+                                [attr.tabindex]="descriptor.isActive ? 0 : -1"
                                 (mousedown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
+                                (click)="onCellClick(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 && !descriptor.isActive ? '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"
+                                [style.background]="descriptor.isInRange && !descriptor.isActive ? 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))' : (descriptor.isActive && descriptor.isInRange ? 'var(--ogrid-bg, #fff)' : null)"
+                                [style.outline]="descriptor.isActive && !descriptor.isInRange ? '2px solid var(--ogrid-selection, #217346)' : null"
+                                [style.outline-offset]="descriptor.isActive && !descriptor.isInRange ? '-2px' : null"
                               >
-                                <span [style]="resolveCellStyleFn(col, item)">{{ resolveCellContent(col, item, descriptor.displayValue) }}</span>
+                                <span [style]="resolveCellStyleFn(col, item, descriptor.displayValue)">{{ resolveCellContent(col, item, descriptor.displayValue) }}</span>
                                 @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
                                   <div
                                     (mousedown)="onFillHandleMouseDown($event)"
@@ -1001,6 +1055,9 @@ DataGridTableComponent = __decorateClass([
                             }
                           </td>
                         }
+                        @if (vsColumnsEnabled() && vsRightSpacerWidth() > 0) {
+                          <td [style.width.px]="vsRightSpacerWidth()" [style.minWidth.px]="vsRightSpacerWidth()" [style.maxWidth.px]="vsRightSpacerWidth()" [style.padding]="'0'"></td>
+                        }
                       </tr>
                     }
                     @if (vsEnabled() && vsBottomSpacerHeight() > 0) {
@@ -1396,6 +1453,17 @@ DataGridTableComponent = __decorateClass([
       border-color: var(--ogrid-border, rgba(0, 0, 0, 0.12));
       margin: 4px 0;
     }
+    .ogrid-column-letter-cell {
+      text-align: center;
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4));
+      padding: 2px 4px;
+      background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg, #f5f5f5));
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      user-select: none;
+      font-variant-numeric: tabular-nums;
+    }
   `]
   })
 ], DataGridTableComponent);
@@ -1626,6 +1694,8 @@ OGridComponent = __decorateClass([
       [hasPagination]="true"
       [sideBar]="service.sideBarProps()"
       [fullScreen]="service.fullScreen()"
+      [showNameBox]="!!service.cellReferences()"
+      [activeCellRef]="service.activeCellRef()"
     >
       <ng-content select="[toolbar]" toolbar></ng-content>
 
@@ -1676,6 +1746,10 @@ OGridComponent = __decorateClass([
         [aria-label]="service.ariaLabel()"
         [aria-labelledby]="service.ariaLabelledBy()"
         [emptyState]="emptyStateObj"
+        [showRowNumbers]="service.dataGridProps().showRowNumbers ?? false"
+        [showColumnLetters]="service.dataGridProps().showColumnLetters ?? false"
+        [showNameBox]="service.dataGridProps().showNameBox ?? false"
+        [onActiveCellChange]="service.dataGridProps().onActiveCellChange"
       ></ogrid-primeng-datagrid-table>
 
       <div pagination>

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

@@ -59,6 +59,9 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     ariaLabelInput: string | undefined;
     ariaLabelledByInput: string | undefined;
     showRowNumbers: boolean;
+    showColumnLettersInput: boolean;
+    showNameBoxInput: boolean;
+    onActiveCellChange: ((ref: string | null) => void) | undefined;
     currentPageInput: number;
     pageSizeInput: number;
     readonly defaultMinWidth = 80;
@@ -81,6 +84,7 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     private resizeColumnId;
     private resizeStartWidth;
     readonly cancelEditHandler: () => void;
+    readonly showColumnLetters: import("@angular/core").Signal<boolean>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /** Shallow-compare two props objects by their top-level keys. */
@@ -98,4 +102,5 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     onRowCheckboxChangePrimeng(item: T, checked: boolean, rowIndex: number, _e: Event): void;
     onResizeStartPrimeng(e: MouseEvent, col: IColumnDef<T>): void;
     private buildProps;
+    getColumnLetter(colIdx: number): string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.1.15",
+  "version": "2.3.0",
   "description": "OGrid PrimeNG – PrimeNG Table-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.1.15"
+    "@alaarab/ogrid-angular": "2.3.0"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",