From 2f527c35e24bbc4281e9b29437379f918bb56a95 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 30 May 2024 21:18:04 +0530
Subject: [PATCH 01/78] Initialisating KTable Component

---
 docs/pages/ktable.vue        |  3 ++
 docs/tableOfContents.js      |  5 ++++
 lib/KTable.vue               | 56 ++++++++++++++++++++++++++++++++++++
 lib/KThemePlugin.js          |  2 ++
 lib/__tests__/KTable.spec.js | 37 ++++++++++++++++++++++++
 5 files changed, 103 insertions(+)
 create mode 100644 docs/pages/ktable.vue
 create mode 100644 lib/KTable.vue
 create mode 100644 lib/__tests__/KTable.spec.js

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
new file mode 100644
index 000000000..180c372c0
--- /dev/null
+++ b/docs/pages/ktable.vue
@@ -0,0 +1,3 @@
+<template>
+  <DocsPageTemplate apiDocs />
+</template>
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index c6aa32e34..ba939da0d 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -321,6 +321,11 @@ export default [
         isCode: true,
         keywords: ['button'],
       }),
+      new Page({
+        path: '/ktable',
+        title: 'KTable',
+        isCode: true,
+      }),
       new Page({
         path: '/kgrid',
         title: 'KGrid',
diff --git a/lib/KTable.vue b/lib/KTable.vue
new file mode 100644
index 000000000..5f979a743
--- /dev/null
+++ b/lib/KTable.vue
@@ -0,0 +1,56 @@
+<template>
+
+  <div class="k-table">
+    <table>
+      <thead>
+        <tr>
+          <th v-for="(header,index) in headers" :key="index">
+            {{ header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row,index) in rows" :key="index">
+          <td v-for="(cell,cellIndex) in row" :key="cellIndex">
+            {{ cell }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</template>
+<script>
+
+  export default {
+    name: 'KTable',
+    props: {
+      headers: {
+        type: Array,
+        required: true,
+      },
+      rows: {
+        type: Array,
+        required: true,
+      },
+    },
+  };
+
+</script>
+<style scoped>
+.k-table{
+    margin:20px;
+    border-collapse:collapse;
+}
+.k-table table{
+    width:100%;
+    border:2px solid #ccc;
+    border-collapse:separate;
+    border-spacing:0;
+}
+.k-table th, .k-table td{
+    padding: 10px;
+    text-align:left;
+    
+}
+</style>
\ No newline at end of file
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 9e189f875..bc8af3ed9 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -26,6 +26,7 @@ import KRadioButton from './KRadioButton';
 import KRouterLink from './buttons-and-links/KRouterLink';
 import KSelect from './KSelect';
 import KSwitch from './KSwitch';
+import KTable from './KTable'
 import KTabs from './tabs/KTabs';
 import KTabsList from './tabs/KTabsList';
 import KTabsPanel from './tabs/KTabsPanel';
@@ -120,6 +121,7 @@ export default function KThemePlugin(Vue) {
   Vue.component('KRouterLink', KRouterLink);
   Vue.component('KSelect', KSelect);
   Vue.component('KSwitch', KSwitch);
+  Vue.component('KTable', KTable);
   Vue.component('KTabs', KTabs);
   Vue.component('KTabsList', KTabsList);
   Vue.component('KTabsPanel', KTabsPanel);
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
new file mode 100644
index 000000000..211de44dc
--- /dev/null
+++ b/lib/__tests__/KTable.spec.js
@@ -0,0 +1,37 @@
+import {shallowMount} from '@vue/test-utils'
+import KTable from '../../lib/KTable.vue';
+
+describe('KTable.vue',()=>{
+    it('should mount the component',()=>{
+        const headers=['Name','Age','City']
+        const rows=[
+            ['Alice',25,'New York'],
+            ['Bob',30,'Los Angeles'],
+            ['Charlie',35,'San Francisco']
+        ]
+        const wrapper=shallowMount(KTable,{
+            propsData:{
+                headers,
+                rows
+            }
+        })
+        const thElements=wrapper.findAll('th')
+        expect(thElements.length).toBe(headers.length)
+    })
+    it('should render correct number of rows',()=>{
+        const headers=['Name','Age','City']
+        const rows=[
+            ['Alice',25,'New York'],
+            ['Bob',30,'Los Angeles'],
+            ['Charlie',35,'San Francisco']
+        ]
+        const wrapper=shallowMount(KTable,{
+            propsData:{
+                headers,
+                rows
+            }
+        })
+        const trElements=wrapper.findAll('tbody tr')
+        expect(trElements.length).toBe(rows.length+1)
+    })
+})
\ No newline at end of file

From 523168e4d15f38f2b645cb4dda5d175e871ae0b4 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 30 May 2024 23:04:12 +0530
Subject: [PATCH 02/78] Initialised KTable (fixed linting)

---
 docs/pages/ktable.vue        |  2 ++
 lib/KThemePlugin.js          |  2 +-
 lib/__tests__/KTable.spec.js | 70 ++++++++++++++++++------------------
 3 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 180c372c0..d6135544e 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -1,3 +1,5 @@
 <template>
+
   <DocsPageTemplate apiDocs />
+
 </template>
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index bc8af3ed9..cc021fc54 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -26,7 +26,7 @@ import KRadioButton from './KRadioButton';
 import KRouterLink from './buttons-and-links/KRouterLink';
 import KSelect from './KSelect';
 import KSwitch from './KSwitch';
-import KTable from './KTable'
+import KTable from './KTable';
 import KTabs from './tabs/KTabs';
 import KTabsList from './tabs/KTabsList';
 import KTabsPanel from './tabs/KTabsPanel';
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 211de44dc..04e62f3a0 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -1,37 +1,37 @@
-import {shallowMount} from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils';
 import KTable from '../../lib/KTable.vue';
 
-describe('KTable.vue',()=>{
-    it('should mount the component',()=>{
-        const headers=['Name','Age','City']
-        const rows=[
-            ['Alice',25,'New York'],
-            ['Bob',30,'Los Angeles'],
-            ['Charlie',35,'San Francisco']
-        ]
-        const wrapper=shallowMount(KTable,{
-            propsData:{
-                headers,
-                rows
-            }
-        })
-        const thElements=wrapper.findAll('th')
-        expect(thElements.length).toBe(headers.length)
-    })
-    it('should render correct number of rows',()=>{
-        const headers=['Name','Age','City']
-        const rows=[
-            ['Alice',25,'New York'],
-            ['Bob',30,'Los Angeles'],
-            ['Charlie',35,'San Francisco']
-        ]
-        const wrapper=shallowMount(KTable,{
-            propsData:{
-                headers,
-                rows
-            }
-        })
-        const trElements=wrapper.findAll('tbody tr')
-        expect(trElements.length).toBe(rows.length+1)
-    })
-})
\ No newline at end of file
+describe('KTable.vue', () => {
+  it('should mount the component', () => {
+    const headers = ['Name', 'Age', 'City'];
+    const rows = [
+      ['Alice', 25, 'New York'],
+      ['Bob', 30, 'Los Angeles'],
+      ['Charlie', 35, 'San Francisco'],
+    ];
+    const wrapper = shallowMount(KTable, {
+      propsData: {
+        headers,
+        rows,
+      },
+    });
+    const thElements = wrapper.findAll('th');
+    expect(thElements.length).toBe(headers.length);
+  });
+  it('should render correct number of rows', () => {
+    const headers = ['Name', 'Age', 'City'];
+    const rows = [
+      ['Alice', 25, 'New York'],
+      ['Bob', 30, 'Los Angeles'],
+      ['Charlie', 35, 'San Francisco'],
+    ];
+    const wrapper = shallowMount(KTable, {
+      propsData: {
+        headers,
+        rows,
+      },
+    });
+    const trElements = wrapper.findAll('tbody tr');
+    expect(trElements.length).toBe(rows.length + 1);
+  });
+});

From 9109552587cb1f594d505be831c5b3dc10f6880e Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 30 May 2024 23:10:31 +0530
Subject: [PATCH 03/78] Fixed linting errors

---
 lib/KTable.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/KTable.vue b/lib/KTable.vue
index 5f979a743..e9400fd25 100644
--- a/lib/KTable.vue
+++ b/lib/KTable.vue
@@ -20,6 +20,8 @@
   </div>
 
 </template>
+
+
 <script>
 
   export default {
@@ -37,6 +39,8 @@
   };
 
 </script>
+
+
 <style scoped>
 .k-table{
     margin:20px;

From 5b13c646301339880c19dde34fb896cd03b820dd Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 30 May 2024 23:14:08 +0530
Subject: [PATCH 04/78] fixed failing tests

---
 lib/__tests__/KTable.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 04e62f3a0..27ddf58c4 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -32,6 +32,6 @@ describe('KTable.vue', () => {
       },
     });
     const trElements = wrapper.findAll('tbody tr');
-    expect(trElements.length).toBe(rows.length + 1);
+    expect(trElements.length).toBe(rows.length);
   });
 });

From 60caa847ffb639f163a3ee155b6f3bfecf526826 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Mon, 3 Jun 2024 20:51:22 +0530
Subject: [PATCH 05/78] Added sorting functionality

---
 lib/KTable/KTable.vue         | 236 ++++++++++++++++++++++++++++++++++
 lib/KTable/KTableGridItem.vue |  49 +++++++
 lib/KThemePlugin.js           |   2 +-
 lib/__tests__/KTable.spec.js  |   2 +-
 4 files changed, 287 insertions(+), 2 deletions(-)
 create mode 100644 lib/KTable/KTable.vue
 create mode 100644 lib/KTable/KTableGridItem.vue

diff --git a/lib/KTable/KTable.vue b/lib/KTable/KTable.vue
new file mode 100644
index 000000000..1ada93645
--- /dev/null
+++ b/lib/KTable/KTable.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="k-table">
+    <table>
+      <caption v-if="caption">
+        {{ caption }}
+      </caption>
+      <thead>
+        <tr>
+          <th
+            v-for="(header, index) in headers"
+            :key="index"
+            tabindex="0"
+            @click="handleSort(index)"
+            @keydown="handleKeydown($event, -1, index)"
+          >
+            {{ header.label }}
+            <span v-if="header.dataType !== 'others'" class="sort-icon">
+              <span v-if="sortKey === index && sortOrder === 'asc'">⬆️</span>
+              <span v-else-if="sortKey === index && sortOrder === 'desc'">⬇️</span>
+              <span v-else>⬍</span>
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, rowIndex) in sortedRows" :key="rowIndex">
+          <KTableGridItem
+            v-for="(cell, cellIndex) in row"
+            :key="cellIndex"
+            :content="cell"
+            :align="headers[cellIndex].dataType === 'numeric' ? 'right' : 'left'"
+            :rowIndex="rowIndex"
+            :cellIndex="cellIndex"
+            @keydown="handleKeydown($event, rowIndex, cellIndex)"
+          />
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import KTableGridItem from './KTableGridItem.vue';
+
+export default {
+  name: 'KTable',
+  components: {
+    KTableGridItem,
+  },
+  props: {
+    headers: {
+      type: Array,
+      required: true,
+      validator: function (value) {
+        return value.every(
+          (header) =>
+            ['label', 'dataType'].every((key) => key in header) &&
+            ['string', 'numeric', 'date', 'others'].includes(header.dataType)
+        );
+      },
+    },
+    rows: {
+      type: Array,
+      required: true,
+    },
+    caption: {
+      type: String,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      sortKey: null,
+      sortOrder: 'asc',
+    };
+  },
+  computed: {
+    sortedRows() {
+      if (this.sortKey === null) return this.rows;
+
+      const sortedRows = [...this.rows];
+      const sortHeader = this.headers[this.sortKey];
+
+      if (sortHeader.dataType === 'numeric') {
+        sortedRows.sort((a, b) => a[this.sortKey] - b[this.sortKey]);
+      } else if (sortHeader.dataType === 'string' || sortHeader.dataType === 'date') {
+        sortedRows.sort((a, b) => a[this.sortKey].localeCompare(b[this.sortKey]));
+      }
+
+      if (this.sortOrder === 'desc') {
+        sortedRows.reverse();
+      }
+
+      return sortedRows;
+    },
+  },
+  methods: {
+    handleSort(index) {
+  const clickedElement = event.target.tagName.toLowerCase();
+  if (clickedElement !== 'th' || this.headers[index].dataType === 'others') return;
+
+  if (this.sortKey === index) {
+    this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
+  } else {
+    this.sortKey = index;
+    this.sortOrder = 'asc';
+  }
+},
+    handleKeydown(event, rowIndex, cellIndex) {
+  const key = event.key;
+  const totalRows = this.rows.length;
+  const totalCols = this.headers.length;
+
+  let nextRowIndex = rowIndex;
+  let nextCellIndex = cellIndex;
+
+  switch (key) {
+    case 'ArrowUp':
+      if (rowIndex === 0) {
+        this.focusHeader(cellIndex);
+        return;
+      } else if (rowIndex > 0) {
+        nextRowIndex = rowIndex - 1;
+      } else {
+        return;
+      }
+      break;
+    case 'ArrowDown':
+      if (rowIndex === -1) {
+        nextRowIndex = 0;
+      } else {
+        nextRowIndex = (rowIndex + 1) % totalRows;
+      }
+      break;
+    case 'ArrowLeft':
+      if (rowIndex === -1) {
+        nextCellIndex = cellIndex > 0 ? cellIndex - 1 : totalCols - 1;
+      } else if (cellIndex > 0) {
+        nextCellIndex = cellIndex - 1;
+      } else {
+        nextCellIndex = totalCols - 1;
+        nextRowIndex = rowIndex > 0 ? rowIndex - 1 : -1; // Move to the header row if needed
+      }
+      break;
+    case 'ArrowRight':
+      if (rowIndex === -1) {
+        if (cellIndex < totalCols - 1) {
+          nextCellIndex = cellIndex + 1;
+        } else {
+          nextRowIndex = 0;
+          nextCellIndex = 0;
+        }
+      } else if (cellIndex < totalCols - 1) {
+        nextCellIndex = cellIndex + 1;
+      } else {
+        nextCellIndex = 0;
+        nextRowIndex = (rowIndex + 1) % totalRows;
+      }
+      break;
+    case 'Enter':
+      this.handleSort(cellIndex);
+      break;
+    default:
+      return;
+  }
+
+  this.focusCell(nextRowIndex, nextCellIndex);
+  event.preventDefault();
+},
+      
+        
+    focusHeader(cellIndex) {
+      const nextHeader = this.$el.querySelector(`thead th:nth-child(${cellIndex + 1})`);
+      if (nextHeader) {
+        nextHeader.focus();
+      }
+    },
+    focusCell(rowIndex, cellIndex) {
+      let nextCell;
+      if (rowIndex === -1) {
+        nextCell = this.$el.querySelector(`thead th:nth-child(${cellIndex + 1})`);
+      } else {
+        nextCell = this.$el.querySelector(
+          `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${cellIndex + 1})`
+        );
+      }
+      if (nextCell) {
+        nextCell.focus();
+      }
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+.k-table {
+  margin: 20px;
+}
+
+.k-table table {
+  width: 100%;
+  border: 2px solid #ccc;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.k-table th,
+.k-table td {
+  padding: 15px;
+  text-align: left;
+  position: relative;
+}
+
+.k-table th {
+  background-color: #f2f2f2;
+  border-bottom: 2px solid #ccc;
+  cursor: pointer;
+}
+
+.k-table td {
+  border-bottom: 1px solid #eee;
+}
+
+.k-table th:focus,
+.k-table td:focus {
+  outline: 2px solid #007bff;
+  outline-offset: -2px;
+}
+
+.sort-icon {
+  margin-left: 8px;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
new file mode 100644
index 000000000..08540978c
--- /dev/null
+++ b/lib/KTable/KTableGridItem.vue
@@ -0,0 +1,49 @@
+<template>
+  <td :style="{ textAlign: align }" tabindex="0" @keydown="onKeydown">
+    {{ content }}
+  </td>
+</template>
+ 
+
+<script>
+  export default {
+    name: 'KTableGridItem',
+    props: {
+      content: {
+        type: [String, Number],
+        required: true,
+      },
+      align: {
+        type: String,
+        default: 'left',
+      },
+      rowIndex: {
+        type: Number,
+        required: true,
+      },
+      cellIndex: {
+        type: Number,
+        required: true,
+      },
+    },
+    methods: {
+      onKeydown(event) {
+        this.$emit('keydown', event, this.rowIndex, this.cellIndex);
+      },
+    },
+  };
+</script>
+  
+  
+<style scoped>
+  td {
+    padding: 15px;
+    text-align: left;
+    border-bottom: 1px solid #eee;
+  }
+  
+  td:focus {
+    outline: 2px solid #007bff;
+    outline-offset: -2px;
+  }
+</style>
\ No newline at end of file
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index cc021fc54..d9115a87b 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -26,7 +26,7 @@ import KRadioButton from './KRadioButton';
 import KRouterLink from './buttons-and-links/KRouterLink';
 import KSelect from './KSelect';
 import KSwitch from './KSwitch';
-import KTable from './KTable';
+import KTable from './KTable/KTable';
 import KTabs from './tabs/KTabs';
 import KTabsList from './tabs/KTabsList';
 import KTabsPanel from './tabs/KTabsPanel';
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 27ddf58c4..6e8b2ad4c 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import KTable from '../../lib/KTable.vue';
+import KTable from '../../lib/KTable/KTable.vue';
 
 describe('KTable.vue', () => {
   it('should mount the component', () => {

From b85a6d38fe983904448ba33ff48f5ffa846665ef Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Mon, 3 Jun 2024 20:51:43 +0530
Subject: [PATCH 06/78] organised file structure

---
 lib/KTable.vue | 60 --------------------------------------------------
 1 file changed, 60 deletions(-)
 delete mode 100644 lib/KTable.vue

diff --git a/lib/KTable.vue b/lib/KTable.vue
deleted file mode 100644
index e9400fd25..000000000
--- a/lib/KTable.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-
-  <div class="k-table">
-    <table>
-      <thead>
-        <tr>
-          <th v-for="(header,index) in headers" :key="index">
-            {{ header }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row,index) in rows" :key="index">
-          <td v-for="(cell,cellIndex) in row" :key="cellIndex">
-            {{ cell }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-</template>
-
-
-<script>
-
-  export default {
-    name: 'KTable',
-    props: {
-      headers: {
-        type: Array,
-        required: true,
-      },
-      rows: {
-        type: Array,
-        required: true,
-      },
-    },
-  };
-
-</script>
-
-
-<style scoped>
-.k-table{
-    margin:20px;
-    border-collapse:collapse;
-}
-.k-table table{
-    width:100%;
-    border:2px solid #ccc;
-    border-collapse:separate;
-    border-spacing:0;
-}
-.k-table th, .k-table td{
-    padding: 10px;
-    text-align:left;
-    
-}
-</style>
\ No newline at end of file

From 2784a078d9f40c9a3a7277ddf801f1f1178837e1 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Mon, 3 Jun 2024 21:03:59 +0530
Subject: [PATCH 07/78] added ktable to playground

---
 docs/pages/playground.vue |  27 +++-
 lib/KTable/KTable.vue     | 289 +++++++++++++++++++-------------------
 2 files changed, 169 insertions(+), 147 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 686423285..cce540ba7 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -21,6 +21,8 @@
         { text: 'Level 2 ', link: { path: '#' } },
       ]"
     /> -->
+    <KTable :headers="tableHeaders" :rows="tableRows" caption="User Information Table" />
+    
 
     <!-- Play around with your component here: -->
 
@@ -36,12 +38,29 @@
     so you can also use `data`, `methods`, etc.
     as usual if helpful
   */
+ import KTable from '../../lib/KTable/KTable.vue';
+
   export default {
     name: 'Playground',
-    data() {
-      return {};
-    },
-    methods: {},
+    components: {
+    KTable,
+  },
+  data() {
+    return {
+      tableHeaders: [
+        { label: 'Name', dataType: 'string' },
+        { label: 'Age', dataType: 'numeric' },
+        { label: 'Birth Date', dataType: 'date' },
+        { label: 'City', dataType: 'string' },
+        { 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'],
+      ],
+    };
+  },
   };
 
 </script>
diff --git a/lib/KTable/KTable.vue b/lib/KTable/KTable.vue
index 1ada93645..5cb0bc3c0 100644
--- a/lib/KTable/KTable.vue
+++ b/lib/KTable/KTable.vue
@@ -1,4 +1,5 @@
 <template>
+
   <div class="k-table">
     <table>
       <caption v-if="caption">
@@ -37,159 +38,161 @@
       </tbody>
     </table>
   </div>
+
 </template>
 
 <script>
-import KTableGridItem from './KTableGridItem.vue';
-
-export default {
-  name: 'KTable',
-  components: {
-    KTableGridItem,
-  },
-  props: {
-    headers: {
-      type: Array,
-      required: true,
-      validator: function (value) {
-        return value.every(
-          (header) =>
-            ['label', 'dataType'].every((key) => key in header) &&
-            ['string', 'numeric', 'date', 'others'].includes(header.dataType)
-        );
-      },
+
+  import KTableGridItem from './KTableGridItem.vue';
+
+  export default {
+    name: 'KTable',
+    components: {
+      KTableGridItem,
     },
-    rows: {
-      type: Array,
-      required: true,
+    props: {
+      headers: {
+        type: Array,
+        required: true,
+        validator: function(value) {
+          return value.every(
+            header =>
+              ['label', 'dataType'].every(key => key in header) &&
+              ['string', 'numeric', 'date', 'others'].includes(header.dataType)
+          );
+        },
+      },
+      rows: {
+        type: Array,
+        required: true,
+      },
+      caption: {
+        type: String,
+        required: false,
+      },
     },
-    caption: {
-      type: String,
-      required: false,
+    data() {
+      return {
+        sortKey: null,
+        sortOrder: 'asc',
+      };
     },
-  },
-  data() {
-    return {
-      sortKey: null,
-      sortOrder: 'asc',
-    };
-  },
-  computed: {
-    sortedRows() {
-      if (this.sortKey === null) return this.rows;
-
-      const sortedRows = [...this.rows];
-      const sortHeader = this.headers[this.sortKey];
-
-      if (sortHeader.dataType === 'numeric') {
-        sortedRows.sort((a, b) => a[this.sortKey] - b[this.sortKey]);
-      } else if (sortHeader.dataType === 'string' || sortHeader.dataType === 'date') {
-        sortedRows.sort((a, b) => a[this.sortKey].localeCompare(b[this.sortKey]));
-      }
-
-      if (this.sortOrder === 'desc') {
-        sortedRows.reverse();
-      }
-
-      return sortedRows;
+    computed: {
+      sortedRows() {
+        if (this.sortKey === null) return this.rows;
+
+        const sortedRows = [...this.rows];
+        const sortHeader = this.headers[this.sortKey];
+
+        if (sortHeader.dataType === 'numeric') {
+          sortedRows.sort((a, b) => a[this.sortKey] - b[this.sortKey]);
+        } else if (sortHeader.dataType === 'string' || sortHeader.dataType === 'date') {
+          sortedRows.sort((a, b) => a[this.sortKey].localeCompare(b[this.sortKey]));
+        }
+
+        if (this.sortOrder === 'desc') {
+          sortedRows.reverse();
+        }
+
+        return sortedRows;
+      },
     },
-  },
-  methods: {
-    handleSort(index) {
-  const clickedElement = event.target.tagName.toLowerCase();
-  if (clickedElement !== 'th' || this.headers[index].dataType === 'others') return;
-
-  if (this.sortKey === index) {
-    this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
-  } else {
-    this.sortKey = index;
-    this.sortOrder = 'asc';
-  }
-},
-    handleKeydown(event, rowIndex, cellIndex) {
-  const key = event.key;
-  const totalRows = this.rows.length;
-  const totalCols = this.headers.length;
-
-  let nextRowIndex = rowIndex;
-  let nextCellIndex = cellIndex;
-
-  switch (key) {
-    case 'ArrowUp':
-      if (rowIndex === 0) {
-        this.focusHeader(cellIndex);
-        return;
-      } else if (rowIndex > 0) {
-        nextRowIndex = rowIndex - 1;
-      } else {
-        return;
-      }
-      break;
-    case 'ArrowDown':
-      if (rowIndex === -1) {
-        nextRowIndex = 0;
-      } else {
-        nextRowIndex = (rowIndex + 1) % totalRows;
-      }
-      break;
-    case 'ArrowLeft':
-      if (rowIndex === -1) {
-        nextCellIndex = cellIndex > 0 ? cellIndex - 1 : totalCols - 1;
-      } else if (cellIndex > 0) {
-        nextCellIndex = cellIndex - 1;
-      } else {
-        nextCellIndex = totalCols - 1;
-        nextRowIndex = rowIndex > 0 ? rowIndex - 1 : -1; // Move to the header row if needed
-      }
-      break;
-    case 'ArrowRight':
-      if (rowIndex === -1) {
-        if (cellIndex < totalCols - 1) {
-          nextCellIndex = cellIndex + 1;
+    methods: {
+      handleSort(index) {
+        const clickedElement = event.target.tagName.toLowerCase();
+        if (clickedElement !== 'th' || this.headers[index].dataType === 'others') return;
+
+        if (this.sortKey === index) {
+          this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
         } else {
-          nextRowIndex = 0;
-          nextCellIndex = 0;
+          this.sortKey = index;
+          this.sortOrder = 'asc';
         }
-      } else if (cellIndex < totalCols - 1) {
-        nextCellIndex = cellIndex + 1;
-      } else {
-        nextCellIndex = 0;
-        nextRowIndex = (rowIndex + 1) % totalRows;
-      }
-      break;
-    case 'Enter':
-      this.handleSort(cellIndex);
-      break;
-    default:
-      return;
-  }
-
-  this.focusCell(nextRowIndex, nextCellIndex);
-  event.preventDefault();
-},
-      
-        
-    focusHeader(cellIndex) {
-      const nextHeader = this.$el.querySelector(`thead th:nth-child(${cellIndex + 1})`);
-      if (nextHeader) {
-        nextHeader.focus();
-      }
-    },
-    focusCell(rowIndex, cellIndex) {
-      let nextCell;
-      if (rowIndex === -1) {
-        nextCell = this.$el.querySelector(`thead th:nth-child(${cellIndex + 1})`);
-      } else {
-        nextCell = this.$el.querySelector(
-          `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${cellIndex + 1})`
-        );
-      }
-      if (nextCell) {
-        nextCell.focus();
-      }
+      },
+      handleKeydown(event, rowIndex, cellIndex) {
+        const key = event.key;
+        const totalRows = this.rows.length;
+        const totalCols = this.headers.length;
+
+        let nextRowIndex = rowIndex;
+        let nextCellIndex = cellIndex;
+
+        switch (key) {
+          case 'ArrowUp':
+            if (rowIndex === 0) {
+              this.focusHeader(cellIndex);
+              return;
+            } else if (rowIndex > 0) {
+              nextRowIndex = rowIndex - 1;
+            } else {
+              return;
+            }
+            break;
+          case 'ArrowDown':
+            if (rowIndex === -1) {
+              nextRowIndex = 0;
+            } else {
+              nextRowIndex = (rowIndex + 1) % totalRows;
+            }
+            break;
+          case 'ArrowLeft':
+            if (rowIndex === -1) {
+              nextCellIndex = cellIndex > 0 ? cellIndex - 1 : totalCols - 1;
+            } else if (cellIndex > 0) {
+              nextCellIndex = cellIndex - 1;
+            } else {
+              nextCellIndex = totalCols - 1;
+              nextRowIndex = rowIndex > 0 ? rowIndex - 1 : -1; // Move to the header row if needed
+            }
+            break;
+          case 'ArrowRight':
+            if (rowIndex === -1) {
+              if (cellIndex < totalCols - 1) {
+                nextCellIndex = cellIndex + 1;
+              } else {
+                nextRowIndex = 0;
+                nextCellIndex = 0;
+              }
+            } else if (cellIndex < totalCols - 1) {
+              nextCellIndex = cellIndex + 1;
+            } else {
+              nextCellIndex = 0;
+              nextRowIndex = (rowIndex + 1) % totalRows;
+            }
+            break;
+          case 'Enter':
+            this.handleSort(cellIndex);
+            break;
+          default:
+            return;
+        }
+
+        this.focusCell(nextRowIndex, nextCellIndex);
+        event.preventDefault();
+      },
+
+      focusHeader(cellIndex) {
+        const nextHeader = this.$el.querySelector(`thead th:nth-child(${cellIndex + 1})`);
+        if (nextHeader) {
+          nextHeader.focus();
+        }
+      },
+      focusCell(rowIndex, cellIndex) {
+        let nextCell;
+        if (rowIndex === -1) {
+          nextCell = this.$el.querySelector(`thead th:nth-child(${cellIndex + 1})`);
+        } else {
+          nextCell = this.$el.querySelector(
+            `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${cellIndex + 1})`
+          );
+        }
+        if (nextCell) {
+          nextCell.focus();
+        }
+      },
     },
-  },
-};
+  };
+
 </script>
 
 

From 058e4c8b82181df03ef30b0642ce58f2c88928af Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Mon, 3 Jun 2024 21:57:13 +0530
Subject: [PATCH 08/78] fixed linting errors

---
 docs/pages/playground.vue     | 48 +++++++++++++++++------------------
 lib/KTable/KTable.vue         |  7 -----
 lib/KTable/KTableGridItem.vue |  4 +++
 3 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index cce540ba7..554129b6d 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -22,7 +22,7 @@
       ]"
     /> -->
     <KTable :headers="tableHeaders" :rows="tableRows" caption="User Information Table" />
-    
+  
 
     <!-- Play around with your component here: -->
 
@@ -34,33 +34,33 @@
 <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/KTable.vue';
 
   export default {
     name: 'Playground',
     components: {
-    KTable,
-  },
-  data() {
-    return {
-      tableHeaders: [
-        { label: 'Name', dataType: 'string' },
-        { label: 'Age', dataType: 'numeric' },
-        { label: 'Birth Date', dataType: 'date' },
-        { label: 'City', dataType: 'string' },
-        { 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'],
-      ],
-    };
-  },
+      KTable,
+    },
+    data() {
+      return {
+        tableHeaders: [
+          { label: 'Name', dataType: 'string' },
+          { label: 'Age', dataType: 'numeric' },
+          { label: 'Birth Date', dataType: 'date' },
+          { label: 'City', dataType: 'string' },
+          { 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'],
+        ],
+      };
+    },
   };
 
 </script>
diff --git a/lib/KTable/KTable.vue b/lib/KTable/KTable.vue
index 5cb0bc3c0..8d855e3a0 100644
--- a/lib/KTable/KTable.vue
+++ b/lib/KTable/KTable.vue
@@ -54,13 +54,6 @@
       headers: {
         type: Array,
         required: true,
-        validator: function(value) {
-          return value.every(
-            header =>
-              ['label', 'dataType'].every(key => key in header) &&
-              ['string', 'numeric', 'date', 'others'].includes(header.dataType)
-          );
-        },
       },
       rows: {
         type: Array,
diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 08540978c..2f65a0597 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -1,11 +1,14 @@
 <template>
+
   <td :style="{ textAlign: align }" tabindex="0" @keydown="onKeydown">
     {{ content }}
   </td>
+
 </template>
  
 
 <script>
+
   export default {
     name: 'KTableGridItem',
     props: {
@@ -32,6 +35,7 @@
       },
     },
   };
+
 </script>
   
   

From b8db731b10a5f5aacb4cc2ebb27260dd413ce765 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Mon, 3 Jun 2024 22:28:02 +0530
Subject: [PATCH 09/78] fixed linting errors

---
 lib/KTable/KTable.vue         | 1 +
 lib/KTable/KTableGridItem.vue | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/lib/KTable/KTable.vue b/lib/KTable/KTable.vue
index 8d855e3a0..747f0776c 100644
--- a/lib/KTable/KTable.vue
+++ b/lib/KTable/KTable.vue
@@ -41,6 +41,7 @@
 
 </template>
 
+
 <script>
 
   import KTableGridItem from './KTableGridItem.vue';
diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 2f65a0597..4e7eec564 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -5,7 +5,7 @@
   </td>
 
 </template>
- 
+
 
 <script>
 
@@ -37,15 +37,15 @@
   };
 
 </script>
-  
-  
+
+
 <style scoped>
   td {
     padding: 15px;
     text-align: left;
     border-bottom: 1px solid #eee;
   }
-  
+
   td:focus {
     outline: 2px solid #007bff;
     outline-offset: -2px;

From bce887799e68b4429cacfa12bdb5a56ef4806c45 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Mon, 3 Jun 2024 22:32:01 +0530
Subject: [PATCH 10/78] fixing linting errors, again

---
 docs/pages/playground.vue | 2 +-
 lib/KTable/KTable.vue     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 554129b6d..0d9e6f643 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -22,7 +22,7 @@
       ]"
     /> -->
     <KTable :headers="tableHeaders" :rows="tableRows" caption="User Information Table" />
-  
+
 
     <!-- Play around with your component here: -->
 
diff --git a/lib/KTable/KTable.vue b/lib/KTable/KTable.vue
index 747f0776c..9eed2194e 100644
--- a/lib/KTable/KTable.vue
+++ b/lib/KTable/KTable.vue
@@ -63,6 +63,7 @@
       caption: {
         type: String,
         required: false,
+        default: null,
       },
     },
     data() {

From f464d27b8483d91d10b835a1eec3e96a194ca59d Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 9 Jun 2024 17:15:23 +0530
Subject: [PATCH 11/78] added scoped slots and sorting composable

---
 docs/pages/playground.vue     |  57 ++++++--
 lib/KTable/KTable.vue         | 234 --------------------------------
 lib/KTable/KTableGridItem.vue |  35 ++---
 lib/KTable/index.vue          | 247 ++++++++++++++++++++++++++++++++++
 lib/KTable/useSorting.js      |  55 ++++++++
 lib/KThemePlugin.js           |   2 +-
 lib/__tests__/KTable.spec.js  |   2 +-
 7 files changed, 368 insertions(+), 264 deletions(-)
 delete mode 100644 lib/KTable/KTable.vue
 create mode 100644 lib/KTable/index.vue
 create mode 100644 lib/KTable/useSorting.js

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 0d9e6f643..6dee4f386 100644
--- a/docs/pages/playground.vue
+++ b/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'],
         ],
       };
     },
diff --git a/lib/KTable/KTable.vue b/lib/KTable/KTable.vue
deleted file mode 100644
index 9eed2194e..000000000
--- a/lib/KTable/KTable.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-<template>
-
-  <div class="k-table">
-    <table>
-      <caption v-if="caption">
-        {{ caption }}
-      </caption>
-      <thead>
-        <tr>
-          <th
-            v-for="(header, index) in headers"
-            :key="index"
-            tabindex="0"
-            @click="handleSort(index)"
-            @keydown="handleKeydown($event, -1, index)"
-          >
-            {{ header.label }}
-            <span v-if="header.dataType !== 'others'" class="sort-icon">
-              <span v-if="sortKey === index && sortOrder === 'asc'">⬆️</span>
-              <span v-else-if="sortKey === index && sortOrder === 'desc'">⬇️</span>
-              <span v-else>⬍</span>
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row, rowIndex) in sortedRows" :key="rowIndex">
-          <KTableGridItem
-            v-for="(cell, cellIndex) in row"
-            :key="cellIndex"
-            :content="cell"
-            :align="headers[cellIndex].dataType === 'numeric' ? 'right' : 'left'"
-            :rowIndex="rowIndex"
-            :cellIndex="cellIndex"
-            @keydown="handleKeydown($event, rowIndex, cellIndex)"
-          />
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-</template>
-
-
-<script>
-
-  import KTableGridItem from './KTableGridItem.vue';
-
-  export default {
-    name: 'KTable',
-    components: {
-      KTableGridItem,
-    },
-    props: {
-      headers: {
-        type: Array,
-        required: true,
-      },
-      rows: {
-        type: Array,
-        required: true,
-      },
-      caption: {
-        type: String,
-        required: false,
-        default: null,
-      },
-    },
-    data() {
-      return {
-        sortKey: null,
-        sortOrder: 'asc',
-      };
-    },
-    computed: {
-      sortedRows() {
-        if (this.sortKey === null) return this.rows;
-
-        const sortedRows = [...this.rows];
-        const sortHeader = this.headers[this.sortKey];
-
-        if (sortHeader.dataType === 'numeric') {
-          sortedRows.sort((a, b) => a[this.sortKey] - b[this.sortKey]);
-        } else if (sortHeader.dataType === 'string' || sortHeader.dataType === 'date') {
-          sortedRows.sort((a, b) => a[this.sortKey].localeCompare(b[this.sortKey]));
-        }
-
-        if (this.sortOrder === 'desc') {
-          sortedRows.reverse();
-        }
-
-        return sortedRows;
-      },
-    },
-    methods: {
-      handleSort(index) {
-        const clickedElement = event.target.tagName.toLowerCase();
-        if (clickedElement !== 'th' || this.headers[index].dataType === 'others') return;
-
-        if (this.sortKey === index) {
-          this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
-        } else {
-          this.sortKey = index;
-          this.sortOrder = 'asc';
-        }
-      },
-      handleKeydown(event, rowIndex, cellIndex) {
-        const key = event.key;
-        const totalRows = this.rows.length;
-        const totalCols = this.headers.length;
-
-        let nextRowIndex = rowIndex;
-        let nextCellIndex = cellIndex;
-
-        switch (key) {
-          case 'ArrowUp':
-            if (rowIndex === 0) {
-              this.focusHeader(cellIndex);
-              return;
-            } else if (rowIndex > 0) {
-              nextRowIndex = rowIndex - 1;
-            } else {
-              return;
-            }
-            break;
-          case 'ArrowDown':
-            if (rowIndex === -1) {
-              nextRowIndex = 0;
-            } else {
-              nextRowIndex = (rowIndex + 1) % totalRows;
-            }
-            break;
-          case 'ArrowLeft':
-            if (rowIndex === -1) {
-              nextCellIndex = cellIndex > 0 ? cellIndex - 1 : totalCols - 1;
-            } else if (cellIndex > 0) {
-              nextCellIndex = cellIndex - 1;
-            } else {
-              nextCellIndex = totalCols - 1;
-              nextRowIndex = rowIndex > 0 ? rowIndex - 1 : -1; // Move to the header row if needed
-            }
-            break;
-          case 'ArrowRight':
-            if (rowIndex === -1) {
-              if (cellIndex < totalCols - 1) {
-                nextCellIndex = cellIndex + 1;
-              } else {
-                nextRowIndex = 0;
-                nextCellIndex = 0;
-              }
-            } else if (cellIndex < totalCols - 1) {
-              nextCellIndex = cellIndex + 1;
-            } else {
-              nextCellIndex = 0;
-              nextRowIndex = (rowIndex + 1) % totalRows;
-            }
-            break;
-          case 'Enter':
-            this.handleSort(cellIndex);
-            break;
-          default:
-            return;
-        }
-
-        this.focusCell(nextRowIndex, nextCellIndex);
-        event.preventDefault();
-      },
-
-      focusHeader(cellIndex) {
-        const nextHeader = this.$el.querySelector(`thead th:nth-child(${cellIndex + 1})`);
-        if (nextHeader) {
-          nextHeader.focus();
-        }
-      },
-      focusCell(rowIndex, cellIndex) {
-        let nextCell;
-        if (rowIndex === -1) {
-          nextCell = this.$el.querySelector(`thead th:nth-child(${cellIndex + 1})`);
-        } else {
-          nextCell = this.$el.querySelector(
-            `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${cellIndex + 1})`
-          );
-        }
-        if (nextCell) {
-          nextCell.focus();
-        }
-      },
-    },
-  };
-
-</script>
-
-
-<style scoped>
-.k-table {
-  margin: 20px;
-}
-
-.k-table table {
-  width: 100%;
-  border: 2px solid #ccc;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-.k-table th,
-.k-table td {
-  padding: 15px;
-  text-align: left;
-  position: relative;
-}
-
-.k-table th {
-  background-color: #f2f2f2;
-  border-bottom: 2px solid #ccc;
-  cursor: pointer;
-}
-
-.k-table td {
-  border-bottom: 1px solid #eee;
-}
-
-.k-table th:focus,
-.k-table td:focus {
-  outline: 2px solid #007bff;
-  outline-offset: -2px;
-}
-
-.sort-icon {
-  margin-left: 8px;
-}
-
-
-</style>
\ No newline at end of file
diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 4e7eec564..fe3264eb3 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/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>
\ No newline at end of file
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
new file mode 100644
index 000000000..ab8a8a22e
--- /dev/null
+++ b/lib/KTable/index.vue
@@ -0,0 +1,247 @@
+<template>
+
+  <div class="k-table">
+    <table>
+      <caption v-if="caption">
+        {{ caption }}
+      </caption>
+      <thead>
+        <tr>
+          <th
+            v-for="(header, index) in headers"
+            :key="index"
+            tabindex="0"
+            :aria-sort="sortable ? getAriaSort(index) : null"
+            :class="{ sortable: sortable && header.dataType !== DATA_TYPE_OTHERS }"
+            @click="sortable ? handleSort(index) : null"
+            @keydown="handleKeydown($event, -1, index)"
+          >
+            <slot name="header" :header="header" :index="index">
+              {{ header.label }}
+            </slot>
+            <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
+              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" /></span>
+              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" /></span>
+              <span v-else>⬍</span>
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, rowIndex) in finalRows" :key="rowIndex">
+          <KTableGridItem
+            v-for="(col, colIndex) in row"
+            :key="colIndex"
+            :content="col"
+            :dataType="headers[colIndex].dataType"
+            :rowIndex="rowIndex"
+            :colIndex="colIndex"
+            @keydown="handleKeydown($event, rowIndex, colIndex)"
+          >
+            <template #default="slotProps">
+              <slot name="cell" :content="slotProps.content" :rowIndex="rowIndex" :colIndex="colIndex">
+                {{ slotProps.content }}
+              </slot>
+            </template>
+          </KTableGridItem>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { ref, computed } from '@vue/composition-api';
+  import useSorting, { SORT_ORDER_ASC, SORT_ORDER_DESC, DATA_TYPE_OTHERS } from './useSorting';
+  import KTableGridItem from './KTableGridItem.vue';
+
+  export default {
+    name: 'KTable',
+    components: {
+      KTableGridItem,
+    },
+    setup(props) {
+      const headers = ref(props.headers);
+      const rows = ref(props.rows);
+      const useLocalSorting = ref(props.useLocalSorting);
+
+      const { sortKey, sortOrder, sortedRows, handleSort, getAriaSort } = useSorting(
+        headers,
+        rows,
+        useLocalSorting
+      );
+
+      const finalRows = computed(() => {
+        if (props.sortable) {
+          return useLocalSorting.value ? sortedRows.value : rows.value;
+        } else {
+          return rows.value;
+        }
+      });
+
+      return {
+        sortKey,
+        sortOrder,
+        finalRows,
+        handleSort,
+        getAriaSort,
+        SORT_ORDER_ASC,
+        SORT_ORDER_DESC,
+        DATA_TYPE_OTHERS,
+      };
+    },
+    props: {
+      headers: {
+        type: Array,
+        required: true,
+        validator: function(value) {
+          return value.every(
+            header =>
+              ['label', 'dataType'].every(key => key in header) &&
+              ['string', 'numeric', 'date', 'others'].includes(header.dataType)
+          );
+        },
+      },
+      rows: {
+        type: Array,
+        required: true,
+      },
+      caption: {
+        type: String,
+        required: true,
+        default: 'Information',
+      },
+      useLocalSorting: {
+        type: Boolean,
+        default: false,
+      },
+      sortable: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    methods: {
+      handleKeydown(event, rowIndex, colIndex) {
+        const key = event.key;
+        const totalRows = this.rows.length;
+        const totalCols = this.headers.length;
+
+        let nextRowIndex = rowIndex;
+        let nextColIndex = colIndex;
+
+        switch (key) {
+          case 'ArrowUp':
+            if (rowIndex === 0) {
+              this.focusHeader(colIndex);
+              return;
+            } else if (rowIndex > 0) {
+              nextRowIndex = rowIndex - 1;
+            } else {
+              return;
+            }
+            break;
+          case 'ArrowDown':
+            if (rowIndex === -1) {
+              nextRowIndex = 0;
+            } else {
+              nextRowIndex = (rowIndex + 1) % totalRows;
+            }
+            break;
+          case 'ArrowLeft':
+            if (rowIndex === -1) {
+              nextColIndex = colIndex > 0 ? colIndex - 1 : totalCols - 1;
+            } else if (colIndex > 0) {
+              nextColIndex = colIndex - 1;
+            } else {
+              nextColIndex = totalCols - 1;
+              nextRowIndex = rowIndex > 0 ? rowIndex - 1 : -1;
+            }
+            break;
+          case 'ArrowRight':
+            if (rowIndex === -1) {
+              if (colIndex < totalCols - 1) {
+                nextColIndex = colIndex + 1;
+              } else {
+                nextRowIndex = 0;
+                nextColIndex = 0;
+              }
+            } else if (colIndex < totalCols - 1) {
+              nextColIndex = colIndex + 1;
+            } else {
+              nextColIndex = 0;
+              nextRowIndex = (rowIndex + 1) % totalRows;
+            }
+            break;
+          case 'Enter':
+            if (rowIndex === -1 && this.sortable) {
+              this.handleSort(colIndex);
+            }
+            break;
+          default:
+            return;
+        }
+
+        this.focusCell(nextRowIndex, nextColIndex);
+        event.preventDefault();
+      },
+      focusHeader(colIndex) {
+        const nextHeader = this.$el.querySelector(`thead th:nth-child(${colIndex + 1})`);
+        if (nextHeader) {
+          nextHeader.focus();
+        }
+      },
+      focusCell(rowIndex, colIndex) {
+        let nextCell;
+        if (rowIndex === -1) {
+          nextCell = this.$el.querySelector(`thead th:nth-child(${colIndex + 1})`);
+        } else {
+          nextCell = this.$el.querySelector(
+            `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${colIndex + 1})`
+          );
+        }
+        if (nextCell) {
+          nextCell.focus();
+        }
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped>
+.k-table {
+  margin: 20px;
+}
+
+.k-table table {
+  width: 100%;
+  border: 2px solid #ccc;
+  border-collapse: collapse;
+}
+
+.k-table th,
+.k-table td {
+  padding: 10px;
+  border: none;
+}
+
+.k-table th {
+  cursor: pointer;
+}
+
+.k-table th.sortable {
+  cursor: pointer;
+}
+
+.k-table td:focus,
+.k-table th:focus {
+  outline: 2px solid #007bff;
+  outline-offset: -2px;
+  z-index: 1;
+  position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/lib/KTable/useSorting.js b/lib/KTable/useSorting.js
new file mode 100644
index 000000000..97cbab03d
--- /dev/null
+++ b/lib/KTable/useSorting.js
@@ -0,0 +1,55 @@
+import { ref, computed } from '@vue/composition-api';
+
+export const SORT_ORDER_ASC = 'asc';
+export const SORT_ORDER_DESC = 'desc';
+export const DATA_TYPE_STRING = 'string';
+export const DATA_TYPE_NUMERIC = 'numeric';
+export const DATA_TYPE_DATE = 'date';
+export const DATA_TYPE_OTHERS = 'others';
+
+export default function useSorting(headers, rows, useLocalSorting) {
+  const sortKey = ref(null);
+  const sortOrder = ref(null);
+
+  const sortedRows = computed(() => {
+    if (!useLocalSorting.value || sortKey.value === null) return rows.value;
+
+    return [...rows.value].sort((a, b) => {
+      const aValue = a[sortKey.value];
+      const bValue = b[sortKey.value];
+
+      if (sortOrder.value === SORT_ORDER_ASC) {
+        return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
+      } else {
+        return aValue < bValue ? 1 : aValue > bValue ? -1 : 0;
+      }
+    });
+  });
+
+  const handleSort = index => {
+    if (headers.value[index].dataType === DATA_TYPE_OTHERS) return;
+
+    if (sortKey.value === index) {
+      sortOrder.value = sortOrder.value === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC;
+    } else {
+      sortKey.value = index;
+      sortOrder.value = SORT_ORDER_ASC;
+    }
+  };
+
+  const getAriaSort = index => {
+    if (sortKey.value === index) {
+      return sortOrder.value === SORT_ORDER_ASC ? 'ascending' : 'descending';
+    } else {
+      return 'none';
+    }
+  };
+
+  return {
+    sortKey,
+    sortOrder,
+    sortedRows,
+    handleSort,
+    getAriaSort,
+  };
+}
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index d9115a87b..cc021fc54 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -26,7 +26,7 @@ import KRadioButton from './KRadioButton';
 import KRouterLink from './buttons-and-links/KRouterLink';
 import KSelect from './KSelect';
 import KSwitch from './KSwitch';
-import KTable from './KTable/KTable';
+import KTable from './KTable';
 import KTabs from './tabs/KTabs';
 import KTabsList from './tabs/KTabsList';
 import KTabsPanel from './tabs/KTabsPanel';
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 6e8b2ad4c..df85c5259 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import KTable from '../../lib/KTable/KTable.vue';
+import KTable from '../../lib/KTable';
 
 describe('KTable.vue', () => {
   it('should mount the component', () => {

From de583df11384fabd731888274965997a78bbf25f Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 9 Jun 2024 17:16:14 +0530
Subject: [PATCH 12/78] removed unnecessary validator

---
 lib/KTable/index.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index ab8a8a22e..aa92f84d5 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -97,13 +97,6 @@
       headers: {
         type: Array,
         required: true,
-        validator: function(value) {
-          return value.every(
-            header =>
-              ['label', 'dataType'].every(key => key in header) &&
-              ['string', 'numeric', 'date', 'others'].includes(header.dataType)
-          );
-        },
       },
       rows: {
         type: Array,

From 583999a91deeed6559fe23711efc184af2690a8c Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 13 Jun 2024 23:47:21 +0530
Subject: [PATCH 13/78] added changesort event handler and tests

---
 docs/pages/playground.vue                 | 83 ++++++++++++-----------
 lib/KTable/KTableGridItem.vue             |  4 +-
 lib/KTable/index.vue                      | 46 ++++++++++---
 lib/__tests__/KTable.spec.js              | 41 ++++++++++-
 lib/{KTable => composables}/useSorting.js |  0
 5 files changed, 121 insertions(+), 53 deletions(-)
 rename lib/{KTable => composables}/useSorting.js (100%)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 6dee4f386..8a14e7c15 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -1,37 +1,17 @@
 <template>
 
-  <!--
-    Playground: A private page for components development
-    *****************************************************
-    Place a component you're working on here and see it
-    live on http://localhost:4000/playground
-
-    Please do not commit your local updates of this file.
-  -->
-  <div style="padding: 24px">
-    <!-- 
-      Example: Uncomment lines bellow, change something
-      in lib/KBreadcrumbs.vue and see the updates reflected
-      on this page
-    -->
-    <!-- <KBreadcrumbs
-      :items="[
-        { text: 'Global Digital Library', link: { path: '#' } },
-        { text: 'English', link: { path: '#' } },
-        { text: 'Level 2 ', link: { path: '#' } },
-      ]"
-    /> -->
+  <div id="app">
     <h1>KTable Component Example</h1>
-    <h2>Sortable Table</h2>
+    <h2>Sortable Table with Local Sorting</h2>
     <KTable
       :headers="headers"
-      :rows="rows"
+      :rows="localRows"
       caption="Sortable Table"
       :useLocalSorting="true"
       sortable
     >
       <template #header="{ header, index }">
-        <span>{{ header.label }} (Custom)</span>
+        <span>{{ header.label }} (Local Sort)</span>
       </template>
       <template #cell="{ content, rowIndex, colIndex }">
         <span v-if="colIndex === 1">{{ content }} years old</span>
@@ -39,25 +19,23 @@
       </template>
     </KTable>
 
-    <h2>Non-Sortable Table</h2>
+    <h2>Sortable Table with Backend Sorting</h2>
     <KTable
       :headers="headers"
-      :rows="rows"
-      caption="Non-Sortable Table"
-      :sortable="false"
+      :rows="backendRows"
+      caption="Sortable Table"
+      :useLocalSorting="false"
+      sortable
+      @changeSort="changeSortHandler"
     >
       <template #header="{ header, index }">
-        <span>{{ header.label }} (Non-Sortable)</span>
+        <span>{{ header.label }} (Backend Sort)</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: -->
-
   </div>
 
 </template>
@@ -66,10 +44,10 @@
 <script>
 
   /*
-       Playground is a Vue component too,
-       so you can also use `data`, `methods`, etc.
-       as usual if helpful
-     */
+         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 {
@@ -86,7 +64,13 @@
           { label: 'Joined', dataType: 'date' },
           { label: 'Misc', dataType: 'others' },
         ],
-        rows: [
+        localRows: [
+          ['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'],
+        ],
+        backendRows: [
           ['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'],
@@ -94,6 +78,29 @@
         ],
       };
     },
+    methods: {
+      changeSortHandler(index, sortOrder) {
+        // Simulate fetching sorted data from backend
+        console.log('Fetching sorted data from backend for column:', index, 'order:', sortOrder);
+        // You can replace this with an actual API call
+        // For demo purposes, we just reverse the rows
+        this.backendRows = [...this.backendRows].reverse();
+      },
+    },
   };
 
 </script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  margin-top: 60px;
+}
+
+h1, h2 {
+  margin: 20px 0;
+}
+</style>
\ No newline at end of file
diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index fe3264eb3..90db97d25 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -11,6 +11,8 @@
 
 <script>
 
+  import { DATA_TYPE_NUMERIC } from '../composables/useSorting';
+
   export default {
     name: 'KTableGridItem',
     props: {
@@ -33,7 +35,7 @@
     },
     computed: {
       textAlign() {
-        return this.dataType === 'numeric' ? 'right' : 'left';
+        return this.dataType === DATA_TYPE_NUMERIC ? 'right' : 'left';
       },
     },
     methods: {
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index aa92f84d5..dcc5dd8ec 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -11,9 +11,9 @@
             v-for="(header, index) in headers"
             :key="index"
             tabindex="0"
-            :aria-sort="sortable ? getAriaSort(index) : null"
+            :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
             :class="{ sortable: sortable && header.dataType !== DATA_TYPE_OTHERS }"
-            @click="sortable ? handleSort(index) : null"
+            @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
             @keydown="handleKeydown($event, -1, index)"
           >
             <slot name="header" :header="header" :index="index">
@@ -54,8 +54,12 @@
 
 <script>
 
-  import { ref, computed } from '@vue/composition-api';
-  import useSorting, { SORT_ORDER_ASC, SORT_ORDER_DESC, DATA_TYPE_OTHERS } from './useSorting';
+  import { ref, computed, watch } from '@vue/composition-api';
+  import useSorting, {
+    SORT_ORDER_ASC,
+    SORT_ORDER_DESC,
+    DATA_TYPE_OTHERS,
+  } from '../composables/useSorting';
   import KTableGridItem from './KTableGridItem.vue';
 
   export default {
@@ -63,16 +67,18 @@
     components: {
       KTableGridItem,
     },
-    setup(props) {
+    setup(props, { emit }) {
       const headers = ref(props.headers);
       const rows = ref(props.rows);
       const useLocalSorting = ref(props.useLocalSorting);
 
-      const { sortKey, sortOrder, sortedRows, handleSort, getAriaSort } = useSorting(
-        headers,
-        rows,
-        useLocalSorting
-      );
+      const {
+        sortKey,
+        sortOrder,
+        sortedRows,
+        handleSort: localHandleSort,
+        getAriaSort,
+      } = useSorting(headers, rows, useLocalSorting);
 
       const finalRows = computed(() => {
         if (props.sortable) {
@@ -82,6 +88,25 @@
         }
       });
 
+      watch(
+        () => props.rows,
+        newRows => {
+          rows.value = newRows;
+        }
+      );
+
+      const handleSort = index => {
+        if (useLocalSorting.value) {
+          localHandleSort(index);
+        } else {
+          emit(
+            'changeSort',
+            index,
+            sortOrder.value === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC
+          );
+        }
+      };
+
       return {
         sortKey,
         sortOrder,
@@ -105,7 +130,6 @@
       caption: {
         type: String,
         required: true,
-        default: 'Information',
       },
       useLocalSorting: {
         type: Boolean,
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index df85c5259..388294c30 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -1,9 +1,13 @@
 import { shallowMount } from '@vue/test-utils';
-import KTable from '../../lib/KTable';
+import KTable from '../KTable';
 
 describe('KTable.vue', () => {
   it('should mount the component', () => {
-    const headers = ['Name', 'Age', 'City'];
+    const headers = [
+      { label: 'Name', dataType: 'string' },
+      { label: 'Age', dataType: 'numeric' },
+      { label: 'City', dataType: 'string' },
+    ];
     const rows = [
       ['Alice', 25, 'New York'],
       ['Bob', 30, 'Los Angeles'],
@@ -13,13 +17,19 @@ describe('KTable.vue', () => {
       propsData: {
         headers,
         rows,
+        useLocalSorting: true,
       },
     });
     const thElements = wrapper.findAll('th');
     expect(thElements.length).toBe(headers.length);
   });
+
   it('should render correct number of rows', () => {
-    const headers = ['Name', 'Age', 'City'];
+    const headers = [
+      { label: 'Name', dataType: 'string' },
+      { label: 'Age', dataType: 'numeric' },
+      { label: 'City', dataType: 'string' },
+    ];
     const rows = [
       ['Alice', 25, 'New York'],
       ['Bob', 30, 'Los Angeles'],
@@ -29,9 +39,34 @@ describe('KTable.vue', () => {
       propsData: {
         headers,
         rows,
+        useLocalSorting: true,
       },
     });
     const trElements = wrapper.findAll('tbody tr');
     expect(trElements.length).toBe(rows.length);
   });
+
+  it('should emit changeSort event on header click when useLocalSorting is false', async () => {
+    const headers = [
+      { label: 'Name', dataType: 'string', sortable: true },
+      { label: 'Age', dataType: 'numeric', sortable: true },
+      { label: 'City', dataType: 'string', sortable: true },
+    ];
+    const items = [
+      ['Alice', 25, 'New York'],
+      ['Bob', 30, 'Los Angeles'],
+      ['Charlie', 35, 'San Francisco'],
+    ];
+    const wrapper = shallowMount(KTable, {
+      propsData: {
+        headers,
+        items,
+        useLocalSorting: false,
+      },
+    });
+
+    const thElements = wrapper.findAll('th');
+    await thElements.at(0).trigger('click');
+    expect(wrapper.emitted().changeSort).toBeTruthy();
+  });
 });
diff --git a/lib/KTable/useSorting.js b/lib/composables/useSorting.js
similarity index 100%
rename from lib/KTable/useSorting.js
rename to lib/composables/useSorting.js

From 31f0f61fd5f9081e6f3ee30e46ff1ab8e076e347 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Mon, 17 Jun 2024 22:01:53 +0530
Subject: [PATCH 14/78] Added date sorting

---
 docs/pages/playground.vue     | 124 +++++++++++++++++++++++++++-------
 lib/composables/useSorting.js |  12 +---
 2 files changed, 101 insertions(+), 35 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 8a14e7c15..e545c7cf5 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -2,16 +2,18 @@
 
   <div id="app">
     <h1>KTable Component Example</h1>
-    <h2>Sortable Table with Local Sorting</h2>
+
+    <!-- Local Sorting Table Example -->
+    <h2>Local Sorting Table</h2>
     <KTable
       :headers="headers"
-      :rows="localRows"
-      caption="Sortable Table"
+      :rows="rows"
+      caption="Local Sorting Table"
       :useLocalSorting="true"
       sortable
     >
       <template #header="{ header, index }">
-        <span>{{ header.label }} (Local Sort)</span>
+        <span>{{ header.label }} (Local)</span>
       </template>
       <template #cell="{ content, rowIndex, colIndex }">
         <span v-if="colIndex === 1">{{ content }} years old</span>
@@ -19,35 +21,43 @@
       </template>
     </KTable>
 
-    <h2>Sortable Table with Backend Sorting</h2>
+    <!-- Backend Sorting Table Example -->
+    <h2>Backend Sorting Table</h2>
+    <div ref="loadingArea" role="status" aria-live="polite" class="sr-only">
+      {{ loadingMessage }}
+    </div>
     <KTable
       :headers="headers"
       :rows="backendRows"
-      caption="Sortable Table"
+      caption="Backend Sorting Table"
       :useLocalSorting="false"
       sortable
       @changeSort="changeSortHandler"
     >
       <template #header="{ header, index }">
-        <span>{{ header.label }} (Backend Sort)</span>
+        <span>{{ header.label }} (Backend)</span>
       </template>
       <template #cell="{ content, rowIndex, colIndex }">
         <span v-if="colIndex === 2">{{ content }} (City)</span>
         <span v-else>{{ content }}</span>
       </template>
     </KTable>
+
+    <div v-if="isLoading" class="loading-overlay">
+      Data is loading. Please wait...
+    </div>
   </div>
 
 </template>
 
-
 <script>
 
   /*
-         Playground is a Vue component too,
-         so you can also use `data`, `methods`, etc.
-         as usual if helpful
-       */
+           Playground is a Vue component too,
+           so you can also use `data`, `methods`, etc.
+           as usual if helpful
+         */
+  import { ref } from '@vue/composition-api';
   import KTable from '../../lib/KTable';
 
   export default {
@@ -55,6 +65,27 @@
     components: {
       KTable,
     },
+    setup() {
+      const loadingArea = ref(null);
+      const isLoading = ref(false);
+      const loadingMessage = ref('');
+
+      const updateLoadingMessage = message => {
+        loadingMessage.value = message;
+        if (loadingArea.value) {
+          loadingArea.value.setAttribute('aria-live', 'off'); // Temporarily disable live region
+          void loadingArea.value.offsetWidth; // Force reflow
+          loadingArea.value.setAttribute('aria-live', 'polite'); // Re-enable live region
+        }
+      };
+
+      return {
+        loadingArea,
+        isLoading,
+        loadingMessage,
+        updateLoadingMessage,
+      };
+    },
     data() {
       return {
         headers: [
@@ -64,27 +95,44 @@
           { label: 'Joined', dataType: 'date' },
           { label: 'Misc', dataType: 'others' },
         ],
-        localRows: [
-          ['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'],
+        rows: [
+          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
         ],
         backendRows: [
-          ['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'],
+          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
         ],
       };
     },
     methods: {
-      changeSortHandler(index, sortOrder) {
+      async changeSortHandler(index, sortOrder) {
+        this.isLoading = true;
+        this.updateLoadingMessage('Data is loading. Please wait...');
+
+        this.$nextTick(() => {
+          if (this.$refs.loadingArea) {
+            this.$refs.loadingArea.focus();
+          }
+        });
+
         // Simulate fetching sorted data from backend
         console.log('Fetching sorted data from backend for column:', index, 'order:', sortOrder);
-        // You can replace this with an actual API call
-        // For demo purposes, we just reverse the rows
-        this.backendRows = [...this.backendRows].reverse();
+
+        setTimeout(() => {
+          // For demo purposes, we just reverse the rows
+          this.backendRows = [...this.backendRows].reverse();
+          this.isLoading = false;
+          this.updateLoadingMessage('Data loaded successfully.');
+
+          setTimeout(() => {
+            this.updateLoadingMessage('');
+          }, 3000);
+        }, 2000); // Simulate a 2 second delay for fetching data
       },
     },
   };
@@ -103,4 +151,30 @@
 h1, h2 {
   margin: 20px 0;
 }
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5em;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  visibility: hidden;
+}
 </style>
\ No newline at end of file
diff --git a/lib/composables/useSorting.js b/lib/composables/useSorting.js
index 97cbab03d..8df637ee6 100644
--- a/lib/composables/useSorting.js
+++ b/lib/composables/useSorting.js
@@ -1,4 +1,5 @@
 import { ref, computed } from '@vue/composition-api';
+import _ from 'lodash';
 
 export const SORT_ORDER_ASC = 'asc';
 export const SORT_ORDER_DESC = 'desc';
@@ -14,16 +15,7 @@ export default function useSorting(headers, rows, useLocalSorting) {
   const sortedRows = computed(() => {
     if (!useLocalSorting.value || sortKey.value === null) return rows.value;
 
-    return [...rows.value].sort((a, b) => {
-      const aValue = a[sortKey.value];
-      const bValue = b[sortKey.value];
-
-      if (sortOrder.value === SORT_ORDER_ASC) {
-        return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
-      } else {
-        return aValue < bValue ? 1 : aValue > bValue ? -1 : 0;
-      }
-    });
+    return _.orderBy(rows.value, [row => row[sortKey.value]], [sortOrder.value]);
   });
 
   const handleSort = index => {

From 37beb3f3425287ba4a1e9f70b3bb7ecca48701bd Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Tue, 18 Jun 2024 19:29:10 +0530
Subject: [PATCH 15/78] Fixed screen reader loading states

---
 docs/pages/playground.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index e545c7cf5..9ae005221 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -50,6 +50,7 @@
 
 </template>
 
+
 <script>
 
   /*
@@ -131,14 +132,15 @@
 
           setTimeout(() => {
             this.updateLoadingMessage('');
-          }, 3000);
-        }, 2000); // Simulate a 2 second delay for fetching data
+          }, 5000);
+        }, 10000); // Simulate a 10 second delay for fetching data
       },
     },
   };
 
 </script>
 
+
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -175,6 +177,5 @@ h1, h2 {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
-  visibility: hidden;
 }
 </style>
\ No newline at end of file

From b8b752e98999d84b21855ae605bdd06c8be70363 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 21 Jun 2024 07:47:45 +0530
Subject: [PATCH 16/78] enhanced keyboard nav

---
 lib/KTable/index.vue | 39 +++++++++++++++++----------------------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index dcc5dd8ec..c049cd0de 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -151,25 +151,29 @@
 
         switch (key) {
           case 'ArrowUp':
-            if (rowIndex === 0) {
-              this.focusHeader(colIndex);
-              return;
-            } else if (rowIndex > 0) {
-              nextRowIndex = rowIndex - 1;
+            if (rowIndex === -1) {
+              nextRowIndex = totalRows - 1;
             } else {
-              return;
+              nextRowIndex = rowIndex - 1;
             }
             break;
           case 'ArrowDown':
             if (rowIndex === -1) {
               nextRowIndex = 0;
+            } else if (rowIndex === totalRows - 1) {
+              nextRowIndex = -1;
             } else {
               nextRowIndex = (rowIndex + 1) % totalRows;
             }
             break;
           case 'ArrowLeft':
             if (rowIndex === -1) {
-              nextColIndex = colIndex > 0 ? colIndex - 1 : totalCols - 1;
+              if (colIndex > 0) {
+                nextColIndex = colIndex - 1;
+              } else {
+                nextColIndex = totalCols - 1;
+                nextRowIndex = totalRows - 1;
+              }
             } else if (colIndex > 0) {
               nextColIndex = colIndex - 1;
             } else {
@@ -178,18 +182,16 @@
             }
             break;
           case 'ArrowRight':
-            if (rowIndex === -1) {
-              if (colIndex < totalCols - 1) {
-                nextColIndex = colIndex + 1;
+            if (colIndex === totalCols - 1) {
+              if (rowIndex === totalRows - 1) {
+                nextColIndex = 0;
+                nextRowIndex = -1;
               } else {
-                nextRowIndex = 0;
                 nextColIndex = 0;
+                nextRowIndex = rowIndex + 1;
               }
-            } else if (colIndex < totalCols - 1) {
-              nextColIndex = colIndex + 1;
             } else {
-              nextColIndex = 0;
-              nextRowIndex = (rowIndex + 1) % totalRows;
+              nextColIndex = colIndex + 1;
             }
             break;
           case 'Enter':
@@ -200,16 +202,9 @@
           default:
             return;
         }
-
         this.focusCell(nextRowIndex, nextColIndex);
         event.preventDefault();
       },
-      focusHeader(colIndex) {
-        const nextHeader = this.$el.querySelector(`thead th:nth-child(${colIndex + 1})`);
-        if (nextHeader) {
-          nextHeader.focus();
-        }
-      },
       focusCell(rowIndex, colIndex) {
         let nextCell;
         if (rowIndex === -1) {

From 091e7f2f76b374260b99e3f55380ab7884eae7b5 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 11 Jul 2024 19:52:34 +0530
Subject: [PATCH 17/78] fixed firefox accessibility issues

---
 lib/KTable/KTableGridItem.vue | 2 +-
 lib/KTable/index.vue          | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 90db97d25..5a90ef158 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <td :style="{ textAlign: textAlign }" tabindex="0" @keydown="onKeydown">
+  <td :style="{ textAlign: textAlign }" tabindex="0" role="gridcell" @keydown="onKeydown">
     <slot :content="content">
       {{ content }}
     </slot>
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index c049cd0de..5dffc68ac 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="k-table">
+  <div class="k-table" role="grid">
     <table>
       <caption v-if="caption">
         {{ caption }}
@@ -13,6 +13,8 @@
             tabindex="0"
             :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
             :class="{ sortable: sortable && header.dataType !== DATA_TYPE_OTHERS }"
+            role="columnheader"
+            aria-colindex="index + 1"
             @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
             @keydown="handleKeydown($event, -1, index)"
           >
@@ -36,6 +38,8 @@
             :dataType="headers[colIndex].dataType"
             :rowIndex="rowIndex"
             :colIndex="colIndex"
+            role="gridcell"
+            aria-colindex="colIndex + 1"
             @keydown="handleKeydown($event, rowIndex, colIndex)"
           >
             <template #default="slotProps">

From e871bf2a9728a764604e86ff2fed54ee5486ae41 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Tue, 16 Jul 2024 18:10:07 +0530
Subject: [PATCH 18/78] Added scroll and custom widths

---
 docs/pages/playground.vue     | 24 ++++++++++++++++--------
 lib/KTable/KTableGridItem.vue | 15 ++++++++++++++-
 lib/KTable/index.vue          | 26 ++++++++++++++++++++++----
 3 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 9ae005221..c2c5e0219 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -22,12 +22,12 @@
     </KTable>
 
     <!-- Backend Sorting Table Example -->
-    <h2>Backend Sorting Table</h2>
+    <h2>Backend Sorting Table(with Custom Widths)</h2>
     <div ref="loadingArea" role="status" aria-live="polite" class="sr-only">
       {{ loadingMessage }}
     </div>
     <KTable
-      :headers="headers"
+      :headers="headersWithCustomWidths"
       :rows="backendRows"
       caption="Backend Sorting Table"
       :useLocalSorting="false"
@@ -54,10 +54,10 @@
 <script>
 
   /*
-           Playground is a Vue component too,
-           so you can also use `data`, `methods`, etc.
-           as usual if helpful
-         */
+             Playground is a Vue component too,
+             so you can also use `data`, `methods`, etc.
+             as usual if helpful
+           */
   import { ref } from '@vue/composition-api';
   import KTable from '../../lib/KTable';
 
@@ -96,6 +96,13 @@
           { label: 'Joined', dataType: 'date' },
           { label: 'Misc', dataType: 'others' },
         ],
+        headersWithCustomWidths: [
+          { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%' },
+          { label: 'Age', dataType: 'numeric', minWidth: '100px', width: '33%' },
+          { label: 'City', dataType: 'string', minWidth: '200px', width: '25%' },
+          { label: 'Joined', dataType: 'date', minWidth: '150px', width: '20%' },
+          { label: 'Misc', dataType: 'others', minWidth: '100px', width: '20%' },
+        ],
         rows: [
           ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
           ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
@@ -132,8 +139,8 @@
 
           setTimeout(() => {
             this.updateLoadingMessage('');
-          }, 5000);
-        }, 10000); // Simulate a 10 second delay for fetching data
+          }, 3000);
+        }, 2000); // Simulate a 2 second delay for fetching data
       },
     },
   };
@@ -177,5 +184,6 @@ h1, h2 {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
+  visibility: hidden;
 }
 </style>
\ No newline at end of file
diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 5a90ef158..762a25884 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <td :style="{ textAlign: textAlign }" tabindex="0" role="gridcell" @keydown="onKeydown">
+  <td :style="{ textAlign: textAlign, minWidth: minWidth, width: width }" tabindex="0" role="gridcell" @keydown="onKeydown">
     <slot :content="content">
       {{ content }}
     </slot>
@@ -32,6 +32,14 @@
         type: Number,
         required: true,
       },
+      minWidth: {
+        type: String,
+        default: 'auto',
+      },
+      width: {
+        type: String,
+        default: 'auto',
+      },
     },
     computed: {
       textAlign() {
@@ -49,6 +57,11 @@
 
 
 <style scoped>
+td {
+  word-wrap: break-word; 
+  white-space: normal; 
+}
+
 td:focus {
   outline: 2px solid #007bff;
   outline-offset: -2px;
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 5dffc68ac..fac04759a 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -13,6 +13,7 @@
             tabindex="0"
             :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
             :class="{ sortable: sortable && header.dataType !== DATA_TYPE_OTHERS }"
+            :style="getHeaderStyle(header)"
             role="columnheader"
             aria-colindex="index + 1"
             @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
@@ -22,8 +23,8 @@
               {{ header.label }}
             </slot>
             <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
-              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" /></span>
-              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" /></span>
+              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC">⬆️</span>
+              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC">⬇️</span>
               <span v-else>⬍</span>
             </span>
           </th>
@@ -36,6 +37,8 @@
             :key="colIndex"
             :content="col"
             :dataType="headers[colIndex].dataType"
+            :minWidth="headers[colIndex].minWidth"
+            :width="headers[colIndex].width"
             :rowIndex="rowIndex"
             :colIndex="colIndex"
             role="gridcell"
@@ -100,6 +103,9 @@
       );
 
       const handleSort = index => {
+        if (headers.value[index].dataType === DATA_TYPE_OTHERS) {
+          return;
+        }
         if (useLocalSorting.value) {
           localHandleSort(index);
         } else {
@@ -111,6 +117,13 @@
         }
       };
 
+      const getHeaderStyle = header => {
+        const style = {};
+        if (header.minWidth) style.minWidth = header.minWidth;
+        if (header.width) style.width = header.width;
+        return style;
+      };
+
       return {
         sortKey,
         sortOrder,
@@ -120,6 +133,7 @@
         SORT_ORDER_ASC,
         SORT_ORDER_DESC,
         DATA_TYPE_OTHERS,
+        getHeaderStyle,
       };
     },
     props: {
@@ -206,6 +220,7 @@
           default:
             return;
         }
+
         this.focusCell(nextRowIndex, nextColIndex);
         event.preventDefault();
       },
@@ -231,18 +246,21 @@
 <style scoped>
 .k-table {
   margin: 20px;
+  overflow: auto; 
+  max-height: 400px; 
+  max-width: 100%; 
 }
 
 .k-table table {
   width: 100%;
-  border: 2px solid #ccc;
+  border: none;
   border-collapse: collapse;
 }
 
 .k-table th,
 .k-table td {
   padding: 10px;
-  border: none;
+  border: none; 
 }
 
 .k-table th {

From 48e969cb6a6d8abb324189f836586aea088a685c Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Tue, 16 Jul 2024 23:14:05 +0530
Subject: [PATCH 19/78] fixed conflicts

---
 docs/pages/playground.vue | 5 ++---
 lib/KTable/index.vue      | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index c2c5e0219..40e588f64 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -139,8 +139,8 @@
 
           setTimeout(() => {
             this.updateLoadingMessage('');
-          }, 3000);
-        }, 2000); // Simulate a 2 second delay for fetching data
+          }, 5000);
+        }, 10000); // Simulate a 10 second delay for fetching data
       },
     },
   };
@@ -184,6 +184,5 @@ h1, h2 {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
-  visibility: hidden;
 }
 </style>
\ No newline at end of file
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index fac04759a..6e708e6fd 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -23,8 +23,8 @@
               {{ header.label }}
             </slot>
             <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
-              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC">⬆️</span>
-              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC">⬇️</span>
+              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" /></span>
+              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" /></span>
               <span v-else>⬍</span>
             </span>
           </th>

From 96ede77e46fea223df6c760846c913b6487671c6 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 18 Jul 2024 14:26:09 +0530
Subject: [PATCH 20/78] Added sticky panes

---
 docs/pages/playground.vue | 13 +++++++
 lib/KTable/index.vue      | 73 +++++++++++++++++++++++++--------------
 2 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 40e588f64..b77b7c333 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -108,6 +108,18 @@
           ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
           ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
           ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
+          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
+          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
+          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
         ],
         backendRows: [
           ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
@@ -172,6 +184,7 @@ h1, h2 {
   align-items: center;
   justify-content: center;
   font-size: 1.5em;
+  z-index: 5;
 }
 
 .sr-only {
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 6e708e6fd..65b9ddb37 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -1,7 +1,7 @@
 <template>
 
-  <div class="k-table" role="grid">
-    <table>
+  <div class="k-table-wrapper">
+    <table class="k-table" role="grid">
       <caption v-if="caption">
         {{ caption }}
       </caption>
@@ -12,7 +12,11 @@
             :key="index"
             tabindex="0"
             :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
-            :class="{ sortable: sortable && header.dataType !== DATA_TYPE_OTHERS }"
+            :class="{
+              sortable: sortable && header.dataType !== DATA_TYPE_OTHERS,
+              'sticky-header': true,
+              'sticky-column': index === 0
+            }"
             :style="getHeaderStyle(header)"
             role="columnheader"
             aria-colindex="index + 1"
@@ -41,6 +45,10 @@
             :width="headers[colIndex].width"
             :rowIndex="rowIndex"
             :colIndex="colIndex"
+            :class="{
+              'sticky-column': colIndex === 0,
+
+            }"
             role="gridcell"
             aria-colindex="colIndex + 1"
             @keydown="handleKeydown($event, rowIndex, colIndex)"
@@ -140,6 +148,13 @@
       headers: {
         type: Array,
         required: true,
+        validator: function(value) {
+          return value.every(
+            header =>
+              ['label', 'dataType'].every(key => key in header) &&
+              ['string', 'numeric', 'date', 'others'].includes(header.dataType)
+          );
+        },
       },
       rows: {
         type: Array,
@@ -235,6 +250,7 @@
         }
         if (nextCell) {
           nextCell.focus();
+          nextCell.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
         }
       },
     },
@@ -244,38 +260,45 @@
 
 
 <style scoped>
-.k-table {
-  margin: 20px;
-  overflow: auto; 
-  max-height: 400px; 
-  max-width: 100%; 
+.k-table-wrapper {
+  overflow: auto;
+  position: relative;
+  height:300px;
 }
 
-.k-table table {
-  width: 100%;
-  border: none;
+.k-table {
   border-collapse: collapse;
+  width: 100%;
+  
 }
 
-.k-table th,
-.k-table td {
-  padding: 10px;
-  border: none; 
+th,
+td {
+  padding: 8px;
+  position: relative;
+  z-index: auto;
 }
 
-.k-table th {
-  cursor: pointer;
+.sticky-header {
+  position: sticky;
+  top: 0;
+  background-color: #f8f9fa;
+  z-index: 3; 
 }
 
-.k-table th.sortable {
-  cursor: pointer;
+.sticky-column {
+  position: sticky;
+  left: 0;
+  background-color: #f8f9fa;
+  z-index: 2; 
 }
 
-.k-table td:focus,
-.k-table th:focus {
-  outline: 2px solid #007bff;
-  outline-offset: -2px;
-  z-index: 1;
-  position: relative;
+th.sticky-header.sticky-column,
+td.sticky-header.sticky-column {
+  z-index: 4; 
 }
+.sortable {
+  cursor: pointer;
+}
+
 </style>
\ No newline at end of file

From d5b2b5ca46537d6006dfcbf77dedd35daf729e2c Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Mon, 22 Jul 2024 13:42:00 +0530
Subject: [PATCH 21/78] added hover effect

---
 lib/KTable/index.vue | 54 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 65b9ddb37..b2b211936 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -19,7 +19,7 @@
             }"
             :style="getHeaderStyle(header)"
             role="columnheader"
-            aria-colindex="index + 1"
+            :aria-colindex="index + 1"
             @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
             @keydown="handleKeydown($event, -1, index)"
           >
@@ -35,7 +35,13 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(row, rowIndex) in finalRows" :key="rowIndex">
+        <tr
+          v-for="(row, rowIndex) in finalRows"
+          :key="rowIndex"
+          :class="{ 'highlight-row': hoveredRowIndex === rowIndex || focusedRowIndex === rowIndex }"
+          @mouseover="handleRowMouseOver(rowIndex)"
+          @mouseleave="handleRowMouseLeave"
+        >
           <KTableGridItem
             v-for="(col, colIndex) in row"
             :key="colIndex"
@@ -47,7 +53,7 @@
             :colIndex="colIndex"
             :class="{
               'sticky-column': colIndex === 0,
-
+              'highlight-cell': (hoveredRowIndex === rowIndex || focusedRowIndex === rowIndex) && colIndex === 0
             }"
             role="gridcell"
             aria-colindex="colIndex + 1"
@@ -86,6 +92,8 @@
       const headers = ref(props.headers);
       const rows = ref(props.rows);
       const useLocalSorting = ref(props.useLocalSorting);
+      const hoveredRowIndex = ref(null);
+      const focusedRowIndex = ref(null);
 
       const {
         sortKey,
@@ -142,6 +150,8 @@
         SORT_ORDER_DESC,
         DATA_TYPE_OTHERS,
         getHeaderStyle,
+        hoveredRowIndex,
+        focusedRowIndex,
       };
     },
     props: {
@@ -237,6 +247,7 @@
         }
 
         this.focusCell(nextRowIndex, nextColIndex);
+        this.focusedRowIndex = nextRowIndex === -1 ? null : nextRowIndex;
         event.preventDefault();
       },
       focusCell(rowIndex, colIndex) {
@@ -251,8 +262,23 @@
         if (nextCell) {
           nextCell.focus();
           nextCell.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+          if (rowIndex !== -1) {
+            const tableWrapper = this.$el.closest('.k-table-wrapper');
+            const headerHeight = this.$el.querySelector('thead').offsetHeight;
+            const wrapperRect = tableWrapper.getBoundingClientRect();
+            const cellRect = nextCell.getBoundingClientRect();
+            if (cellRect.top < wrapperRect.top + headerHeight) {
+              tableWrapper.scrollTop -= wrapperRect.top + headerHeight - cellRect.top;
+            }
+          }
         }
       },
+      handleRowMouseOver(rowIndex) {
+        this.hoveredRowIndex = rowIndex;
+      },
+      handleRowMouseLeave() {
+        this.hoveredRowIndex = null;
+      },
     },
   };
 
@@ -269,7 +295,6 @@
 .k-table {
   border-collapse: collapse;
   width: 100%;
-  
 }
 
 th,
@@ -283,22 +308,37 @@ td {
   position: sticky;
   top: 0;
   background-color: #f8f9fa;
-  z-index: 3; 
+  z-index: 3;
 }
 
 .sticky-column {
   position: sticky;
   left: 0;
   background-color: #f8f9fa;
-  z-index: 2; 
+  z-index: 2;
 }
 
 th.sticky-header.sticky-column,
 td.sticky-header.sticky-column {
-  z-index: 4; 
+  z-index: 4;
 }
+
 .sortable {
   cursor: pointer;
 }
 
+.highlight-row {
+  background-color: #f0f0f0;
+}
+
+.highlight-cell {
+  background-color: #f0f0f0;
+}
+
+th:focus {
+  outline: 2px solid #007bff;
+  outline-offset: -2px;
+  z-index: 1;
+  position: relative;
+}
 </style>
\ No newline at end of file

From 83b29fba14ecec4d664641236ac1c1584355f6ec Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 26 Jul 2024 10:27:59 +0530
Subject: [PATCH 22/78] Added sortColumn icon

---
 custom-icons/sortColumn.svg                   |  4 ++++
 docs/rstIconReplacements.txt                  |  1 +
 lib/KIcon/iconDefinitions.js                  |  4 ++++
 lib/KIcon/precompiled-icons/le/sortColumn.vue | 12 ++++++++++++
 lib/KTable/index.vue                          |  2 +-
 5 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 custom-icons/sortColumn.svg
 create mode 100644 lib/KIcon/precompiled-icons/le/sortColumn.vue

diff --git a/custom-icons/sortColumn.svg b/custom-icons/sortColumn.svg
new file mode 100644
index 000000000..e4cd4058c
--- /dev/null
+++ b/custom-icons/sortColumn.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1777 4.15381L17.3548 9.67715L7.00051 9.67715L12.1777 4.15381Z" fill="black"/>
+<path d="M12.1771 20.6538L7 15.1305H17.3543L12.1771 20.6538Z" fill="black"/>
+</svg>
diff --git a/docs/rstIconReplacements.txt b/docs/rstIconReplacements.txt
index c42c9d275..0be6378cf 100644
--- a/docs/rstIconReplacements.txt
+++ b/docs/rstIconReplacements.txt
@@ -161,6 +161,7 @@
 .. |skillsResource| replace:: :raw-html:`<span class="design-system-icon"><svg role="presentation" focusable="false" width="24" height="24" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 28.75V35h6.25l18.433-18.45-6.25-6.25L5 28.75zm32.683 1.85L30.6 37.684l-8.667-8.667 2.95-2.95 1.667 1.667 4.117-4.134 2.366 2.367-2.433 2.367L32.367 30l2.366-2.333 2.95 2.933zM11.017 18.05l-8.7-8.65L9.4 2.317l2.933 2.95L8.217 9.4 10 11.167l4.1-4.133L16.467 9.4 14.1 11.75l1.667 1.667-4.75 4.633zm23.5-6.383c.65-.65.65-1.667 0-2.35l-3.9-3.833c-.617-.65-1.7-.65-2.35 0L25.2 8.534l6.25 6.25 3.067-3.117z"/></svg></span>`
 .. |slideshow| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"/></svg></span>`
 .. |socialSciencesResource| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"/></svg></span>`
+.. |sortColumn| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" width="24" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.178 4.154l5.177 5.523H7l5.177-5.523zM12.177 20.654L7 15.13h10.354l-5.177 5.524z" fill="#000"/></svg></span>`
 .. |sort| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M18 21l-4-4h3V7h-3l4-4 4 4h-3v10h3M2 19v-2h10v2M2 13v-2h7v2M2 7V5h4v2H2z"/></svg></span>`
 .. |starBorder| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg></span>`
 .. |star| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>`
diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js
index 2d6fe6505..943090196 100644
--- a/lib/KIcon/iconDefinitions.js
+++ b/lib/KIcon/iconDefinitions.js
@@ -69,6 +69,10 @@ const KolibriIcons = {
     defaultColor: themePalette().grey.v_400,
   },
   sort: { icon: require('./precompiled-icons/le/sort.vue').default },
+  sortColumn: {
+    icon: require('./precompiled-icons/le/sortColumn.vue').default,
+    defaultColor: themePalette().grey.v_400,
+  },
 
   // Features and links
   learn: { icon: require('./precompiled-icons/material-icons/school/baseline.vue').default },
diff --git a/lib/KIcon/precompiled-icons/le/sortColumn.vue b/lib/KIcon/precompiled-icons/le/sortColumn.vue
new file mode 100644
index 000000000..342a023fe
--- /dev/null
+++ b/lib/KIcon/precompiled-icons/le/sortColumn.vue
@@ -0,0 +1,12 @@
+<template>
+
+  <svg viewBox="0 0 24 24" role="presentation" focusable="false" width="24" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.178 4.154l5.177 5.523H7l5.177-5.523zM12.177 20.654L7 15.13h10.354l-5.177 5.524z" fill="#000"/></svg>
+
+</template>
+
+
+<script>
+
+  export default {"name":"icon-804c4e229f501f72a23ba2f5a5cc42d5"}
+
+</script>
\ No newline at end of file
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index b2b211936..1afdd7e3f 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -29,7 +29,7 @@
             <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
               <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" /></span>
               <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" /></span>
-              <span v-else>⬍</span>
+              <span v-else><KIcon icon="sortColumn" /></span>
             </span>
           </th>
         </tr>

From f118cd97de2b896448c423322ee1f88af78a4861 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sat, 27 Jul 2024 11:52:59 +0530
Subject: [PATCH 23/78] added header highlight feature

---
 lib/KIcon/iconDefinitions.js |  1 -
 lib/KTable/index.vue         | 36 ++++++++++++++++++++++++++++--------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js
index 943090196..4eba6ffdd 100644
--- a/lib/KIcon/iconDefinitions.js
+++ b/lib/KIcon/iconDefinitions.js
@@ -71,7 +71,6 @@ const KolibriIcons = {
   sort: { icon: require('./precompiled-icons/le/sort.vue').default },
   sortColumn: {
     icon: require('./precompiled-icons/le/sortColumn.vue').default,
-    defaultColor: themePalette().grey.v_400,
   },
 
   // Features and links
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 1afdd7e3f..ca90efa8c 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -15,7 +15,8 @@
             :class="{
               sortable: sortable && header.dataType !== DATA_TYPE_OTHERS,
               'sticky-header': true,
-              'sticky-column': index === 0
+              'sticky-column': index === 0,
+              'highlight-header': focusedColIndex === index
             }"
             :style="getHeaderStyle(header)"
             role="columnheader"
@@ -56,7 +57,7 @@
               'highlight-cell': (hoveredRowIndex === rowIndex || focusedRowIndex === rowIndex) && colIndex === 0
             }"
             role="gridcell"
-            aria-colindex="colIndex + 1"
+            :aria-colindex="colIndex + 1"
             @keydown="handleKeydown($event, rowIndex, colIndex)"
           >
             <template #default="slotProps">
@@ -92,9 +93,6 @@
       const headers = ref(props.headers);
       const rows = ref(props.rows);
       const useLocalSorting = ref(props.useLocalSorting);
-      const hoveredRowIndex = ref(null);
-      const focusedRowIndex = ref(null);
-
       const {
         sortKey,
         sortOrder,
@@ -150,8 +148,6 @@
         SORT_ORDER_DESC,
         DATA_TYPE_OTHERS,
         getHeaderStyle,
-        hoveredRowIndex,
-        focusedRowIndex,
       };
     },
     props: {
@@ -183,6 +179,13 @@
         default: true,
       },
     },
+    data() {
+      return {
+        focusedRowIndex: null,
+        focusedColIndex: null,
+        hoveredRowIndex: null,
+      };
+    },
     methods: {
       handleKeydown(event, rowIndex, colIndex) {
         const key = event.key;
@@ -248,6 +251,10 @@
 
         this.focusCell(nextRowIndex, nextColIndex);
         this.focusedRowIndex = nextRowIndex === -1 ? null : nextRowIndex;
+        this.focusedColIndex = nextColIndex;
+
+        this.highlightHeader(nextColIndex);
+
         event.preventDefault();
       },
       focusCell(rowIndex, colIndex) {
@@ -259,6 +266,9 @@
             `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${colIndex + 1})`
           );
         }
+        /* Ensured the focused cell is smoothly scrolled into view.
+           Adjusted the scroll position to account for the height of the sticky header
+           to prevent the focused cell from being overlapped by the header. */
         if (nextCell) {
           nextCell.focus();
           nextCell.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
@@ -279,6 +289,12 @@
       handleRowMouseLeave() {
         this.hoveredRowIndex = null;
       },
+      highlightHeader(colIndex) {
+        const headers = this.$el.querySelectorAll('thead th');
+        headers.forEach((header, index) => {
+          header.classList.toggle('highlight-header', index === colIndex);
+        });
+      },
     },
   };
 
@@ -289,7 +305,7 @@
 .k-table-wrapper {
   overflow: auto;
   position: relative;
-  height:300px;
+  height: 300px;
 }
 
 .k-table {
@@ -335,6 +351,10 @@ td.sticky-header.sticky-column {
   background-color: #f0f0f0;
 }
 
+.highlight-header {
+  background-color: #f0f0f0; 
+}
+
 th:focus {
   outline: 2px solid #007bff;
   outline-offset: -2px;

From fb8bf2b2c5da1f31dd98fecad1a9de6472fefe58 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 1 Aug 2024 23:08:40 +0530
Subject: [PATCH 24/78] fixed focus state

---
 lib/KTable/KTableGridItem.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 762a25884..ee95dbfb7 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -48,7 +48,18 @@
     },
     methods: {
       onKeydown(event) {
-        this.$emit('keydown', event, this.rowIndex, this.colIndex);
+        // Check if the focused element is a button or actionable item
+        const focusedElement = event.target;
+        if (
+          event.key === 'Enter' &&
+          (focusedElement.tagName === 'BUTTON' ||
+            focusedElement.tagName === 'A' ||
+            focusedElement.hasAttribute('role'))
+        ) {
+          focusedElement.click();
+        } else {
+          this.$emit('keydown', event, this.rowIndex, this.colIndex);
+        }
       },
     },
   };

From 05576d1de7ee839fca800ac2702d00b9f058c174 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 2 Aug 2024 16:38:04 +0530
Subject: [PATCH 25/78] partial theming

---
 lib/KTable/index.vue | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index ca90efa8c..1c287896a 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -16,9 +16,10 @@
               sortable: sortable && header.dataType !== DATA_TYPE_OTHERS,
               'sticky-header': true,
               'sticky-column': index === 0,
-              'highlight-header': focusedColIndex === index
             }"
-            :style="getHeaderStyle(header)"
+            :style="[getHeaderStyle(header),
+                     index === 0 ? { backgroundColor: $themePalette.white } : {} ,
+                     focusedColIndex === index ? { backgroundColor: $themePalette.grey.v_50 } : {}]"
             role="columnheader"
             :aria-colindex="index + 1"
             @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
@@ -39,7 +40,7 @@
         <tr
           v-for="(row, rowIndex) in finalRows"
           :key="rowIndex"
-          :class="{ 'highlight-row': hoveredRowIndex === rowIndex || focusedRowIndex === rowIndex }"
+          :style="hoveredRowIndex === rowIndex || focusedRowIndex === rowIndex ? { backgroundColor: $themePalette.grey.v_50 } : {}"
           @mouseover="handleRowMouseOver(rowIndex)"
           @mouseleave="handleRowMouseLeave"
         >
@@ -54,8 +55,9 @@
             :colIndex="colIndex"
             :class="{
               'sticky-column': colIndex === 0,
-              'highlight-cell': (hoveredRowIndex === rowIndex || focusedRowIndex === rowIndex) && colIndex === 0
             }"
+            :style="[colIndex === 0 ? { backgroundColor: $themePalette.white } : {},(hoveredRowIndex === rowIndex || focusedRowIndex === rowIndex) && colIndex === 0 ? { backgroundColor: $themePalette.grey.v_50 } : {}
+            ]"
             role="gridcell"
             :aria-colindex="colIndex + 1"
             @keydown="handleKeydown($event, rowIndex, colIndex)"
