added scoped slots and sorting composable

docs/pages/playground.vue

@@ -21,7 +21,39 @@
         { text: 'Level 2 ', link: { path: '#' } },
       ]"
     /> -->
-    <KTable :headers="tableHeaders" :rows="tableRows" caption="User Information Table" />
+    <h1>KTable Component Example</h1>
+    <h2>Sortable Table</h2>
+    <KTable
+      :headers="headers"
+      :rows="rows"
+      caption="Sortable Table"
+      :useLocalSorting="true"
+      sortable
+    >
+      <template #header="{ header, index }">
+        <span>{{ header.label }} (Custom)</span>
+      </template>
+      <template #cell="{ content, rowIndex, colIndex }">
+        <span v-if="colIndex === 1">{{ content }} years old</span>
+        <span v-else>{{ content }}</span>
+      </template>
+    </KTable>
+
+    <h2>Non-Sortable Table</h2>
+    <KTable
+      :headers="headers"
+      :rows="rows"
+      caption="Non-Sortable Table"
+      :sortable="false"
+    >
+      <template #header="{ header, index }">
+        <span>{{ header.label }} (Non-Sortable)</span>
+      </template>
+      <template #cell="{ content, rowIndex, colIndex }">
+        <span v-if="colIndex === 2">{{ content }} (City)</span>
+        <span v-else>{{ content }}</span>
+      </template>
+    </KTable>
 
 
     <!-- Play around with your component here: -->
@@ -34,11 +66,11 @@
 <script>
 
   /*
-     Playground is a Vue component too,
-     so you can also use `data`, `methods`, etc.
-     as usual if helpful
-   */
-  import KTable from '../../lib/KTable/KTable.vue';
+       Playground is a Vue component too,
+       so you can also use `data`, `methods`, etc.
+       as usual if helpful
+     */
+  import KTable from '../../lib/KTable';
 
   export default {
     name: 'Playground',
@@ -47,17 +79,18 @@
     },
     data() {
       return {
-        tableHeaders: [
+        headers: [
           { label: 'Name', dataType: 'string' },
           { label: 'Age', dataType: 'numeric' },
-          { label: 'Birth Date', dataType: 'date' },
           { label: 'City', dataType: 'string' },
+          { label: 'Joined', dataType: 'date' },
           { label: 'Misc', dataType: 'others' },
         ],
-        tableRows: [
-          ['Alice', 25, '1999-05-12', 'New York', 'Example'],
-          ['Bob', 30, '1994-02-22', 'San Francisco', 'Example'],
-          ['Charlie', 35, '1989-12-15', 'Chicago', 'Example'],
+        rows: [
+          ['John Doe', 28, 'New York', '2022-01-15', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10', 'N/A'],
+          ['Alice Johnson', 30, 'Houston', '2020-07-18', 'N/A'],
         ],
       };
     },

lib/KTable/KTableGridItem.vue

@@ -1,7 +1,9 @@
 <template>
 
-  <td :style="{ textAlign: align }" tabindex="0" @keydown="onKeydown">
-    {{ content }}
+  <td :style="{ textAlign: textAlign }" tabindex="0" @keydown="onKeydown">
+    <slot :content="content">
+      {{ content }}
+    </slot>
   </td>
 
 </template>
@@ -16,22 +18,27 @@
         type: [String, Number],
         required: true,
       },
-      align: {
+      dataType: {
         type: String,
-        default: 'left',
+        default: 'string',
       },
       rowIndex: {
         type: Number,
         required: true,
       },
-      cellIndex: {
+      colIndex: {
         type: Number,
         required: true,
       },
     },
+    computed: {
+      textAlign() {
+        return this.dataType === 'numeric' ? 'right' : 'left';
+      },
+    },
     methods: {
       onKeydown(event) {
-        this.$emit('keydown', event, this.rowIndex, this.cellIndex);
+        this.$emit('keydown', event, this.rowIndex, this.colIndex);
       },
     },
   };
@@ -40,14 +47,10 @@
 
 
 <style scoped>
-  td {
-    padding: 15px;
-    text-align: left;
-    border-bottom: 1px solid #eee;
-  }
-
-  td:focus {
-    outline: 2px solid #007bff;
-    outline-offset: -2px;
-  }
+td:focus {
+  outline: 2px solid #007bff;
+  outline-offset: -2px;
+  z-index: 1;
+  position: relative;
+}
 </style>