Added header align same as content alignment

BabyElias · Sep 5, 2024 · eb923d2 · eb923d2
1 parent f39cd22
commit eb923d2
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
@@ -26,7 +26,8 @@
               :style="[getHeaderStyle(header),
                        isColumnSortActive(index) ? { color: $themeBrand.primary.v_1000 } : { color: $themePalette.grey.v_800 },
                        { backgroundColor: $themePalette.white } ,
-                       isColumnFocused(index) ? { backgroundColor: $themePalette.grey.v_50 } : {}]"
+                       isColumnFocused(index) ? { backgroundColor: $themePalette.grey.v_50 } : {},
+                       { textAlign: getTextAlign(header.dataType) }]"
               role="columnheader"
               data-focus="true"
               :aria-colindex="index + 1"
@@ -90,7 +91,12 @@
 <script>
 
   import { ref, computed, watch } from '@vue/composition-api';
-  import useSorting, { SORT_ORDER_ASC, SORT_ORDER_DESC, DATA_TYPE_OTHERS } from './useSorting';
+  import useSorting, {
+    SORT_ORDER_ASC,
+    SORT_ORDER_DESC,
+    DATA_TYPE_OTHERS,
+    DATA_TYPE_NUMERIC,
+  } from './useSorting';
   import KTableGridItem from './KTableGridItem.vue';
 
   export default {
@@ -497,6 +503,16 @@
           }
         });
       },
+      getTextAlign(dataType) {
+        const alignLtr = dataType === DATA_TYPE_NUMERIC ? 'right' : 'left';
+        if (this.isRtl && alignLtr === 'right') {
+          return 'left';
+        }
+        if (this.isRtl && alignLtr === 'left') {
+          return 'right';
+        }
+        return alignLtr;
+      },
     },
   };