@@ -323,14 +325,13 @@ td {
 .sticky-header {
   position: sticky;
   top: 0;
-  background-color: #f8f9fa;
+  background-color: #ffffff;
   z-index: 3;
 }
 
 .sticky-column {
   position: sticky;
   left: 0;
-  background-color: #f8f9fa;
   z-index: 2;
 }
 
@@ -343,14 +344,6 @@ td.sticky-header.sticky-column {
   cursor: pointer;
 }
 
-.highlight-row {
-  background-color: #f0f0f0;
-}
-
-.highlight-cell {
-  background-color: #f0f0f0;
-}
-
 .highlight-header {
   background-color: #f0f0f0; 
 }

From 2b0ca06dad89d1ac58aedd9ca6db993266e15868 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 2 Aug 2024 17:48:17 +0530
Subject: [PATCH 26/78] highlight-header theming and updated examples for
 clarity

---
 docs/pages/playground.vue | 33 +++++++++++++++++----------------
 lib/KTable/index.vue      | 10 ++++------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index b77b7c333..b9392ae53 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -54,10 +54,10 @@
 <script>
 
   /*
-             Playground is a Vue component too,
-             so you can also use `data`, `methods`, etc.
-             as usual if helpful
-           */
+               Playground is a Vue component too,
+               so you can also use `data`, `methods`, etc.
+               as usual if helpful
+             */
   import { ref } from '@vue/composition-api';
   import KTable from '../../lib/KTable';
 
@@ -108,18 +108,19 @@
           ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
           ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
           ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
-          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
-          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
-          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
-          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
-          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
-          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
-          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
-          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
-          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
-          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
-          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
-          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
+          ['Michael Brown', 45, 'Phoenix', '2019-11-05T00:00:00Z', 'N/A'],
+          ['Emily Davis', 27, 'Philadelphia', '2021-08-14T00:00:00Z', 'N/A'],
+          ['Christopher Wilson', 33, 'San Antonio', '2022-04-22T00:00:00Z', 'N/A'],
+          ['Jessica Martinez', 29, 'San Diego', '2020-09-30T00:00:00Z', 'N/A'],
+          ['Daniel Anderson', 40, 'Dallas', '2018-06-25T00:00:00Z', 'N/A'],
+          ['Laura Thomas', 31, 'San Jose', '2021-03-18T00:00:00Z', 'N/A'],
+          ['Matthew Jackson', 26, 'Austin', '2022-07-12T00:00:00Z', 'N/A'],
+          ['Sarah White', 35, 'Fort Worth', '2020-02-27T00:00:00Z', 'N/A'],
+          ['David Harris', 38, 'Columbus', '2019-10-19T00:00:00Z', 'N/A'],
+          ['Sophia Clark', 24, 'Charlotte', '2023-01-05T00:00:00Z', 'N/A'],
+          ['James Lewis', 32, 'San Francisco', '2021-05-23T00:00:00Z', 'N/A'],
+          ['Olivia Robinson', 28, 'Indianapolis', '2022-11-11T00:00:00Z', 'N/A'],
+          ['Benjamin Walker', 37, 'Seattle', '2020-12-03T00:00:00Z', 'N/A'],
         ],
         backendRows: [
           ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 1c287896a..192328deb 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -291,10 +291,13 @@
       handleRowMouseLeave() {
         this.hoveredRowIndex = null;
       },
+      setHighlightHeader(header, highlight) {
+        header.style.backgroundColor = highlight ? this.$themePalette.grey.v_50 : '';
+      },
       highlightHeader(colIndex) {
         const headers = this.$el.querySelectorAll('thead th');
         headers.forEach((header, index) => {
-          header.classList.toggle('highlight-header', index === colIndex);
+          this.setHighlightHeader(header, index === colIndex);
         });
       },
     },
