fix: apply even/odd classes correctly when rows are grouped

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

@@ -22,6 +22,7 @@ import { BehaviorSubject } from 'rxjs';
 import {
   ActivateEvent,
   CellContext,
+  RowIndex,
   RowOrGroup,
   SortDirection,
   SortPropDir,
@@ -149,14 +150,14 @@ export class DataTableBodyCellComponent<TRow extends { level?: number } = any>
     return this._expanded;
   }
 
-  @Input() set rowIndex(val: number) {
+  @Input() set rowIndex(val: RowIndex) {
     this._rowIndex = val;
     this.cellContext.rowIndex = val;
     this.checkValueUpdates();
     this.cd.markForCheck();
   }
 
-  get rowIndex(): number {
+  get rowIndex(): RowIndex {
     return this._rowIndex;
   }
 
@@ -306,7 +307,7 @@ export class DataTableBodyCellComponent<TRow extends { level?: number } = any>
   private _row: TRow;
   private _group: TRow[];
   private _rowHeight: number;
-  private _rowIndex: number;
+  private _rowIndex: RowIndex;
   private _expanded: boolean;
   private _element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
   private _treeStatus: TreeStatus;

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

@@ -20,7 +20,7 @@ import { columnGroupWidths, columnsByPin, columnsByPinArr } from '../../utils/co
 import { Keys } from '../../utils/keys';
 import { ScrollbarHelper } from '../../services/scrollbar-helper.service';
 import { BehaviorSubject } from 'rxjs';
-import { ActivateEvent, RowOrGroup, TreeStatus } from '../../types/public.types';
+import { ActivateEvent, RowIndex, RowOrGroup, TreeStatus } from '../../types/public.types';
 import { NgStyle } from '@angular/common';
 import { TableColumn } from '../../types/table-column.type';
 import { ColumnGroupWidth, PinnedColumns } from '../../types/internal.types';
@@ -91,7 +91,7 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
   @Input() row: TRow;
   @Input() group: TRow[];
   @Input() isSelected: boolean;
-  @Input() rowIndex: number;
+  @Input() rowIndex: RowIndex;
   @Input() displayCheck: (row: TRow, column: TableColumn, value?: any) => boolean;
   @Input() treeStatus?: TreeStatus = 'collapsed';
   @Input() ghostLoadingIndicator = false;
@@ -112,10 +112,10 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
     if (this.isSelected) {
       cls += ' active';
     }
-    if (this.rowIndex % 2 !== 0) {
+    if (this.innerRowIndex % 2 !== 0) {
       cls += ' datatable-row-odd';
     }
-    if (this.rowIndex % 2 === 0) {
+    if (this.innerRowIndex % 2 === 0) {
       cls += ' datatable-row-even';
     }
     if (this.disable$ && this.disable$.value) {
@@ -232,4 +232,14 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
   onTreeAction() {
     this.treeAction.emit();
   }
+
+  /** Returns the row index, or if in a group, the index within a group. */
+  private get innerRowIndex(): number {
+    if (typeof this.rowIndex === 'number') {
+      return this.rowIndex;
+    }
+
+    const [, innerIndex] = this.rowIndex.match(/\d+-(\d+)/);
+    return parseInt(innerIndex);
+  }
 }

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

@@ -28,6 +28,7 @@ import {
   ActivateEvent,
   DragEventData,
   Group,
+  RowIndex,
   RowOrGroup,
   ScrollEvent,
   SelectionType,
@@ -88,6 +89,7 @@ import {
             </datatable-summary-row>
           }
           @for (group of rowsToRender(); track rowTrackingFn(i, group); let i = $index) {
+            <!-- getRowIndex will return here always a number, so we need the $any here. -->
             <datatable-row-wrapper
               #rowWrapper
               [attr.hidden]="
@@ -104,7 +106,7 @@ import {
               [row]="group"
               [disableCheck]="disableRowCheck"
               [expanded]="getRowExpanded(group)"
-              [rowIndex]="getRowIndex(group && group[i])"
+              [rowIndex]="$any(getRowIndex(group && group[i]))"
               [selected]="selected"
               (rowContextmenu)="rowContextmenu.emit($event)"
             >
@@ -420,7 +422,7 @@ export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = a
   columnGroupWidths: ColumnGroupWidth;
   rowTrackingFn: TrackByFunction<RowOrGroup<TRow>>;
   listener: any;
-  rowIndexes = new WeakMap<any, any>();
+  rowIndexes = new WeakMap<RowOrGroup<TRow>, RowIndex>();
   rowExpansions: any[] = [];
 
   _rows: TRow[];
@@ -598,9 +600,8 @@ export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = a
 
         if (group.value) {
           // add indexes for each group item
-          group.value.forEach((g: any, i: number) => {
-            const _idx = `${rowIndex}-${i}`;
-            this.rowIndexes.set(g, _idx);
+          group.value.forEach((g: TRow, i: number) => {
+            this.rowIndexes.set(g, `${rowIndex}-${i}`);
           });
         }
         temp[idx] = group;
@@ -726,10 +727,12 @@ export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = a
         if (Array.isArray(rows)) {
           // Get the latest row rowindex in a group
           const row = rows[rows.length - 1];
-          idx = row ? this.getRowIndex(row) : 0;
+          // The group row, which has always a numeric index
+          idx = row ? (this.getRowIndex(row) as number) : 0;
         } else {
           if (rows) {
-            idx = this.getRowIndex(rows);
+            // normal rows always have a numeric index
+            idx = this.getRowIndex(rows) as number;
           } else {
             // When ghost cells are enabled use index to get the position of them
             idx = this.indexes().first + index;
@@ -877,8 +880,8 @@ export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = a
     // If the detailRowHeight is auto --> only in case of non-virtualized scroll
     if (this.scrollbarV && this.virtualization) {
       const detailRowHeight = this.getDetailRowHeight(row) * (expanded ? -1 : 1);
-      // const idx = this.rowIndexes.get(row) || 0;
-      const idx = this.getRowIndex(row);
+      // This is hopefully only called with non-grouped rows. Otherwise, the heightCache fails.
+      const idx = this.getRowIndex(row) as number;
       this.rowHeightsCache().update(idx, detailRowHeight);
     }
 
@@ -966,7 +969,7 @@ export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = a
   /**
    * Gets the row index given a row
    */
-  getRowIndex(row: RowOrGroup<TRow>): number {
+  getRowIndex(row: RowOrGroup<TRow>): RowIndex {
     return this.rowIndexes.get(row) || 0;
   }
 

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

@@ -71,7 +71,7 @@ export interface CellContext<TRow = any> {
   column: TableColumn;
   rowHeight: number;
   isSelected: boolean;
-  rowIndex: number;
+  rowIndex: RowIndex;
   treeStatus: TreeStatus;
   disable$: BehaviorSubject<boolean>;
   onTreeAction: () => void;
@@ -174,3 +174,9 @@ export interface DragEventData {
   dragRow: any;
   dropRow?: any;
 }
+
+/**
+ * Represents the index of row. Usually a number.
+ * If the Row is grouped it returns a string with this pattern: `<indexOfGroup>-<indexOfRowInGroup>`
+ */
+export type RowIndex = number | `${number}-${number}`;

src/app/basic/disabled-rows.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ColumnMode, SelectionType } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, RowIndex, SelectionType } from 'projects/ngx-datatable/src/public-api';
 import { FullEmployee } from '../data.model';
 import { BehaviorSubject } from 'rxjs';
 
@@ -107,13 +107,13 @@ export class DisabledRowsComponent {
     return !(!row.isDisabled && row.age < 40);
   }
 
-  disableRow(rowIndex: number, disableRow$: BehaviorSubject<boolean>) {
+  disableRow(rowIndex: RowIndex, disableRow$: BehaviorSubject<boolean>) {
     this.rows[rowIndex].isDisabled = true;
     this.rows = [...this.rows];
     disableRow$.next(true);
   }
 
-  updateValue(event, cell, rowIndex: number, disableRow$: BehaviorSubject<boolean>) {
+  updateValue(event, cell, rowIndex: RowIndex, disableRow$: BehaviorSubject<boolean>) {
     this.rows[rowIndex][cell] = event.target.value;
     this.rows = [...this.rows];
     if (disableRow$ && cell === 'age' && this.rows[rowIndex][cell] > 40) {

src/app/basic/inline.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { ColumnMode, RowIndex } from 'projects/ngx-datatable/src/public-api';
 import { Employee } from '../data.model';
 
 @Component({
@@ -107,7 +107,7 @@ export class InlineEditComponent {
     req.send();
   }
 
-  updateValue(event, cell, rowIndex: number) {
+  updateValue(event, cell, rowIndex: RowIndex) {
     console.log('inline editing rowIndex', rowIndex);
     this.editing[rowIndex + '-' + cell] = false;
     this.rows[rowIndex][cell] = event.target.value;