From 1ac1d87b22d83da6f2d3cb93dcc7d26629e61a1f Mon Sep 17 00:00:00 2001
From: markuczy <martin.kuczynski@capgemini.com>
Date: Tue, 12 Nov 2024 16:54:31 +0100
Subject: [PATCH] fix: table header layout improved

---
 .../data-table/data-table.component.html           | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
index 21b584e0..698dc5d7 100644
--- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
+++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
@@ -122,9 +122,10 @@
     scrollHeight="flex"
     [style]="tableStyle"
     paginatorDropdownAppendTo="body"
+    tableStyleClass="h-full"
   >
     <ng-template pTemplate="header">
-      <tr>
+      <tr style="vertical-align: top">
         <th style="width: 4rem" scope="col" *ngIf="selectionChangedObserved">
           <p-tableHeaderCheckbox
             *ngIf="allowSelectAll"
@@ -136,12 +137,15 @@
         </ng-container>
         <ng-container *ngFor="let column of columns">
           <th *ngIf="column.sortable || column.filterable; else simpleHeader" scope="col">
-            <div class="table-header-wrapper">
-              <span id="{{column.id}}-header-name">{{ column.nameKey | translate }}</span>
-              <span class="icon-button-header-wrapper">
+            <div
+              class="table-header-wrapper flex flex-column justify-content-between align-items-start"
+              style="height: 100%"
+            >
+              <span class="flex" id="{{column.id}}-header-name">{{ column.nameKey | translate }}</span>
+              <span class="flex icon-button-header-wrapper">
                 <button
                   *ngIf="column.sortable"
-                  class="pi sortButton"
+                  class="pi sortButton pl-0"
                   [class.pi-sort-alt]="(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn"
                   [class.pi-sort-amount-up]="column?.id === sortColumn && sortDirection === 'ASCENDING'"
                   [class.pi-sort-amount-down]="column?.id === sortColumn && sortDirection === 'DESCENDING'"