fix(body): preserve original cell index

projects/ngx-datatable/src/lib/components/body/body-row.component.ts

@@ -34,7 +34,7 @@ import { DataTableBodyCellComponent } from './body-cell.component';
           [style.grid-column]="'span ' + colGroup.columns.length"
           [class.row-disabled]="disabled()"
         >
-          @for (column of colGroup.columns; track column.$$id; let ii = $index) {
+          @for (column of colGroup.columns; track column.$$id) {
             <datatable-body-cell
               role="cell"
               tabindex="-1"
@@ -48,7 +48,7 @@ import { DataTableBodyCellComponent } from './body-cell.component';
               [displayCheck]="displayCheck()"
               [disabled]="disabled()"
               [treeStatus]="treeStatus()"
-              (activate)="onActivate($event, ii)"
+              (activate)="onActivate($event, column)"
               (treeAction)="onTreeAction()"
             />
           }
@@ -118,8 +118,13 @@ export class DataTableBodyRowComponent<TRow extends Row = any> implements DoChec
     }
   }
 
-  onActivate(event: CellActiveEvent<TRow>, index: number): void {
-    this.activate.emit({ ...event, rowElement: this._element, cellIndex: index });
+  onActivate(event: CellActiveEvent<TRow>, column: TableColumnInternal): void {
+    this.activate.emit({
+      ...event,
+      rowElement: this._element,
+      cellIndex: this.columns().indexOf(column),
+      renderedCellIndex: this.cells().findIndex(cell => cell.column() === column)
+    });
   }
 
   focus(): void {

projects/ngx-datatable/src/lib/components/body/body.component.ts

@@ -951,8 +951,8 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
       }
       if (!isCellSelection) {
         this.focusRow(index, key, indexInGroup);
-      } else if (isCellSelection && modelObject.cellIndex !== undefined) {
-        this.focusCell(index, key, modelObject.cellIndex, indexInGroup);
+      } else if (isCellSelection && modelObject.renderedCellIndex !== undefined) {
+        this.focusCell(index, key, modelObject.renderedCellIndex, indexInGroup);
       }
     }
   }

projects/ngx-datatable/src/lib/components/body/keyboard-navigation.spec.ts

@@ -2,7 +2,7 @@ import { Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { page, userEvent } from 'vitest/browser';
 
-import { SelectionType } from '../../types/public.types';
+import { ActivateEvent, SelectionType } from '../../types/public.types';
 import { TableColumn } from '../../types/table-column.type';
 import { DatatableComponent } from '../datatable.component';
 
@@ -18,6 +18,7 @@ import { DatatableComponent } from '../datatable.component';
       [groupExpansionDefault]="groupExpansionDefault()"
       [selected]="selected()"
       (selectedChange)="selected.set($event)"
+      (activate)="activate.set($event)"
     />
   `,
   host: {
@@ -41,6 +42,7 @@ class KeyboardNavigationTestComponent {
   readonly disableRowCheck = signal<((row: Record<string, string>) => boolean) | undefined>(
     undefined
   );
+  readonly activate = signal<ActivateEvent<Record<string, string>> | undefined>(undefined);
 }
 
 describe('keyboard navigation', () => {
@@ -182,6 +184,33 @@ describe('keyboard navigation', () => {
       expect(document.activeElement).toBe(graceCityCell);
     });
 
+    it('uses pinned render order for focus and original column order for activation', async () => {
+      fixture.componentInstance.columns.set([
+        { name: 'City', prop: 'city' },
+        { name: 'Name', prop: 'name', frozenLeft: true }
+      ]);
+      await fixture.whenStable();
+      const adaNameCell = page
+        .getByRole('row', { name: 'Ada London' })
+        .getByRole('cell', { name: 'Ada' })
+        .element();
+      const graceNameCell = page
+        .getByRole('row', { name: 'Grace New York' })
+        .getByRole('cell', { name: 'Grace' })
+        .element();
+      adaNameCell.focus();
+
+      await userEvent.keyboard('{ArrowDown}');
+      await fixture.whenStable();
+
+      expect(document.activeElement).toBe(graceNameCell);
+
+      await userEvent.keyboard('{Enter}');
+      await fixture.whenStable();
+
+      expect(fixture.componentInstance.activate()?.cellIndex).toBe(1);
+    });
+
     it('keeps cell focus at horizontal and vertical boundaries', async () => {
       const adaNameCell = page
         .getByRole('row', { name: 'Ada London' })

projects/ngx-datatable/src/lib/types/public.types.ts

@@ -77,7 +77,13 @@ export interface ActivateEvent<TRow> {
   value?: any;
   cellElement?: HTMLElement;
   treeStatus?: TreeStatus;
+  /** Index of the cell in the originally supplied column order. */
   cellIndex?: number;
+  /**
+   * Index of the cell in rendered order.
+   * The order of columns may differ from the supplied order when frozen left/right is used.
+   */
+  renderedCellIndex?: number;
   rowElement: HTMLElement;
 }