fix(table): prevent jumping headers when sorting (#2265)

packages/components/src/components/table/table.css

@@ -28,7 +28,7 @@ scale-table {
   --border-bottom-tfoot-td: var(--telekom-spacing-composition-space-01) solid
     var(--telekom-color-ui-extra-strong);
 
-  --spacing-th-sortable: 0 var(--telekom-spacing-composition-space-04) 0 0;
+  --spacing-th-sortable: 0 0 0 0;
   --background-th-sortable-hover: var(--telekom-color-ui-subtle);
   --background-th-sortable-active: var(--telekom-color-ui-faint);
   --box-shadow-th-sortable-focus: inset 0 0 0
@@ -100,6 +100,7 @@ scale-table {
 .table--sortable th {
   cursor: pointer;
   padding: var(--spacing-th-sortable);
+  padding-right: 0;
 }
 .table--sortable th:hover {
   padding: var(--spacing-th-sortable);
@@ -121,9 +122,11 @@ scale-table {
 }
 .table--sortable th:not([aria-sort]) {
   padding: var(--padding);
+  padding-right: var(--telekom-spacing-composition-space-07);
 }
 .table--sortable th[aria-sort='none'] {
   padding: var(--padding);
+  padding-right: var(--telekom-spacing-composition-space-05);
 }
 .table--sortable th[aria-sort='ascending'] .scale-sort-indicator .up {
   color: var(--color);
@@ -188,7 +191,7 @@ scale-table {
   color: transparent;
 }
 .table--sortable th[aria-sort='none']:hover {
-  padding: 0 8px 0 0;
+  padding: 0 0 0 0;
 }
 .table--sortable th[aria-sort='none'] .scale-sort-indicator {
   display: none;

packages/components/src/components/table/table.spec.ts

@@ -27,9 +27,27 @@ describe('Table', () => {
         <table>
           <thead>
             <tr>
-              <th>Title</th>
-              <th>Time</th>
-              <th>Euros</th>
+              <th>
+                <span aria-hidden="true" class="scale-sort-indicator">
+                  <scale-icon-content-sort-indicator-up class="scale-sort-indicator-icon up" size="16"></scale-icon-content-sort-indicator-up>
+                  <scale-icon-content-sort-indicator-down class="down scale-sort-indicator-icon" size="16"></scale-icon-content-sort-indicator-down>
+                </span>              
+                Title
+              </th>
+              <th>
+                <span aria-hidden="true" class="scale-sort-indicator">
+                  <scale-icon-content-sort-indicator-up class="scale-sort-indicator-icon up" size="16"></scale-icon-content-sort-indicator-up>
+                  <scale-icon-content-sort-indicator-down class="down scale-sort-indicator-icon" size="16"></scale-icon-content-sort-indicator-down>
+                </span>                    
+                Time
+              </th>
+              <th>
+                <span aria-hidden="true" class="scale-sort-indicator">
+                  <scale-icon-content-sort-indicator-up class="scale-sort-indicator-icon up" size="16"></scale-icon-content-sort-indicator-up>
+                  <scale-icon-content-sort-indicator-down class="down scale-sort-indicator-icon" size="16"></scale-icon-content-sort-indicator-down>
+                </span>                 
+                Euros
+              </th>
             </tr>
           </thead>
           <tbody>

packages/components/src/components/table/table.tsx

@@ -47,9 +47,11 @@ export class Table {
   }
 
   componentWillLoad() {
-    this.hostElement.querySelectorAll('th').forEach((th) => {
-      this.addSortIndicator(th);
-    });
+    if (this.showSort) {
+      this.hostElement.querySelectorAll('th').forEach((th) => {
+        this.addSortIndicator(th);
+      });
+    }
   }
 
   componentWillUpdate() {
@@ -58,7 +60,9 @@ export class Table {
       if (th.children.length === 0) {
         // this may not be needed
         th.classList.add('dynamically-added');
-        this.addSortIndicator(th);
+        if (this.showSort) {
+          this.addSortIndicator(th);
+        }
       }
     });
   }