fix: correctly calculate ghost-loader height if rowHeight = 'auto'

Author: chintankavathia

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

@@ -352,7 +352,7 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
     this.recalcLayout();
   }
 
-  get bodyHeight() {
+  get bodyHeight(): string {
     return this._bodyHeight;
   }
 

projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.html

@@ -1,8 +1,16 @@
-<div class="ghost-loader ghost-cell-container" [style.height.px]="ghostBodyHeight">
-  @for (item of [].constructor(pageSize); track item) {
-    <div class="ghost-element" [style.height.px]="rowHeight" [class.datatable-body-row]="cellMode">
-      @for (col of columns; track col) {
-        <div class="ghost-cell" [class.datatable-body-cell]="cellMode" [style.width.px]="col.width">
+<div class="ghost-loader ghost-cell-container" [style.height]="ghostBodyHeight()">
+  @for (item of [].constructor(pageSize()); track item) {
+    <div
+      class="ghost-element"
+      [style.height]="rowHeightComputed()"
+      [class.datatable-body-row]="cellMode()"
+    >
+      @for (col of columns(); track col) {
+        <div
+          class="ghost-cell"
+          [class.datatable-body-cell]="cellMode()"
+          [style.width.px]="col.width"
+        >
           @if (!col.ghostCellTemplate) {
             <div class="line ghost-cell-strip"></div>
           } @else {

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

@@ -3,8 +3,8 @@ import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
-  Input,
-  numberAttribute
+  numberAttribute,
+  input
 } from '@angular/core';
 
 import { TableColumnInternal } from '../../../types/internal.types';
@@ -17,9 +17,17 @@ import { TableColumnInternal } from '../../../types/internal.types';
   imports: [NgTemplateOutlet]
 })
 export class DataTableGhostLoaderComponent {
-  @Input() columns!: TableColumnInternal[];
-  @Input({ transform: numberAttribute }) pageSize!: number;
-  @Input() rowHeight!: number | 'auto' | ((row?: any) => number);
-  @Input({ transform: numberAttribute }) ghostBodyHeight?: number;
-  @Input({ transform: booleanAttribute }) cellMode = false;
+  readonly columns = input.required<TableColumnInternal[]>();
+  readonly pageSize = input.required<number, unknown>({ transform: numberAttribute });
+  readonly rowHeight = input.required<number | 'auto' | ((row?: any) => number)>();
+  readonly ghostBodyHeight = input<string>();
+  readonly cellMode = input(false, { transform: booleanAttribute });
+
+  protected readonly rowHeightComputed = () => {
+    const rowHeight = this.rowHeight();
+    if (typeof rowHeight === 'function') {
+      return rowHeight() + 'px';
+    }
+    return rowHeight === 'auto' ? 100 / this.pageSize() + '%' : rowHeight + 'px';
+  };
 }