@@ -343,11 +346,6 @@ td.sticky-header.sticky-column {
 .sortable {
   cursor: pointer;
 }
-
-.highlight-header {
-  background-color: #f0f0f0; 
-}
-
 th:focus {
   outline: 2px solid #007bff;
   outline-offset: -2px;

From 778c5121f873d5f65b00bb60b473d858235fe568 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 4 Aug 2024 00:16:26 +0530
Subject: [PATCH 27/78] fixed outline and enhanced tab key navigation

---
 lib/KTable/KTableGridItem.vue    | 23 +++++++++++++-------
 lib/KTable/index.vue             | 36 +++++++++++++++++++++++++++++---
 lib/styles/trackInputModality.js |  4 ++++
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index ee95dbfb7..4c2399d17 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -1,6 +1,12 @@
 <template>
 
-  <td :style="{ textAlign: textAlign, minWidth: minWidth, width: width }" tabindex="0" role="gridcell" @keydown="onKeydown">
+  <td
+    :class="$computedClass(coreOutlineFocus)"
+    :style="{ textAlign: textAlign, minWidth: minWidth, width: width }"
+    tabindex="0"
+    role="gridcell"
+    @keydown="onKeydown"
+  >
     <slot :content="content">
       {{ content }}
     </slot>
@@ -42,6 +48,14 @@
       },
     },
     computed: {
+      coreOutlineFocus() {
+        return {
+          ':focus': {
+            ...this.$coreOutline,
+            outlineOffset: '-2px',
+          },
+        };
+      },
       textAlign() {
         return this.dataType === DATA_TYPE_NUMERIC ? 'right' : 'left';
       },
@@ -73,10 +87,5 @@ td {
   white-space: normal; 
 }
 
-td:focus {
-  outline: 2px solid #007bff;
-  outline-offset: -2px;
-  z-index: 1;
-  position: relative;
-}
+
 </style>
\ No newline at end of file
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 192328deb..ebe54539f 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -13,6 +13,7 @@
             tabindex="0"
             :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
             :class="{
+              [$computedClass(coreOutlineFocus)]: true,
               sortable: sortable && header.dataType !== DATA_TYPE_OTHERS,
               'sticky-header': true,
               'sticky-column': index === 0,
@@ -63,7 +64,7 @@
             @keydown="handleKeydown($event, rowIndex, colIndex)"
           >
             <template #default="slotProps">
-              <slot name="cell" :content="slotProps.content" :rowIndex="rowIndex" :colIndex="colIndex">
+              <slot name="cell" :content="slotProps.content" :rowIndex="rowIndex" :colIndex="colIndex" :row="row">
                 {{ slotProps.content }}
               </slot>
             </template>
@@ -188,6 +189,16 @@
         hoveredRowIndex: null,
       };
     },
