From 54d73c6a25bdcc0e27d592f91c08a8c9e88965eb Mon Sep 17 00:00:00 2001
From: chintankavathia <chintan.kavathia@gmail.com>
Date: Wed, 3 Jul 2024 13:37:59 +0530
Subject: [PATCH] fix(row-group): group header row height (#61)

fixes the issue where `rowHeight` on `ngx-datatable-group-header` doesn't work
---
 .../lib/components/body/body-row-wrapper.component.ts    | 9 +++++++--
 .../src/lib/components/body/body.component.ts            | 9 +++++++++
 src/app/basic/row-grouping.component.ts                  | 4 ++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts
index b65494a8f..384b21bce 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts
@@ -17,7 +17,12 @@ import { BehaviorSubject } from 'rxjs';
   selector: 'datatable-row-wrapper',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div *ngIf="groupHeader && groupHeader.template" class="datatable-group-header" [ngStyle]="getGroupHeaderStyle()">
+    <div
+      *ngIf="groupHeader && groupHeader.template"
+      [style.height.px]="groupHeaderRowHeight"
+      class="datatable-group-header"
+      [ngStyle]="getGroupHeaderStyle()"
+    >
       <ng-template
         *ngIf="groupHeader && groupHeader.template"
         [ngTemplateOutlet]="groupHeader.template"
@@ -50,6 +55,7 @@ export class DataTableRowWrapperComponent implements DoCheck, OnInit {
   @Input() groupHeader: any;
   @Input() offsetX: number;
   @Input() detailRowHeight: any;
+  @Input() groupHeaderRowHeight: number;
   @Input() row: any;
   @Input() groupedRows: any;
   @Input() disableCheck: (row: any) => boolean;
@@ -133,7 +139,6 @@ export class DataTableRowWrapperComponent implements DoCheck, OnInit {
     styles.transform = 'translate3d(' + this.offsetX + 'px, 0px, 0px)';
     styles['backface-visibility'] = 'hidden';
     styles.width = this.innerWidth + 'px';
-
     return styles;
   }
 }
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 676e716e6..9a2b7d332 100644
--- a/projects/ngx-datatable/src/lib/components/body/body.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts
@@ -77,6 +77,7 @@ import { DragEventData } from '../../types/drag-events.type';
           [groupHeader]="groupHeader"
           [offsetX]="offsetX"
           [detailRowHeight]="getDetailRowHeight(group && group[i], i)"
+          [groupHeaderRowHeight]="getGroupHeaderRowHeight(group && group[i], i)"
           [row]="group"
           [disableCheck]="disableRowCheck"
           [expanded]="getRowExpanded(group)"
@@ -632,6 +633,14 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     const rowHeight = this.rowDetail.rowHeight;
     return typeof rowHeight === 'function' ? rowHeight(row, index) : (rowHeight as number);
   };
+  
+  getGroupHeaderRowHeight = (row?: any, index?: any): number => {
+    if (!this.groupHeader) {
+      return 0;
+    }
+    const rowHeight = this.groupHeader?.rowHeight === 0 ? this.rowHeight : this.groupHeader?.rowHeight;
+    return typeof rowHeight === 'function' ? rowHeight(row, index) : (rowHeight as number);
+  };
 
   /**
    * Calculates the styles for the row so that the rows can be moved in 2D space
diff --git a/src/app/basic/row-grouping.component.ts b/src/app/basic/row-grouping.component.ts
index 45b49c301..649c45c76 100644
--- a/src/app/basic/row-grouping.component.ts
+++ b/src/app/basic/row-grouping.component.ts
@@ -34,9 +34,9 @@ import { SelectionType } from './../../../projects/ngx-datatable/src/lib/types/s
         [selectionType]="SelectionType.multiClick"
       >
         <!-- Group Header Template -->
-        <ngx-datatable-group-header [rowHeight]="50" #myGroupHeader (toggle)="onDetailToggle($event)">
+        <ngx-datatable-group-header [rowHeight]="34" #myGroupHeader (toggle)="onDetailToggle($event)">
           <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
-            <div style="padding-left:5px;">
+            <div style="padding-left:5px;height: 100%; display:flex;align-items: center;">
               <a
                 href="#"
                 [class.datatable-icon-right]="!expanded"