fix: 100% width table and button for sort (#1929)

seb-oss · Jan 21, 2025 · bd8f1cc · bd8f1cc
1 parent e390b6e
commit bd8f1cc
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 19 deletions.
diff --git a/libs/angular/src/v-angular/table/table.component.html b/libs/angular/src/v-angular/table/table.component.html
@@ -1,3 +1,41 @@
+<ng-template #sortableThTemplate let-column>
+  <button class="sg-table-sort" *transloco="let t">
+    <ng-template #thButtonTemplate>
+      {{ t(column.label ?? '') }}
+    </ng-template>
+    <ng-container
+      *ngIf="
+        customHeaderTemplates.get(column.property) as thTemplate;
+        else thButtonTemplate
+      "
+    >
+      <ng-template
+        *ngTemplateOutlet="thTemplate || null; context: { $implicit: column }"
+      >
+      </ng-template>
+    </ng-container>
+  </button>
+</ng-template>
+
+<ng-template #notSortableThTemplate let-column>
+  <ng-template #defaultThTemplate>
+    <ng-container *transloco="let t">
+      {{ t(column.label ?? '') }}
+    </ng-container>
+  </ng-template>
+  <ng-container
+    *ngIf="
+      customHeaderTemplates.get(column.property) as thTemplate;
+      else defaultThTemplate
+    "
+  >
+    <ng-template
+      *ngTemplateOutlet="thTemplate || null; context: { $implicit: column }"
+    >
+    </ng-template>
+  </ng-container>
+</ng-template>
+
 <table class="gds-table" *transloco="let t">
   <!-- Table header -->
   <thead>
@@ -28,27 +66,24 @@
         [attr.aria-label]="getAriaLabel(column)"
         [attr.aria-sort]="column.order + 'ending'"
       >
-        <ng-container
-          *ngIf="
-            customHeaderTemplates.get(column.property) as thTemplate;
-            else defaultThTemplate
-          "
-        >
-          <!-- Cannot infer thTemplate as TemplateRef therefore null -->
-          <ng-template
+        <ng-container *ngIf="column.sortable">
+          <ng-container
             *ngTemplateOutlet="
-              thTemplate || null;
-              context: { $implicit: column }
+              sortableThTemplate;
+              context: { $implicit: column, column: column }
             "
           >
-          </ng-template>
+          </ng-container>
+        </ng-container>
+        <ng-container *ngIf="!column.sortable">
+          <ng-container
+            *ngTemplateOutlet="
+              notSortableThTemplate;
+              context: { $implicit: column, column: column }
+            "
+          >
+          </ng-container>
         </ng-container>
-
-        <ng-template #defaultThTemplate>
-          <button class="sg-table-sort">
-            {{ t(column.label ?? '') }}
-          </button>
-        </ng-template>
       </th>
     </tr>
   </thead>

diff --git a/libs/angular/src/v-angular/table/table.component.scss b/libs/angular/src/v-angular/table/table.component.scss
@@ -12,6 +12,7 @@
   --gds-ref-pallet-base500: hsl(0, 0%, 68%);
   --sg-table-sort-icon-color-active: #fff;
   @include table.add-table();
+  width: 100%;
 
   border-bottom: none;
 
@@ -39,6 +40,8 @@
     background-color: rgba(0, 0, 0, 0);
     border: 0;
     font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
     padding: 0;
     cursor: pointer;
   }

diff --git a/libs/angular/src/v-angular/table/table.mock.ts b/libs/angular/src/v-angular/table/table.mock.ts
@@ -27,15 +27,15 @@ export const columns: {
     {
       property: 'currency',
       label: 'header.currency',
-      sortable: true,
+      sortable: false,
       ariaLabelSortable:
         'Activate to sort Currency column in {{sortOrder}} order',
     },
     {
       property: 'bookedBalance',
       label: 'header.bookedbalance',
       valueType: 'numeric',
-      sortable: true,
+      sortable: false,
     },
     {
       property: 'datedBalance',