From eecbadca73b8e1eb908ceb4bcbaf55e37fb57b75 Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Wed, 29 Oct 2025 08:43:09 +0100
Subject: [PATCH] fix: always call `<ngx-datatable-row-detail
 [rowHeight]="function">` with correct index

Previously, when using `<ngx-datatable-row-detail [rowHeight]="function">`, the function
was called sporadically with a wrong index.
This is due to a bug in the body-component, where the rendered offset-index was passed to the
cache. But the cache is operating on all rows, not the rendered ones.
So instead, we need to pass only the offset, if external paging is enabled.
---
 .../src/lib/components/body/body.component.ts |   2 +-
 .../components/row-detail/row-detail.spec.ts  | 107 ++++++++++++++++++
 2 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 projects/ngx-datatable/src/lib/components/row-detail/row-detail.spec.ts

diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts
index 476a945be..c3c5e493f 100644
--- a/projects/ngx-datatable/src/lib/components/body/body.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts
@@ -655,7 +655,7 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
         rowHeight: this.rowHeight(),
         detailRowHeight: this.getDetailRowHeight,
         externalVirtual: this.scrollbarV() && this.externalPaging(),
-        indexOffset: this.indexes().first,
+        indexOffset: this.externalPaging() ? this.offset() * this.pageSize() : 0,
         rowCount: this.rowCount(),
         rowExpansions: new Set<TRow>(this.rowDetail() ? this.rowExpansions() : [])
       });
diff --git a/projects/ngx-datatable/src/lib/components/row-detail/row-detail.spec.ts b/projects/ngx-datatable/src/lib/components/row-detail/row-detail.spec.ts
new file mode 100644
index 000000000..531ec5310
--- /dev/null
+++ b/projects/ngx-datatable/src/lib/components/row-detail/row-detail.spec.ts
@@ -0,0 +1,107 @@
+import { Component, signal, viewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DataTableColumnDirective } from '@siemens/ngx-datatable';
+
+import { DatatableComponent } from '../datatable.component';
+import { DatatableRowDetailTemplateDirective } from './row-detail-template.directive';
+import { DatatableRowDetailDirective } from './row-detail.directive';
+
+describe('DatatableRowDetailDirective', () => {
+  let fixture: ComponentFixture<TestFixtureComponent>;
+  let component: TestFixtureComponent;
+  let table: DatatableComponent;
+
+  interface TestRow {
+    id: number;
+    name: string;
+  }
+
+  @Component({
+    imports: [
+      DatatableComponent,
+      DatatableRowDetailDirective,
+      DatatableRowDetailTemplateDirective,
+      DataTableColumnDirective
+    ],
+    template: `
+      <ngx-datatable
+        #myTable
+        [rows]="rows()"
+        [scrollbarV]="true"
+        [rowHeight]="50"
+        [headerHeight]="50"
+        [footerHeight]="50"
+        [externalPaging]="externalPaging()"
+        [offset]="offset()"
+      >
+        <ngx-datatable-row-detail [rowHeight]="detailRowHeight" (toggle)="onDetailToggle($event)">
+          <ng-template let-row="row" ngx-datatable-row-detail-template>
+            <div>Detail for {{ row.name }}</div>
+          </ng-template>
+        </ngx-datatable-row-detail>
+
+        <ngx-datatable-column name="id" />
+        <ngx-datatable-column name="name" />
+      </ngx-datatable>
+    `
+  })
+  class TestFixtureComponent {
+    readonly table = viewChild.required<DatatableComponent<TestRow>>('myTable');
+
+    readonly rows = signal<TestRow[]>([
+      { id: 1, name: 'Row 1' },
+      { id: 2, name: 'Row 2' },
+      { id: 3, name: 'Row 3' },
+      { id: 4, name: 'Row 4' },
+      { id: 5, name: 'Row 5' }
+    ]);
+
+    readonly externalPaging = signal<boolean>(false);
+    readonly offset = signal<number>(0);
+
+    detailRowHeight = jasmine.createSpy('detailRowHeight').and.returnValue(100);
+
+    onDetailToggle(_event: any) {
+      // Handle toggle event
+    }
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestFixtureComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestFixtureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    table = component.table();
+  });
+
+  it('should stop calling rowHeight for collapsed details', () => {
+    // Expand first and second rows
+    table.rowDetail!.toggleExpandRow(component.rows()[0]);
+    table.rowDetail!.toggleExpandRow(component.rows()[1]);
+    fixture.detectChanges();
+
+    // Collapse the first row
+    table.rowDetail!.toggleExpandRow(component.rows()[0]);
+    component.detailRowHeight.calls.reset();
+    fixture.detectChanges();
+
+    expect(component.detailRowHeight).toHaveBeenCalledWith(component.rows()[1], 1);
+  });
+
+  it('should call rowHeight with correct indices after expandAllRows', () => {
+    component.detailRowHeight.calls.reset();
+
+    // Expand all rows
+    table.rowDetail!.expandAllRows();
+    fixture.detectChanges();
+
+    expect(component.detailRowHeight).toHaveBeenCalledWith(component.rows()[0], 0);
+    expect(component.detailRowHeight).toHaveBeenCalledWith(component.rows()[1], 1);
+    expect(component.detailRowHeight).toHaveBeenCalledWith(component.rows()[2], 2);
+    expect(component.detailRowHeight).toHaveBeenCalledWith(component.rows()[3], 3);
+    expect(component.detailRowHeight).toHaveBeenCalledWith(component.rows()[4], 4);
+  });
+});