fix(row-group): group header row height (#61)

fixes the issue where `rowHeight` on `ngx-datatable-group-header` doesn't work
siemens · Jul 3, 2024 · 54d73c6 · 54d73c6
1 parent 52c993e
commit 54d73c6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 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
@@ -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
@@ -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
@@ -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"