fix: table header layout improved (#595)

onecx · Nov 13, 2024 · 596aa1f · 596aa1f
1 parent 07a9f63
commit 596aa1f
Showing 1 changed file with 9 additions and 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
@@ -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'"