passed textAlign to KTableGridItem

BabyElias · Sep 7, 2024 · 7acfa97 · 7acfa97
1 parent d41aef2
commit 7acfa97
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 20 deletions.
diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
@@ -27,7 +27,7 @@
           caption="Non Sortable Table"
         >
 
-          <template #header="{ header, index }">
+          <template #header="{ header, colIndex }">
             <span>{ header.label } (Backend)</span>
           </template>
           <template #cell="{ content, rowIndex, colIndex }">
@@ -64,7 +64,7 @@
           :rows="rows"
           caption="Non-sortable table"
         >
-          <template #header="{ header, index }">
+          <template #header="{ header, colIndex }">
             <span>{{ header.label }} (Backend)</span>
           </template>
           <template #cell="{ content, rowIndex, colIndex }">
@@ -79,7 +79,7 @@
       <p>
         The <code>KTable</code> can be used with default sorting functionality, allowing you to sort data on the client side without the need for server requests. There are 4 permissible data types - <code>string</code>,<code>number</code>,<code>date</code> and <code>undefined</code>. Columns declared with <code>undefined</code> data type are not sortable. This example demonstrates a table with default sorting enabled.
       </p>
-    
+
       <DocsShowCode language="html">
         <KTable
           :headers="headers"

diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
@@ -18,19 +18,13 @@
 
 <script>
 
-  import { DATA_TYPE_NUMERIC } from './useSorting';
-
   export default {
     name: 'KTableGridItem',
     props: {
       content: {
         type: [String, Number, Boolean, Object, Array],
         required: true,
       },
-      dataType: {
-        type: String,
-        default: 'string',
-      },
       rowIndex: {
         type: Number,
         required: true,
@@ -47,6 +41,10 @@
         type: String,
         default: 'auto',
       },
+      textAlign: {
+        type: String,
+        required: true,
+      },
     },
     computed: {
       coreOutlineFocus() {
@@ -57,16 +55,6 @@
           },
         };
       },
-      textAlign() {
-        const alignLtr = this.dataType === DATA_TYPE_NUMERIC ? 'right' : 'left';
-        if (this.isRtl && alignLtr === 'right') {
-          return 'left';
-        }
-        if (this.isRtl && alignLtr === 'left') {
-          return 'right';
-        }
-        return alignLtr;
-      },
     },
     methods: {
       onKeydown(event) {

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
@@ -34,7 +34,8 @@
               @click="sortable ? handleSort(index) : null"
               @keydown="handleKeydown($event, -1, index)"
             >
-              <slot name="header" :header="header" :colindex="index">
+              <!--@slot Scoped slot for customizing the content of each header cell. Provides a header object `header` and its column index `colIndex`.-->
+              <slot name="header" :header="header" :colIndex="index">
                 {{ header.label }}
               </slot>
               <span v-if="isColumnSortable(index)" class="sort-icon">
@@ -63,6 +64,7 @@
               :width="headers[colIndex].width"
               :rowIndex="rowIndex"
               :colIndex="colIndex"
+              :textAlign="getTextAlign(headers[colIndex].dataType)"
               :class="{
                 'sticky-column': colIndex === 0,
               }"
@@ -73,6 +75,7 @@
               @keydown="handleKeydown($event, rowIndex, colIndex)"
             >
               <template #default="slotProps">
+                <!--@slot Scoped slot for customizing the content of each data cell. Provides the content of a data cell `content`, its row index `rowIndex`, its column index `colIndex`, and the corresponding whole row object `row`.-->
                 <slot name="cell" :content="slotProps.content" :rowIndex="rowIndex" :colIndex="colIndex" :row="row">
                   {{ slotProps.content }}
                 </slot>