+    computed: {
+      coreOutlineFocus() {
+        return {
+          ':focus': {
+            ...this.$coreOutline,
+            outlineOffset: '-2px',
+          },
+        };
+      },
+    },
     methods: {
       handleKeydown(event, rowIndex, colIndex) {
         const key = event.key;
@@ -247,6 +258,15 @@
               this.handleSort(colIndex);
             }
             break;
+          case 'Tab': //To handle focused row and highlight header state for tab key as well
+            if (event.shiftKey) {
+              nextColIndex = colIndex > 0 ? colIndex - 1 : totalCols - 1;
+              nextRowIndex = colIndex > 0 ? rowIndex : rowIndex - 1;
+            } else {
+              nextColIndex = (colIndex + 1) % totalCols;
+              nextRowIndex = colIndex === totalCols - 1 ? rowIndex + 1 : rowIndex;
+            }
+            break;
           default:
             return;
         }
@@ -274,14 +294,26 @@
         if (nextCell) {
           nextCell.focus();
           nextCell.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+
+          // Adjust scroll position to account for sticky header height
           if (rowIndex !== -1) {
             const tableWrapper = this.$el.closest('.k-table-wrapper');
             const headerHeight = this.$el.querySelector('thead').offsetHeight;
             const wrapperRect = tableWrapper.getBoundingClientRect();
             const cellRect = nextCell.getBoundingClientRect();
+
+            // Adjust for vertical scrolling if the cell is hidden behind the sticky header
             if (cellRect.top < wrapperRect.top + headerHeight) {
               tableWrapper.scrollTop -= wrapperRect.top + headerHeight - cellRect.top;
             }
+
+            // Adjust for horizontal scrolling if the cell is hidden behind the sticky column
+            const stickyColumnWidth = this.$el.querySelector('.sticky-column').offsetWidth;
+            if (cellRect.left < wrapperRect.left + stickyColumnWidth) {
+              tableWrapper.scrollLeft -= wrapperRect.left + stickyColumnWidth - cellRect.left;
+            } else if (cellRect.right > wrapperRect.right) {
+              tableWrapper.scrollLeft += cellRect.right - wrapperRect.right;
+            }
           }
         }
       },
@@ -347,8 +379,6 @@ td.sticky-header.sticky-column {
   cursor: pointer;
 }
 th:focus {
-  outline: 2px solid #007bff;
-  outline-offset: -2px;
   z-index: 1;
   position: relative;
 }
diff --git a/lib/styles/trackInputModality.js b/lib/styles/trackInputModality.js
index 45df34542..e441ac856 100644
--- a/lib/styles/trackInputModality.js
+++ b/lib/styles/trackInputModality.js
@@ -25,6 +25,10 @@ function setUpEventHandlers(disableFocusRingByDefault) {
     '[role=textbox]',
     'a',
     'button',
+    // Custom KDS attribute. When attached to an element, it will receive a focus ring. Typically used for a11y optimizations, such as for KCard's <li>.
+    '[data-focus=true]',
+    '[role=gridcell]',
+    '[role=columnheader]',
   ].join(',');
 
   // add this to any element to allow keyboard navigation, regardless of focus event

From b7f5847d23387a83198bcff6e05a8fa2dcf056a7 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Mon, 5 Aug 2024 22:07:18 +0530
Subject: [PATCH 28/78] completed theming

---
 lib/KTable/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index ebe54539f..ffbc50805 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -19,7 +19,7 @@
               'sticky-column': index === 0,
             }"
             :style="[getHeaderStyle(header),
-                     index === 0 ? { backgroundColor: $themePalette.white } : {} ,
+                     { backgroundColor: $themePalette.white } ,
                      focusedColIndex === index ? { backgroundColor: $themePalette.grey.v_50 } : {}]"
             role="columnheader"
             :aria-colindex="index + 1"

From 0613a2163071512a86da80591101eb97ba50aa94 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Tue, 6 Aug 2024 00:02:21 +0530
Subject: [PATCH 29/78] fixed theming, removed unnecessary code

---
 lib/KTable/index.vue | 45 ++++++++++----------------------------------
 1 file changed, 10 insertions(+), 35 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index ffbc50805..ff3e1f124 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -288,33 +288,10 @@
             `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${colIndex + 1})`
           );
         }
