refactor: remove unnecessary calls of detailsRowHeight functions

Previously, the rowHeight of details was always evaluated,
even if the details were not expanded.
Now they are only evaluated, if actually expanded.

Author: spike-rabbit

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

@@ -23,7 +23,7 @@ import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive'
     <ng-content />
     @let rowDetailTemplate = rowDetail()?.template();
     @if (rowDetailTemplate && expanded()) {
-      <div class="datatable-row-detail" [style.height.px]="detailRowHeight()">
+      <div class="datatable-row-detail" [style.height.px]="detailsRowHeight()">
         <ng-template [ngTemplateOutlet]="rowDetailTemplate" [ngTemplateOutletContext]="context()" />
       </div>
     }
@@ -37,7 +37,7 @@ import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive'
 export class DataTableRowWrapperComponent<TRow extends Row = any> implements DoCheck {
   readonly innerWidth = input.required<number>();
   readonly rowDetail = input<DatatableRowDetailDirective>();
-  readonly detailRowHeight = input.required<number>();
+  readonly detailRowHeightFn = input.required<(row?: TRow, index?: number) => number>();
   readonly row = input.required<TRow>();
   readonly disabled = input<boolean>();
   readonly rowContextmenu = output<{
@@ -50,6 +50,7 @@ export class DataTableRowWrapperComponent<TRow extends Row = any> implements DoC
   readonly expanded = input(false, { transform: booleanAttribute });
   readonly ariaGroupHeaderCheckboxMessage = input.required<string>();
 
+  readonly detailsRowHeight = computed(() => this.detailRowHeightFn()(this.row(), this.rowIndex()));
   readonly context = computed<RowDetailContext<TRow>>(() => {
     this.rowDiffedCount(); // This allows us to get re-evaluated when the row was mutated internally.
     return {

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

@@ -121,7 +121,7 @@ import { DataTableSummaryRowComponent } from './summary/summary-row.component';
             "
             [innerWidth]="innerWidth()"
             [rowDetail]="rowDetail()"
-            [detailRowHeight]="getDetailRowHeight(row, index)"
+            [detailRowHeightFn]="detailRowHeightFn()"
             [row]="row"
             [disabled]="disabled"
             [expanded]="getRowExpanded(row)"
@@ -340,6 +340,15 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
     return undefined;
   });
 
+  readonly detailRowHeightFn = computed(() => {
+    const rowDetail = this.rowDetail();
+    if (!rowDetail) {
+      return () => 0;
+    }
+    const rowHeight = rowDetail.rowHeight();
+    return typeof rowHeight === 'function' ? rowHeight : () => rowHeight;
+  });
+
   readonly rowsToRender = computed(() => {
     return this.updateRows();
   });
@@ -566,18 +575,6 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
     return rowHeight as number;
   }
 
-  /**
-   * Get the height of the detail row.
-   */
-  getDetailRowHeight = (row?: TRow, index?: number): number => {
-    const rowDetail = this.rowDetail();
-    if (!rowDetail) {
-      return 0;
-    }
-    const rowHeight = rowDetail.rowHeight();
-    return typeof rowHeight === 'function' ? rowHeight(row, index) : (rowHeight as number);
-  };
-
   getGroupHeaderRowHeight = (row?: any, index?: any): number => {
     const groupHeader = this.groupHeader();
     if (!groupHeader) {
@@ -645,7 +642,7 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
       cache.initCache({
         rows: this.rows() as TRow[], // TODO: RowHeightCache does not support grouping
         rowHeight: this.rowHeight(),
-        detailRowHeight: this.getDetailRowHeight,
+        detailRowHeight: this.detailRowHeightFn(),
         externalVirtual: this.scrollbarV() && this.externalPaging(),
         indexOffset: this.externalPaging() ? this.offset() * this.pageSize() : 0,
         rowCount: this.rowCount(),