@alaarab/ogrid-angular-material 2.1.15 → 2.3.0

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-import { INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, OGRID_THEME_VARS_CSS, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, OGridService, OGridLayoutComponent, BaseColumnHeaderFilterComponent, getColumnHeaderMenuItems, BaseInlineCellEditorComponent, BasePopoverCellEditorComponent, BaseDataGridTableComponent, BaseColumnChooserComponent, BasePaginationControlsComponent, BaseOGridComponent } 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, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, OGridService, OGridLayoutComponent, BaseColumnHeaderFilterComponent, getColumnHeaderMenuItems, BaseInlineCellEditorComponent, BasePopoverCellEditorComponent, BaseDataGridTableComponent, formatCellReference, indexToColumnLetter, BaseColumnChooserComponent, BasePaginationControlsComponent, BaseOGridComponent } 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, signal, computed } from '@angular/core';
+import { ViewChild, Component, ChangeDetectionStrategy, Input, ViewEncapsulation, signal, computed, effect } from '@angular/core';
 import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import { MatDividerModule } from '@angular/material/divider';
 
@@ -506,7 +506,21 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
   constructor() {
     super();
     this.propsSignal = signal(void 0);
+    this.showColumnLetters = computed(() => !!this.getProps()?.showColumnLetters);
     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);
+      }
+    });
   }
   set propsInput(value) {
     this.propsSignal.set(value);
@@ -520,6 +534,9 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
   getTableContainerRef() {
     return this.tableContainerRef;
   }
+  getColumnLetter(colIdx) {
+    return indexToColumnLetter(colIdx);
+  }
 };
 __decorateClass([
   Input({ required: true, alias: "props" })
@@ -561,8 +578,24 @@ DataGridTableComponent = __decorateClass([
           <div [style.minWidth.px]="allowOverflowX() ? minTableWidth() : undefined" style="overflow-x: clip">
             <div [class.ogrid-datagrid-table-wrapper--loading]="isLoading() && items().length > 0" #tableContainerElRef>
               <table class="ogrid-datagrid-table" role="grid" [style.minWidth.px]="minTableWidth()"
+                [attr.data-virtual-scroll]="vsEnabled() ? '' : null"
               >
                 <thead [class]="stickyHeader() ? 'ogrid-datagrid-thead ogrid-sticky-header' : 'ogrid-datagrid-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 class="ogrid-datagrid-header-row">
                       @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
@@ -697,7 +730,10 @@ DataGridTableComponent = __decorateClass([
                             </div>
                           </td>
                         }
-                        @for (colLayout of columnLayouts(); track colLayout.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 (colLayout of vsColumnLayouts(); track colLayout.col.columnId) {
                           <td
                             class="ogrid-datagrid-td"
                             [attr.data-column-id]="colLayout.col.columnId"
@@ -709,7 +745,7 @@ DataGridTableComponent = __decorateClass([
                             [style.left.px]="colLayout.pinnedLeft ? getPinnedLeftOffset(colLayout.col.columnId) : null"
                             [style.right.px]="colLayout.pinnedRight ? getPinnedRightOffset(colLayout.col.columnId) : null"
                           >
-                            @let descriptor = getCellDescriptor(item, colLayout.col, rowIndex, colIdx);
+                            @let descriptor = getCellDescriptor(item, colLayout.col, rowIndex, getGlobalColIndex(colLayout.col));
                             @if (descriptor.mode === 'editing-inline') {
                               <div class="ogrid-editing-cell">
                               <ogrid-mat-inline-cell-editor
@@ -735,10 +771,11 @@ DataGridTableComponent = __decorateClass([
                               ></ogrid-mat-popover-cell-editor>
                             } @else {
                               @let content = resolveCellContent(colLayout.col, item, descriptor.displayValue);
-                              @let cellStyle = resolveCellStyleFn(colLayout.col, item);
+                              @let cellStyle = resolveCellStyleFn(colLayout.col, item, descriptor.displayValue);
                               <div
                                 class="ogrid-datagrid-cell"
                                 [class.ogrid-datagrid-cell--active]="descriptor.isActive"
+                                [class.ogrid-datagrid-cell--active-in-range]="descriptor.isActive && descriptor.isInRange"
                                 [class.ogrid-datagrid-cell--in-range]="descriptor.isInRange && !descriptor.isActive"
                                 [class.ogrid-datagrid-cell--in-cut-range]="descriptor.isInCutRange"
                                 [class.ogrid-datagrid-cell--editable]="descriptor.canEditAny"
@@ -767,6 +804,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) {
@@ -948,6 +988,7 @@ DataGridTableComponent = __decorateClass([
       outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
       z-index: 2; position: relative; overflow: visible;
     }
+    .ogrid-datagrid-cell--active-in-range { outline: none; background: var(--ogrid-bg, #fff); }
     .ogrid-datagrid-cell--in-range { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }
     .ogrid-datagrid-cell--in-cut-range { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); opacity: 0.7; }
     .ogrid-datagrid-cell--editing { padding: 0; }
@@ -1019,6 +1060,17 @@ DataGridTableComponent = __decorateClass([
     .ogrid-datagrid-context-menu-overlay {
       position: fixed; inset: 0; z-index: 1000;
     }
+    .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, rgba(0, 0, 0, 0.04)));
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      user-select: none;
+      font-variant-numeric: tabular-nums;
+    }
 
     /* Angular Material Menu popup dark mode overrides.
        Double-class selector (0,2,0) beats MUI's single-class (0,1,0) defaults. */
@@ -1285,6 +1337,8 @@ OGridComponent = __decorateClass([
       [hasToolbarBelow]="false"
       [hasPagination]="true"
       [fullScreen]="ogridService.fullScreen()"
+      [showNameBox]="!!ogridService.cellReferences()"
+      [activeCellRef]="ogridService.activeCellRef()"
     >
       <ng-container toolbarEnd>
         @if (ogridService.columnChooserPlacement() === 'toolbar') {

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

@@ -10,8 +10,10 @@ export declare class DataGridTableComponent<T> extends BaseDataGridTableComponen
     set propsInput(value: IOGridDataGridProps<T>);
     private wrapperRef?;
     private tableContainerRef?;
+    readonly showColumnLetters: import("@angular/core").Signal<boolean>;
     constructor();
     protected getProps(): IOGridDataGridProps<T> | undefined;
     protected getWrapperRef(): ElementRef<HTMLElement> | undefined;
     protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
+    getColumnLetter(colIdx: number): string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.1.15",
+  "version": "2.3.0",
   "description": "OGrid Angular Material – MatTable-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/cdk": "^21.0.0",