-        /* Ensured the focused cell is smoothly scrolled into view.
-           Adjusted the scroll position to account for the height of the sticky header
-           to prevent the focused cell from being overlapped by the header. */
+        // Ensured the focused cell is smoothly scrolled into view.
         if (nextCell) {
           nextCell.focus();
           nextCell.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
-
-          // Adjust scroll position to account for sticky header height
-          if (rowIndex !== -1) {
-            const tableWrapper = this.$el.closest('.k-table-wrapper');
-            const headerHeight = this.$el.querySelector('thead').offsetHeight;
-            const wrapperRect = tableWrapper.getBoundingClientRect();
-            const cellRect = nextCell.getBoundingClientRect();
-
-            // Adjust for vertical scrolling if the cell is hidden behind the sticky header
-            if (cellRect.top < wrapperRect.top + headerHeight) {
-              tableWrapper.scrollTop -= wrapperRect.top + headerHeight - cellRect.top;
-            }
-
-            // Adjust for horizontal scrolling if the cell is hidden behind the sticky column
-            const stickyColumnWidth = this.$el.querySelector('.sticky-column').offsetWidth;
-            if (cellRect.left < wrapperRect.left + stickyColumnWidth) {
-              tableWrapper.scrollLeft -= wrapperRect.left + stickyColumnWidth - cellRect.left;
-            } else if (cellRect.right > wrapperRect.right) {
-              tableWrapper.scrollLeft += cellRect.right - wrapperRect.right;
-            }
-          }
         }
       },
       handleRowMouseOver(rowIndex) {
@@ -324,7 +301,9 @@
         this.hoveredRowIndex = null;
       },
       setHighlightHeader(header, highlight) {
-        header.style.backgroundColor = highlight ? this.$themePalette.grey.v_50 : '';
+        header.style.backgroundColor = highlight
+          ? this.$themePalette.grey.v_50
+          : this.$themePalette.white;
       },
       highlightHeader(colIndex) {
         const headers = this.$el.querySelectorAll('thead th');
@@ -342,12 +321,13 @@
 .k-table-wrapper {
   overflow: auto;
   position: relative;
-  height: 300px;
+  height:300px;
 }
 
 .k-table {
   border-collapse: collapse;
   width: 100%;
+  
 }
 
 th,
@@ -360,26 +340,21 @@ td {
 .sticky-header {
   position: sticky;
   top: 0;
-  background-color: #ffffff;
-  z-index: 3;
+  z-index: 3; 
 }
 
 .sticky-column {
   position: sticky;
   left: 0;
-  z-index: 2;
+  z-index: 2; 
 }
 
 th.sticky-header.sticky-column,
 td.sticky-header.sticky-column {
-  z-index: 4;
+  z-index: 4; 
 }
-
 .sortable {
   cursor: pointer;
 }
-th:focus {
-  z-index: 1;
-  position: relative;
-}
+
 </style>
\ No newline at end of file

From b150305b55f65973f5009eb17f0ca7f45a72811d Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 8 Aug 2024 19:37:01 +0530
Subject: [PATCH 30/78] added more tests

---
 lib/__tests__/KTable.spec.js | 116 +++++++++++++++++++++++++++++------
 1 file changed, 98 insertions(+), 18 deletions(-)

diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 388294c30..8d35d3eaa 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import KTable from '../KTable';
 
 describe('KTable.vue', () => {
@@ -13,7 +13,7 @@ describe('KTable.vue', () => {
       ['Bob', 30, 'Los Angeles'],
       ['Charlie', 35, 'San Francisco'],
     ];
-    const wrapper = shallowMount(KTable, {
+    const wrapper = mount(KTable, {
       propsData: {
         headers,
         rows,
@@ -23,29 +23,35 @@ describe('KTable.vue', () => {
     const thElements = wrapper.findAll('th');
     expect(thElements.length).toBe(headers.length);
   });
-
-  it('should render correct number of rows', () => {
+  it('renders the correct content in rows and columns', async () => {
     const headers = [
       { label: 'Name', dataType: 'string' },
       { label: 'Age', dataType: 'numeric' },
-      { label: 'City', dataType: 'string' },
+      { label: 'Date', dataType: 'date' },
     ];
     const rows = [
-      ['Alice', 25, 'New York'],
-      ['Bob', 30, 'Los Angeles'],
-      ['Charlie', 35, 'San Francisco'],
+      ['John', 30, '2023-01-01'],
+      ['Jane', 25, '2023-02-01'],
+      ['Doe', 35, '2023-03-01'],
     ];
-    const wrapper = shallowMount(KTable, {
-      propsData: {
-        headers,
-        rows,
-        useLocalSorting: true,
-      },
+
+    const wrapper = mount(KTable, {
+      propsData: { headers, rows, caption: 'Test Table' },
     });
-    const trElements = wrapper.findAll('tbody tr');
-    expect(trElements.length).toBe(rows.length);
-  });
 
+    // Wait for the table to be fully rendered
+    await wrapper.vm.$nextTick();
+
+    const tableRows = wrapper.findAll('tbody tr');
+    expect(tableRows.length).toBe(rows.length);
+
+    rows.forEach((row, rowIndex) => {
+      const cells = tableRows.at(rowIndex).findAll('td');
+      row.forEach((cellContent, colIndex) => {
+        expect(cells.at(colIndex).text()).toBe(String(cellContent));
+      });
+    });
+  });
   it('should emit changeSort event on header click when useLocalSorting is false', async () => {
     const headers = [
       { label: 'Name', dataType: 'string', sortable: true },
@@ -57,7 +63,7 @@ describe('KTable.vue', () => {
       ['Bob', 30, 'Los Angeles'],
       ['Charlie', 35, 'San Francisco'],
     ];
-    const wrapper = shallowMount(KTable, {
+    const wrapper = mount(KTable, {
       propsData: {
         headers,
         items,
@@ -69,4 +75,78 @@ describe('KTable.vue', () => {
     await thElements.at(0).trigger('click');
     expect(wrapper.emitted().changeSort).toBeTruthy();
   });
+  it('should handle sticky headers and columns', async () => {
+    const headers = [
+      { label: 'Name', dataType: 'string' },
+      { label: 'Age', dataType: 'numeric' },
+    ];
+    const rows = [
+      ['John', 30],
+      ['Jane', 25],
+    ];
+
+    const wrapper = mount(KTable, {
+      propsData: { headers, rows, caption: 'Sticky Table' },
+    });
+
+    // Wait for the table to be fully rendered
+    await wrapper.vm.$nextTick();
+
+    const headerCells = wrapper.findAll('thead th');
+    headerCells.wrappers.forEach((headerCell) => {
+      expect(headerCell.classes()).toContain('sticky-header');
+    });
+
+    const firstColumnCells = wrapper.findAll('tbody tr td:first-child');
+    firstColumnCells.wrappers.forEach((cell) => {
+      expect(cell.classes()).toContain('sticky-column');
+    });
+  });
+
+  beforeEach(() => {
+    /*Since our primary concern in this test is checking focus management rather than actual scrolling behavior, 
+    mocking scrollIntoView allows the test to focus on the relevant aspects without getting interrupted 
+    by unsupported methods in the test environment.*/
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  });
+
+  it('should handle keyboard navigation within the table', async () => {
+    const headers = [
+      { label: 'Name', dataType: 'string' },
+      { label: 'Age', dataType: 'numeric' },
+    ];
+    const rows = [
+      ['John', 30],
+      ['Jane', 25],
+    ];
+
+    const wrapper = mount(KTable, {
+      propsData: { headers, rows, caption: 'Keyboard Navigation Table' },
+      attachTo: document.body, // Attach to document body to properly manage focus
+    });
+
+    await wrapper.vm.$nextTick(); // Ensure the component is fully rendered
+
+    const firstCell = wrapper.find('tbody tr:first-child td:first-child');
+    await firstCell.element.focus(); // Focus the first cell directly
+    expect(document.activeElement).toBe(firstCell.element); // Check if the first cell is focused
+
+    // Simulate ArrowRight key press
+    await firstCell.trigger('keydown', { key: 'ArrowRight' });
+
+    const secondCell = wrapper.find('tbody tr:first-child td:nth-child(2)');
+    await secondCell.element.focus(); // Focus the second cell directly
+    expect(document.activeElement).toBe(secondCell.element); // Check if the second cell is focused
+
+    // Simulate ArrowDown key press
+    await secondCell.trigger('keydown', { key: 'ArrowDown' });
+
+    const thirdCell = wrapper.find('tbody tr:nth-child(2) td:nth-child(2)');
+    await thirdCell.element.focus(); // Focus the third cell directly
+    expect(document.activeElement).toBe(thirdCell.element); // Check if the third cell is focused
+
+    // Cleanup: detach the wrapper from the document body after the test
+    wrapper.destroy();
+  });
+  
 });

From b413eae3bd821eda40d0f952a6ab85228c69404b Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 11 Aug 2024 23:08:04 +0530
Subject: [PATCH 31/78] added composable testing and documentation

---
 docs/pages/usesorting.vue                     |  3 +
 docs/tableOfContents.js                       |  6 ++
 lib/__tests__/KTable.spec.js                  |  6 +-
 .../useSorting/__tests__/index.spec.js        | 97 +++++++++++++++++++
 .../{useSorting.js => useSorting/index.js}    |  0
 5 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 docs/pages/usesorting.vue
 create mode 100644 lib/composables/useSorting/__tests__/index.spec.js
 rename lib/composables/{useSorting.js => useSorting/index.js} (100%)

diff --git a/docs/pages/usesorting.vue b/docs/pages/usesorting.vue
new file mode 100644
index 000000000..9d2def25f
--- /dev/null
+++ b/docs/pages/usesorting.vue
@@ -0,0 +1,3 @@
+<template>
+  <DocsPageTemplate apiDocs />
+</template>
\ No newline at end of file
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index bf43b233b..1a90de2ee 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -195,6 +195,12 @@ export default [
           'loading',
         ],
       }),
+      new Page({
+        path: '/usesorting',
+        title: 'useSorting',
+        isCode: true,
+        keywords: [...compositionRelatedKeywords, 'sort'],
+      }),
     ],
   }),
   new Section({
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 8d35d3eaa..813be8753 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -54,9 +54,9 @@ describe('KTable.vue', () => {
   });
   it('should emit changeSort event on header click when useLocalSorting is false', async () => {
     const headers = [
-      { label: 'Name', dataType: 'string', sortable: true },
-      { label: 'Age', dataType: 'numeric', sortable: true },
-      { label: 'City', dataType: 'string', sortable: true },
+      { label: 'Name', dataType: 'string' },
+      { label: 'Age', dataType: 'numeric' },
+      { label: 'City', dataType: 'string'},
     ];
     const items = [
       ['Alice', 25, 'New York'],
diff --git a/lib/composables/useSorting/__tests__/index.spec.js b/lib/composables/useSorting/__tests__/index.spec.js
new file mode 100644
index 000000000..56a495665
--- /dev/null
+++ b/lib/composables/useSorting/__tests__/index.spec.js
@@ -0,0 +1,97 @@
+import { ref } from '@vue/composition-api';
+import _ from 'lodash';
+import useSorting, {
+  SORT_ORDER_ASC,
+  SORT_ORDER_DESC,
+  DATA_TYPE_STRING,
+  DATA_TYPE_NUMERIC,
+  DATA_TYPE_DATE,
+  DATA_TYPE_OTHERS
+} from '../';
+
+describe('useSorting', () => {
+  let headers, rows, useLocalSorting;
+
+  beforeEach(() => {
+    headers = ref([
+      { label: 'Name', dataType: DATA_TYPE_STRING },
+      { label: 'Age', dataType: DATA_TYPE_NUMERIC },
+      { label: 'Birthdate', dataType: DATA_TYPE_DATE },
+      { label: 'Other', dataType: DATA_TYPE_OTHERS }
+    ]);
+
+    rows = ref([
+      ['John', 30, new Date(1990, 5, 15)],
+      ['Jane', 25, new Date(1995, 10, 20)],
+      ['Alice', 28, new Date(1992, 8, 10)],
+    ]);
+
+    useLocalSorting = ref(true);
+  });
+
+  it('should return rows unsorted when useLocalSorting is false', () => {
+    useLocalSorting.value = false;
+
+    const { sortedRows } = useSorting(headers, rows, useLocalSorting);
+    expect(sortedRows.value).toEqual(rows.value);
+  });
+
+  it('should sort rows by string column in ascending order', () => {
+    const { handleSort, sortedRows } = useSorting(headers, rows, useLocalSorting);
+    
+    handleSort(0); // Sort by 'Name'
+    
+    expect(sortedRows.value).toEqual(_.orderBy(rows.value, [row => row[0]], [SORT_ORDER_ASC]));
+  });
+
+  it('should sort rows by numeric column in ascending and descending order', () => {
+    const { handleSort, sortedRows, sortOrder } = useSorting(headers, rows, useLocalSorting);
+
+    handleSort(1); // Sort by 'Age'
+    expect(sortedRows.value).toEqual(_.orderBy(rows.value, [row => row[1]], [SORT_ORDER_ASC]));
+    expect(sortOrder.value).toBe(SORT_ORDER_ASC);
+
+    handleSort(1); // Sort by 'Age' again to toggle order
+    expect(sortedRows.value).toEqual(_.orderBy(rows.value, [row => row[1]], [SORT_ORDER_DESC]));
+    expect(sortOrder.value).toBe(SORT_ORDER_DESC);
+  });
+
+  it('should sort rows by date column in ascending order', () => {
+    const { handleSort, sortedRows } = useSorting(headers, rows, useLocalSorting);
+
+    handleSort(2); // Sort by 'Birthdate'
+    expect(sortedRows.value).toEqual(_.orderBy(rows.value, [row => row[2]], [SORT_ORDER_ASC]));
+  });
+
+  it('should not sort rows when sorting by a column with dataType "others"', () => {
+    const { handleSort, sortedRows, sortKey } = useSorting(headers, rows, useLocalSorting);
+
+    handleSort(3); // Attempt to sort by 'Other'
+    expect(sortedRows.value).toEqual(rows.value);
+    expect(sortKey.value).toBe(null); // sortKey should remain null
+  });
+
+  it('should return correct aria-sort attribute based on current sorting', () => {
+    const { handleSort, getAriaSort } = useSorting(headers, rows, useLocalSorting);
+
+    expect(getAriaSort(0)).toBe('none');
+
+    handleSort(0); // Sort by 'Name'
+    expect(getAriaSort(0)).toBe('ascending');
+
+    handleSort(0); // Toggle sort order by 'Name'
+    expect(getAriaSort(0)).toBe('descending');
+  });
+
+  it('should reset sortKey and sortOrder when a new column is sorted', () => {
+    const { handleSort, sortKey, sortOrder } = useSorting(headers, rows, useLocalSorting);
+
+    handleSort(0); // Sort by 'Name'
+    expect(sortKey.value).toBe(0);
+    expect(sortOrder.value).toBe(SORT_ORDER_ASC);
+
+    handleSort(1); // Sort by 'Age'
+    expect(sortKey.value).toBe(1);
+    expect(sortOrder.value).toBe(SORT_ORDER_ASC);
+  });
+});
diff --git a/lib/composables/useSorting.js b/lib/composables/useSorting/index.js
similarity index 100%
rename from lib/composables/useSorting.js
rename to lib/composables/useSorting/index.js

From b6c4ee1170f24d20a8eba0967d9627fe9c76beac Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 11 Aug 2024 23:13:57 +0530
Subject: [PATCH 32/78] linting errors

---
 docs/pages/usesorting.vue                          | 2 ++
 lib/__tests__/KTable.spec.js                       | 7 +++----
 lib/composables/useSorting/__tests__/index.spec.js | 8 ++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/docs/pages/usesorting.vue b/docs/pages/usesorting.vue
index 9d2def25f..79c8cfe69 100644
--- a/docs/pages/usesorting.vue
+++ b/docs/pages/usesorting.vue
@@ -1,3 +1,5 @@
 <template>
+
   <DocsPageTemplate apiDocs />
+
 </template>
\ No newline at end of file
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 813be8753..36cc77e10 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -56,7 +56,7 @@ describe('KTable.vue', () => {
     const headers = [
       { label: 'Name', dataType: 'string' },
       { label: 'Age', dataType: 'numeric' },
-      { label: 'City', dataType: 'string'},
+      { label: 'City', dataType: 'string' },
     ];
     const items = [
       ['Alice', 25, 'New York'],
@@ -93,12 +93,12 @@ describe('KTable.vue', () => {
     await wrapper.vm.$nextTick();
 
     const headerCells = wrapper.findAll('thead th');
-    headerCells.wrappers.forEach((headerCell) => {
+    headerCells.wrappers.forEach(headerCell => {
       expect(headerCell.classes()).toContain('sticky-header');
     });
 
     const firstColumnCells = wrapper.findAll('tbody tr td:first-child');
-    firstColumnCells.wrappers.forEach((cell) => {
+    firstColumnCells.wrappers.forEach(cell => {
       expect(cell.classes()).toContain('sticky-column');
     });
   });
@@ -148,5 +148,4 @@ describe('KTable.vue', () => {
     // Cleanup: detach the wrapper from the document body after the test
     wrapper.destroy();
   });
-  
 });
diff --git a/lib/composables/useSorting/__tests__/index.spec.js b/lib/composables/useSorting/__tests__/index.spec.js
index 56a495665..74f825b68 100644
--- a/lib/composables/useSorting/__tests__/index.spec.js
+++ b/lib/composables/useSorting/__tests__/index.spec.js
@@ -6,7 +6,7 @@ import useSorting, {
   DATA_TYPE_STRING,
   DATA_TYPE_NUMERIC,
   DATA_TYPE_DATE,
-  DATA_TYPE_OTHERS
+  DATA_TYPE_OTHERS,
 } from '../';
 
 describe('useSorting', () => {
@@ -17,7 +17,7 @@ describe('useSorting', () => {
       { label: 'Name', dataType: DATA_TYPE_STRING },
       { label: 'Age', dataType: DATA_TYPE_NUMERIC },
       { label: 'Birthdate', dataType: DATA_TYPE_DATE },
-      { label: 'Other', dataType: DATA_TYPE_OTHERS }
+      { label: 'Other', dataType: DATA_TYPE_OTHERS },
     ]);
 
     rows = ref([
@@ -38,9 +38,9 @@ describe('useSorting', () => {
 
   it('should sort rows by string column in ascending order', () => {
     const { handleSort, sortedRows } = useSorting(headers, rows, useLocalSorting);
-    
+
     handleSort(0); // Sort by 'Name'
-    
+
     expect(sortedRows.value).toEqual(_.orderBy(rows.value, [row => row[0]], [SORT_ORDER_ASC]));
   });
 

From 01a0179c93cf8af3d54b8f1167f266e95a51a02f Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Tue, 13 Aug 2024 08:25:56 +0530
Subject: [PATCH 33/78] documentation updates

---
 docs/pages/ktable.vue            |  9 ++++++++-
 docs/pages/ktablegriditem.vue    | 12 ++++++++++++
 docs/tableOfContents.js          |  5 +++++
 lib/KTable/index.vue             | 31 ++++++++++++++++++++++++++++---
 lib/styles/trackInputModality.js |  2 +-
 5 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 docs/pages/ktablegriditem.vue

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index d6135544e..874cd6b21 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -1,5 +1,12 @@
 <template>
 
-  <DocsPageTemplate apiDocs />
+  <DocsPageTemplate apiDocs>
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>
+        The <code>KTable</code> component is a flexible and customizable table component designed to handle a variety of data presentation needs within our application. It supports advanced features such as local sorting, sticky headers, keyboard navigation, and dynamic column resizing, making it suitable for both simple and complex data tables. 
+      </p>
+    </DocsPageSection>
+    
+  </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/ktablegriditem.vue b/docs/pages/ktablegriditem.vue
new file mode 100644
index 000000000..00eb7a328
--- /dev/null
+++ b/docs/pages/ktablegriditem.vue
@@ -0,0 +1,12 @@
+<template>
+
+  <DocsPageTemplate apiDocs>
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>
+        The <code>KTable</code> component is a flexible and customizable table component designed to handle a variety of data presentation needs within our application. It supports advanced features such as local sorting, sticky headers, keyboard navigation, and dynamic column resizing, making it suitable for both simple and complex data tables. 
+      </p>
+    </DocsPageSection>
+  </DocsPageTemplate>
+  
+</template>
+  
\ No newline at end of file
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index 1a90de2ee..9d1101660 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -332,6 +332,11 @@ export default [
         title: 'KTable',
         isCode: true,
       }),
+      new Page({
+        path: '/ktablegriditem',
+        title: 'KTableGridItem',
+        isCode: true,
+      }),
       new Page({
         path: '/kgrid',
         title: 'KGrid',
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index ff3e1f124..29631e3ea 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -19,6 +19,7 @@
               'sticky-column': index === 0,
             }"
             :style="[getHeaderStyle(header),
+                     { color: $themePalette.grey.v_800 },
                      { backgroundColor: $themePalette.white } ,
                      focusedColIndex === index ? { backgroundColor: $themePalette.grey.v_50 } : {}]"
             role="columnheader"
@@ -26,13 +27,16 @@
             @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
             @keydown="handleKeydown($event, -1, index)"
           >
+            <!-- Scoped slot for customizing the content of each header cell. Receives the following slot props:
+              - `header`: The current header object.
+              - `index`: The index of the current header.-->
             <slot name="header" :header="header" :index="index">
               {{ header.label }}
             </slot>
             <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
-              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" /></span>
-              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" /></span>
-              <span v-else><KIcon icon="sortColumn" /></span>
+              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="$themePalette.grey.v_800" /></span>
+              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="$themePalette.grey.v_800" /></span>
+              <span v-else><KIcon icon="sortColumn" :color="$themePalette.grey.v_800" /></span>
             </span>
           </th>
         </tr>
@@ -64,6 +68,11 @@
             @keydown="handleKeydown($event, rowIndex, colIndex)"
           >
             <template #default="slotProps">
+
+              <!-- - Scoped slot for customizing the content of each data cell. Receives the following slot props:
+                   - `content`: The content of the current cell.
+                   - `rowIndex`: The index of the current row.
+                   - `colIndex`: The index of the current column.-->
               <slot name="cell" :content="slotProps.content" :rowIndex="rowIndex" :colIndex="colIndex" :row="row">
                 {{ slotProps.content }}
               </slot>
@@ -154,6 +163,10 @@
       };
     },
     props: {
+      /**
+       * An array of objects representing the headers of the table. Each header should have a label and a dataType.
+       * The dataType can be one of 'string', 'numeric', 'date', or 'others'. MinWidth and width are optional.
+       */
       headers: {
         type: Array,
         required: true,
@@ -165,18 +178,30 @@
           );
         },
       },
+      /**
+       * An array of arrays representing the rows of the table. Each row should have the same number of elements as the headers array.
+       */
       rows: {
         type: Array,
         required: true,
       },
+      /**
+       * The caption of the table
+       */
       caption: {
         type: String,
         required: true,
       },
+      /**
+       * Enables or disables local sorting of the table data.
+       */
       useLocalSorting: {
         type: Boolean,
         default: false,
       },
+      /**
+       * Enables or disables sorting functionality for the table headers.
+       */
       sortable: {
         type: Boolean,
         default: true,
diff --git a/lib/styles/trackInputModality.js b/lib/styles/trackInputModality.js
index 529691c67..e441ac856 100644
--- a/lib/styles/trackInputModality.js
+++ b/lib/styles/trackInputModality.js
@@ -28,7 +28,7 @@ function setUpEventHandlers(disableFocusRingByDefault) {
     // Custom KDS attribute. When attached to an element, it will receive a focus ring. Typically used for a11y optimizations, such as for KCard's <li>.
     '[data-focus=true]',
     '[role=gridcell]',
-    '[role=columnheader]'
+    '[role=columnheader]',
   ].join(',');
 
   // add this to any element to allow keyboard navigation, regardless of focus event

From 8d1c2729f4cb1f454672a61ad4a8b84e2c32be14 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Tue, 13 Aug 2024 13:56:50 +0530
Subject: [PATCH 34/78] added sorted header color

---
 docs/pages/ktable.vue         | 2 +-
 docs/pages/ktablegriditem.vue | 2 +-
 lib/KTable/index.vue          | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 874cd6b21..5ffaaeb60 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -6,7 +6,7 @@
         The <code>KTable</code> component is a flexible and customizable table component designed to handle a variety of data presentation needs within our application. It supports advanced features such as local sorting, sticky headers, keyboard navigation, and dynamic column resizing, making it suitable for both simple and complex data tables. 
       </p>
     </DocsPageSection>
-    
+  
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/ktablegriditem.vue b/docs/pages/ktablegriditem.vue
index 00eb7a328..e56a8e6d8 100644
--- a/docs/pages/ktablegriditem.vue
+++ b/docs/pages/ktablegriditem.vue
@@ -7,6 +7,6 @@
       </p>
     </DocsPageSection>
   </DocsPageTemplate>
-  
+
 </template>
   
\ No newline at end of file
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 29631e3ea..89b8f9497 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -19,7 +19,7 @@
               'sticky-column': index === 0,
             }"
             :style="[getHeaderStyle(header),
-                     { color: $themePalette.grey.v_800 },
+                     sortKey === index ? { color: $themeBrand.primary.v_1000 } : { color: $themePalette.grey.v_800 },
                      { backgroundColor: $themePalette.white } ,
                      focusedColIndex === index ? { backgroundColor: $themePalette.grey.v_50 } : {}]"
             role="columnheader"
@@ -34,8 +34,8 @@
               {{ header.label }}
             </slot>
             <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
-              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="$themePalette.grey.v_800" /></span>
-              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="$themePalette.grey.v_800" /></span>
+              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="sortKey === index ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
+              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="sortKey === index ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
               <span v-else><KIcon icon="sortColumn" :color="$themePalette.grey.v_800" /></span>
             </span>
           </th>

From f27f9ae653aec81ff703dcdd1fb2f5659befcb8c Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Tue, 13 Aug 2024 20:50:35 +0530
Subject: [PATCH 35/78] updated documentation

---
 docs/pages/ktable.vue         | 83 ++++++++++++++++++++++++++++++++++-
 docs/pages/ktablegriditem.vue | 12 -----
 docs/pages/usesorting.vue     |  5 ---
 docs/tableOfContents.js       | 11 -----
 4 files changed, 82 insertions(+), 29 deletions(-)
 delete mode 100644 docs/pages/ktablegriditem.vue
 delete mode 100644 docs/pages/usesorting.vue

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 5ffaaeb60..a30040d45 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -6,7 +6,88 @@
         The <code>KTable</code> component is a flexible and customizable table component designed to handle a variety of data presentation needs within our application. It supports advanced features such as local sorting, sticky headers, keyboard navigation, and dynamic column resizing, making it suitable for both simple and complex data tables. 
       </p>
     </DocsPageSection>
-  
+    <DocsPageSection title="Usage" anchor="#usage">
+      <!-- Frontend Sorting Example-->
+      <h3>Table with Frontend Sorting</h3>
+      <p>
+        The <code>KTable</code> can be used with local sorting functionality, allowing you to sort data on the client side without the need for server requests. This example demonstrates a table with local sorting enabled.
+      </p>
+      <DocsShowCode language="html">
+        <KTable
+          :headers="headers"
+          :rows="rows"
+          caption="Local Sorting Table"
+          :useLocalSorting="true"
+          sortable
+        >
+          <template #header="{ header, index }">
+            <span>{{ header.label }} (Backend)</span>
+          </template>
+          <template #cell="{ content, rowIndex, colIndex }">
+            <span v-if="colIndex === 2">{{ content }} (City)</span>
+            <span v-else>{{ content }}</span>
+          </template>
+        </KTable>
+
+      </DocsShowCode>
+      <!-- eslint-disable -->
+  <DocsShowCode language="javascript">
+    data() {
+      return {
+        headers: [
+          { label: 'Name', dataType: 'string' },
+          { label: 'Age', dataType: 'numeric' },
+          { label: 'City', dataType: 'string' },
+        ],
+        rows: [
+          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+        ]
+      };
+    },
+  </DocsShowCode>
+  <!-- eslint-enable -->
+      <DocsShow block>
+        <KTable
+          :headers="headers"
+          :rows="rows"
+          caption="Local Sorting Table"
+          :useLocalSorting="true"
+          sortable
+        >
+          <template #header="{ header, index }">
+            <span>{{ header.label }} (Backend)</span>
+          </template>
+          <template #cell="{ content, rowIndex, colIndex }">
+            <span v-if="colIndex === 2">{{ content }} (City)</span>
+            <span v-else>{{ content }}</span>
+          </template>
+        </KTable>
+      </DocsShow>
+
+    </DocsPageSection>
+
+
   </DocsPageTemplate>
 
 </template>
+
+export default {
+  name: 'DocsKTable',
+  data() {
+    return {
+      headers: [
+        { label: 'Name', dataType: 'string' },
+        { label: 'Age', dataType: 'numeric' },
+        { label: 'City', dataType: 'string' },
+      ],
+      rows: [
+        ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
+        ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
+        ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+      ]
+    };
+  }
+};
+
diff --git a/docs/pages/ktablegriditem.vue b/docs/pages/ktablegriditem.vue
deleted file mode 100644
index e56a8e6d8..000000000
--- a/docs/pages/ktablegriditem.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-
-  <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>
-        The <code>KTable</code> component is a flexible and customizable table component designed to handle a variety of data presentation needs within our application. It supports advanced features such as local sorting, sticky headers, keyboard navigation, and dynamic column resizing, making it suitable for both simple and complex data tables. 
-      </p>
-    </DocsPageSection>
-  </DocsPageTemplate>
-
-</template>
-  
\ No newline at end of file
diff --git a/docs/pages/usesorting.vue b/docs/pages/usesorting.vue
deleted file mode 100644
index 79c8cfe69..000000000
--- a/docs/pages/usesorting.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-
-  <DocsPageTemplate apiDocs />
-
-</template>
\ No newline at end of file
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index 9d1101660..bf43b233b 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -195,12 +195,6 @@ export default [
           'loading',
         ],
       }),
-      new Page({
-        path: '/usesorting',
-        title: 'useSorting',
-        isCode: true,
-        keywords: [...compositionRelatedKeywords, 'sort'],
-      }),
     ],
   }),
   new Section({
@@ -332,11 +326,6 @@ export default [
         title: 'KTable',
         isCode: true,
       }),
-      new Page({
-        path: '/ktablegriditem',
-        title: 'KTableGridItem',
-        isCode: true,
-      }),
       new Page({
         path: '/kgrid',
         title: 'KGrid',

From 2e45abe9c7aaa52544fcdba2f1d019547c9a7d79 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Wed, 14 Aug 2024 13:50:02 +0530
Subject: [PATCH 36/78] Updated documentation and examples

---
 CHANGELOG.md              |   9 +++
 docs/pages/ktable.vue     | 124 ++++++++++++++++++++++++++++++--------
 docs/pages/playground.vue |  12 +++-
 lib/KTable/index.vue      |  11 ++--
 4 files changed, 122 insertions(+), 34 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2ffe7f4e..9055b8b40 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,15 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+[#727]
+  - **Description:** Initial implementation of `KTable` component
+  - **Products impact:** New Component
+  - **Addresses:** [#328](https://github.com/learningequality/kolibri-design-system/issues/328)
+  - **Components:** KTable
+  - **Breaking:** No
+  - **Impacts a11y:**  Yes
+  - **Guidance:**
+[#727] https://github.com/learningequality/kolibri-design-system/pull/727
 [#707]
   - **Description:** Card Validations
   - **Products impact:**  
diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index a30040d45..733dc3c11 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -7,11 +7,74 @@
       </p>
     </DocsPageSection>
     <DocsPageSection title="Usage" anchor="#usage">
+      <!--Non-Sortable Table-->
+      <h3>Table without Sorting functionality</h3>
+      <p>
+        This is an example to show how <code>KTable</code> can be used without any sorting functionality, for a simple table.
+      </p>
+      <!-- eslint-disable -->
+      <DocsShowCode language="html">
+        <KTable
+          :headers="headers"
+          :rows="rows"
+          caption="Non Sortable Table"
+          :sortable="false"
+        >
+
+          <template #header="{ header, index }">
+            <span>{ header.label } (Backend)</span>
+          </template>
+          <template #cell="{ content, rowIndex, colIndex }">
+            <span v-if="colIndex === 2">{ content } (City)</span>
+            <span v-else>{ content }</span>
+          </template>
+        </KTable>
+
+      </DocsShowCode>
+
+  <DocsShowCode language="javascript">
+    data() {
+      return {
+        headers: [
+          { label: 'Name', dataType: 'string' },
+          { label: 'Age', dataType: 'numeric' },
+          { label: 'City', dataType: 'string' },
+        ],
+        rows: [
+        ['John Doe', 28, 'New York'],
+          ['Jane Smith', 34, 'Los Angeles'],
+          ['Samuel Green', 22, 'Chicago'],
+          ['Alice Johnson', 30, 'Houston'],
+          ['Michael Brown', 45, 'Phoenix'],
+          ['Emily Davis', 27, 'Philadelphia'],
+        ]
+      };
+    },
+  </DocsShowCode>
+
+      <DocsShow block>
+        <KTable
+          :headers="headers"
+          :rows="rows"
+          caption="Non Sortable Table"
+          :sortable="false"
+        >
+          <template #header="{ header, index }">
+            <span>{{ header.label }} (Backend)</span>
+          </template>
+          <template #cell="{ content, rowIndex, colIndex }">
+            <span v-if="colIndex === 2">{{ content }} (City)</span>
+            <span v-else>{{ content }}</span>
+          </template>
+        </KTable>
+      </DocsShow>
+       <!-- eslint-enable -->
       <!-- Frontend Sorting Example-->
       <h3>Table with Frontend Sorting</h3>
       <p>
         The <code>KTable</code> can be used with local sorting functionality, allowing you to sort data on the client side without the need for server requests. This example demonstrates a table with local sorting enabled.
       </p>
+      <!-- eslint-disable -->
       <DocsShowCode language="html">
         <KTable
           :headers="headers"
@@ -20,17 +83,18 @@
           :useLocalSorting="true"
           sortable
         >
+
           <template #header="{ header, index }">
-            <span>{{ header.label }} (Backend)</span>
+            <span>{ header.label } (Backend)</span>
           </template>
           <template #cell="{ content, rowIndex, colIndex }">
-            <span v-if="colIndex === 2">{{ content }} (City)</span>
-            <span v-else>{{ content }}</span>
+            <span v-if="colIndex === 2">{ content } (City)</span>
+            <span v-else>{ content }</span>
           </template>
         </KTable>
 
       </DocsShowCode>
-      <!-- eslint-disable -->
+
   <DocsShowCode language="javascript">
     data() {
       return {
@@ -40,14 +104,16 @@
           { label: 'City', dataType: 'string' },
         ],
         rows: [
-          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
-          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
-          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+        ['John Doe', 28, 'New York'],
+          ['Jane Smith', 34, 'Los Angeles'],
+          ['Samuel Green', 22, 'Chicago'],
+          ['Alice Johnson', 30, 'Houston'],
+          ['Michael Brown', 45, 'Phoenix'],
+          ['Emily Davis', 27, 'Philadelphia'],
         ]
       };
     },
   </DocsShowCode>
-  <!-- eslint-enable -->
       <DocsShow block>
         <KTable
           :headers="headers"
@@ -64,6 +130,7 @@
             <span v-else>{{ content }}</span>
           </template>
         </KTable>
+          <!-- eslint-enable -->
       </DocsShow>
 
     </DocsPageSection>
@@ -73,21 +140,28 @@
 
 </template>
 
-export default {
-  name: 'DocsKTable',
-  data() {
-    return {
-      headers: [
-        { label: 'Name', dataType: 'string' },
-        { label: 'Age', dataType: 'numeric' },
-        { label: 'City', dataType: 'string' },
-      ],
-      rows: [
-        ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
-        ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
-        ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
-      ]
-    };
-  }
-};
 
+<script>
+
+  export default {
+    name: 'DocsKTable',
+    data() {
+      return {
+        headers: [
+          { label: 'Name', dataType: 'string' },
+          { label: 'Age', dataType: 'numeric' },
+          { label: 'City', dataType: 'string' },
+        ],
+        rows: [
+          ['John Doe', 28, 'New York'],
+          ['Jane Smith', 34, 'Los Angeles'],
+          ['Samuel Green', 22, 'Chicago'],
+          ['Alice Johnson', 30, 'Houston'],
+          ['Michael Brown', 45, 'Phoenix'],
+          ['Emily Davis', 27, 'Philadelphia'],
+        ],
+      };
+    },
+  };
+
+</script>
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index b9392ae53..c0481a651 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -2,7 +2,7 @@
 
   <div id="app">
     <h1>KTable Component Example</h1>
-
+    <!-- eslint-disable -->
     <!-- Local Sorting Table Example -->
     <h2>Local Sorting Table</h2>
     <KTable
@@ -42,10 +42,18 @@
         <span v-else>{{ content }}</span>
       </template>
     </KTable>
-
+  
     <div v-if="isLoading" class="loading-overlay">
       Data is loading. Please wait...
     </div>
+    <h2>Non Sortable Table</h2>
+    <KTable
+      :headers="headers"
+      :rows="rows"
+      caption="Non Sortable Table"
+      :sortable="false"
+    />
+
   </div>
 
 </template>
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 89b8f9497..f81811980 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -27,9 +27,8 @@
             @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
             @keydown="handleKeydown($event, -1, index)"
           >
-            <!-- Scoped slot for customizing the content of each header cell. Receives the following slot props:
-              - `header`: The current header object.
-              - `index`: The index of the current header.-->
+            <!--@slot Scoped slot for customizing the content of each header cell. Receives the following slot props - `header`: The current header object & `index`: The index of the current header.-->
+
             <slot name="header" :header="header" :index="index">
               {{ header.label }}
             </slot>
@@ -69,10 +68,7 @@
           >
             <template #default="slotProps">
 
-              <!-- - Scoped slot for customizing the content of each data cell. Receives the following slot props:
-                   - `content`: The content of the current cell.
-                   - `rowIndex`: The index of the current row.
-                   - `colIndex`: The index of the current column.-->
+              <!-- @slot Scoped slot for customizing the content of each data cell. Receives the following slot props - `content`: The content of the current cell,`rowIndex`: The index of the current row & `colIndex`: The index of the current column.-->
               <slot name="cell" :content="slotProps.content" :rowIndex="rowIndex" :colIndex="colIndex" :row="row">
                 {{ slotProps.content }}
               </slot>
@@ -162,6 +158,7 @@
         getHeaderStyle,
       };
     },
+    /* eslint-disable kolibri/vue-no-unused-properties */
     props: {
       /**
        * An array of objects representing the headers of the table. Each header should have a label and a dataType.

From 6e69cc06cb8fed2412ad70081304daa8b1286ff4 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 15 Aug 2024 12:20:25 +0530
Subject: [PATCH 37/78] tab key navigation fix

---
 docs/pages/playground.vue |  2 +-
 lib/KTable/index.vue      | 25 ++++++++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index c0481a651..7be55eaec 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -42,7 +42,7 @@
         <span v-else>{{ content }}</span>
       </template>
     </KTable>
-  
+
     <div v-if="isLoading" class="loading-overlay">
       Data is loading. Please wait...
     </div>
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index f81811980..c940e2813 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -280,15 +280,22 @@
               this.handleSort(colIndex);
             }
             break;
-          case 'Tab': //To handle focused row and highlight header state for tab key as well
-            if (event.shiftKey) {
-              nextColIndex = colIndex > 0 ? colIndex - 1 : totalCols - 1;
-              nextRowIndex = colIndex > 0 ? rowIndex : rowIndex - 1;
-            } else {
-              nextColIndex = (colIndex + 1) % totalCols;
-              nextRowIndex = colIndex === totalCols - 1 ? rowIndex + 1 : rowIndex;
-            }
-            break;
+          case 'Tab':
+            // Allow default tab behavior but update focusedRowIndex and focusedColIndex
+            setTimeout(() => {
+              // To allow default tab navigation to complete before updating focusedRowIndex and focusedColIndex
+              const activeElement = document.activeElement;
+              const cell = activeElement.closest('td, th');
+              if (cell) {
+                const row = cell.parentElement;
+                const rowIndex = Array.from(row.parentElement.children).indexOf(row);
+                const colIndex = Array.from(row.children).indexOf(cell);
+                this.focusedRowIndex = rowIndex === -1 ? null : rowIndex;
+                this.focusedColIndex = colIndex;
+                this.highlightHeader(colIndex);
+              }
+            }, 0);
+            return;
           default:
             return;
         }

From dabdf0d77d5d8aba69e3e982995f34ffb5006947 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 15 Aug 2024 13:46:56 +0530
Subject: [PATCH 38/78] fixed scroll into view for sticky headers

---
 lib/KTable/index.vue | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index c940e2813..343efdd97 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="k-table-wrapper">
+  <div ref="tableWrapper" class="k-table-wrapper">
     <table class="k-table" role="grid">
       <caption v-if="caption">
         {{ caption }}
@@ -290,6 +290,7 @@
                 const row = cell.parentElement;
                 const rowIndex = Array.from(row.parentElement.children).indexOf(row);
                 const colIndex = Array.from(row.children).indexOf(cell);
+                this.focusCell(rowIndex, colIndex);
                 this.focusedRowIndex = rowIndex === -1 ? null : rowIndex;
                 this.focusedColIndex = colIndex;
                 this.highlightHeader(colIndex);
@@ -305,9 +306,36 @@
         this.focusedColIndex = nextColIndex;
 
         this.highlightHeader(nextColIndex);
+        const cell = this.$el.querySelector(
+          `tbody tr:nth-child(${nextRowIndex + 1}) td:nth-child(${nextColIndex + 1})`
+        );
+        this.scrollCellIntoView(cell);
 
         event.preventDefault();
       },
+      scrollCellIntoView(cell) {
+        if (cell) {
+          cell.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+
+          // Adjust scroll position to account for sticky headers
+          const stickyHeader = this.$el.querySelector('.sticky-header');
+          const stickyColumn = this.$el.querySelector('.sticky-column');
+          const tableWrapper = this.$refs.tableWrapper;
+
+          const stickyHeaderHeight = stickyHeader ? stickyHeader.offsetHeight : 0;
+          const stickyColumnWidth = stickyColumn ? stickyColumn.offsetWidth : 0;
+
+          const cellRect = cell.getBoundingClientRect();
+          const wrapperRect = tableWrapper.getBoundingClientRect();
+
+          if (cellRect.top < wrapperRect.top + stickyHeaderHeight) {
+            tableWrapper.scrollTop -= wrapperRect.top + stickyHeaderHeight - cellRect.top;
+          }
+          if (cellRect.left < wrapperRect.left + stickyColumnWidth) {
+            tableWrapper.scrollLeft -= wrapperRect.left + stickyColumnWidth - cellRect.left;
+          }
+        }
+      },
       focusCell(rowIndex, colIndex) {
         let nextCell;
         if (rowIndex === -1) {

From 21cc84d36bb176fb436157a852db123cd9102fe3 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 16 Aug 2024 13:08:24 +0530
Subject: [PATCH 39/78] code refactor

---
 lib/KTable/index.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 343efdd97..47af7f5b4 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -306,10 +306,6 @@
         this.focusedColIndex = nextColIndex;
 
         this.highlightHeader(nextColIndex);
-        const cell = this.$el.querySelector(
-          `tbody tr:nth-child(${nextRowIndex + 1}) td:nth-child(${nextColIndex + 1})`
-        );
-        this.scrollCellIntoView(cell);
 
         event.preventDefault();
       },
@@ -347,10 +343,11 @@
         }
         // Ensured the focused cell is smoothly scrolled into view.
         if (nextCell) {
-          nextCell.focus();
-          nextCell.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
-        }
+    nextCell.focus();
+    this.scrollCellIntoView(nextCell); 
+  }
       },
+      
       handleRowMouseOver(rowIndex) {
         this.hoveredRowIndex = rowIndex;
       },

From 350a13ab19c756941b4c5e25160919490c0f1491 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 16 Aug 2024 13:19:26 +0530
Subject: [PATCH 40/78] set tab to default

---
 lib/KTable/index.vue | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 47af7f5b4..1832bbe1b 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -281,21 +281,6 @@
             }
             break;
           case 'Tab':
-            // Allow default tab behavior but update focusedRowIndex and focusedColIndex
-            setTimeout(() => {
-              // To allow default tab navigation to complete before updating focusedRowIndex and focusedColIndex
-              const activeElement = document.activeElement;
-              const cell = activeElement.closest('td, th');
-              if (cell) {
-                const row = cell.parentElement;
-                const rowIndex = Array.from(row.parentElement.children).indexOf(row);
-                const colIndex = Array.from(row.children).indexOf(cell);
-                this.focusCell(rowIndex, colIndex);
-                this.focusedRowIndex = rowIndex === -1 ? null : rowIndex;
-                this.focusedColIndex = colIndex;
-                this.highlightHeader(colIndex);
-              }
-            }, 0);
             return;
           default:
             return;

From fb6011197cbff82b6cdc4a060fd746a07a4184af Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 16 Aug 2024 20:33:10 +0530
Subject: [PATCH 41/78] trial

---
 lib/KTable/index.vue | 94 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 88 insertions(+), 6 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 1832bbe1b..9849616b9 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -222,6 +222,11 @@
       },
     },
     methods: {
+      getCell(rowIndex, colIndex) {
+        const rowSelector = rowIndex === -1 ? 'thead' : `tbody tr:nth-child(${rowIndex + 1})`;
+        const colSelector = `td:nth-child(${colIndex + 1}), th:nth-child(${colIndex + 1})`;
+        return this.$el.querySelector(`${rowSelector} ${colSelector}`);
+      },
       handleKeydown(event, rowIndex, colIndex) {
         const key = event.key;
         const totalRows = this.rows.length;
@@ -229,7 +234,21 @@
 
         let nextRowIndex = rowIndex;
         let nextColIndex = colIndex;
-
+        // Identify all focusable elements inside the current cell
+        const currentCell = this.getCell(rowIndex, colIndex);
+        const focusableElements = currentCell
+          ? Array.from(
+              currentCell.querySelectorAll(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+              )
+            )
+          : [];
+        const focusedElementIndex = focusableElements.indexOf(document.activeElement);
+        // Debugging: Log focusable elements within the current cell
+        console.log('Curr',currentCell);
+        console.log('Focusable elements:', focusableElements);
+        console.log('Current focused element:', document.activeElement);
+        console.log('Focused element index:', focusedElementIndex);
         switch (key) {
           case 'ArrowUp':
             if (rowIndex === -1) {
@@ -281,7 +300,70 @@
             }
             break;
           case 'Tab':
-            return;
+            if (focusableElements.length > 0) {
+              if (!event.shiftKey) {
+                if (focusedElementIndex < focusableElements.length - 1) {
+                  focusableElements[focusedElementIndex + 1].focus();
+                  event.preventDefault();
+                  return;
+                } else {
+                  if (colIndex < totalCols - 1) {
+                    nextColIndex = colIndex + 1;
+                  } else if (rowIndex < totalRows - 1) {
+                    nextColIndex = 0;
+                    nextRowIndex = rowIndex + 1;
+                  } else {
+                    nextColIndex = 0;
+                    nextRowIndex = -1;
+                  }
+                }
+              } else {
+                if (focusedElementIndex > 0) {
+                  focusableElements[focusedElementIndex - 1].focus();
+                  event.preventDefault();
+                  return;
+                } else {
+                  if (colIndex > 0) {
+                    nextColIndex = colIndex - 1;
+                  } else if (rowIndex > 0) {
+                    nextColIndex = totalCols - 1;
+                    nextRowIndex = rowIndex - 1;
+                  } else {
+                    nextColIndex = totalCols - 1;
+                    nextRowIndex = totalRows - 1;
+                  }
+                }
+              }
+            } else {
+              if (!event.shiftKey) {
+                if (colIndex < totalCols - 1) {
+                  nextColIndex = colIndex + 1;
+                } else if (rowIndex < totalRows - 1) {
+                  nextColIndex = 0;
+                  nextRowIndex = rowIndex + 1;
+                } else {
+                  nextColIndex = 0;
+                  nextRowIndex = -1;
+                }
+              } else {
+                if (colIndex > 0) {
+                  nextColIndex = colIndex - 1;
+                } else if (rowIndex > 0) {
+                  nextColIndex = totalCols - 1;
+                  nextRowIndex = rowIndex - 1;
+                } else {
+                  nextColIndex = totalCols - 1;
+                  nextRowIndex = totalRows - 1;
+                }
+              }
+            }
+            this.focusCell(nextRowIndex, nextColIndex);
+            this.focusedRowIndex = nextRowIndex === -1 ? null : nextRowIndex;
+            this.focusedColIndex = nextColIndex;
+            this.highlightHeader(nextColIndex);
+            event.preventDefault(); // Prevent default Tab behavior
+            break;
+
           default:
             return;
         }
@@ -328,11 +410,11 @@
         }
         // Ensured the focused cell is smoothly scrolled into view.
         if (nextCell) {
-    nextCell.focus();
-    this.scrollCellIntoView(nextCell); 
-  }
+          nextCell.focus();
+          this.scrollCellIntoView(nextCell);
+        }
       },
-      
+
       handleRowMouseOver(rowIndex) {
         this.hoveredRowIndex = rowIndex;
       },

From ea166d4dd7795e27656e0fc2711e38920305b12a Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 16 Aug 2024 23:29:30 +0530
Subject: [PATCH 42/78] final navigation changes

---
 docs/pages/playground.vue |  1 +
 lib/KTable/index.vue      | 23 +++++++++++------------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 7be55eaec..23fa975ef 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -17,6 +17,7 @@
       </template>
       <template #cell="{ content, rowIndex, colIndex }">
         <span v-if="colIndex === 1">{{ content }} years old</span>
+        <span v-else-if="colIndex === 4"><KButton>Test</KButton></span>
         <span v-else>{{ content }}</span>
       </template>
     </KTable>
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 9849616b9..27a56e85b 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -222,11 +222,6 @@
       },
     },
     methods: {
-      getCell(rowIndex, colIndex) {
-        const rowSelector = rowIndex === -1 ? 'thead' : `tbody tr:nth-child(${rowIndex + 1})`;
-        const colSelector = `td:nth-child(${colIndex + 1}), th:nth-child(${colIndex + 1})`;
-        return this.$el.querySelector(`${rowSelector} ${colSelector}`);
-      },
       handleKeydown(event, rowIndex, colIndex) {
         const key = event.key;
         const totalRows = this.rows.length;
@@ -244,11 +239,6 @@
             )
           : [];
         const focusedElementIndex = focusableElements.indexOf(document.activeElement);
-        // Debugging: Log focusable elements within the current cell
-        console.log('Curr',currentCell);
-        console.log('Focusable elements:', focusableElements);
-        console.log('Current focused element:', document.activeElement);
-        console.log('Focused element index:', focusedElementIndex);
         switch (key) {
           case 'ArrowUp':
             if (rowIndex === -1) {
@@ -318,8 +308,8 @@
                   }
                 }
               } else {
-                if (focusedElementIndex > 0) {
-                  focusableElements[focusedElementIndex - 1].focus();
+                if (focusedElementIndex < focusableElements.length - 1) {
+                  focusableElements[focusedElementIndex + 1].focus();
                   event.preventDefault();
                   return;
                 } else {
@@ -376,6 +366,15 @@
 
         event.preventDefault();
       },
+      getCell(rowIndex, colIndex) {
+        if (rowIndex === -1) {
+          return this.$el.querySelector(`thead th:nth-child(${colIndex + 1})`);
+        } else {
+          return this.$el.querySelector(
+            `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${colIndex + 1})`
+          );
+        }
+      },
       scrollCellIntoView(cell) {
         if (cell) {
           cell.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });

From 39657cf513674d6f08f7630ee841eabb5b4aef6a Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 18 Aug 2024 13:09:26 +0530
Subject: [PATCH 43/78] allow default tab behaviour post table navigation

---
 lib/KTable/index.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 27a56e85b..9a13dcf1c 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -303,8 +303,8 @@
                     nextColIndex = 0;
                     nextRowIndex = rowIndex + 1;
                   } else {
-                    nextColIndex = 0;
-                    nextRowIndex = -1;
+                    // Allow default behavior when reaching the last cell
+                    return;
                   }
                 }
               } else {
@@ -319,8 +319,8 @@
                     nextColIndex = totalCols - 1;
                     nextRowIndex = rowIndex - 1;
                   } else {
-                    nextColIndex = totalCols - 1;
-                    nextRowIndex = totalRows - 1;
+                    // Allow default behavior when reaching the first cell
+                    return;
                   }
                 }
               }
@@ -332,8 +332,8 @@
                   nextColIndex = 0;
                   nextRowIndex = rowIndex + 1;
                 } else {
-                  nextColIndex = 0;
-                  nextRowIndex = -1;
+                  // Allow default behavior when reaching the last cell
+                  return;
                 }
               } else {
                 if (colIndex > 0) {
@@ -342,16 +342,16 @@
                   nextColIndex = totalCols - 1;
                   nextRowIndex = rowIndex - 1;
                 } else {
-                  nextColIndex = totalCols - 1;
-                  nextRowIndex = totalRows - 1;
+                  // Allow default behavior when reaching the first cell
+                  return;
                 }
               }
             }
-            this.focusCell(nextRowIndex, nextColIndex);
+            this.focusCell(nextRowIndex, nextColIndex, true);
             this.focusedRowIndex = nextRowIndex === -1 ? null : nextRowIndex;
             this.focusedColIndex = nextColIndex;
             this.highlightHeader(nextColIndex);
-            event.preventDefault(); // Prevent default Tab behavior
+            event.preventDefault(); // Prevent default Tab behavior within the table
             break;
 
           default:

From 6bae55cc4e67855c422486986de278c45bbd0c7c Mon Sep 17 00:00:00 2001
From: Anoushka Jha <95405559+BabyElias@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:24:21 +0530
Subject: [PATCH 44/78] Update docs/pages/ktable.vue

Co-authored-by: Michaela Robosova <robosovam@gmail.com>
---
 docs/pages/ktable.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 733dc3c11..31b6342c7 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -3,7 +3,13 @@
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
       <p>
-        The <code>KTable</code> component is a flexible and customizable table component designed to handle a variety of data presentation needs within our application. It supports advanced features such as local sorting, sticky headers, keyboard navigation, and dynamic column resizing, making it suitable for both simple and complex data tables. 
+        The <code>KTable</code> component is an accessible and customizable table component designed to handle a variety of data presentation needs. The component is suitable for both simple and complex data tables. It offers:
+        <ul>
+          <li>Built-in sorting as well as integration with externally sorted data</li>
+          <li>Keyboard navigation</li>
+          <li>Dynamic column resizing</li>
+          <li>Sticky headers</li>
+        </ul>
       </p>
     </DocsPageSection>
     <DocsPageSection title="Usage" anchor="#usage">

From aaa46f3d8e72edce3e3aabd0af0360190ededbf7 Mon Sep 17 00:00:00 2001
From: Anoushka Jha <95405559+BabyElias@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:24:37 +0530
Subject: [PATCH 45/78] Update docs/pages/ktable.vue

Co-authored-by: Michaela Robosova <robosovam@gmail.com>
---
 docs/pages/ktable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 31b6342c7..0b275e921 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -14,7 +14,7 @@
     </DocsPageSection>
     <DocsPageSection title="Usage" anchor="#usage">
       <!--Non-Sortable Table-->
-      <h3>Table without Sorting functionality</h3>
+      <h3>Table without sorting functionality</h3>
       <p>
         This is an example to show how <code>KTable</code> can be used without any sorting functionality, for a simple table.
       </p>

From a2af97c4547ba352c8df0d321f516bdf11c533ca Mon Sep 17 00:00:00 2001
From: Anoushka Jha <95405559+BabyElias@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:24:53 +0530
Subject: [PATCH 46/78] Update docs/pages/ktable.vue

Co-authored-by: Michaela Robosova <robosovam@gmail.com>
---
 docs/pages/ktable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 0b275e921..60fdc987d 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -62,7 +62,7 @@
         <KTable
           :headers="headers"
           :rows="rows"
-          caption="Non Sortable Table"
+          caption="Non-sortable table"
           :sortable="false"
         >
           <template #header="{ header, index }">

From c374f5912ed3ab0cca437fd418f45dcdee2ffa90 Mon Sep 17 00:00:00 2001
From: Anoushka Jha <95405559+BabyElias@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:25:01 +0530
Subject: [PATCH 47/78] Update docs/pages/ktable.vue

Co-authored-by: Michaela Robosova <robosovam@gmail.com>
---
 docs/pages/ktable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 60fdc987d..1091e8214 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -85,7 +85,7 @@
         <KTable
           :headers="headers"
           :rows="rows"
-          caption="Local Sorting Table"
+          caption="Table with built-in sorting"
           :useLocalSorting="true"
           sortable
         >

From b0b8a93421b8b9824176beca9c5828b8ec973729 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Wed, 21 Aug 2024 10:09:53 +0530
Subject: [PATCH 48/78] added data-focus="true"

---
 lib/KTable/KTableGridItem.vue    | 1 +
 lib/KTable/index.vue             | 2 ++
 lib/styles/trackInputModality.js | 2 --
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 4c2399d17..99e3f35c6 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -4,6 +4,7 @@
     :class="$computedClass(coreOutlineFocus)"
     :style="{ textAlign: textAlign, minWidth: minWidth, width: width }"
     tabindex="0"
+    data-focus="true"
     role="gridcell"
     @keydown="onKeydown"
   >
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 9a13dcf1c..451d2d6e2 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -23,6 +23,7 @@
                      { backgroundColor: $themePalette.white } ,
                      focusedColIndex === index ? { backgroundColor: $themePalette.grey.v_50 } : {}]"
             role="columnheader"
+            data-focus="true"
             :aria-colindex="index + 1"
             @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
             @keydown="handleKeydown($event, -1, index)"
@@ -62,6 +63,7 @@
             }"
             :style="[colIndex === 0 ? { backgroundColor: $themePalette.white } : {},(hoveredRowIndex === rowIndex || focusedRowIndex === rowIndex) && colIndex === 0 ? { backgroundColor: $themePalette.grey.v_50 } : {}
             ]"
+            data-focus="true"
             role="gridcell"
             :aria-colindex="colIndex + 1"
             @keydown="handleKeydown($event, rowIndex, colIndex)"
diff --git a/lib/styles/trackInputModality.js b/lib/styles/trackInputModality.js
index e441ac856..7bb0fad00 100644
--- a/lib/styles/trackInputModality.js
+++ b/lib/styles/trackInputModality.js
@@ -27,8 +27,6 @@ function setUpEventHandlers(disableFocusRingByDefault) {
     'button',
     // Custom KDS attribute. When attached to an element, it will receive a focus ring. Typically used for a11y optimizations, such as for KCard's <li>.
     '[data-focus=true]',
-    '[role=gridcell]',
-    '[role=columnheader]',
   ].join(',');
 
   // add this to any element to allow keyboard navigation, regardless of focus event

From 4e1c3b9f0f9d2ba3de8de411e96a4ba64e55cbe3 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Wed, 21 Aug 2024 10:17:58 +0530
Subject: [PATCH 49/78] added docstring comments

---
 lib/composables/useSorting/index.js | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/lib/composables/useSorting/index.js b/lib/composables/useSorting/index.js
index 8df637ee6..d5edda8a0 100644
--- a/lib/composables/useSorting/index.js
+++ b/lib/composables/useSorting/index.js
@@ -8,16 +8,31 @@ export const DATA_TYPE_NUMERIC = 'numeric';
 export const DATA_TYPE_DATE = 'date';
 export const DATA_TYPE_OTHERS = 'others';
 
+/**
+ * Custom hook for handling sorting logic in a table.
+ *
+ * @param {Ref<Array>} headers - Reactive reference to the table headers.
+ * @param {Ref<Array>} rows - Reactive reference to the table rows.
+ * @param {Ref<Boolean>} useLocalSorting - Reactive reference to a boolean indicating if local sorting should be used.
+ * @returns {Object} - An object containing reactive references and methods for sorting.
+ */
 export default function useSorting(headers, rows, useLocalSorting) {
   const sortKey = ref(null);
   const sortOrder = ref(null);
-
+  /**
+   * Computed property that returns the sorted rows based on the current sort key and order.
+   * If local sorting is disabled or no sort key is set, it returns the original rows.
+   */
   const sortedRows = computed(() => {
     if (!useLocalSorting.value || sortKey.value === null) return rows.value;
 
     return _.orderBy(rows.value, [row => row[sortKey.value]], [sortOrder.value]);
   });
-
+  /**
+   * Method to handle sorting when a column header is clicked.
+   *
+   * @param {Number} index - The index of the column to sort by.
+   */
   const handleSort = index => {
     if (headers.value[index].dataType === DATA_TYPE_OTHERS) return;
 
@@ -28,7 +43,12 @@ export default function useSorting(headers, rows, useLocalSorting) {
       sortOrder.value = SORT_ORDER_ASC;
     }
   };
-
+  /**
+   * Method to get the ARIA sort attribute value for a column header.
+   *
+   * @param {Number} index - The index of the column.
+   * @returns {String} - The ARIA sort attribute value ('ascending', 'descending', or 'none').
+   */
   const getAriaSort = index => {
     if (sortKey.value === index) {
       return sortOrder.value === SORT_ORDER_ASC ? 'ascending' : 'descending';

From cb0d3aeb3e86b46e26c1ff5e8230a4d890dbc810 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Wed, 21 Aug 2024 10:45:40 +0530
Subject: [PATCH 50/78] reorganised file structure

---
 lib/KTable/KTableGridItem.vue                               | 2 +-
 lib/KTable/index.vue                                        | 6 +-----
 .../useSorting/__tests__/index.spec.js                      | 0
 lib/{composables => KTable}/useSorting/index.js             | 0
 4 files changed, 2 insertions(+), 6 deletions(-)
 rename lib/{composables => KTable}/useSorting/__tests__/index.spec.js (100%)
 rename lib/{composables => KTable}/useSorting/index.js (100%)

diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 99e3f35c6..8b9a1bb9c 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -18,7 +18,7 @@
 
 <script>
 
-  import { DATA_TYPE_NUMERIC } from '../composables/useSorting';
+  import { DATA_TYPE_NUMERIC } from './useSorting';
 
   export default {
     name: 'KTableGridItem',
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 451d2d6e2..fbe5c0c4d 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -87,11 +87,7 @@
 <script>
 
   import { ref, computed, watch } from '@vue/composition-api';
-  import useSorting, {
-    SORT_ORDER_ASC,
-    SORT_ORDER_DESC,
-    DATA_TYPE_OTHERS,
-  } from '../composables/useSorting';
+  import useSorting, { SORT_ORDER_ASC, SORT_ORDER_DESC, DATA_TYPE_OTHERS } from './useSorting';
   import KTableGridItem from './KTableGridItem.vue';
 
   export default {
diff --git a/lib/composables/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
similarity index 100%
rename from lib/composables/useSorting/__tests__/index.spec.js
rename to lib/KTable/useSorting/__tests__/index.spec.js
diff --git a/lib/composables/useSorting/index.js b/lib/KTable/useSorting/index.js
similarity index 100%
rename from lib/composables/useSorting/index.js
rename to lib/KTable/useSorting/index.js

From 109c7d30a32ef650609c949d680644801a7e3dd2 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Wed, 21 Aug 2024 10:51:12 +0530
Subject: [PATCH 51/78] updated test suite

---
 lib/KTable/useSorting/__tests__/index.spec.js | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/lib/KTable/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
index 74f825b68..a7d08b6e0 100644
--- a/lib/KTable/useSorting/__tests__/index.spec.js
+++ b/lib/KTable/useSorting/__tests__/index.spec.js
@@ -1,5 +1,4 @@
 import { ref } from '@vue/composition-api';
-import _ from 'lodash';
 import useSorting, {
   SORT_ORDER_ASC,
   SORT_ORDER_DESC,
@@ -41,18 +40,30 @@ describe('useSorting', () => {
 
     handleSort(0); // Sort by 'Name'
 
-    expect(sortedRows.value).toEqual(_.orderBy(rows.value, [row => row[0]], [SORT_ORDER_ASC]));
+    expect(sortedRows.value).toEqual([
+      ['Alice', 28, new Date(1992, 8, 10)],
+      ['Jane', 25, new Date(1995, 10, 20)],
+      ['John', 30, new Date(1990, 5, 15)],
+    ]);
   });
 
   it('should sort rows by numeric column in ascending and descending order', () => {
     const { handleSort, sortedRows, sortOrder } = useSorting(headers, rows, useLocalSorting);
 
     handleSort(1); // Sort by 'Age'
-    expect(sortedRows.value).toEqual(_.orderBy(rows.value, [row => row[1]], [SORT_ORDER_ASC]));
+    expect(sortedRows.value).toEqual([
+      ['Jane', 25, new Date(1995, 10, 20)],
+      ['Alice', 28, new Date(1992, 8, 10)],
+      ['John', 30, new Date(1990, 5, 15)],
+    ]);
     expect(sortOrder.value).toBe(SORT_ORDER_ASC);
 
     handleSort(1); // Sort by 'Age' again to toggle order
-    expect(sortedRows.value).toEqual(_.orderBy(rows.value, [row => row[1]], [SORT_ORDER_DESC]));
+    expect(sortedRows.value).toEqual([
+      ['John', 30, new Date(1990, 5, 15)],
+      ['Alice', 28, new Date(1992, 8, 10)],
+      ['Jane', 25, new Date(1995, 10, 20)],
+    ]);
     expect(sortOrder.value).toBe(SORT_ORDER_DESC);
   });
 
@@ -60,7 +71,11 @@ describe('useSorting', () => {
     const { handleSort, sortedRows } = useSorting(headers, rows, useLocalSorting);
 
     handleSort(2); // Sort by 'Birthdate'
-    expect(sortedRows.value).toEqual(_.orderBy(rows.value, [row => row[2]], [SORT_ORDER_ASC]));
+    expect(sortedRows.value).toEqual([
+      ['John', 30, new Date(1990, 5, 15)],
+      ['Alice', 28, new Date(1992, 8, 10)],
+      ['Jane', 25, new Date(1995, 10, 20)],
+    ]);
   });
 
   it('should not sort rows when sorting by a column with dataType "others"', () => {

From b66421f2ec89105bb6231aadcd5f8a429471fb9f Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Wed, 21 Aug 2024 10:57:05 +0530
Subject: [PATCH 52/78] updated comment

---
 lib/KTable/KTableGridItem.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 8b9a1bb9c..4179136cf 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -63,13 +63,12 @@
     },
     methods: {
       onKeydown(event) {
-        // Check if the focused element is a button or actionable item
+        // Ensures that clickable elements within a table cell, such as buttons and links, can be clicked with ENTER key. 
         const focusedElement = event.target;
         if (
           event.key === 'Enter' &&
           (focusedElement.tagName === 'BUTTON' ||
-            focusedElement.tagName === 'A' ||
-            focusedElement.hasAttribute('role'))
+            focusedElement.tagName === 'A')
         ) {
           focusedElement.click();
         } else {

From 25487db85873d14686b3087717abf54d1a15b9f0 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Wed, 21 Aug 2024 11:16:23 +0530
Subject: [PATCH 53/78] added comments

---
 lib/KTable/KTableGridItem.vue  |  5 ++---
 lib/KTable/index.vue           | 24 +++++++++++++++---------
 lib/KTable/useSorting/index.js |  3 ++-
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 4179136cf..891fc51f4 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -63,12 +63,11 @@
     },
     methods: {
       onKeydown(event) {
-        // Ensures that clickable elements within a table cell, such as buttons and links, can be clicked with ENTER key. 
+        // Ensures that clickable elements within a table cell, such as buttons and links, can be clicked with ENTER key.
         const focusedElement = event.target;
         if (
           event.key === 'Enter' &&
-          (focusedElement.tagName === 'BUTTON' ||
-            focusedElement.tagName === 'A')
+          (focusedElement.tagName === 'BUTTON' || focusedElement.tagName === 'A')
         ) {
           focusedElement.click();
         } else {
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index fbe5c0c4d..25e3e70c8 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -28,7 +28,7 @@
             @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
             @keydown="handleKeydown($event, -1, index)"
           >
-            <!--@slot Scoped slot for customizing the content of each header cell. Receives the following slot props - `header`: The current header object & `index`: The index of the current header.-->
+            <!--@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" :index="index">
               {{ header.label }}
@@ -70,7 +70,7 @@
           >
             <template #default="slotProps">
 
-              <!-- @slot Scoped slot for customizing the content of each data cell. Receives the following slot props - `content`: The content of the current cell,`rowIndex`: The index of the current row & `colIndex`: The index of the current column.-->
+              <!--@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>
@@ -159,8 +159,7 @@
     /* eslint-disable kolibri/vue-no-unused-properties */
     props: {
       /**
-       * An array of objects representing the headers of the table. Each header should have a label and a dataType.
-       * The dataType can be one of 'string', 'numeric', 'date', or 'others'. MinWidth and width are optional.
+       * An array of objects `{ label, dataType, minWidth, width }`representing the headers of the table. The `dataType` can be one of `'string'`, `'numeric'`, `'date'`, or `'others'`. `label` and `dataType` are required. `minWidth` and `width` are optional.
        */
       headers: {
         type: Array,
@@ -220,6 +219,15 @@
       },
     },
     methods: {
+      /**
+       * Takes care of
+       *  - keyboard navigation focus trap
+       *  - the arrow keys navigation flow
+       *  - the tab keys navigation flow
+       *  - access to focusable elements within a cell via tab and shift tab keys
+       *  - triggering sort on the enter key
+       *  - header highlight
+       */
       handleKeydown(event, rowIndex, colIndex) {
         const key = event.key;
         const totalRows = this.rows.length;
@@ -290,6 +298,7 @@
           case 'Tab':
             if (focusableElements.length > 0) {
               if (!event.shiftKey) {
+                // if navigating between more focusable elements within the cell
                 if (focusedElementIndex < focusableElements.length - 1) {
                   focusableElements[focusedElementIndex + 1].focus();
                   event.preventDefault();
@@ -307,6 +316,7 @@
                 }
               } else {
                 if (focusedElementIndex < focusableElements.length - 1) {
+                  // if navigating between more focusable elements within the cell
                   focusableElements[focusedElementIndex + 1].focus();
                   event.preventDefault();
                   return;
@@ -345,11 +355,7 @@
                 }
               }
             }
-            this.focusCell(nextRowIndex, nextColIndex, true);
-            this.focusedRowIndex = nextRowIndex === -1 ? null : nextRowIndex;
-            this.focusedColIndex = nextColIndex;
-            this.highlightHeader(nextColIndex);
-            event.preventDefault(); // Prevent default Tab behavior within the table
+
             break;
 
           default:
diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
index d5edda8a0..366fd2c27 100644
--- a/lib/KTable/useSorting/index.js
+++ b/lib/KTable/useSorting/index.js
@@ -24,7 +24,8 @@ export default function useSorting(headers, rows, useLocalSorting) {
    * If local sorting is disabled or no sort key is set, it returns the original rows.
    */
   const sortedRows = computed(() => {
-    if (!useLocalSorting.value || sortKey.value === null) return rows.value;
+    if (!useLocalSorting.value || sortKey.value === null || sortOrder.value === null)
+      return rows.value;
 
     return _.orderBy(rows.value, [row => row[sortKey.value]], [sortOrder.value]);
   });

From f960a475bd4a6fded93d75b23f6d30902f96946a Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Wed, 21 Aug 2024 11:36:21 +0530
Subject: [PATCH 54/78] updated rtl

---
 lib/KTable/KTableGridItem.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 891fc51f4..631ddb24d 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -58,7 +58,14 @@
         };
       },
       textAlign() {
-        return this.dataType === DATA_TYPE_NUMERIC ? 'right' : 'left';
+        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: {

From 3d3803a07a7bdbf22736fdf8e52e5ee1bac50f0c Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 22 Aug 2024 19:41:28 +0530
Subject: [PATCH 55/78] updated documentation

---
 docs/pages/ktable.vue | 25 ++++---------------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 1091e8214..05f29f541 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -16,7 +16,7 @@
       <!--Non-Sortable Table-->
       <h3>Table without sorting functionality</h3>
       <p>
-        This is an example to show how <code>KTable</code> can be used without any sorting functionality, for a simple table.
+        This is an example to show how <code>KTable</code> can be used without any sorting functionality, for a simple table. Use of slots is optional.
       </p>
       <!-- eslint-disable -->
       <DocsShowCode language="html">
@@ -78,7 +78,7 @@
       <!-- Frontend Sorting Example-->
       <h3>Table with Frontend Sorting</h3>
       <p>
-        The <code>KTable</code> can be used with local sorting functionality, allowing you to sort data on the client side without the need for server requests. This example demonstrates a table with local sorting enabled.
+        The <code>KTable</code> can be used with local 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>numeric</code>,<code>date</code> and <code>others</code>. Columns declared with <code>others</code> data type are not sortable. This example demonstrates a table with local sorting enabled.
       </p>
       <!-- eslint-disable -->
       <DocsShowCode language="html">
@@ -88,16 +88,7 @@
           caption="Table with built-in sorting"
           :useLocalSorting="true"
           sortable
-        >
-
-          <template #header="{ header, index }">
-            <span>{ header.label } (Backend)</span>
-          </template>
-          <template #cell="{ content, rowIndex, colIndex }">
-            <span v-if="colIndex === 2">{ content } (City)</span>
-            <span v-else>{ content }</span>
-          </template>
-        </KTable>
+        />
 
       </DocsShowCode>
 
@@ -127,15 +118,7 @@
           caption="Local Sorting Table"
           :useLocalSorting="true"
           sortable
-        >
-          <template #header="{ header, index }">
-            <span>{{ header.label }} (Backend)</span>
-          </template>
-          <template #cell="{ content, rowIndex, colIndex }">
-            <span v-if="colIndex === 2">{{ content }} (City)</span>
-            <span v-else>{{ content }}</span>
-          </template>
-        </KTable>
+        />
           <!-- eslint-enable -->
       </DocsShow>
 

From 8854e84b619a18a0f18a33956f002ac4474a27b1 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 23 Aug 2024 10:03:24 +0530
Subject: [PATCH 56/78] code refactor

---
 lib/KTable/index.vue | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 25e3e70c8..867dfa1b8 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -45,7 +45,7 @@
         <tr
           v-for="(row, rowIndex) in finalRows"
           :key="rowIndex"
-          :style="hoveredRowIndex === rowIndex || focusedRowIndex === rowIndex ? { backgroundColor: $themePalette.grey.v_50 } : {}"
+          :style="getRowStyle(rowIndex)"
           @mouseover="handleRowMouseOver(rowIndex)"
           @mouseleave="handleRowMouseLeave"
         >
@@ -61,8 +61,7 @@
             :class="{
               'sticky-column': colIndex === 0,
             }"
-            :style="[colIndex === 0 ? { backgroundColor: $themePalette.white } : {},(hoveredRowIndex === rowIndex || focusedRowIndex === rowIndex) && colIndex === 0 ? { backgroundColor: $themePalette.grey.v_50 } : {}
-            ]"
+            :style="getCellStyle(rowIndex, colIndex)"
             data-focus="true"
             role="gridcell"
             :aria-colindex="colIndex + 1"
@@ -217,6 +216,28 @@
           },
         };
       },
+      getRowStyle() {
+        return rowIndex => {
+          return this.hoveredRowIndex === rowIndex || this.focusedRowIndex === rowIndex
+            ? { backgroundColor: this.$themePalette.grey.v_50 }
+            : {};
+        };
+      },
+      getCellStyle() {
+        return (rowIndex, colIndex) => {
+          const styles = [];
+          if (colIndex === 0) {
+            styles.push({ backgroundColor: this.$themePalette.white });
+          }
+          if (
+            (this.hoveredRowIndex === rowIndex || this.focusedRowIndex === rowIndex) &&
+            colIndex === 0
+          ) {
+            styles.push({ backgroundColor: this.$themePalette.grey.v_50 });
+          }
+          return styles;
+        };
+      },
     },
     methods: {
       /**

From 1215d914a6f187576159074e8319a221c4743019 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 23 Aug 2024 19:24:19 +0530
Subject: [PATCH 57/78] minor change

---
 lib/KTable/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 867dfa1b8..98612a34e 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -25,7 +25,7 @@
             role="columnheader"
             data-focus="true"
             :aria-colindex="index + 1"
-            @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
+            @click="sortable ? handleSort(index) : null"
             @keydown="handleKeydown($event, -1, index)"
           >
             <!--@slot Scoped slot for customizing the content of each header cell. Provides a header object `header` and its column index `colIndex`.-->

From e43678ceaba1dc632ffd1607bfa6d4b32bde842a Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 25 Aug 2024 11:18:43 +0530
Subject: [PATCH 58/78] replaced queryselector with refs

---
 lib/KTable/index.vue | 45 +++++++++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 98612a34e..e50011016 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -9,6 +9,7 @@
         <tr>
           <th
             v-for="(header, index) in headers"
+            :ref="'header-' + index"
             :key="index"
             tabindex="0"
             :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
@@ -51,6 +52,7 @@
         >
           <KTableGridItem
             v-for="(col, colIndex) in row"
+            :ref="'cell-' + rowIndex + '-' + colIndex"
             :key="colIndex"
             :content="col"
             :dataType="headers[colIndex].dataType"
@@ -256,16 +258,7 @@
 
         let nextRowIndex = rowIndex;
         let nextColIndex = colIndex;
-        // Identify all focusable elements inside the current cell
-        const currentCell = this.getCell(rowIndex, colIndex);
-        const focusableElements = currentCell
-          ? Array.from(
-              currentCell.querySelectorAll(
-                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-              )
-            )
-          : [];
-        const focusedElementIndex = focusableElements.indexOf(document.activeElement);
+
         switch (key) {
           case 'ArrowUp':
             if (rowIndex === -1) {
@@ -316,7 +309,24 @@
               this.handleSort(colIndex);
             }
             break;
-          case 'Tab':
+          case 'Tab': {
+            // Identify all focusable elements inside the current cell
+            const currentCell = this.getCell(rowIndex, colIndex);
+
+            // Collect focusable elements using native DOM methods
+            const focusableElements = [];
+
+            if (currentCell) {
+              const buttons = currentCell.getElementsByTagName('button');
+              const links = currentCell.getElementsByTagName('a');
+              const inputs = currentCell.getElementsByTagName('input');
+              const selects = currentCell.getElementsByTagName('select');
+              const textareas = currentCell.getElementsByTagName('textarea');
+
+              focusableElements.push(...buttons, ...links, ...inputs, ...selects, ...textareas);
+            }
+
+            const focusedElementIndex = focusableElements.indexOf(document.activeElement);
             if (focusableElements.length > 0) {
               if (!event.shiftKey) {
                 // if navigating between more focusable elements within the cell
@@ -378,6 +388,7 @@
             }
 
             break;
+          }
 
           default:
             return;
@@ -393,11 +404,9 @@
       },
       getCell(rowIndex, colIndex) {
         if (rowIndex === -1) {
-          return this.$el.querySelector(`thead th:nth-child(${colIndex + 1})`);
+          return this.$refs[`header-${colIndex}`][0];
         } else {
-          return this.$el.querySelector(
-            `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${colIndex + 1})`
-          );
+          return this.$refs[`cell-${rowIndex}-${colIndex}`][0].$el;
         }
       },
       scrollCellIntoView(cell) {
@@ -426,11 +435,9 @@
       focusCell(rowIndex, colIndex) {
         let nextCell;
         if (rowIndex === -1) {
-          nextCell = this.$el.querySelector(`thead th:nth-child(${colIndex + 1})`);
+          nextCell = this.$refs[`header-${colIndex}`][0];
         } else {
-          nextCell = this.$el.querySelector(
-            `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${colIndex + 1})`
-          );
+          nextCell = this.$refs[`cell-${rowIndex}-${colIndex}`][0].$el;
         }
         // Ensured the focused cell is smoothly scrolled into view.
         if (nextCell) {

From 0b1b1dc91b1b032a119a16887943713564102026 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 25 Aug 2024 11:51:55 +0530
Subject: [PATCH 59/78] updated queryselector with refs

---
 lib/KTable/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index e50011016..e03c3271d 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -6,7 +6,7 @@
         {{ caption }}
       </caption>
       <thead>
-        <tr>
+        <tr ref="stickyHeader">
           <th
             v-for="(header, index) in headers"
             :ref="'header-' + index"
@@ -414,8 +414,8 @@
           cell.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
 
           // Adjust scroll position to account for sticky headers
-          const stickyHeader = this.$el.querySelector('.sticky-header');
-          const stickyColumn = this.$el.querySelector('.sticky-column');
+          const stickyHeader = this.$refs.stickyHeader;
+          const stickyColumn = this.$refs['header-0'][0];
           const tableWrapper = this.$refs.tableWrapper;
 
           const stickyHeaderHeight = stickyHeader ? stickyHeader.offsetHeight : 0;

From e014237b8879507be75ffabd433c4eed1084db00 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 25 Aug 2024 13:14:44 +0530
Subject: [PATCH 60/78] Added height prop to the table

---
 lib/KTable/index.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index e03c3271d..0adfeed35 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div ref="tableWrapper" class="k-table-wrapper">
+  <div ref="tableWrapper" class="k-table-wrapper" :style="tableWrapperStyle">
     <table class="k-table" role="grid">
       <caption v-if="caption">
         {{ caption }}
@@ -144,6 +144,11 @@
         if (header.width) style.width = header.width;
         return style;
       };
+      const tableWrapperStyle = computed(() => {
+        return {
+          height: props.height,
+        };
+      });
 
       return {
         sortKey,
@@ -155,6 +160,7 @@
         SORT_ORDER_DESC,
         DATA_TYPE_OTHERS,
         getHeaderStyle,
+        tableWrapperStyle,
       };
     },
     /* eslint-disable kolibri/vue-no-unused-properties */
@@ -201,6 +207,13 @@
         type: Boolean,
         default: true,
       },
+      /**
+       * Sets the height of the table. Default is `auto`.
+       */
+      height: {
+        type: String,
+        default: 'auto',
+      },
     },
     data() {
       return {
@@ -473,7 +486,6 @@
 .k-table-wrapper {
   overflow: auto;
   position: relative;
-  height:300px;
 }
 
 .k-table {

From 5be11a55ebe737f75c40b289aca7e4394edff91a Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Tue, 27 Aug 2024 15:36:02 +0530
Subject: [PATCH 61/78] added visuallyhidden class

---
 lib/KTable/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 0adfeed35..b4940d282 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -2,7 +2,7 @@
 
   <div ref="tableWrapper" class="k-table-wrapper" :style="tableWrapperStyle">
     <table class="k-table" role="grid">
-      <caption v-if="caption">
+      <caption v-if="caption" class="visuallyhidden">
         {{ caption }}
       </caption>
       <thead>

From 90558b5fa107468b7cdcd615a99c27fac2b10480 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Wed, 28 Aug 2024 08:44:38 +0530
Subject: [PATCH 62/78] updated height

---
 docs/pages/playground.vue |  1 +
 lib/KTable/index.vue      | 10 ++--------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 6816a9c5b..ea269cd8d 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -9,6 +9,7 @@
       :headers="headers"
       :rows="rows"
       caption="Local Sorting Table"
+      :style="{height: '300px'}"
       :useLocalSorting="true"
       sortable
     >
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index b4940d282..ad7a5aa7d 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div ref="tableWrapper" class="k-table-wrapper" :style="tableWrapperStyle">
+  <div ref="tableWrapper" class="k-table-wrapper">
     <table class="k-table" role="grid">
       <caption v-if="caption" class="visuallyhidden">
         {{ caption }}
@@ -144,12 +144,6 @@
         if (header.width) style.width = header.width;
         return style;
       };
-      const tableWrapperStyle = computed(() => {
-        return {
-          height: props.height,
-        };
-      });
-
       return {
         sortKey,
         sortOrder,
@@ -160,7 +154,6 @@
         SORT_ORDER_DESC,
         DATA_TYPE_OTHERS,
         getHeaderStyle,
-        tableWrapperStyle,
       };
     },
     /* eslint-disable kolibri/vue-no-unused-properties */
@@ -486,6 +479,7 @@
 .k-table-wrapper {
   overflow: auto;
   position: relative;
+  height:auto;
 }
 
 .k-table {

From 34479c373a1edc08c8cc348716151640dad73a05 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Wed, 28 Aug 2024 22:36:53 +0530
Subject: [PATCH 63/78] added emptymessage and updated documentation

---
 docs/pages/ktable.vue |  3 ++-
 lib/KTable/index.vue  | 13 +++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 05f29f541..63e173ddf 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -5,7 +5,8 @@
       <p>
         The <code>KTable</code> component is an accessible and customizable table component designed to handle a variety of data presentation needs. The component is suitable for both simple and complex data tables. It offers:
         <ul>
-          <li>Built-in sorting as well as integration with externally sorted data</li>
+          <li>Offers built-in sorting by default</li>
+          <li>Integrates with already sorted data</li>
           <li>Keyboard navigation</li>
           <li>Dynamic column resizing</li>
           <li>Sticky headers</li>
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index ad7a5aa7d..80c105894 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div ref="tableWrapper" class="k-table-wrapper">
-    <table class="k-table" role="grid">
+    <table v-if="!isTableEmpty" class="k-table" role="grid">
       <caption v-if="caption" class="visuallyhidden">
         {{ caption }}
       </caption>
@@ -80,6 +80,9 @@
         </tr>
       </tbody>
     </table>
+    <div v-else class="empty-message">
+      {{ emptyMessage }}
+    </div>
   </div>
 
 </template>
@@ -115,6 +118,7 @@
           return rows.value;
         }
       });
+      const isTableEmpty = computed(() => finalRows.value.length === 0);
 
       watch(
         () => props.rows,
@@ -154,6 +158,7 @@
         SORT_ORDER_DESC,
         DATA_TYPE_OTHERS,
         getHeaderStyle,
+        isTableEmpty,
       };
     },
     /* eslint-disable kolibri/vue-no-unused-properties */
@@ -201,11 +206,11 @@
         default: true,
       },
       /**
-       * Sets the height of the table. Default is `auto`.
+       * The message to display when the table is empty.
        */
-      height: {
+      emptyMessage: {
         type: String,
-        default: 'auto',
+        default: 'No data available',
       },
     },
     data() {

From 1208c1a8ce8bd30672a1deb4cc9cdbdbb06ab0cb Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 29 Aug 2024 14:22:06 +0530
Subject: [PATCH 64/78] updated API specs

---
 CHANGELOG.md              | 12 ------------
 docs/pages/playground.vue |  4 +---
 lib/KTable/index.vue      | 13 +++++++------
 3 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 06cb0b44d..26fbcaf53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -37,18 +37,6 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#650]: https://github.com/learningequality/kolibri-design-system/pull/650
 
-
-[#727]
-  - **Description:** Initial implementation of `KTable` component
-  - **Products impact:** New Component
-  - **Addresses:** [#328](https://github.com/learningequality/kolibri-design-system/issues/328)
-  - **Components:** KTable
-  - **Breaking:** No
-  - **Impacts a11y:**  Yes
-  - **Guidance:**
-[#727] https://github.com/learningequality/kolibri-design-system/pull/727
-
-
 - [#723]
   - **Description:** Updates $core-time value from 0.25s to 0.15s
   - **Products impact:** User experience - faster transitions
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index ea269cd8d..0d7ed480e 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -10,7 +10,6 @@
       :rows="rows"
       caption="Local Sorting Table"
       :style="{height: '300px'}"
-      :useLocalSorting="true"
       sortable
     >
       <template #header="{ header, index }">
@@ -32,8 +31,8 @@
       :headers="headersWithCustomWidths"
       :rows="backendRows"
       caption="Backend Sorting Table"
-      :useLocalSorting="false"
       sortable
+      disableDefaultSorting
       @changeSort="changeSortHandler"
     >
       <template #header="{ header, index }">
@@ -53,7 +52,6 @@
       :headers="headers"
       :rows="rows"
       caption="Non Sortable Table"
-      :sortable="false"
     />
 
   </div>
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 80c105894..bea63c0bc 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -102,7 +102,7 @@
     setup(props, { emit }) {
       const headers = ref(props.headers);
       const rows = ref(props.rows);
-      const useLocalSorting = ref(props.useLocalSorting);
+      const useLocalSorting = ref(props.sortable && !props.disableDefaultSorting);
       const {
         sortKey,
         sortOrder,
@@ -112,8 +112,8 @@
       } = useSorting(headers, rows, useLocalSorting);
 
       const finalRows = computed(() => {
-        if (props.sortable) {
-          return useLocalSorting.value ? sortedRows.value : rows.value;
+        if (props.sortable && !props.disableDefaultSorting) {
+          return sortedRows.value;
         } else {
           return rows.value;
         }
@@ -191,10 +191,11 @@
         type: String,
         required: true,
       },
+
       /**
-       * Enables or disables local sorting of the table data.
+       * Disables the default sorting when sortable is true. Facilitates integration with externally sorted data.
        */
-      useLocalSorting: {
+      disableDefaultSorting: {
         type: Boolean,
         default: false,
       },
@@ -203,7 +204,7 @@
        */
       sortable: {
         type: Boolean,
-        default: true,
+        default: false,
       },
       /**
        * The message to display when the table is empty.

From 8071b67fd8821bff00d90a5beecbf470eb39a197 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 29 Aug 2024 14:28:06 +0530
Subject: [PATCH 65/78] updated documentation

---
 docs/pages/ktable.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 63e173ddf..34d043531 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -17,7 +17,7 @@
       <!--Non-Sortable Table-->
       <h3>Table without sorting functionality</h3>
       <p>
-        This is an example to show how <code>KTable</code> can be used without any sorting functionality, for a simple table. Use of slots is optional.
+        This is an example to show how <code>KTable</code> can be used without any sorting functionality, as a simple table. Use of slots is optional.
       </p>
       <!-- eslint-disable -->
       <DocsShowCode language="html">
@@ -25,7 +25,6 @@
           :headers="headers"
           :rows="rows"
           caption="Non Sortable Table"
-          :sortable="false"
         >
 
           <template #header="{ header, index }">
@@ -64,7 +63,6 @@
           :headers="headers"
           :rows="rows"
           caption="Non-sortable table"
-          :sortable="false"
         >
           <template #header="{ header, index }">
             <span>{{ header.label }} (Backend)</span>
@@ -77,9 +75,9 @@
       </DocsShow>
        <!-- eslint-enable -->
       <!-- Frontend Sorting Example-->
-      <h3>Table with Frontend Sorting</h3>
+      <h3>Table with Default Sorting</h3>
       <p>
-        The <code>KTable</code> can be used with local 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>numeric</code>,<code>date</code> and <code>others</code>. Columns declared with <code>others</code> data type are not sortable. This example demonstrates a table with local sorting enabled.
+        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>numeric</code>,<code>date</code> and <code>others</code>. Columns declared with <code>others</code> data type are not sortable. This example demonstrates a table with default sorting enabled.
       </p>
       <!-- eslint-disable -->
       <DocsShowCode language="html">
@@ -87,7 +85,6 @@
           :headers="headers"
           :rows="rows"
           caption="Table with built-in sorting"
-          :useLocalSorting="true"
           sortable
         />
 
@@ -117,7 +114,6 @@
           :headers="headers"
           :rows="rows"
           caption="Local Sorting Table"
-          :useLocalSorting="true"
           sortable
         />
           <!-- eslint-enable -->

From 1c04d927291232a5987d5bdc66e954d28f0af707 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sat, 31 Aug 2024 16:40:29 +0530
Subject: [PATCH 66/78] fixed failing test

---
 lib/KTable/index.vue         | 5 +++--
 lib/__tests__/KTable.spec.js | 8 ++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index bea63c0bc..874b71a35 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -112,12 +112,13 @@
       } = useSorting(headers, rows, useLocalSorting);
 
       const finalRows = computed(() => {
-        if (props.sortable && !props.disableDefaultSorting) {
-          return sortedRows.value;
+        if (props.sortable) {
+          return useLocalSorting.value ? sortedRows.value : rows.value;
         } else {
           return rows.value;
         }
       });
+
       const isTableEmpty = computed(() => finalRows.value.length === 0);
 
       watch(
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 36cc77e10..f7c1603f5 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -52,7 +52,7 @@ describe('KTable.vue', () => {
       });
     });
   });
-  it('should emit changeSort event on header click when useLocalSorting is false', async () => {
+  it('should emit changeSort event on header click when disableDefaultSorting is true', async () => {
     const headers = [
       { label: 'Name', dataType: 'string' },
       { label: 'Age', dataType: 'numeric' },
@@ -67,7 +67,11 @@ describe('KTable.vue', () => {
       propsData: {
         headers,
         items,
-        useLocalSorting: false,
+        sortable: true,
+        disableDefaultSorting: true,
+      },
+      computed: {
+        isTableEmpty: () => false,
       },
     });
 

From 9fe5d2a0ef5ae24d3cc8fc7f4374c03f713b2a82 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sat, 31 Aug 2024 16:45:43 +0530
Subject: [PATCH 67/78] updated datatype of 'content'

---
 lib/KTable/KTableGridItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 631ddb24d..c08ceb0a8 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -24,7 +24,7 @@
     name: 'KTableGridItem',
     props: {
       content: {
-        type: [String, Number],
+        type: [String, Number, Boolean, Object, Array],
         required: true,
       },
       dataType: {

From 7764ef4b5f9b66ebd90d2ad389ae3d44252437a0 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 1 Sep 2024 23:02:21 +0530
Subject: [PATCH 68/78] added dataLoading prop

---
 lib/KTable/index.vue | 170 ++++++++++++++++++++++---------------------
 1 file changed, 89 insertions(+), 81 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 874b71a35..2f9f5af78 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -1,88 +1,89 @@
 <template>
 
   <div ref="tableWrapper" class="k-table-wrapper">
-    <table v-if="!isTableEmpty" class="k-table" role="grid">
-      <caption v-if="caption" class="visuallyhidden">
-        {{ caption }}
-      </caption>
-      <thead>
-        <tr ref="stickyHeader">
-          <th
-            v-for="(header, index) in headers"
-            :ref="'header-' + index"
-            :key="index"
-            tabindex="0"
-            :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
-            :class="{
-              [$computedClass(coreOutlineFocus)]: true,
-              sortable: sortable && header.dataType !== DATA_TYPE_OTHERS,
-              'sticky-header': true,
-              'sticky-column': index === 0,
-            }"
-            :style="[getHeaderStyle(header),
-                     sortKey === index ? { color: $themeBrand.primary.v_1000 } : { color: $themePalette.grey.v_800 },
-                     { backgroundColor: $themePalette.white } ,
-                     focusedColIndex === index ? { backgroundColor: $themePalette.grey.v_50 } : {}]"
-            role="columnheader"
-            data-focus="true"
-            :aria-colindex="index + 1"
-            @click="sortable ? handleSort(index) : null"
-            @keydown="handleKeydown($event, -1, 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" :index="index">
-              {{ header.label }}
-            </slot>
-            <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
-              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="sortKey === index ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
-              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="sortKey === index ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
-              <span v-else><KIcon icon="sortColumn" :color="$themePalette.grey.v_800" /></span>
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="(row, rowIndex) in finalRows"
-          :key="rowIndex"
-          :style="getRowStyle(rowIndex)"
-          @mouseover="handleRowMouseOver(rowIndex)"
-          @mouseleave="handleRowMouseLeave"
-        >
-          <KTableGridItem
-            v-for="(col, colIndex) in row"
-            :ref="'cell-' + rowIndex + '-' + colIndex"
-            :key="colIndex"
-            :content="col"
-            :dataType="headers[colIndex].dataType"
-            :minWidth="headers[colIndex].minWidth"
-            :width="headers[colIndex].width"
-            :rowIndex="rowIndex"
-            :colIndex="colIndex"
-            :class="{
-              'sticky-column': colIndex === 0,
-            }"
-            :style="getCellStyle(rowIndex, colIndex)"
-            data-focus="true"
-            role="gridcell"
-            :aria-colindex="colIndex + 1"
-            @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 }}
+    <template v-if="dataLoading">
+      <p><KCircularLoader /></p>
+    </template>
+    <template v-else>
+      <table v-if="!isTableEmpty" class="k-table" role="grid">
+        <caption v-if="caption" class="visuallyhidden">
+          {{ caption }}
+        </caption>
+        <thead>
+          <tr ref="stickyHeader">
+            <th
+              v-for="(header, index) in headers"
+              :ref="'header-' + index"
+              :key="index"
+              tabindex="0"
+              :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
+              :class="{
+                [$computedClass(coreOutlineFocus)]: true,
+                sortable: sortable && header.dataType !== DATA_TYPE_OTHERS,
+                'sticky-header': true,
+                'sticky-column': index === 0,
+              }"
+              :style="[getHeaderStyle(header),
+                       sortKey === index ? { color: $themeBrand.primary.v_1000 } : { color: $themePalette.grey.v_800 },
+                       { backgroundColor: $themePalette.white } ,
+                       focusedColIndex === index ? { backgroundColor: $themePalette.grey.v_50 } : {}]"
+              role="columnheader"
+              data-focus="true"
+              :aria-colindex="index + 1"
+              @click="sortable ? handleSort(index) : null"
+              @keydown="handleKeydown($event, -1, index)"
+            >
+              <slot name="header" :header="header" :index="index">
+                {{ header.label }}
               </slot>
-            </template>
-          </KTableGridItem>
-        </tr>
-      </tbody>
-    </table>
-    <div v-else class="empty-message">
-      {{ emptyMessage }}
-    </div>
+              <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
+                <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="sortKey === index ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
+                <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="sortKey === index ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
+                <span v-else><KIcon icon="sortColumn" :color="$themePalette.grey.v_800" /></span>
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(row, rowIndex) in finalRows"
+            :key="rowIndex"
+            :style="getRowStyle(rowIndex)"
+            @mouseover="handleRowMouseOver(rowIndex)"
+            @mouseleave="handleRowMouseLeave"
+          >
+            <KTableGridItem
+              v-for="(col, colIndex) in row"
+              :ref="'cell-' + rowIndex + '-' + colIndex"
+              :key="colIndex"
+              :content="col"
+              :dataType="headers[colIndex].dataType"
+              :minWidth="headers[colIndex].minWidth"
+              :width="headers[colIndex].width"
+              :rowIndex="rowIndex"
+              :colIndex="colIndex"
+              :class="{
+                'sticky-column': colIndex === 0,
+              }"
+              :style="getCellStyle(rowIndex, colIndex)"
+              data-focus="true"
+              role="gridcell"
+              :aria-colindex="colIndex + 1"
+              @keydown="handleKeydown($event, rowIndex, colIndex)"
+            >
+              <template #default="slotProps">
+                <slot name="cell" :content="slotProps.content" :rowIndex="rowIndex" :colIndex="colIndex" :row="row">
+                  {{ slotProps.content }}
+                </slot>
+              </template>
+            </KTableGridItem>
+          </tr>
+        </tbody>
+      </table>
+      <div v-else class="empty-message">
+        {{ emptyMessage }}
+      </div>
+    </template>
   </div>
 
 </template>
@@ -214,6 +215,13 @@
         type: String,
         default: 'No data available',
       },
+      /**
+       * Indicates whether the data is currently being loaded.
+       */
+      dataLoading: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

From feeb34a3203acd8b1db4be0da3aa3a7e920a16c7 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 1 Sep 2024 23:13:03 +0530
Subject: [PATCH 69/78] added refs to highlightHeader

---
 lib/KTable/index.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 2f9f5af78..1d5e06d1d 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -479,9 +479,12 @@
           : this.$themePalette.white;
       },
       highlightHeader(colIndex) {
-        const headers = this.$el.querySelectorAll('thead th');
-        headers.forEach((header, index) => {
-          this.setHighlightHeader(header, index === colIndex);
+        const headers = this.$refs;
+        Object.keys(headers).forEach(refKey => {
+          if (refKey.startsWith('header-')) {
+            const index = parseInt(refKey.split('-')[1], 10);
+            this.setHighlightHeader(headers[refKey][0], index === colIndex);
+          }
         });
       },
     },

From 8119361d4dddcb9ad645384fdd483c06daa25a15 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 1 Sep 2024 23:19:31 +0530
Subject: [PATCH 70/78] added more computed properties

---
 lib/KTable/index.vue | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 1d5e06d1d..119fabb33 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -16,17 +16,17 @@
               :ref="'header-' + index"
               :key="index"
               tabindex="0"
-              :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
+              :aria-sort="isColumnSortable(index) ? getAriaSort(index) : null"
               :class="{
                 [$computedClass(coreOutlineFocus)]: true,
-                sortable: sortable && header.dataType !== DATA_TYPE_OTHERS,
+                sortable: isColumnSortable(index),
                 'sticky-header': true,
                 'sticky-column': index === 0,
               }"
               :style="[getHeaderStyle(header),
-                       sortKey === index ? { color: $themeBrand.primary.v_1000 } : { color: $themePalette.grey.v_800 },
+                       isColumnSortActive(index) ? { color: $themeBrand.primary.v_1000 } : { color: $themePalette.grey.v_800 },
                        { backgroundColor: $themePalette.white } ,
-                       focusedColIndex === index ? { backgroundColor: $themePalette.grey.v_50 } : {}]"
+                       isColumnFocused(index) ? { backgroundColor: $themePalette.grey.v_50 } : {}]"
               role="columnheader"
               data-focus="true"
               :aria-colindex="index + 1"
@@ -36,9 +36,9 @@
               <slot name="header" :header="header" :index="index">
                 {{ header.label }}
               </slot>
-              <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
-                <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="sortKey === index ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
-                <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="sortKey === index ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
+              <span v-if="isColumnSortable(index)" class="sort-icon">
+                <span v-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="isColumnSortActive(index) ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
+                <span v-else-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="isColumnSortActive(index) ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
                 <span v-else><KIcon icon="sortColumn" :color="$themePalette.grey.v_800" /></span>
               </span>
             </th>
@@ -87,8 +87,6 @@
   </div>
 
 </template>
-
-
 <script>
 
   import { ref, computed, watch } from '@vue/composition-api';
@@ -261,6 +259,18 @@
           return styles;
         };
       },
+      isColumnSortActive() {
+        return colIndex => this.sortKey === colIndex;
+      },
+      isSortableColumn() {
+        return colIndex => this.headers[colIndex].dataType !== DATA_TYPE_OTHERS;
+      },
+      isColumnFocused() {
+        return colIndex => this.focusedColIndex === colIndex;
+      },
+      isColumnSortable() {
+        return colIndex => this.sortable && this.headers[colIndex].dataType !== DATA_TYPE_OTHERS;
+      },
     },
     methods: {
       /**

From a766e78ec85fe6cdaa6e8ded24c1bf04c819d694 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 5 Sep 2024 22:55:30 +0530
Subject: [PATCH 71/78] updated API and other changes

---
 docs/pages/ktable.vue                         |  8 ++++----
 docs/pages/playground.vue                     | 12 ++++++------
 lib/KTable/index.vue                          |  6 +++---
 lib/KTable/useSorting/__tests__/index.spec.js |  2 +-
 lib/KTable/useSorting/index.js                |  4 ++--
 lib/__tests__/KTable.spec.js                  | 12 ++++++------
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 34d043531..9c4384a03 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -43,7 +43,7 @@
       return {
         headers: [
           { label: 'Name', dataType: 'string' },
-          { label: 'Age', dataType: 'numeric' },
+          { label: 'Age', dataType: 'number' },
           { label: 'City', dataType: 'string' },
         ],
         rows: [
@@ -77,7 +77,7 @@
       <!-- Frontend Sorting Example-->
       <h3>Table with Default Sorting</h3>
       <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>numeric</code>,<code>date</code> and <code>others</code>. Columns declared with <code>others</code> data type are not sortable. This example demonstrates a table with default sorting enabled.
+        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>
       <!-- eslint-disable -->
       <DocsShowCode language="html">
@@ -95,7 +95,7 @@
       return {
         headers: [
           { label: 'Name', dataType: 'string' },
-          { label: 'Age', dataType: 'numeric' },
+          { label: 'Age', dataType: 'number' },
           { label: 'City', dataType: 'string' },
         ],
         rows: [
@@ -135,7 +135,7 @@
       return {
         headers: [
           { label: 'Name', dataType: 'string' },
-          { label: 'Age', dataType: 'numeric' },
+          { label: 'Age', dataType: 'number' },
           { label: 'City', dataType: 'string' },
         ],
         rows: [
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 0d7ed480e..f1941c838 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -12,7 +12,7 @@
       :style="{height: '300px'}"
       sortable
     >
-      <template #header="{ header, index }">
+      <template #header="{ header, colindex }">
         <span>{{ header.label }} (Local)</span>
       </template>
       <template #cell="{ content, rowIndex, colIndex }">
@@ -35,7 +35,7 @@
       disableDefaultSorting
       @changeSort="changeSortHandler"
     >
-      <template #header="{ header, index }">
+      <template #header="{ header, colindex }">
         <span>{{ header.label }} (Backend)</span>
       </template>
       <template #cell="{ content, rowIndex, colIndex }">
@@ -99,17 +99,17 @@
       return {
         headers: [
           { label: 'Name', dataType: 'string' },
-          { label: 'Age', dataType: 'numeric' },
+          { label: 'Age', dataType: 'number' },
           { label: 'City', dataType: 'string' },
           { label: 'Joined', dataType: 'date' },
-          { label: 'Misc', dataType: 'others' },
+          { label: 'Misc', dataType: 'undefined' },
         ],
         headersWithCustomWidths: [
           { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%' },
-          { label: 'Age', dataType: 'numeric', minWidth: '100px', width: '33%' },
+          { label: 'Age', dataType: 'number', minWidth: '100px', width: '33%' },
           { label: 'City', dataType: 'string', minWidth: '200px', width: '25%' },
           { label: 'Joined', dataType: 'date', minWidth: '150px', width: '20%' },
-          { label: 'Misc', dataType: 'others', minWidth: '100px', width: '20%' },
+          { label: 'Misc', dataType: 'undefined', minWidth: '100px', width: '20%' },
         ],
         rows: [
           ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 119fabb33..f81a89d73 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -33,7 +33,7 @@
               @click="sortable ? handleSort(index) : null"
               @keydown="handleKeydown($event, -1, index)"
             >
-              <slot name="header" :header="header" :index="index">
+              <slot name="header" :header="header" :colindex="index">
                 {{ header.label }}
               </slot>
               <span v-if="isColumnSortable(index)" class="sort-icon">
@@ -164,7 +164,7 @@
     /* eslint-disable kolibri/vue-no-unused-properties */
     props: {
       /**
-       * An array of objects `{ label, dataType, minWidth, width }`representing the headers of the table. The `dataType` can be one of `'string'`, `'numeric'`, `'date'`, or `'others'`. `label` and `dataType` are required. `minWidth` and `width` are optional.
+       * An array of objects `{ label, dataType, minWidth, width }`representing the headers of the table. The `dataType` can be one of `'string'`, `'number'`, `'date'`, or `'undefined'`. `label` and `dataType` are required. `minWidth` and `width` are optional.
        */
       headers: {
         type: Array,
@@ -173,7 +173,7 @@
           return value.every(
             header =>
               ['label', 'dataType'].every(key => key in header) &&
-              ['string', 'numeric', 'date', 'others'].includes(header.dataType)
+              ['string', 'number', 'date', 'undefined'].includes(header.dataType)
           );
         },
       },
diff --git a/lib/KTable/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
index a7d08b6e0..5449accb3 100644
--- a/lib/KTable/useSorting/__tests__/index.spec.js
+++ b/lib/KTable/useSorting/__tests__/index.spec.js
@@ -78,7 +78,7 @@ describe('useSorting', () => {
     ]);
   });
 
-  it('should not sort rows when sorting by a column with dataType "others"', () => {
+  it('should not sort rows when sorting by a column with dataType "undefined"', () => {
     const { handleSort, sortedRows, sortKey } = useSorting(headers, rows, useLocalSorting);
 
     handleSort(3); // Attempt to sort by 'Other'
diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
index 366fd2c27..fdb8fd8c5 100644
--- a/lib/KTable/useSorting/index.js
+++ b/lib/KTable/useSorting/index.js
@@ -4,9 +4,9 @@ import _ from 'lodash';
 export const SORT_ORDER_ASC = 'asc';
 export const SORT_ORDER_DESC = 'desc';
 export const DATA_TYPE_STRING = 'string';
-export const DATA_TYPE_NUMERIC = 'numeric';
+export const DATA_TYPE_NUMERIC = 'number';
 export const DATA_TYPE_DATE = 'date';
-export const DATA_TYPE_OTHERS = 'others';
+export const DATA_TYPE_OTHERS = 'undefined';
 
 /**
  * Custom hook for handling sorting logic in a table.
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index f7c1603f5..7b0bcc59d 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -5,7 +5,7 @@ describe('KTable.vue', () => {
   it('should mount the component', () => {
     const headers = [
       { label: 'Name', dataType: 'string' },
-      { label: 'Age', dataType: 'numeric' },
+      { label: 'Age', dataType: 'number' },
       { label: 'City', dataType: 'string' },
     ];
     const rows = [
@@ -17,7 +17,7 @@ describe('KTable.vue', () => {
       propsData: {
         headers,
         rows,
-        useLocalSorting: true,
+        sortable: true,
       },
     });
     const thElements = wrapper.findAll('th');
@@ -26,7 +26,7 @@ describe('KTable.vue', () => {
   it('renders the correct content in rows and columns', async () => {
     const headers = [
       { label: 'Name', dataType: 'string' },
-      { label: 'Age', dataType: 'numeric' },
+      { label: 'Age', dataType: 'number' },
       { label: 'Date', dataType: 'date' },
     ];
     const rows = [
@@ -55,7 +55,7 @@ describe('KTable.vue', () => {
   it('should emit changeSort event on header click when disableDefaultSorting is true', async () => {
     const headers = [
       { label: 'Name', dataType: 'string' },
-      { label: 'Age', dataType: 'numeric' },
+      { label: 'Age', dataType: 'number' },
       { label: 'City', dataType: 'string' },
     ];
     const items = [
@@ -82,7 +82,7 @@ describe('KTable.vue', () => {
   it('should handle sticky headers and columns', async () => {
     const headers = [
       { label: 'Name', dataType: 'string' },
-      { label: 'Age', dataType: 'numeric' },
+      { label: 'Age', dataType: 'number' },
     ];
     const rows = [
       ['John', 30],
@@ -117,7 +117,7 @@ describe('KTable.vue', () => {
   it('should handle keyboard navigation within the table', async () => {
     const headers = [
       { label: 'Name', dataType: 'string' },
-      { label: 'Age', dataType: 'numeric' },
+      { label: 'Age', dataType: 'number' },
     ];
     const rows = [
       ['John', 30],

From 0565bcde4b0a238b06ead78225d7c0fec0950b8a Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 5 Sep 2024 22:57:24 +0530
Subject: [PATCH 72/78] changelog changes

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1167d12c..be89c71f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -182,6 +182,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#650]: https://github.com/learningequality/kolibri-design-system/pull/650
 
+
 - [#723]
   - **Description:** Updates $core-time value from 0.25s to 0.15s
   - **Products impact:** User experience - faster transitions
@@ -251,7 +252,6 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [719]: https://github.com/learningequality/kolibri-design-system/pull/719
 
-
 - [#718]
   - **Description:** This pull request resolves failing `KDateCalendar` component tests that occurred on the last day of the month in open pull requests by setting dates manually in the tests. Additionally, the `KDateCalendar` is updated to show the month of the `lastAllowedDate` property.
   - **Products impact:** none

From f39cd22bf11b0ed203db0802aae6c45f2bd6f367 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 5 Sep 2024 22:58:32 +0530
Subject: [PATCH 73/78] changelog changes

---
 CHANGELOG.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be89c71f3..91a4e5314 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -217,7 +217,6 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#728]: https://github.com/learningequality/kolibri-design-system/pull/728
 
-
 - [#738]
   - **Description:** Bump KDS version to 5.0.0-rc2.
   - **Products impact:** -.
@@ -240,7 +239,6 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [705]: https://github.com/learningequality/kolibri-design-system/pull/705
 
-
 - [719]
   - **Description:** Removes KResponsiveWindowMixin.
   - **Products impact:** removed API.
@@ -2102,4 +2100,4 @@ This was the first release of the Design System, with documentation written in a
 
 ## Version 0.1.0
 
-The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base [in version 0.6](https://github.com/learningequality/kolibri/tree/release-v0.6.x/kolibri/plugins/style_guide). This remained until [version 0.13](https://github.com/learningequality/kolibri/tree/release-v0.13.x/kolibri/plugins/style_guide) after which the content was migrated to the [current site](https://design-system.learningequality.org/ 'Kolibri Design System Documentation').
+The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base [in version 0.6](https://github.com/learningequality/kolibri/tree/release-v0.6.x/kolibri/plugins/style_guide). This remained until [version 0.13](https://github.com/learningequality/kolibri/tree/release-v0.13.x/kolibri/plugins/style_guide) after which the content was migrated to the [current site](https://design-system.learningequality.org/ 'Kolibri Design System Documentation').
\ No newline at end of file

From eb923d275021f1d0ba3b97c9cd59a2f6165dbc0c Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 5 Sep 2024 23:07:39 +0530
Subject: [PATCH 74/78] Added header align same as content alignment

---
 lib/KTable/index.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index f81a89d73..b8546f56c 100644
--- 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;
+      },
     },
   };
 

From 34dcfbc1c00cccfc69a35c9c89bc07c72f7b077e Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 5 Sep 2024 23:09:04 +0530
Subject: [PATCH 75/78] Cleaned up playground page

---
 docs/pages/playground.vue | 224 +++++---------------------------------
 1 file changed, 30 insertions(+), 194 deletions(-)

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index f1941c838..dc02d415d 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -1,58 +1,28 @@
 <template>
 
-  <div id="app">
-    <h1>KTable Component Example</h1>
-    <!-- eslint-disable -->
-    <!-- Local Sorting Table Example -->
-    <h2>Local Sorting Table</h2>
-    <KTable
-      :headers="headers"
-      :rows="rows"
-      caption="Local Sorting Table"
-      :style="{height: '300px'}"
-      sortable
-    >
-      <template #header="{ header, colindex }">
-        <span>{{ header.label }} (Local)</span>
-      </template>
-      <template #cell="{ content, rowIndex, colIndex }">
-        <span v-if="colIndex === 1">{{ content }} years old</span>
-        <span v-else-if="colIndex === 4"><KButton>Test</KButton></span>
-        <span v-else>{{ content }}</span>
-      </template>
-    </KTable>
-
-    <!-- Backend Sorting Table Example -->
-    <h2>Backend Sorting Table(with Custom Widths)</h2>
-    <div ref="loadingArea" role="status" aria-live="polite" class="sr-only">
-      {{ loadingMessage }}
-    </div>
-    <KTable
-      :headers="headersWithCustomWidths"
-      :rows="backendRows"
-      caption="Backend Sorting Table"
-      sortable
-      disableDefaultSorting
-      @changeSort="changeSortHandler"
-    >
-      <template #header="{ header, colindex }">
-        <span>{{ header.label }} (Backend)</span>
-      </template>
-      <template #cell="{ content, rowIndex, colIndex }">
-        <span v-if="colIndex === 2">{{ content }} (City)</span>
-        <span v-else>{{ content }}</span>
-      </template>
-    </KTable>
-
-    <div v-if="isLoading" class="loading-overlay">
-      Data is loading. Please wait...
-    </div>
-    <h2>Non Sortable Table</h2>
-    <KTable
-      :headers="headers"
-      :rows="rows"
-      caption="Non Sortable Table"
-    />
+  <!--
+    Playground: A private page for components development
+    *****************************************************
+    Place a component you're working on here and see it
+    live on http://localhost:4000/playground
+
+    Please do not commit your local updates of this file.
+  -->
+  <div style="padding: 24px">
+    <!-- 
+      Example: Uncomment lines bellow, change something
+      in lib/KBreadcrumbs.vue and see the updates reflected
+      on this page
+    -->
+    <!-- <KBreadcrumbs
+      :items="[
+        { text: 'Global Digital Library', link: { path: '#' } },
+        { text: 'English', link: { path: '#' } },
+        { text: 'Level 2 ', link: { path: '#' } },
+      ]"
+    /> -->
+
+    <!-- Play around with your component here: -->
 
   </div>
 
@@ -62,150 +32,16 @@
 <script>
 
   /*
-               Playground is a Vue component too,
-               so you can also use `data`, `methods`, etc.
-               as usual if helpful
-             */
-  import { ref } from '@vue/composition-api';
-  import KTable from '../../lib/KTable';
-
+    Playground is a Vue component too,
+    so you can also use `data`, `methods`, etc.
+    as usual if helpful
+  */
   export default {
     name: 'Playground',
-    components: {
-      KTable,
-    },
-    setup() {
-      const loadingArea = ref(null);
-      const isLoading = ref(false);
-      const loadingMessage = ref('');
-
-      const updateLoadingMessage = message => {
-        loadingMessage.value = message;
-        if (loadingArea.value) {
-          loadingArea.value.setAttribute('aria-live', 'off'); // Temporarily disable live region
-          void loadingArea.value.offsetWidth; // Force reflow
-          loadingArea.value.setAttribute('aria-live', 'polite'); // Re-enable live region
-        }
-      };
-
-      return {
-        loadingArea,
-        isLoading,
-        loadingMessage,
-        updateLoadingMessage,
-      };
-    },
     data() {
-      return {
-        headers: [
-          { label: 'Name', dataType: 'string' },
-          { label: 'Age', dataType: 'number' },
-          { label: 'City', dataType: 'string' },
-          { label: 'Joined', dataType: 'date' },
-          { label: 'Misc', dataType: 'undefined' },
-        ],
-        headersWithCustomWidths: [
-          { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%' },
-          { label: 'Age', dataType: 'number', minWidth: '100px', width: '33%' },
-          { label: 'City', dataType: 'string', minWidth: '200px', width: '25%' },
-          { label: 'Joined', dataType: 'date', minWidth: '150px', width: '20%' },
-          { label: 'Misc', dataType: 'undefined', minWidth: '100px', width: '20%' },
-        ],
-        rows: [
-          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
-          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
-          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
-          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
-          ['Michael Brown', 45, 'Phoenix', '2019-11-05T00:00:00Z', 'N/A'],
-          ['Emily Davis', 27, 'Philadelphia', '2021-08-14T00:00:00Z', 'N/A'],
-          ['Christopher Wilson', 33, 'San Antonio', '2022-04-22T00:00:00Z', 'N/A'],
-          ['Jessica Martinez', 29, 'San Diego', '2020-09-30T00:00:00Z', 'N/A'],
-          ['Daniel Anderson', 40, 'Dallas', '2018-06-25T00:00:00Z', 'N/A'],
-          ['Laura Thomas', 31, 'San Jose', '2021-03-18T00:00:00Z', 'N/A'],
-          ['Matthew Jackson', 26, 'Austin', '2022-07-12T00:00:00Z', 'N/A'],
-          ['Sarah White', 35, 'Fort Worth', '2020-02-27T00:00:00Z', 'N/A'],
-          ['David Harris', 38, 'Columbus', '2019-10-19T00:00:00Z', 'N/A'],
-          ['Sophia Clark', 24, 'Charlotte', '2023-01-05T00:00:00Z', 'N/A'],
-          ['James Lewis', 32, 'San Francisco', '2021-05-23T00:00:00Z', 'N/A'],
-          ['Olivia Robinson', 28, 'Indianapolis', '2022-11-11T00:00:00Z', 'N/A'],
-          ['Benjamin Walker', 37, 'Seattle', '2020-12-03T00:00:00Z', 'N/A'],
-        ],
-        backendRows: [
-          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
-          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
-          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
-          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
-        ],
-      };
-    },
-    methods: {
-      async changeSortHandler(index, sortOrder) {
-        this.isLoading = true;
-        this.updateLoadingMessage('Data is loading. Please wait...');
-
-        this.$nextTick(() => {
-          if (this.$refs.loadingArea) {
-            this.$refs.loadingArea.focus();
-          }
-        });
-
-        // Simulate fetching sorted data from backend
-        console.log('Fetching sorted data from backend for column:', index, 'order:', sortOrder);
-
-        setTimeout(() => {
-          // For demo purposes, we just reverse the rows
-          this.backendRows = [...this.backendRows].reverse();
-          this.isLoading = false;
-          this.updateLoadingMessage('Data loaded successfully.');
-
-          setTimeout(() => {
-            this.updateLoadingMessage('');
-          }, 5000);
-        }, 10000); // Simulate a 10 second delay for fetching data
-      },
+      return {};
     },
+    methods: {},
   };
 
-</script>
-
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  margin-top: 60px;
-}
-
-h1, h2 {
-  margin: 20px 0;
-}
-
-.loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5em;
-  z-index: 5;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-</style>
-
+</script>
\ No newline at end of file

From 90bd0233b6af35050a3cb5dc3e4aff4259555807 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 5 Sep 2024 23:13:03 +0530
Subject: [PATCH 76/78] fixed linting errors

---
 docs/pages/ktable.vue | 4 ++--
 lib/KTable/index.vue  | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 9c4384a03..7a49a3a46 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -73,13 +73,13 @@
           </template>
         </KTable>
       </DocsShow>
-       <!-- eslint-enable -->
+
       <!-- Frontend Sorting Example-->
       <h3>Table with Default Sorting</h3>
       <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>
-      <!-- eslint-disable -->
+    
       <DocsShowCode language="html">
         <KTable
           :headers="headers"
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index b8546f56c..9129c0a6d 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -88,6 +88,8 @@
   </div>
 
 </template>
+
+
 <script>
 
   import { ref, computed, watch } from '@vue/composition-api';

From d41aef2c978ede4c7979968cbce911be734fe833 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sat, 7 Sep 2024 08:35:01 +0530
Subject: [PATCH 77/78] changelog.md reverted

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91a4e5314..7671e50b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2100,4 +2100,4 @@ This was the first release of the Design System, with documentation written in a
 
 ## Version 0.1.0
 
-The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base [in version 0.6](https://github.com/learningequality/kolibri/tree/release-v0.6.x/kolibri/plugins/style_guide). This remained until [version 0.13](https://github.com/learningequality/kolibri/tree/release-v0.13.x/kolibri/plugins/style_guide) after which the content was migrated to the [current site](https://design-system.learningequality.org/ 'Kolibri Design System Documentation').
\ No newline at end of file
+The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base [in version 0.6](https://github.com/learningequality/kolibri/tree/release-v0.6.x/kolibri/plugins/style_guide). This remained until [version 0.13](https://github.com/learningequality/kolibri/tree/release-v0.13.x/kolibri/plugins/style_guide) after which the content was migrated to the [current site](https://design-system.learningequality.org/ 'Kolibri Design System Documentation').

From 7acfa97775799aa8cde3b3be2f6c7a76f0c7ba88 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sat, 7 Sep 2024 09:14:31 +0530
Subject: [PATCH 78/78] passed textAlign to KTableGridItem

---
 docs/pages/ktable.vue         |  6 +++---
 lib/KTable/KTableGridItem.vue | 20 ++++----------------
 lib/KTable/index.vue          |  5 ++++-
 3 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 7a49a3a46..b2e28580f 100644
--- 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
index c08ceb0a8..4391e2ef7 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -18,8 +18,6 @@
 
 <script>
 
-  import { DATA_TYPE_NUMERIC } from './useSorting';
-
   export default {
     name: 'KTableGridItem',
     props: {
@@ -27,10 +25,6 @@
         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
index 9129c0a6d..4d41e05db 100644
--- 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>