From 524ebca53323a6b31dfd9e19947dd7d92ecbbe48 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Wed, 13 Nov 2024 22:59:08 +0530
Subject: [PATCH 01/17] refac: change handler for default sorting, add more
 tests and introduce new props for KTable

---
 lib/KTable/index.vue                          |  61 ++++++++---
 lib/KTable/useSorting/__tests__/index.spec.js | 102 ++++++++++++++----
 lib/KTable/useSorting/index.js                |  17 ++-
 3 files changed, 143 insertions(+), 37 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index a8acb8814..121a96eb5 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -175,16 +175,22 @@
     /* 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'`, `'number'`, `'date'`, or `'undefined'`. `label` and `dataType` are required. `minWidth` and `width` are optional.
+       * An array of objects `{ label, dataType, minWidth, width, columnId }`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. `columnId` is an unique identifier for the column, and can be a `number` or a `string`.
        */
       headers: {
         type: Array,
         required: true,
         validator: function(value) {
-          return value.every(
-            header =>
-              ['label', 'dataType'].every(key => key in header) &&
-              ['string', 'number', 'date', 'undefined'].includes(header.dataType)
+          const uniqueColumnIds = new Set(value.map(h => h.columnId));
+
+          return (
+            uniqueColumnIds.length == value.length &&
+            value.every(
+              header =>
+                ['label', 'dataType', 'columnId'].every(key => key in header) &&
+                ['string', 'number', 'date', 'undefined'].includes(header.dataType) &&
+                ['string', 'number'].includes(typeof header.columnId)
+            )
           );
         },
       },
@@ -202,14 +208,6 @@
         type: String,
         required: true,
       },
-
-      /**
-       * Disables the default sorting when sortable is true. Facilitates integration with externally sorted data.
-       */
-      disableDefaultSorting: {
-        type: Boolean,
-        default: false,
-      },
       /**
        * Enables or disables sorting functionality for the table headers.
        */
@@ -231,6 +229,26 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * Indicates whether the table is to be sorted by default by any header or not. By default it is an empty object which means no default sorting is to be used. It accepts a configuration object `{ columnId, direction }`. `columnId` references a `columnId` defined for a header in `headers`. This specifies a column by which the table should be sorted when initially loaded. `direction` can be `'asc'` for ascending or `'desc'` for descending sort direction.
+       */
+      defaultSort: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+        validator: {
+          columnId: {
+            required: true,
+            validator: value => value !== null && ['string', 'number'].includes(typeof value),
+          },
+          direction: {
+            type: String,
+            required: false,
+            default: 'asc',
+            validator: value => ['asc', 'desc'].includes(value),
+          },
+        },
+      },
     },
     data() {
       return {
@@ -283,6 +301,23 @@
         return colIndex => this.sortable && this.headers[colIndex].dataType !== DATA_TYPE_OTHERS;
       },
     },
+    watch: {
+      // Use a watcher on props to perform validation on props.
+      // This is required as we need access to multiple props simultaneously in some validations.
+      $props: {
+        immediate: true,
+        handler() {
+          if (this.defaultSort != {}) {
+            const allHeaderColumnIds = this.headers.map(h => h.columnId);
+            if (!allHeaderColumnIds.includes(this.defaultSort.columnId)) {
+              console.error(
+                `The columnId used for default sorting is ${this.defaultSort.columnId}, but the same was not found to be defined in any headers.`
+              );
+            }
+          }
+        },
+      },
+    },
     methods: {
       /**
        * Takes care of
diff --git a/lib/KTable/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
index bbaebe33a..829400b8f 100644
--- a/lib/KTable/useSorting/__tests__/index.spec.js
+++ b/lib/KTable/useSorting/__tests__/index.spec.js
@@ -9,14 +9,14 @@ import useSorting, {
 } from '../';
 
 describe('useSorting', () => {
-  let headers, rows, useLocalSorting;
+  let headers, rows, useDefaultSorting;
 
   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 },
+      { label: 'Name', dataType: DATA_TYPE_STRING, columnId: 'name' },
+      { label: 'Age', dataType: DATA_TYPE_NUMERIC, columnId: 'age' },
+      { label: 'Birthdate', dataType: DATA_TYPE_DATE, columnId: 'birthdate' },
+      { label: 'Other', dataType: DATA_TYPE_OTHERS, columnId: 'other' },
     ]);
 
     rows = ref([
@@ -25,21 +25,84 @@ describe('useSorting', () => {
       ['Alice', 28, new Date(1992, 8, 10)],
     ]);
 
-    useLocalSorting = ref(true);
+    // Disable default sorting by default
+    useDefaultSorting = ref({
+      index: -1,
+    });
   });
 
-  it('should return rows unsorted when useLocalSorting is false', () => {
-    useLocalSorting.value = false;
-
-    const { sortedRows } = useSorting(headers, rows, useLocalSorting);
-    expect(sortedRows.value).toEqual(rows.value);
+  describe('default sorting', () => {
+    it('should return rows unsorted by default', () => {
+      useDefaultSorting.value = {
+        index: -1,
+      };
+
+      const { sortedRows } = useSorting(headers, rows, useDefaultSorting);
+      expect(sortedRows.value).toEqual(rows.value);
+    });
+
+    it('should sort the rows in ascending correctly for string values', () => {
+      useDefaultSorting.value = {
+        index: 0,
+        direction: 'asc',
+      };
+
+      const { sortedRows } = useSorting(headers, rows, useDefaultSorting);
+      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 the rows in descending order correctly for string values', () => {
+      useDefaultSorting.value = {
+        index: 0,
+        direction: 'desc',
+      };
+
+      const { sortedRows } = useSorting(headers, rows, useDefaultSorting);
+      expect(sortedRows.value).toEqual([
+        ['John', 30, new Date(1990, 5, 15)],
+        ['Jane', 25, new Date(1995, 10, 20)],
+        ['Alice', 28, new Date(1992, 8, 10)],
+      ]);
+    });
+
+    it("should sort the rows correctly for numeric values", () => {
+      useDefaultSorting.value = {
+        index: 1,
+        direction: 'asc',
+      };
+
+      const { sortedRows } = useSorting(headers, rows, useDefaultSorting);
+      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)],
+      ]);
+    })
+
+
+    it("should sort the rows correctly for date values", () => {
+      useDefaultSorting.value = {
+        index: 2,
+        direction: 'asc',
+      };
+
+      const { sortedRows } = useSorting(headers, rows, useDefaultSorting);
+      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 sort rows by string column in ascending order', () => {
-    const { handleSort, sortedRows } = useSorting(headers, rows, useLocalSorting);
+    const { handleSort, sortedRows } = useSorting(headers, rows, useDefaultSorting);
 
     handleSort(0); // Sort by 'Name'
-
     expect(sortedRows.value).toEqual([
       ['Alice', 28, new Date(1992, 8, 10)],
       ['Jane', 25, new Date(1995, 10, 20)],
@@ -48,7 +111,7 @@ describe('useSorting', () => {
   });
 
   it('should sort rows by numeric column in ascending then descending order then back to default order', () => {
-    const { handleSort, sortedRows, sortOrder } = useSorting(headers, rows, useLocalSorting);
+    const { handleSort, sortedRows, sortOrder } = useSorting(headers, rows, useDefaultSorting);
 
     handleSort(1); // Sort by 'Age'
     expect(sortedRows.value).toEqual([
@@ -66,8 +129,7 @@ describe('useSorting', () => {
     ]);
     expect(sortOrder.value).toBe(SORT_ORDER_DESC);
 
-    handleSort(1); //Sort by 'Age' again to default order
-
+    handleSort(1); // Sort by 'Age' again to default order
     expect(sortedRows.value).toEqual([
       ['John', 30, new Date(1990, 5, 15)],
       ['Jane', 25, new Date(1995, 10, 20)],
@@ -77,7 +139,7 @@ describe('useSorting', () => {
   });
 
   it('should sort rows by date column in ascending order', () => {
-    const { handleSort, sortedRows } = useSorting(headers, rows, useLocalSorting);
+    const { handleSort, sortedRows } = useSorting(headers, rows, useDefaultSorting);
 
     handleSort(2); // Sort by 'Birthdate'
     expect(sortedRows.value).toEqual([
@@ -88,7 +150,7 @@ describe('useSorting', () => {
   });
 
   it('should not sort rows when sorting by a column with dataType "undefined"', () => {
-    const { handleSort, sortedRows, sortKey } = useSorting(headers, rows, useLocalSorting);
+    const { handleSort, sortedRows, sortKey } = useSorting(headers, rows, useDefaultSorting);
 
     handleSort(3); // Attempt to sort by 'Other'
     expect(sortedRows.value).toEqual(rows.value);
@@ -96,7 +158,7 @@ describe('useSorting', () => {
   });
 
   it('should return correct aria-sort attribute based on current sorting', () => {
-    const { handleSort, getAriaSort } = useSorting(headers, rows, useLocalSorting);
+    const { handleSort, getAriaSort } = useSorting(headers, rows, useDefaultSorting);
 
     expect(getAriaSort(0)).toBe('none');
 
@@ -108,7 +170,7 @@ describe('useSorting', () => {
   });
 
   it('should reset sortKey and sortOrder when a new column is sorted', () => {
-    const { handleSort, sortKey, sortOrder } = useSorting(headers, rows, useLocalSorting);
+    const { handleSort, sortKey, sortOrder } = useSorting(headers, rows, useDefaultSorting);
 
     handleSort(0); // Sort by 'Name'
     expect(sortKey.value).toBe(0);
diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
index 4b819b996..e7384fa9d 100644
--- a/lib/KTable/useSorting/index.js
+++ b/lib/KTable/useSorting/index.js
@@ -13,10 +13,11 @@ export const DATA_TYPE_OTHERS = 'undefined';
  *
  * @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.
+ * @param {Ref<Object>} useDefaultSorting - Reactive reference to a string indicating if default sorting should be used.
+ * It has the properties as 'index' denoting the row index to be used for default sorting, and 'direction' denoting the sort order.
  * @returns {Object} - An object containing reactive references and methods for sorting.
  */
-export default function useSorting(headers, rows, useLocalSorting) {
+export default function useSorting(headers, rows, useDefaultSorting) {
   const sortKey = ref(null);
   const sortOrder = ref(null);
   /**
@@ -24,11 +25,19 @@ 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 || sortOrder.value === null)
-      return rows.value;
+    // No sort key or value has been explicity set till now
+    if (sortKey.value === null || sortOrder.value === null) {
+      if (useDefaultSorting.value.index === -1) return rows.value;
+      return _.orderBy(
+        rows.value,
+        [row => row[useDefaultSorting.value.index]],
+        [useDefaultSorting.value.direction]
+      );
+    }
 
     return _.orderBy(rows.value, [row => row[sortKey.value]], [sortOrder.value]);
   });
+
   /**
    * Method to handle sorting when a column header is clicked.
    *

From 6d847a546989f91ee662ed3aa37288f363874d27 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Wed, 13 Nov 2024 23:33:21 +0530
Subject: [PATCH 02/17] update documentation

---
 docs/pages/ktable.vue                         | 86 ++++++++++++-------
 lib/KTable/index.vue                          | 18 +++-
 lib/KTable/useSorting/__tests__/index.spec.js |  9 +-
 3 files changed, 73 insertions(+), 40 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 38878bea8..e20a6257f 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -33,9 +33,9 @@
     data() {
       return {
         headers: [
-          { label: 'Name', dataType: 'string' },
-          { label: 'Age', dataType: 'number' },
-          { label: 'City', dataType: 'string' },
+          { label: 'Name', dataType: 'string', columnId: 'name' },
+          { label: 'Age', dataType: 'number', columnId: 'age' },
+          { label: 'City', dataType: 'string', columnId: 'city' },
         ],
         rows: [
           ['John Doe', 28, 'New York'],
@@ -58,9 +58,9 @@
       </DocsShow>
 
       <!-- Frontend Sorting Example-->
-      <h3>Table with Default Sorting</h3>
+      <h3>Table with 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.
+        The <code>KTable</code> can be used with 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 sorting enabled.
       </p>
 
       <DocsShowCode language="html">
@@ -77,9 +77,9 @@
     data() {
       return {
         headers: [
-          { label: 'Name', dataType: 'string' },
-          { label: 'Age', dataType: 'number' },
-          { label: 'City', dataType: 'string' },
+          { label: 'Name', dataType: 'string', columnId: 'name' },
+          { label: 'Age', dataType: 'number', columnId: 'age' },
+          { label: 'City', dataType: 'string', columnId: 'city' },
         ],
         rows: [
           ['John Doe', 28, 'New York'],
@@ -130,11 +130,11 @@
     data() {
       return {
         slotHeaders: [
-          { label: 'Name', dataType: 'string' },
-          { label: 'Age', dataType: 'number' },
-          { label: 'City', dataType: 'string' },
-          { label: 'Joined', dataType: 'date' },
-          { label: 'Misc', dataType: 'undefined' },
+          { label: 'Name', dataType: 'string', columnId: 'name' },
+          { label: 'Age', dataType: 'number', columnId: 'age' },
+          { label: 'City', dataType: 'string', columnId: 'city' },
+          { label: 'Joined', dataType: 'date', columnId: 'joined' },
+          { label: 'Misc', dataType: 'undefined', columnId: 'misc' },
         ],
         slotRows: [
           ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
@@ -184,11 +184,23 @@
     data() {
       return {
         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%' },
+          { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%', columnId: 'name' },
+          { label: 'Age', dataType: 'number', minWidth: '100px', width: '33%', columnId: 'age' },
+          { label: 'City', dataType: 'string', minWidth: '200px', width: '25%', columnId: 'city' },
+          {
+            label: 'Joined',
+            dataType: 'date',
+            minWidth: '150px',
+            width: '20%',
+            columnId: 'joined',
+          },
+          {
+            label: 'Misc',
+            dataType: 'undefined',
+            minWidth: '100px',
+            width: '20%',
+            columnId: 'misc',
+          },
         ],
         customRows: [
           ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
@@ -225,9 +237,9 @@
     data() {
       return {
         headers: [
-          { label: 'Name', dataType: 'string' },
-          { label: 'Age', dataType: 'number' },
-          { label: 'City', dataType: 'string' },
+          { label: 'Name', dataType: 'string', columnId: 'name' },
+          { label: 'Age', dataType: 'number', columnId: 'age' },
+          { label: 'City', dataType: 'string', columnId: 'city' },
         ],
         rows: [
           ['John Doe', 28, 'New York'],
@@ -238,11 +250,11 @@
           ['Emily Davis', 27, 'Philadelphia'],
         ],
         slotHeaders: [
-          { label: 'Name', dataType: 'string' },
-          { label: 'Age', dataType: 'number' },
-          { label: 'City', dataType: 'string' },
-          { label: 'Joined', dataType: 'date' },
-          { label: 'Misc', dataType: 'undefined' },
+          { label: 'Name', dataType: 'string', columnId: 'name' },
+          { label: 'Age', dataType: 'number', columnId: 'age' },
+          { label: 'City', dataType: 'string', columnId: 'city' },
+          { label: 'Joined', dataType: 'date', columnId: 'joined' },
+          { label: 'Misc', dataType: 'undefined', columnId: 'misc' },
         ],
         slotRows: [
           ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
@@ -251,11 +263,23 @@
           ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
         ],
         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%' },
+          { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%', columnId: 'name' },
+          { label: 'Age', dataType: 'number', minWidth: '100px', width: '33%', columnId: 'age' },
+          { label: 'City', dataType: 'string', minWidth: '200px', width: '25%', columnId: 'city' },
+          {
+            label: 'Joined',
+            dataType: 'date',
+            minWidth: '150px',
+            width: '20%',
+            columnId: 'joined',
+          },
+          {
+            label: 'Misc',
+            dataType: 'undefined',
+            minWidth: '100px',
+            width: '20%',
+            columnId: 'misc',
+          },
         ],
         customRows: [
           ['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 121a96eb5..17ed838f3 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -112,18 +112,28 @@
     setup(props, { emit }) {
       const headers = ref(props.headers);
       const rows = ref(props.rows);
-      const useLocalSorting = ref(props.sortable && !props.disableDefaultSorting);
+      const useDefaultSorting = ref(
+        props.defaultSort === {}
+          ? {
+              index: -1,
+            }
+          : {
+              index: props.headers.map(h => h.columnId).indexOf(props.defaultSort.columnId),
+              direction: props.defaultSort.direction,
+            }
+      );
+
       const {
         sortKey,
         sortOrder,
         sortedRows,
         handleSort: localHandleSort,
         getAriaSort,
-      } = useSorting(headers, rows, useLocalSorting);
+      } = useSorting(headers, rows, useDefaultSorting);
 
       const finalRows = computed(() => {
         if (props.sortable) {
-          return useLocalSorting.value ? sortedRows.value : rows.value;
+          return sortedRows.value;
         } else {
           return rows.value;
         }
@@ -142,7 +152,7 @@
         if (headers.value[index].dataType === DATA_TYPE_OTHERS) {
           return;
         }
-        if (useLocalSorting.value) {
+        if (props.sortable) {
           localHandleSort(index);
         } else {
           emit(
diff --git a/lib/KTable/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
index 829400b8f..031084c54 100644
--- a/lib/KTable/useSorting/__tests__/index.spec.js
+++ b/lib/KTable/useSorting/__tests__/index.spec.js
@@ -69,7 +69,7 @@ describe('useSorting', () => {
       ]);
     });
 
-    it("should sort the rows correctly for numeric values", () => {
+    it('should sort the rows correctly for numeric values', () => {
       useDefaultSorting.value = {
         index: 1,
         direction: 'asc',
@@ -81,10 +81,9 @@ describe('useSorting', () => {
         ['Alice', 28, new Date(1992, 8, 10)],
         ['John', 30, new Date(1990, 5, 15)],
       ]);
-    })
-
+    });
 
-    it("should sort the rows correctly for date values", () => {
+    it('should sort the rows correctly for date values', () => {
       useDefaultSorting.value = {
         index: 2,
         direction: 'asc',
@@ -96,7 +95,7 @@ describe('useSorting', () => {
         ['Alice', 28, new Date(1992, 8, 10)],
         ['Jane', 25, new Date(1995, 10, 20)],
       ]);
-    })
+    });
   });
 
   it('should sort rows by string column in ascending order', () => {

From bfc7106dc329f4525670131f19169be2ebc1d547 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Wed, 13 Nov 2024 23:52:44 +0530
Subject: [PATCH 03/17] fix tests

---
 lib/KTable/index.vue         | 48 +++++++++++-------------------------
 lib/__tests__/KTable.spec.js | 47 +++++++++--------------------------
 2 files changed, 25 insertions(+), 70 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 17ed838f3..e204c37d7 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -109,7 +109,7 @@
     components: {
       KTableGridItem,
     },
-    setup(props, { emit }) {
+    setup(props) {
       const headers = ref(props.headers);
       const rows = ref(props.rows);
       const useDefaultSorting = ref(
@@ -123,13 +123,11 @@
             }
       );
 
-      const {
-        sortKey,
-        sortOrder,
-        sortedRows,
-        handleSort: localHandleSort,
-        getAriaSort,
-      } = useSorting(headers, rows, useDefaultSorting);
+      const { sortKey, sortOrder, sortedRows, handleSort, getAriaSort } = useSorting(
+        headers,
+        rows,
+        useDefaultSorting
+      );
 
       const finalRows = computed(() => {
         if (props.sortable) {
@@ -148,21 +146,6 @@
         }
       );
 
-      const handleSort = index => {
-        if (headers.value[index].dataType === DATA_TYPE_OTHERS) {
-          return;
-        }
-        if (props.sortable) {
-          localHandleSort(index);
-        } else {
-          emit(
-            'changeSort',
-            index,
-            sortOrder.value === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC
-          );
-        }
-      };
-
       const getHeaderStyle = header => {
         const style = {};
         if (header.minWidth) style.minWidth = header.minWidth;
@@ -246,17 +229,14 @@
         type: Object,
         required: false,
         default: () => ({}),
-        validator: {
-          columnId: {
-            required: true,
-            validator: value => value !== null && ['string', 'number'].includes(typeof value),
-          },
-          direction: {
-            type: String,
-            required: false,
-            default: 'asc',
-            validator: value => ['asc', 'desc'].includes(value),
-          },
+        validator: function(value) {
+          if (value === {}) return true;
+
+          return (
+            ['columnId', 'direction'].every(key => key in value) &&
+            ['asc', 'desc'].includes(value.direction) &&
+            ['string', 'number'].includes(typeof value.columnId)
+          );
         },
       },
     },
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 7b0bcc59d..81257c769 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -4,9 +4,9 @@ import KTable from '../KTable';
 describe('KTable.vue', () => {
   it('should mount the component', () => {
     const headers = [
-      { label: 'Name', dataType: 'string' },
-      { label: 'Age', dataType: 'number' },
-      { label: 'City', dataType: 'string' },
+      { label: 'Name', dataType: 'string', columnId: 'name' },
+      { label: 'Age', dataType: 'number', columnId: 'age' },
+      { label: 'City', dataType: 'string', columnId: 'city' },
     ];
     const rows = [
       ['Alice', 25, 'New York'],
@@ -23,11 +23,12 @@ describe('KTable.vue', () => {
     const thElements = wrapper.findAll('th');
     expect(thElements.length).toBe(headers.length);
   });
+
   it('renders the correct content in rows and columns', async () => {
     const headers = [
-      { label: 'Name', dataType: 'string' },
-      { label: 'Age', dataType: 'number' },
-      { label: 'Date', dataType: 'date' },
+      { label: 'Name', dataType: 'string', columnId: 'name' },
+      { label: 'Age', dataType: 'number', columnId: 'age' },
+      { label: 'City', dataType: 'string', columnId: 'city' },
     ];
     const rows = [
       ['John', 30, '2023-01-01'],
@@ -52,37 +53,11 @@ 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: 'number' },
-      { label: 'City', dataType: 'string' },
-    ];
-    const items = [
-      ['Alice', 25, 'New York'],
-      ['Bob', 30, 'Los Angeles'],
-      ['Charlie', 35, 'San Francisco'],
-    ];
-    const wrapper = mount(KTable, {
-      propsData: {
-        headers,
-        items,
-        sortable: true,
-        disableDefaultSorting: true,
-      },
-      computed: {
-        isTableEmpty: () => false,
-      },
-    });
 
-    const thElements = wrapper.findAll('th');
-    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: 'number' },
+      { label: 'Name', dataType: 'string', columnId: 'name' },
+      { label: 'Age', dataType: 'number', columnId: 'age' },
     ];
     const rows = [
       ['John', 30],
@@ -116,8 +91,8 @@ describe('KTable.vue', () => {
 
   it('should handle keyboard navigation within the table', async () => {
     const headers = [
-      { label: 'Name', dataType: 'string' },
-      { label: 'Age', dataType: 'number' },
+      { label: 'Name', dataType: 'string', columnId: 'name' },
+      { label: 'Age', dataType: 'number', columnId: 'age' },
     ];
     const rows = [
       ['John', 30],

From fc560a0ac68adfd80220edb7a79158e2bc36c76e Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Thu, 14 Nov 2024 01:41:55 +0530
Subject: [PATCH 04/17] add tests

---
 docs/pages/ktable.vue          |  86 ++++++----
 lib/KTable/index.vue           |  17 +-
 lib/KTable/useSorting/index.js |   3 +-
 lib/__tests__/KTable.spec.js   | 284 ++++++++++++++++++++-------------
 4 files changed, 235 insertions(+), 155 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index e20a6257f..bc1960bf5 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -180,47 +180,65 @@
 
       </DocsShowCode>
 
-  <DocsShowCode language="javascript">
-    data() {
-      return {
-        headersWithCustomWidths: [
-          { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%', columnId: 'name' },
-          { label: 'Age', dataType: 'number', minWidth: '100px', width: '33%', columnId: 'age' },
-          { label: 'City', dataType: 'string', minWidth: '200px', width: '25%', columnId: 'city' },
-          {
-            label: 'Joined',
-            dataType: 'date',
-            minWidth: '150px',
-            width: '20%',
-            columnId: 'joined',
-          },
-          {
-            label: 'Misc',
-            dataType: 'undefined',
-            minWidth: '100px',
-            width: '20%',
-            columnId: 'misc',
-          },
-        ],
-        customRows: [
-          ['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'],
-        ],
-      };
-    },
+      <!--Table with Default Sort-->
+      <h3>Table with Default Sort</h3>
+      <p>
+        This is an example to show how <code>KTable</code> can be used with the <code>defaultSort</code> attribute to sort the table based on a particular column. This is useful if you are getting unsorted data from an API and want to display it in a sorted manner. The <code>defaultSort</code> attribute can be used irrespective of the <code>sortable</code> attribute.
+      </p>
+
+      <DocsShowCode language="html">
+        <KTable
+          :headers="headers"
+          :rows="rows"
+          caption="Sortable Table with Rows Sorted by 'Age' Column"
+          sortable
+          :defaultSort="{ columnId: 'age', direction: 'asc' }"
+        />
+
+        <KTable 
+          :headers="headers"
+          :rows="rows"
+          caption="Unsortable Table with Rows Sorted by 'Age' Column"
+          :defaultSort="{ columnId: 'age', direction: 'asc' }"
+        />
+
+      </DocsShowCode>
+
+      <DocsShowCode language="javascript">
+        data() {
+          return {
+            headers: [
+              { label: 'Name', dataType: 'string', columnId: 'name' },
+              { label: 'Age', dataType: 'number', columnId: 'age' },
+              { label: 'City', dataType: 'string', columnId: 'city' },
+            ],
+            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="headersWithCustomWidths"
-          :rows="customRows"
-          caption="Table showing columns with custom widths"
+          :headers="headers"
+          :rows="rows"
+          caption="Sortable Table with Rows Sorted by 'Age' Column"
           sortable
+          :defaultSort="{ columnId: 'age', direction: 'asc' }"
+        />
+        <KTable
+          :headers="headers"
+          :rows="rows"
+          caption="Unsortable Table with Rows Sorted by 'Age' Column"
+          :defaultSort="{ columnId: 'age', direction: 'asc' }"
         />
       </DocsShow>
-      <!-- eslint-enable -->
 
     </DocsPageSection>
 
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index e204c37d7..a07a19a74 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -112,16 +112,11 @@
     setup(props) {
       const headers = ref(props.headers);
       const rows = ref(props.rows);
-      const useDefaultSorting = ref(
-        props.defaultSort === {}
-          ? {
-              index: -1,
-            }
-          : {
-              index: props.headers.map(h => h.columnId).indexOf(props.defaultSort.columnId),
-              direction: props.defaultSort.direction,
-            }
-      );
+
+      const useDefaultSorting = computed(() => ({
+        index: props.headers.findIndex(h => h.columnId === props.defaultSort.columnId),
+        direction: props.defaultSort.direction,
+      }));
 
       const { sortKey, sortOrder, sortedRows, handleSort, getAriaSort } = useSorting(
         headers,
@@ -297,7 +292,7 @@
       $props: {
         immediate: true,
         handler() {
-          if (this.defaultSort != {}) {
+          if (this.defaultSort.columnId) {
             const allHeaderColumnIds = this.headers.map(h => h.columnId);
             if (!allHeaderColumnIds.includes(this.defaultSort.columnId)) {
               console.error(
diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
index e7384fa9d..5d07682c8 100644
--- a/lib/KTable/useSorting/index.js
+++ b/lib/KTable/useSorting/index.js
@@ -13,13 +13,14 @@ export const DATA_TYPE_OTHERS = 'undefined';
  *
  * @param {Ref<Array>} headers - Reactive reference to the table headers.
  * @param {Ref<Array>} rows - Reactive reference to the table rows.
- * @param {Ref<Object>} useDefaultSorting - Reactive reference to a string indicating if default sorting should be used.
+ * @param {Ref<Object>} useDefaultSorting - Computed reactive reference to object describing if default sorting should be used.
  * It has the properties as 'index' denoting the row index to be used for default sorting, and 'direction' denoting the sort order.
  * @returns {Object} - An object containing reactive references and methods for sorting.
  */
 export default function useSorting(headers, rows, useDefaultSorting) {
   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.
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 81257c769..86b8625fc 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -1,130 +1,196 @@
 import { mount } from '@vue/test-utils';
 import KTable from '../KTable';
 
-describe('KTable.vue', () => {
-  it('should mount the component', () => {
-    const headers = [
-      { label: 'Name', dataType: 'string', columnId: 'name' },
-      { label: 'Age', dataType: 'number', columnId: 'age' },
-      { label: 'City', dataType: 'string', columnId: 'city' },
-    ];
-    const rows = [
-      ['Alice', 25, 'New York'],
-      ['Bob', 30, 'Los Angeles'],
-      ['Charlie', 35, 'San Francisco'],
-    ];
-    const wrapper = mount(KTable, {
-      propsData: {
-        headers,
-        rows,
-        sortable: true,
-      },
-    });
-    const thElements = wrapper.findAll('th');
-    expect(thElements.length).toBe(headers.length);
-  });
-
-  it('renders the correct content in rows and columns', async () => {
-    const headers = [
-      { label: 'Name', dataType: 'string', columnId: 'name' },
-      { label: 'Age', dataType: 'number', columnId: 'age' },
-      { label: 'City', dataType: 'string', columnId: 'city' },
-    ];
-    const rows = [
-      ['John', 30, '2023-01-01'],
-      ['Jane', 25, '2023-02-01'],
-      ['Doe', 35, '2023-03-01'],
-    ];
+const assertTableContent = (wrapper, rows) => {
+  const tableRows = wrapper.findAll('tbody tr');
+  expect(tableRows.length).toBe(rows.length);
 
-    const wrapper = mount(KTable, {
-      propsData: { headers, rows, caption: 'Test Table' },
-    });
-
-    // 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');
+    expect(cells.length).toBe(row.length);
 
-    rows.forEach((row, rowIndex) => {
-      const cells = tableRows.at(rowIndex).findAll('td');
-      row.forEach((cellContent, colIndex) => {
-        expect(cells.at(colIndex).text()).toBe(String(cellContent));
-      });
+    row.forEach((cellContent, colIndex) => {
+      expect(cells.at(colIndex).text()).toBe(String(cellContent));
     });
   });
+};
 
-  it('should handle sticky headers and columns', async () => {
+describe('KTable.vue', () => {
+  //   it('should mount the component', () => {
+  //     const headers = [
+  //       { label: 'Name', dataType: 'string', columnId: 'name' },
+  //       { label: 'Age', dataType: 'number', columnId: 'age' },
+  //       { label: 'City', dataType: 'string', columnId: 'city' },
+  //     ];
+  //     const rows = [
+  //       ['Alice', 25, 'New York'],
+  //       ['Bob', 30, 'Los Angeles'],
+  //       ['Charlie', 35, 'San Francisco'],
+  //     ];
+  //     const wrapper = mount(KTable, {
+  //       propsData: {
+  //         headers,
+  //         rows,
+  //         sortable: true,
+  //       },
+  //     });
+  //     const thElements = wrapper.findAll('th');
+  //     expect(thElements.length).toBe(headers.length);
+  //   });
+
+  //   it('renders the correct content in rows and columns', async () => {
+  //     const headers = [
+  //       { label: 'Name', dataType: 'string', columnId: 'name' },
+  //       { label: 'Age', dataType: 'number', columnId: 'age' },
+  //       { label: 'City', dataType: 'string', columnId: 'city' },
+  //     ];
+  //     const rows = [
+  //       ['John', 30, '2023-01-01'],
+  //       ['Jane', 25, '2023-02-01'],
+  //       ['Doe', 35, '2023-03-01'],
+  //     ];
+
+  //     const wrapper = mount(KTable, {
+  //       propsData: { headers, rows, caption: 'Test Table' },
+  //     });
+
+  //     // Wait for the table to be fully rendered
+  //     await wrapper.vm.$nextTick();
+  //     assertTableContent(wrapper, rows);
+  //   });
+
+  describe('should respect the defaultSort attribute', () => {
     const headers = [
       { label: 'Name', dataType: 'string', columnId: 'name' },
       { label: 'Age', dataType: 'number', columnId: 'age' },
+      { label: 'City', dataType: 'string', columnId: 'city' },
     ];
+
     const rows = [
-      ['John', 30],
-      ['Jane', 25],
+      ['John', 30, 'New York'],
+      ['Alice', 25, 'Los Angeles'],
+      ['Bob', 35, 'San Francisco'],
     ];
 
-    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');
-    });
+    // it('should not sort the rows by default', async () => {
+    //   const wrapper = mount(KTable, {
+    //     propsData: { headers, rows, caption: 'Test Table' },
+    //   });
+
+    //   await wrapper.vm.$nextTick();
+    //   assertTableContent(wrapper, rows);
+    // });
+
+    it('should sort the rows correctly in ascending order', async () => {
+      const wrapper = mount(KTable, {
+        propsData: {
+          headers,
+          rows,
+          caption: 'Test Table',
+          defaultSort: { columnId: 'age', direction: 'asc' },
+        },
+      });
 
-    const firstColumnCells = wrapper.findAll('tbody tr td:first-child');
-    firstColumnCells.wrappers.forEach(cell => {
-      expect(cell.classes()).toContain('sticky-column');
+      await wrapper.vm.$nextTick();
+      const expectedRows = [
+        ['Alice', 25, 'Los Angeles'],
+        ['Bob', 35, 'San Francisco'],
+        ['John', 30, 'New York'],
+      ];
+      assertTableContent(wrapper, expectedRows);
     });
-  });
 
-  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 sort the rows correctly in descending order', async () => {
+    //   const wrapper = mount(KTable, {
+    //     propsData: {
+    //       headers,
+    //       rows,
+    //       caption: 'Test Table',
+    //       defaultSort: { columnId: 'age', direction: 'desc' },
+    //     },
+    //   });
+
+    //   await wrapper.vm.$nextTick();
+    //   const expectedRows = [
+    //     ['Bob', 35, 'San Francisco'],
+    //     ['John', 30, 'New York'],
+    //     ['Alice', 25, 'Los Angeles'],
+    //   ];
+    //   assertTableContent(wrapper, expectedRows);
+    // });
   });
 
-  it('should handle keyboard navigation within the table', async () => {
-    const headers = [
-      { label: 'Name', dataType: 'string', columnId: 'name' },
-      { label: 'Age', dataType: 'number', columnId: 'age' },
-    ];
-    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();
-  });
+  // it('should handle sticky headers and columns', async () => {
+  //   const headers = [
+  //     { label: 'Name', dataType: 'string', columnId: 'name' },
+  //     { label: 'Age', dataType: 'number', columnId: 'age' },
+  //   ];
+  //   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', columnId: 'name' },
+  //     { label: 'Age', dataType: 'number', columnId: 'age' },
+  //   ];
+  //   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 64f0e015f1a3d7cc3015f11e21cf9a878ee56774 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Thu, 14 Nov 2024 01:42:36 +0530
Subject: [PATCH 05/17] revert changes to tests

---
 lib/__tests__/KTable.spec.js | 280 +++++++++++++++++------------------
 1 file changed, 140 insertions(+), 140 deletions(-)

diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 86b8625fc..e38208b5a 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -16,48 +16,48 @@ const assertTableContent = (wrapper, rows) => {
 };
 
 describe('KTable.vue', () => {
-  //   it('should mount the component', () => {
-  //     const headers = [
-  //       { label: 'Name', dataType: 'string', columnId: 'name' },
-  //       { label: 'Age', dataType: 'number', columnId: 'age' },
-  //       { label: 'City', dataType: 'string', columnId: 'city' },
-  //     ];
-  //     const rows = [
-  //       ['Alice', 25, 'New York'],
-  //       ['Bob', 30, 'Los Angeles'],
-  //       ['Charlie', 35, 'San Francisco'],
-  //     ];
-  //     const wrapper = mount(KTable, {
-  //       propsData: {
-  //         headers,
-  //         rows,
-  //         sortable: true,
-  //       },
-  //     });
-  //     const thElements = wrapper.findAll('th');
-  //     expect(thElements.length).toBe(headers.length);
-  //   });
-
-  //   it('renders the correct content in rows and columns', async () => {
-  //     const headers = [
-  //       { label: 'Name', dataType: 'string', columnId: 'name' },
-  //       { label: 'Age', dataType: 'number', columnId: 'age' },
-  //       { label: 'City', dataType: 'string', columnId: 'city' },
-  //     ];
-  //     const rows = [
-  //       ['John', 30, '2023-01-01'],
-  //       ['Jane', 25, '2023-02-01'],
-  //       ['Doe', 35, '2023-03-01'],
-  //     ];
-
-  //     const wrapper = mount(KTable, {
-  //       propsData: { headers, rows, caption: 'Test Table' },
-  //     });
-
-  //     // Wait for the table to be fully rendered
-  //     await wrapper.vm.$nextTick();
-  //     assertTableContent(wrapper, rows);
-  //   });
+    it('should mount the component', () => {
+      const headers = [
+        { label: 'Name', dataType: 'string', columnId: 'name' },
+        { label: 'Age', dataType: 'number', columnId: 'age' },
+        { label: 'City', dataType: 'string', columnId: 'city' },
+      ];
+      const rows = [
+        ['Alice', 25, 'New York'],
+        ['Bob', 30, 'Los Angeles'],
+        ['Charlie', 35, 'San Francisco'],
+      ];
+      const wrapper = mount(KTable, {
+        propsData: {
+          headers,
+          rows,
+          sortable: true,
+        },
+      });
+      const thElements = wrapper.findAll('th');
+      expect(thElements.length).toBe(headers.length);
+    });
+
+    it('renders the correct content in rows and columns', async () => {
+      const headers = [
+        { label: 'Name', dataType: 'string', columnId: 'name' },
+        { label: 'Age', dataType: 'number', columnId: 'age' },
+        { label: 'City', dataType: 'string', columnId: 'city' },
+      ];
+      const rows = [
+        ['John', 30, '2023-01-01'],
+        ['Jane', 25, '2023-02-01'],
+        ['Doe', 35, '2023-03-01'],
+      ];
+
+      const wrapper = mount(KTable, {
+        propsData: { headers, rows, caption: 'Test Table' },
+      });
+
+      // Wait for the table to be fully rendered
+      await wrapper.vm.$nextTick();
+      assertTableContent(wrapper, rows);
+    });
 
   describe('should respect the defaultSort attribute', () => {
     const headers = [
@@ -72,14 +72,14 @@ describe('KTable.vue', () => {
       ['Bob', 35, 'San Francisco'],
     ];
 
-    // it('should not sort the rows by default', async () => {
-    //   const wrapper = mount(KTable, {
-    //     propsData: { headers, rows, caption: 'Test Table' },
-    //   });
+    it('should not sort the rows by default', async () => {
+      const wrapper = mount(KTable, {
+        propsData: { headers, rows, caption: 'Test Table' },
+      });
 
-    //   await wrapper.vm.$nextTick();
-    //   assertTableContent(wrapper, rows);
-    // });
+      await wrapper.vm.$nextTick();
+      assertTableContent(wrapper, rows);
+    });
 
     it('should sort the rows correctly in ascending order', async () => {
       const wrapper = mount(KTable, {
@@ -100,97 +100,97 @@ describe('KTable.vue', () => {
       assertTableContent(wrapper, expectedRows);
     });
 
-    // it('should sort the rows correctly in descending order', async () => {
-    //   const wrapper = mount(KTable, {
-    //     propsData: {
-    //       headers,
-    //       rows,
-    //       caption: 'Test Table',
-    //       defaultSort: { columnId: 'age', direction: 'desc' },
-    //     },
-    //   });
-
-    //   await wrapper.vm.$nextTick();
-    //   const expectedRows = [
-    //     ['Bob', 35, 'San Francisco'],
-    //     ['John', 30, 'New York'],
-    //     ['Alice', 25, 'Los Angeles'],
-    //   ];
-    //   assertTableContent(wrapper, expectedRows);
-    // });
+    it('should sort the rows correctly in descending order', async () => {
+      const wrapper = mount(KTable, {
+        propsData: {
+          headers,
+          rows,
+          caption: 'Test Table',
+          defaultSort: { columnId: 'age', direction: 'desc' },
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+      const expectedRows = [
+        ['Bob', 35, 'San Francisco'],
+        ['John', 30, 'New York'],
+        ['Alice', 25, 'Los Angeles'],
+      ];
+      assertTableContent(wrapper, expectedRows);
+    });
+  });
+
+  it('should handle sticky headers and columns', async () => {
+    const headers = [
+      { label: 'Name', dataType: 'string', columnId: 'name' },
+      { label: 'Age', dataType: 'number', columnId: 'age' },
+    ];
+    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');
+    });
   });
 
-  // it('should handle sticky headers and columns', async () => {
-  //   const headers = [
-  //     { label: 'Name', dataType: 'string', columnId: 'name' },
-  //     { label: 'Age', dataType: 'number', columnId: 'age' },
-  //   ];
-  //   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', columnId: 'name' },
-  //     { label: 'Age', dataType: 'number', columnId: 'age' },
-  //   ];
-  //   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();
-  // });
+  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', columnId: 'name' },
+      { label: 'Age', dataType: 'number', columnId: 'age' },
+    ];
+    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 661ff12e3ba74e91d5fd7fd263dd74c25aafec94 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Thu, 14 Nov 2024 01:50:09 +0530
Subject: [PATCH 06/17] lint fix

---
 lib/__tests__/KTable.spec.js | 76 ++++++++++++++++++------------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index e38208b5a..9b8332114 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -16,49 +16,49 @@ const assertTableContent = (wrapper, rows) => {
 };
 
 describe('KTable.vue', () => {
-    it('should mount the component', () => {
-      const headers = [
-        { label: 'Name', dataType: 'string', columnId: 'name' },
-        { label: 'Age', dataType: 'number', columnId: 'age' },
-        { label: 'City', dataType: 'string', columnId: 'city' },
-      ];
-      const rows = [
-        ['Alice', 25, 'New York'],
-        ['Bob', 30, 'Los Angeles'],
-        ['Charlie', 35, 'San Francisco'],
-      ];
-      const wrapper = mount(KTable, {
-        propsData: {
-          headers,
-          rows,
-          sortable: true,
-        },
-      });
-      const thElements = wrapper.findAll('th');
-      expect(thElements.length).toBe(headers.length);
+  it('should mount the component', () => {
+    const headers = [
+      { label: 'Name', dataType: 'string', columnId: 'name' },
+      { label: 'Age', dataType: 'number', columnId: 'age' },
+      { label: 'City', dataType: 'string', columnId: 'city' },
+    ];
+    const rows = [
+      ['Alice', 25, 'New York'],
+      ['Bob', 30, 'Los Angeles'],
+      ['Charlie', 35, 'San Francisco'],
+    ];
+    const wrapper = mount(KTable, {
+      propsData: {
+        headers,
+        rows,
+        sortable: true,
+      },
     });
+    const thElements = wrapper.findAll('th');
+    expect(thElements.length).toBe(headers.length);
+  });
 
-    it('renders the correct content in rows and columns', async () => {
-      const headers = [
-        { label: 'Name', dataType: 'string', columnId: 'name' },
-        { label: 'Age', dataType: 'number', columnId: 'age' },
-        { label: 'City', dataType: 'string', columnId: 'city' },
-      ];
-      const rows = [
-        ['John', 30, '2023-01-01'],
-        ['Jane', 25, '2023-02-01'],
-        ['Doe', 35, '2023-03-01'],
-      ];
-
-      const wrapper = mount(KTable, {
-        propsData: { headers, rows, caption: 'Test Table' },
-      });
+  it('renders the correct content in rows and columns', async () => {
+    const headers = [
+      { label: 'Name', dataType: 'string', columnId: 'name' },
+      { label: 'Age', dataType: 'number', columnId: 'age' },
+      { label: 'City', dataType: 'string', columnId: 'city' },
+    ];
+    const rows = [
+      ['John', 30, '2023-01-01'],
+      ['Jane', 25, '2023-02-01'],
+      ['Doe', 35, '2023-03-01'],
+    ];
 
-      // Wait for the table to be fully rendered
-      await wrapper.vm.$nextTick();
-      assertTableContent(wrapper, rows);
+    const wrapper = mount(KTable, {
+      propsData: { headers, rows, caption: 'Test Table' },
     });
 
+    // Wait for the table to be fully rendered
+    await wrapper.vm.$nextTick();
+    assertTableContent(wrapper, rows);
+  });
+
   describe('should respect the defaultSort attribute', () => {
     const headers = [
       { label: 'Name', dataType: 'string', columnId: 'name' },

From f76fc51821516e62a155280ff3afdc3e0bdefee8 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:36:07 +0530
Subject: [PATCH 07/17] rewrite the useSorting hook, refactor the code and
 reintroduce disable builtin sorting

---
 docs/pages/ktable.vue                         |  7 +-
 lib/KTable/index.vue                          | 58 +++++++++----
 lib/KTable/useSorting/__tests__/index.spec.js | 83 ++++++++++++++-----
 lib/KTable/useSorting/index.js                | 15 ++--
 4 files changed, 120 insertions(+), 43 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index bc1960bf5..0dba2e1d9 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -187,6 +187,7 @@
       </p>
 
       <DocsShowCode language="html">
+        <h3>Sortable Table with Rows Sorted by 'Age' Column</h3>
         <KTable
           :headers="headers"
           :rows="rows"
@@ -194,7 +195,8 @@
           sortable
           :defaultSort="{ columnId: 'age', direction: 'asc' }"
         />
-
+    
+        <h3>Unsortable Table with Rows Sorted by 'Age' Column</h3>
         <KTable 
           :headers="headers"
           :rows="rows"
@@ -225,6 +227,7 @@
       </DocsShowCode>
 
       <DocsShow block>
+        <h3>Sortable Table with Rows Sorted by 'Age' Column</h3>
         <KTable
           :headers="headers"
           :rows="rows"
@@ -232,6 +235,8 @@
           sortable
           :defaultSort="{ columnId: 'age', direction: 'asc' }"
         />
+
+        <h3>Unsortable Table with Rows Sorted by 'Age' Column</h3>
         <KTable
           :headers="headers"
           :rows="rows"
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index a07a19a74..debac3d2a 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -95,7 +95,7 @@
 
 <script>
 
-  import { ref, computed, watch } from '@vue/composition-api';
+  import { ref, computed, watch, emit } from '@vue/composition-api';
   import useSorting, {
     SORT_ORDER_ASC,
     SORT_ORDER_DESC,
@@ -113,26 +113,21 @@
       const headers = ref(props.headers);
       const rows = ref(props.rows);
 
-      const useDefaultSorting = computed(() => ({
+      const defaultSort = ref({
         index: props.headers.findIndex(h => h.columnId === props.defaultSort.columnId),
         direction: props.defaultSort.direction,
-      }));
-
-      const { sortKey, sortOrder, sortedRows, handleSort, getAriaSort } = useSorting(
-        headers,
-        rows,
-        useDefaultSorting
-      );
-
-      const finalRows = computed(() => {
-        if (props.sortable) {
-          return sortedRows.value;
-        } else {
-          return rows.value;
-        }
       });
+      const useLocalSorting = ref(props.sortable && !props.disableBuiltinSorting);
 
-      const isTableEmpty = computed(() => finalRows.value.length === 0);
+      const {
+        sortKey,
+        sortOrder,
+        sortedRows,
+        handleSort: localHandleSort,
+        getAriaSort,
+      } = useSorting(headers, rows, defaultSort, useLocalSorting);
+
+      const isTableEmpty = computed(() => sortedRows.value.length === 0);
 
       watch(
         () => props.rows,
@@ -141,16 +136,35 @@
         }
       );
 
+      const handleSort = index => {
+        if (headers.value[index].dataType === DATA_TYPE_OTHERS) {
+          return;
+        }
+
+        // If we are using local sorting, then we need to sort the rows locally
+        if (useLocalSorting.value) {
+          localHandleSort(index);
+        } else {
+          // Emit the event to the parent component to provide the sorting logic
+          emit(
+            'changeSort',
+            index,
+            sortOrder.value === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC
+          );
+        }
+      };
+
       const getHeaderStyle = header => {
         const style = {};
         if (header.minWidth) style.minWidth = header.minWidth;
         if (header.width) style.width = header.width;
         return style;
       };
+
       return {
         sortKey,
         sortOrder,
-        finalRows,
+        finalRows: sortedRows,
         handleSort,
         getAriaSort,
         SORT_ORDER_ASC,
@@ -234,6 +248,14 @@
           );
         },
       },
+      /*
+       * Disables all the sorting functionality provided by the component. This is useful when you want to define you own sorting logic. Refer to the documentation for more details.
+       */
+      disableBuiltinSorting: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     data() {
       return {
diff --git a/lib/KTable/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
index 031084c54..816d2be85 100644
--- a/lib/KTable/useSorting/__tests__/index.spec.js
+++ b/lib/KTable/useSorting/__tests__/index.spec.js
@@ -9,7 +9,7 @@ import useSorting, {
 } from '../';
 
 describe('useSorting', () => {
-  let headers, rows, useDefaultSorting;
+  let headers, rows, defaultSort, useLocalSorting;
 
   beforeEach(() => {
     headers = ref([
@@ -25,29 +25,31 @@ describe('useSorting', () => {
       ['Alice', 28, new Date(1992, 8, 10)],
     ]);
 
-    // Disable default sorting by default
-    useDefaultSorting = ref({
+    // Disable default sorting
+    defaultSort = ref({
       index: -1,
     });
+
+    useLocalSorting = ref(true);
   });
 
   describe('default sorting', () => {
     it('should return rows unsorted by default', () => {
-      useDefaultSorting.value = {
+      defaultSort.value = {
         index: -1,
       };
 
-      const { sortedRows } = useSorting(headers, rows, useDefaultSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
       expect(sortedRows.value).toEqual(rows.value);
     });
 
     it('should sort the rows in ascending correctly for string values', () => {
-      useDefaultSorting.value = {
+      defaultSort.value = {
         index: 0,
         direction: 'asc',
       };
 
-      const { sortedRows } = useSorting(headers, rows, useDefaultSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
       expect(sortedRows.value).toEqual([
         ['Alice', 28, new Date(1992, 8, 10)],
         ['Jane', 25, new Date(1995, 10, 20)],
@@ -56,12 +58,12 @@ describe('useSorting', () => {
     });
 
     it('should sort the rows in descending order correctly for string values', () => {
-      useDefaultSorting.value = {
+      defaultSort.value = {
         index: 0,
         direction: 'desc',
       };
 
-      const { sortedRows } = useSorting(headers, rows, useDefaultSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
       expect(sortedRows.value).toEqual([
         ['John', 30, new Date(1990, 5, 15)],
         ['Jane', 25, new Date(1995, 10, 20)],
@@ -70,12 +72,12 @@ describe('useSorting', () => {
     });
 
     it('should sort the rows correctly for numeric values', () => {
-      useDefaultSorting.value = {
+      defaultSort.value = {
         index: 1,
         direction: 'asc',
       };
 
-      const { sortedRows } = useSorting(headers, rows, useDefaultSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
       expect(sortedRows.value).toEqual([
         ['Jane', 25, new Date(1995, 10, 20)],
         ['Alice', 28, new Date(1992, 8, 10)],
@@ -84,12 +86,12 @@ describe('useSorting', () => {
     });
 
     it('should sort the rows correctly for date values', () => {
-      useDefaultSorting.value = {
+      defaultSort.value = {
         index: 2,
         direction: 'asc',
       };
 
-      const { sortedRows } = useSorting(headers, rows, useDefaultSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
       expect(sortedRows.value).toEqual([
         ['John', 30, new Date(1990, 5, 15)],
         ['Alice', 28, new Date(1992, 8, 10)],
@@ -98,8 +100,36 @@ describe('useSorting', () => {
     });
   });
 
+  describe('useLocalSorting is set to false', () => {
+    it('should return rows unsorted when useLocalSorting is false', () => {
+      useLocalSorting.value = false;
+
+      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      expect(sortedRows.value).toEqual(rows.value);
+    });
+
+    it('should return the rows unsorted even when default sorting is enabled', () => {
+      useLocalSorting.value = false;
+      defaultSort.value = {
+        index: 0,
+        direction: 'asc',
+      };
+
+      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      expect(sortedRows.value).toEqual(rows.value);
+    });
+
+    it('should not sort rows even when a column is clicked', () => {
+      useLocalSorting.value = false;
+
+      const { handleSort, sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      handleSort(0); // Sort by 'Name'
+      expect(sortedRows.value).toEqual(rows.value);
+    });
+  });
+
   it('should sort rows by string column in ascending order', () => {
-    const { handleSort, sortedRows } = useSorting(headers, rows, useDefaultSorting);
+    const { handleSort, sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
 
     handleSort(0); // Sort by 'Name'
     expect(sortedRows.value).toEqual([
@@ -110,7 +140,12 @@ describe('useSorting', () => {
   });
 
   it('should sort rows by numeric column in ascending then descending order then back to default order', () => {
-    const { handleSort, sortedRows, sortOrder } = useSorting(headers, rows, useDefaultSorting);
+    const { handleSort, sortedRows, sortOrder } = useSorting(
+      headers,
+      rows,
+      defaultSort,
+      useLocalSorting
+    );
 
     handleSort(1); // Sort by 'Age'
     expect(sortedRows.value).toEqual([
@@ -138,7 +173,7 @@ describe('useSorting', () => {
   });
 
   it('should sort rows by date column in ascending order', () => {
-    const { handleSort, sortedRows } = useSorting(headers, rows, useDefaultSorting);
+    const { handleSort, sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
 
     handleSort(2); // Sort by 'Birthdate'
     expect(sortedRows.value).toEqual([
@@ -149,7 +184,12 @@ describe('useSorting', () => {
   });
 
   it('should not sort rows when sorting by a column with dataType "undefined"', () => {
-    const { handleSort, sortedRows, sortKey } = useSorting(headers, rows, useDefaultSorting);
+    const { handleSort, sortedRows, sortKey } = useSorting(
+      headers,
+      rows,
+      defaultSort,
+      useLocalSorting
+    );
 
     handleSort(3); // Attempt to sort by 'Other'
     expect(sortedRows.value).toEqual(rows.value);
@@ -157,7 +197,7 @@ describe('useSorting', () => {
   });
 
   it('should return correct aria-sort attribute based on current sorting', () => {
-    const { handleSort, getAriaSort } = useSorting(headers, rows, useDefaultSorting);
+    const { handleSort, getAriaSort } = useSorting(headers, rows, defaultSort, useLocalSorting);
 
     expect(getAriaSort(0)).toBe('none');
 
@@ -169,7 +209,12 @@ describe('useSorting', () => {
   });
 
   it('should reset sortKey and sortOrder when a new column is sorted', () => {
-    const { handleSort, sortKey, sortOrder } = useSorting(headers, rows, useDefaultSorting);
+    const { handleSort, sortKey, sortOrder } = useSorting(
+      headers,
+      rows,
+      defaultSort,
+      useLocalSorting
+    );
 
     handleSort(0); // Sort by 'Name'
     expect(sortKey.value).toBe(0);
diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
index 5d07682c8..b1b5406b1 100644
--- a/lib/KTable/useSorting/index.js
+++ b/lib/KTable/useSorting/index.js
@@ -13,11 +13,12 @@ export const DATA_TYPE_OTHERS = 'undefined';
  *
  * @param {Ref<Array>} headers - Reactive reference to the table headers.
  * @param {Ref<Array>} rows - Reactive reference to the table rows.
- * @param {Ref<Object>} useDefaultSorting - Computed reactive reference to object describing if default sorting should be used.
+ * @param {Ref<Object>} defaultSort - Computed reactive reference to object describing if default sorting should be used.
  * It has the properties as 'index' denoting the row index to be used for default sorting, and 'direction' denoting the sort order.
+ * @param {Ref<Boolean>} useLocalSorting - Reactive reference to disable all forms of sorting by the hook.
  * @returns {Object} - An object containing reactive references and methods for sorting.
  */
-export default function useSorting(headers, rows, useDefaultSorting) {
+export default function useSorting(headers, rows, defaultSort, useLocalSorting) {
   const sortKey = ref(null);
   const sortOrder = ref(null);
 
@@ -26,13 +27,17 @@ export default function useSorting(headers, rows, useDefaultSorting) {
    * If local sorting is disabled or no sort key is set, it returns the original rows.
    */
   const sortedRows = computed(() => {
+    // If sorting is disabled, return the original rows
+    if (!useLocalSorting.value) return rows.value;
+
     // No sort key or value has been explicity set till now
     if (sortKey.value === null || sortOrder.value === null) {
-      if (useDefaultSorting.value.index === -1) return rows.value;
+      if (defaultSort.value.index === -1) return rows.value;
+
       return _.orderBy(
         rows.value,
-        [row => row[useDefaultSorting.value.index]],
-        [useDefaultSorting.value.direction]
+        [row => row[defaultSort.value.index]],
+        [defaultSort.value.direction]
       );
     }
 

From 71af1e1b32a8e8167b0105b747ace073a38f1400 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Tue, 19 Nov 2024 13:09:20 +0530
Subject: [PATCH 08/17] rewrite docs and examples

---
 docs/pages/ktable.vue          | 292 ++++++++++++++++++++++++---------
 lib/KTable/index.vue           |  25 ++-
 lib/KTable/useSorting/index.js |   7 +-
 3 files changed, 230 insertions(+), 94 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 0dba2e1d9..95c76aa37 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -13,13 +13,14 @@
         </ul>
       </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, as a simple table. 
       </p>
-      <!-- eslint-disable -->
+  
       <DocsShowCode language="html">
         <KTable
           :headers="headers"
@@ -29,25 +30,27 @@
 
       </DocsShowCode>
 
-  <DocsShowCode language="javascript">
-    data() {
-      return {
-        headers: [
-          { label: 'Name', dataType: 'string', columnId: 'name' },
-          { label: 'Age', dataType: 'number', columnId: 'age' },
-          { label: 'City', dataType: 'string', columnId: 'city' },
-        ],
-        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>
+      <!-- eslint-disable-->
+      <DocsShowCode language="javascript">
+        data() {
+          return {
+            headers: [
+              { label: 'Name', dataType: 'string', columnId: 'name' },
+              { label: 'Age', dataType: 'number', columnId: 'age' },
+              { label: 'City', dataType: 'string', columnId: 'city' },
+            ],
+          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>
+      <!-- eslint-enable -->
 
       <DocsShow block>
         <KTable
@@ -60,7 +63,10 @@
       <!-- Frontend Sorting Example-->
       <h3>Table with Sorting</h3>
       <p>
-        The <code>KTable</code> can be used with 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 sorting enabled.
+        The <code>KTable</code> can be used with 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 sorting enabled. To allow client side sorting, set the <code>sortable</code> attribute to <code>true</code>.
+      </p>
+      <p>
+        You can also notice that clicking the same header multiple times toggles the sort direction cyclically in the order of <code>asc</code>, <code>desc</code> and <code>none</code>. The <code>none</code> state is the default state when the table is loaded by default.
       </p>
 
       <DocsShowCode language="html">
@@ -73,25 +79,28 @@
 
       </DocsShowCode>
 
-  <DocsShowCode language="javascript">
-    data() {
-      return {
-        headers: [
-          { label: 'Name', dataType: 'string', columnId: 'name' },
-          { label: 'Age', dataType: 'number', columnId: 'age' },
-          { label: 'City', dataType: 'string', columnId: 'city' },
-        ],
-        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>
+      <!-- eslint-disable -->
+      <DocsShowCode language="javascript">
+        data() {
+          return {
+            headers: [
+              { label: 'Name', dataType: 'string', columnId: 'name' },
+              { label: 'Age', dataType: 'number', columnId: 'age' },
+              { label: 'City', dataType: 'string', columnId: 'city' },
+            ],
+            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>
+      <!-- eslint-enable -->
+
       <DocsShow block>
         <KTable
           :headers="headers"
@@ -99,13 +108,14 @@
           caption="In-Built Sorting Table"
           sortable
         />
-          <!-- eslint-enable -->
       </DocsShow>
+
       <!--Table showing use of slots-->
       <h3>Table showing use of slots</h3>
       <p>
         This is an example to show how slots can be used in <code>KTable</code>. The table currently provides slots for <code>header</code> and <code>cell</code> which can be used to customize the table header and cell content respectively.
       </p>
+
       <!-- eslint-disable -->
       <DocsShowCode language="html">
         <KTable
@@ -114,38 +124,37 @@
           caption="Table showing use of slots"
           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>
-
+          <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>
       </DocsShowCode>
 
-  <DocsShowCode language="javascript">
-    data() {
-      return {
-        slotHeaders: [
-          { label: 'Name', dataType: 'string', columnId: 'name' },
-          { label: 'Age', dataType: 'number', columnId: 'age' },
-          { label: 'City', dataType: 'string', columnId: 'city' },
-          { label: 'Joined', dataType: 'date', columnId: 'joined' },
-          { label: 'Misc', dataType: 'undefined', columnId: 'misc' },
-        ],
-        slotRows: [
-          ['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'],
-        ],
-      };
-    },
+      <DocsShowCode language="javascript">
+        data() {
+          return {
+            slotHeaders: [
+              { label: 'Name', dataType: 'string', columnId: 'name' },
+              { label: 'Age', dataType: 'number', columnId: 'age' },
+              { label: 'City', dataType: 'string', columnId: 'city' },
+              { label: 'Joined', dataType: 'date', columnId: 'joined' },
+              { label: 'Misc', dataType: 'undefined', columnId: 'misc' },
+            ],
+            slotRows: [
+              ['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'],
+            ],
+          };
+        },
       </DocsShowCode>
-
+  
       <DocsShow block>
         <KTable
           :headers="slotHeaders"
@@ -164,11 +173,13 @@
         </KTable>
       </DocsShow>
       <!-- eslint-enable -->
+
       <!--Table with custom column widths-->
       <h3>Table with custom column widths</h3>
       <p>
         This is an example to show how <code>KTable</code> can be used with custom column widths. The column widths are defined in the <code>headers</code> prop. The <code>width</code> property is used to define the overall width of the column. The <code>minWidth</code> defines the minimum width of column, below which the column will not shrink.
       </p>
+
       <!-- eslint-disable -->
       <DocsShowCode language="html">
         <KTable
@@ -177,17 +188,66 @@
           caption="Table showing columns with custom widths"
           sortable
         />
+      </DocsShowCode>
 
+      <DocsShowCode language="javascript">
+        data() {
+          return {
+            headersWithCustomWidths: [
+              { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%', columnId: 'name' },
+              { label: 'Age', dataType: 'number', minWidth: '100px', width: '33%', columnId: 'age' },
+              { label: 'City', dataType: 'string', minWidth: '200px', width: '25%', columnId: 'city' },
+              {
+                label: 'Joined',
+                dataType: 'date',
+                minWidth: '150px',
+                width: '20%',
+                columnId: 'joined',
+              },
+              {
+                label: 'Misc',
+                dataType: 'undefined',
+                minWidth: '100px',
+                width: '20%',
+                columnId: 'misc',
+              },
+            ],
+            customRows: [
+              ['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'],
+            ],
+          };
+        },
       </DocsShowCode>
 
+      <DocsShow block>
+        <KTable
+          :headers="headersWithCustomWidths"
+          :rows="customRows"
+          caption="Table showing columns with custom widths"
+          sortable
+        />
+      </DocsShow>
+      <!-- eslint-enable -->
+
       <!--Table with Default Sort-->
       <h3>Table with Default Sort</h3>
       <p>
-        This is an example to show how <code>KTable</code> can be used with the <code>defaultSort</code> attribute to sort the table based on a particular column. This is useful if you are getting unsorted data from an API and want to display it in a sorted manner. The <code>defaultSort</code> attribute can be used irrespective of the <code>sortable</code> attribute.
+        This is an example to show how <code>KTable</code> can be used with the <code>defaultSort</code> attribute to sort the table based on a particular column. This is useful if you are getting unsorted data from the backend and want to display it in a sorted manner on load. The <code>defaultSort</code> attribute can be used irrespective of the <code>sortable</code> attribute (as <code>sortable</code> is used to configure whether the client has sorting capabilities or not). 
+      </p>
+
+      <p>
+        The <code>defaultSort</code> attribute takes an object with two properties - <code>columnId</code> and <code>direction</code>. The <code>columnId</code> is the unique identifier of the column based on which the table should be sorted. The <code>direction</code> can be either <code>asc</code> or <code>desc</code>.
+      </p>
+
+      <p>
+        To make use of <code>defaultSort</code>, please ensure that the <code>disableBuiltinSorting</code> attribute is not set to <code>true</code> as it will disable all sorting functionality.
       </p>
 
       <DocsShowCode language="html">
-        <h3>Sortable Table with Rows Sorted by 'Age' Column</h3>
+        <h4>Sortable Table with Rows Sorted by 'Age' Column</h4>
         <KTable
           :headers="headers"
           :rows="rows"
@@ -195,8 +255,8 @@
           sortable
           :defaultSort="{ columnId: 'age', direction: 'asc' }"
         />
-    
-        <h3>Unsortable Table with Rows Sorted by 'Age' Column</h3>
+
+        <h4>Unsortable Table with Rows Sorted by 'Age' Column</h4>
         <KTable 
           :headers="headers"
           :rows="rows"
@@ -206,6 +266,7 @@
 
       </DocsShowCode>
 
+      <!-- eslint-disable -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -225,9 +286,10 @@
           };
         },
       </DocsShowCode>
+      <!-- eslint-enable -->
 
       <DocsShow block>
-        <h3>Sortable Table with Rows Sorted by 'Age' Column</h3>
+        <h4>Sortable Table with Rows Sorted by 'Age' Column</h4>
         <KTable
           :headers="headers"
           :rows="rows"
@@ -236,7 +298,7 @@
           :defaultSort="{ columnId: 'age', direction: 'asc' }"
         />
 
-        <h3>Unsortable Table with Rows Sorted by 'Age' Column</h3>
+        <h4>Unsortable Table with Rows Sorted by 'Age' Column</h4>
         <KTable
           :headers="headers"
           :rows="rows"
@@ -245,8 +307,69 @@
         />
       </DocsShow>
 
-    </DocsPageSection>
+      <!-- Disable Builtin Sorting -->
+      <h3>Disable Builtin Sorting & Custom Sorting Logic</h3>
+      <p>
+        You can make use of the <code>disableBuiltinSorting</code> attribute to disable all sorting functionality in the table. This is useful when you want to display the data in a particular order or want to define a custom sorting mechanism. 
+      </p>
+
+      <p>
+        You should not use this attribute if the <code>sortable</code> attribute is set to <code>false</code>, as in that case the table headers for sorting will not be displayed at all. If the same is set to <code>true</code>, then table emits a <code>changeSort</code> event (whose implementation can be defined by the user) which needs to return a <code>sortOrder</code> value for the UI headers to toggle.
+      </p>
 
+      <DocsShowCode language="html">
+        <KTable
+          :headers="headers"
+          :rows="changeSortRows"
+          caption="Disable Builtin Sorting Example"
+          sortable
+          disableDefaultSorting
+          @changeSort="changeSortHandler"
+        />
+      </DocsShowCode>
+
+      <!-- eslint-disable -->
+      <DocsShowCode language="javascript">
+        data() {
+          return {
+            headers: [
+              { label: 'Name', dataType: 'string', columnId: 'name' },
+              { label: 'Age', dataType: 'number', columnId: 'age' },
+              { label: 'City', dataType: 'string', columnId: 'city' },
+            ],
+            changeSortRows: [
+              ['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'],
+            ]
+          };
+        },
+        methods: {
+          changeSortHandler(index, sortOrder) {
+            // Demo Implementation: Reverse the order of the rows and return the opposite sort order
+            console.log('Index:', index, 'Sort Order:', sortOrder);
+            this.changeSortRows = [...this.changeSortRows.reverse()];
+            return sortOrder === 'asc' ? 'desc' : 'asc';
+          }
+        }
+      </DocsShowCode>
+      <!-- eslint-enable -->
+
+      <DocsShow block>
+        <KTable
+          :headers="headers"
+          :rows="changeSortRows"
+          caption="Disable Builtin Sorting Example"
+          sortable
+          disableBuiltinSorting
+          @changeSort="changeSortHandler"
+        />
+      </DocsShow>
+
+    </DocsPageSection>
 
   </DocsPageTemplate>
 
@@ -310,8 +433,23 @@
           ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
           ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
         ],
+        changeSortRows: [
+          ['John Doe', 28, 'New York'],
+          ['Jane Smith', 34, 'Los Angeles'],
+          ['Samuel Green', 22, 'Chicago'],
+          ['Alice Johnson', 30, 'Houston'],
+          ['Michael Brown', 45, 'Phoenix'],
+        ],
       };
     },
+    methods: {
+      changeSortHandler(index, sortOrder) {
+        // Demo Implementation: Reverse the order of the rows and return the opposite sort order
+        console.log('Index:', index, 'Sort Order:', sortOrder);
+        this.changeSortRows = [...this.changeSortRows.reverse()];
+        return sortOrder === 'asc' ? 'desc' : 'asc';
+      },
+    },
   };
 
 </script>
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index debac3d2a..8df0779ba 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -95,7 +95,7 @@
 
 <script>
 
-  import { ref, computed, watch, emit } from '@vue/composition-api';
+  import { ref, computed, watch } from '@vue/composition-api';
   import useSorting, {
     SORT_ORDER_ASC,
     SORT_ORDER_DESC,
@@ -109,15 +109,15 @@
     components: {
       KTableGridItem,
     },
-    setup(props) {
+    setup(props, { emit }) {
       const headers = ref(props.headers);
       const rows = ref(props.rows);
+      const disableBuiltinSorting = ref(props.disableBuiltinSorting);
 
       const defaultSort = ref({
         index: props.headers.findIndex(h => h.columnId === props.defaultSort.columnId),
         direction: props.defaultSort.direction,
       });
-      const useLocalSorting = ref(props.sortable && !props.disableBuiltinSorting);
 
       const {
         sortKey,
@@ -125,7 +125,7 @@
         sortedRows,
         handleSort: localHandleSort,
         getAriaSort,
-      } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
 
       const isTableEmpty = computed(() => sortedRows.value.length === 0);
 
@@ -141,17 +141,14 @@
           return;
         }
 
-        // If we are using local sorting, then we need to sort the rows locally
-        if (useLocalSorting.value) {
-          localHandleSort(index);
-        } else {
+        if (props.disableBuiltinSorting && props.sortable) {
           // Emit the event to the parent component to provide the sorting logic
           emit(
             'changeSort',
             index,
             sortOrder.value === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC
           );
-        }
+        } else localHandleSort(index);
       };
 
       const getHeaderStyle = header => {
@@ -186,7 +183,7 @@
           const uniqueColumnIds = new Set(value.map(h => h.columnId));
 
           return (
-            uniqueColumnIds.length == value.length &&
+            uniqueColumnIds.size == value.length &&
             value.every(
               header =>
                 ['label', 'dataType', 'columnId'].every(key => key in header) &&
@@ -239,7 +236,9 @@
         required: false,
         default: () => ({}),
         validator: function(value) {
-          if (value === {}) return true;
+          if (Object.keys(value).length === 0) {
+            return true;
+          }
 
           return (
             ['columnId', 'direction'].every(key => key in value) &&
@@ -248,8 +247,8 @@
           );
         },
       },
-      /*
-       * Disables all the sorting functionality provided by the component. This is useful when you want to define you own sorting logic. Refer to the documentation for more details.
+      /**
+       * Disables all the sorting functionality provided by the component. This is useful when you want to define you own sorting logic. Refer to the examples above for more details.
        */
       disableBuiltinSorting: {
         type: Boolean,
diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
index b1b5406b1..a2b9c95a5 100644
--- a/lib/KTable/useSorting/index.js
+++ b/lib/KTable/useSorting/index.js
@@ -15,10 +15,10 @@ export const DATA_TYPE_OTHERS = 'undefined';
  * @param {Ref<Array>} rows - Reactive reference to the table rows.
  * @param {Ref<Object>} defaultSort - Computed reactive reference to object describing if default sorting should be used.
  * It has the properties as 'index' denoting the row index to be used for default sorting, and 'direction' denoting the sort order.
- * @param {Ref<Boolean>} useLocalSorting - Reactive reference to disable all forms of sorting by the hook.
+ * @param {Ref<Boolean>} disableBuiltinSorting - Reactive reference to disable all forms of sorting by the hook.
  * @returns {Object} - An object containing reactive references and methods for sorting.
  */
-export default function useSorting(headers, rows, defaultSort, useLocalSorting) {
+export default function useSorting(headers, rows, defaultSort, disableBuiltinSorting) {
   const sortKey = ref(null);
   const sortOrder = ref(null);
 
@@ -27,8 +27,7 @@ export default function useSorting(headers, rows, defaultSort, useLocalSorting)
    * If local sorting is disabled or no sort key is set, it returns the original rows.
    */
   const sortedRows = computed(() => {
-    // If sorting is disabled, return the original rows
-    if (!useLocalSorting.value) return rows.value;
+    if (disableBuiltinSorting.value) return rows.value;
 
     // No sort key or value has been explicity set till now
     if (sortKey.value === null || sortOrder.value === null) {

From 8aa0cf3be61f24aeae1f136f9398777cf8dc71a8 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Tue, 19 Nov 2024 13:18:42 +0530
Subject: [PATCH 09/17] minor typo fix

---
 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 8df0779ba..856f656e7 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -248,7 +248,7 @@
         },
       },
       /**
-       * Disables all the sorting functionality provided by the component. This is useful when you want to define you own sorting logic. Refer to the examples above for more details.
+       * Disables all the sorting functionality provided by the component. This is useful when you want to define your own sorting logic. Refer to the examples above for more details.
        */
       disableBuiltinSorting: {
         type: Boolean,

From 91ba7614f6fb8a99e2423f519851c4940bc1fb6c Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:15:26 +0530
Subject: [PATCH 10/17] update custom sorting API

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

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 95c76aa37..ba7016f8d 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -235,7 +235,7 @@
       <!--Table with Default Sort-->
       <h3>Table with Default Sort</h3>
       <p>
-        This is an example to show how <code>KTable</code> can be used with the <code>defaultSort</code> attribute to sort the table based on a particular column. This is useful if you are getting unsorted data from the backend and want to display it in a sorted manner on load. The <code>defaultSort</code> attribute can be used irrespective of the <code>sortable</code> attribute (as <code>sortable</code> is used to configure whether the client has sorting capabilities or not). 
+        This is an example to show how <code>KTable</code> can be used with the <code>defaultSort</code> attribute to sort the table based on a particular column. This is useful if the table needs to be sorted based on any column from the beginning itself (by default). The <code>defaultSort</code> attribute can be used irrespective of the <code>sortable</code> attribute (as <code>sortable</code> is used to configure whether the client has sorting capabilities or not). 
       </p>
 
       <p>
@@ -243,7 +243,7 @@
       </p>
 
       <p>
-        To make use of <code>defaultSort</code>, please ensure that the <code>disableBuiltinSorting</code> attribute is not set to <code>true</code> as it will disable all sorting functionality.
+        To make use of <code>defaultSort</code>, please ensure that the <code>disableBuiltinSorting</code> attribute is not set to <code>true</code>.
       </p>
 
       <DocsShowCode language="html">
@@ -314,7 +314,17 @@
       </p>
 
       <p>
-        You should not use this attribute if the <code>sortable</code> attribute is set to <code>false</code>, as in that case the table headers for sorting will not be displayed at all. If the same is set to <code>true</code>, then table emits a <code>changeSort</code> event (whose implementation can be defined by the user) which needs to return a <code>sortOrder</code> value for the UI headers to toggle.
+        You should not use this attribute if the <code>sortable</code> attribute is set to <code>false</code>, as in that case the table headers for sorting will not be displayed at all. If the same is set to <code>true</code>, then table emits a <code>changeSort</code> event with column index of the header clicked and the sort order to notify the parent component to handle the sorting logic. 
+      </p>
+
+      <p>
+        You can also define a custom sorting logic using the <code>customSort</code> attribute. The <code>customSort</code> attribute takes a function that accepts the rows, column index and the current sort order as arguments. The function should return an object with the following properties:
+        <ul>
+          <li><code>rows</code>: The sorted rows</li>
+          <li><code>sortOrder</code>: The sort order of the column</li>
+          <li><code>sortKey</code>: The column index based on which the sorting was done</li>
+        </ul>
+        These values are then used by the component to update the state of the table data and the headers. You can set the <code>sortOrder</code> to one of <code>['asc', 'desc', null]</code> to convey the sort order to the table. The <code>sortKey</code> is the column index based on which the sorting was done, and can be set to <code>null</code> as well to convey that no sorting was done.
       </p>
 
       <DocsShowCode language="html">
@@ -324,6 +334,7 @@
           caption="Disable Builtin Sorting Example"
           sortable
           disableDefaultSorting
+          :customSort="customSort"
           @changeSort="changeSortHandler"
         />
       </DocsShowCode>
@@ -349,12 +360,19 @@
         },
         methods: {
           changeSortHandler(index, sortOrder) {
-            // Demo Implementation: Reverse the order of the rows and return the opposite sort order
-            console.log('Index:', index, 'Sort Order:', sortOrder);
-            this.changeSortRows = [...this.changeSortRows.reverse()];
-            return sortOrder === 'asc' ? 'desc' : 'asc';
-          }
-        }
+            console.log(`changeSort event emitted with index: ${index} and sortOrder: ${sortOrder}`);
+          },
+          customSort(rows, columnIndex, currentSortOrder) {
+            // Demo Implementation: Reverse the order of the rows irrespective of the current sort order
+            console.log(`Custom sorting logic applied for column index: ${columnIndex}`);
+            const newRows = rows.reverse();
+            return {
+              rows: newRows,
+              sortOrder: currentSortOrder === "asc" ? "desc" : "asc",
+              sortKey: columnIndex,
+            }
+          },
+        },
       </DocsShowCode>
       <!-- eslint-enable -->
 
@@ -365,6 +383,7 @@
           caption="Disable Builtin Sorting Example"
           sortable
           disableBuiltinSorting
+          :customSort="customSort"
           @changeSort="changeSortHandler"
         />
       </DocsShow>
@@ -444,10 +463,17 @@
     },
     methods: {
       changeSortHandler(index, sortOrder) {
-        // Demo Implementation: Reverse the order of the rows and return the opposite sort order
-        console.log('Index:', index, 'Sort Order:', sortOrder);
-        this.changeSortRows = [...this.changeSortRows.reverse()];
-        return sortOrder === 'asc' ? 'desc' : 'asc';
+        console.log(`changeSort event emitted with index: ${index} and sortOrder: ${sortOrder}`);
+      },
+      customSort(rows, columnIndex, currentSortOrder) {
+        // Demo Implementation: Reverse the order of the rows irrespective of the current sort order
+        console.log(`Custom sorting logic applied for column index: ${columnIndex}`);
+        const newRows = rows.reverse();
+        return {
+          rows: newRows,
+          sortOrder: currentSortOrder === "asc" ? "desc" : "asc",
+          sortKey: columnIndex,
+        }
       },
     },
   };
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 856f656e7..3b641713a 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -142,12 +142,24 @@
         }
 
         if (props.disableBuiltinSorting && props.sortable) {
-          // Emit the event to the parent component to provide the sorting logic
+          // Emit the event to the parent to notify that the sorting has been requested
           emit(
             'changeSort',
             index,
             sortOrder.value === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC
           );
+
+          if (props.customSort) {
+            const { sortedRows: newSortedRows, sortOrder: newSortOrder, sortKey: newSortKey } = props.customSort(
+              rows.value,
+              index,
+              sortOrder.value
+            );
+
+            rows.value = newSortedRows;
+            sortOrder.value = newSortOrder;
+            sortKey.value = newSortKey;
+          }
         } else localHandleSort(index);
       };
 
@@ -255,6 +267,14 @@
         default: false,
         required: false,
       },
+      /*
+      * A function that is called when the user sorts the table. The function recieves the current rows, the column index and the current sort order as arguments. This function is called only when `disableBuiltinSorting` is set to `true` and the table is sortable. 
+      */
+      customSort: {
+        type: Function,
+        required: false,
+        default: undefined,
+      }
     },
     data() {
       return {

From 720921fd612a0e7ca5b2469ee3e8bfaf756801df Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:52:40 +0530
Subject: [PATCH 11/17] update tests for the new functionalities as well

---
 docs/pages/ktable.vue                         | 10 +-
 lib/KTable/index.vue                          | 22 ++---
 lib/KTable/useSorting/__tests__/index.spec.js | 64 ++++++++-----
 lib/__tests__/KTable.spec.js                  | 92 ++++++++++++++++++-
 4 files changed, 146 insertions(+), 42 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index ba7016f8d..a26479230 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -13,14 +13,14 @@
         </ul>
       </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, as a simple table. 
       </p>
-  
+
       <DocsShowCode language="html">
         <KTable
           :headers="headers"
@@ -154,7 +154,7 @@
           };
         },
       </DocsShowCode>
-  
+
       <DocsShow block>
         <KTable
           :headers="slotHeaders"
@@ -471,9 +471,9 @@
         const newRows = rows.reverse();
         return {
           rows: newRows,
-          sortOrder: currentSortOrder === "asc" ? "desc" : "asc",
+          sortOrder: currentSortOrder === 'asc' ? 'desc' : 'asc',
           sortKey: columnIndex,
-        }
+        };
       },
     },
   };
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 3b641713a..07f44a22c 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -143,18 +143,14 @@
 
         if (props.disableBuiltinSorting && props.sortable) {
           // Emit the event to the parent to notify that the sorting has been requested
-          emit(
-            'changeSort',
-            index,
-            sortOrder.value === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC
-          );
+          emit('changeSort', index, sortOrder.value);
 
           if (props.customSort) {
-            const { sortedRows: newSortedRows, sortOrder: newSortOrder, sortKey: newSortKey } = props.customSort(
-              rows.value,
-              index,
-              sortOrder.value
-            );
+            const {
+              sortedRows: newSortedRows,
+              sortOrder: newSortOrder,
+              sortKey: newSortKey,
+            } = props.customSort(rows.value, index, sortOrder.value);
 
             rows.value = newSortedRows;
             sortOrder.value = newSortOrder;
@@ -268,13 +264,13 @@
         required: false,
       },
       /*
-      * A function that is called when the user sorts the table. The function recieves the current rows, the column index and the current sort order as arguments. This function is called only when `disableBuiltinSorting` is set to `true` and the table is sortable. 
-      */
+       * A function that is called when the user sorts the table. The function recieves the current rows, the column index and the current sort order as arguments. This function is called only when `disableBuiltinSorting` is set to `true` and the table is sortable.
+       */
       customSort: {
         type: Function,
         required: false,
         default: undefined,
-      }
+      },
     },
     data() {
       return {
diff --git a/lib/KTable/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
index 816d2be85..12cb77d28 100644
--- a/lib/KTable/useSorting/__tests__/index.spec.js
+++ b/lib/KTable/useSorting/__tests__/index.spec.js
@@ -9,7 +9,7 @@ import useSorting, {
 } from '../';
 
 describe('useSorting', () => {
-  let headers, rows, defaultSort, useLocalSorting;
+  let headers, rows, defaultSort, disableBuiltinSorting;
 
   beforeEach(() => {
     headers = ref([
@@ -30,7 +30,7 @@ describe('useSorting', () => {
       index: -1,
     });
 
-    useLocalSorting = ref(true);
+    disableBuiltinSorting = ref(false);
   });
 
   describe('default sorting', () => {
@@ -39,7 +39,7 @@ describe('useSorting', () => {
         index: -1,
       };
 
-      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
       expect(sortedRows.value).toEqual(rows.value);
     });
 
@@ -49,7 +49,7 @@ describe('useSorting', () => {
         direction: 'asc',
       };
 
-      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
       expect(sortedRows.value).toEqual([
         ['Alice', 28, new Date(1992, 8, 10)],
         ['Jane', 25, new Date(1995, 10, 20)],
@@ -63,7 +63,7 @@ describe('useSorting', () => {
         direction: 'desc',
       };
 
-      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
       expect(sortedRows.value).toEqual([
         ['John', 30, new Date(1990, 5, 15)],
         ['Jane', 25, new Date(1995, 10, 20)],
@@ -77,7 +77,7 @@ describe('useSorting', () => {
         direction: 'asc',
       };
 
-      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
       expect(sortedRows.value).toEqual([
         ['Jane', 25, new Date(1995, 10, 20)],
         ['Alice', 28, new Date(1992, 8, 10)],
@@ -91,7 +91,7 @@ describe('useSorting', () => {
         direction: 'asc',
       };
 
-      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
       expect(sortedRows.value).toEqual([
         ['John', 30, new Date(1990, 5, 15)],
         ['Alice', 28, new Date(1992, 8, 10)],
@@ -100,36 +100,46 @@ describe('useSorting', () => {
     });
   });
 
-  describe('useLocalSorting is set to false', () => {
-    it('should return rows unsorted when useLocalSorting is false', () => {
-      useLocalSorting.value = false;
+  describe('disableBuiltinSorting is set to true', () => {
+    it('should return rows unsorted when disableBuiltinSorting is true', () => {
+      disableBuiltinSorting.value = true;
 
-      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
       expect(sortedRows.value).toEqual(rows.value);
     });
 
     it('should return the rows unsorted even when default sorting is enabled', () => {
-      useLocalSorting.value = false;
+      disableBuiltinSorting.value = true;
       defaultSort.value = {
         index: 0,
         direction: 'asc',
       };
 
-      const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
       expect(sortedRows.value).toEqual(rows.value);
     });
 
     it('should not sort rows even when a column is clicked', () => {
-      useLocalSorting.value = false;
-
-      const { handleSort, sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+      disableBuiltinSorting.value = true;
+
+      const { handleSort, sortedRows } = useSorting(
+        headers,
+        rows,
+        defaultSort,
+        disableBuiltinSorting
+      );
       handleSort(0); // Sort by 'Name'
       expect(sortedRows.value).toEqual(rows.value);
     });
   });
 
   it('should sort rows by string column in ascending order', () => {
-    const { handleSort, sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+    const { handleSort, sortedRows } = useSorting(
+      headers,
+      rows,
+      defaultSort,
+      disableBuiltinSorting
+    );
 
     handleSort(0); // Sort by 'Name'
     expect(sortedRows.value).toEqual([
@@ -144,7 +154,7 @@ describe('useSorting', () => {
       headers,
       rows,
       defaultSort,
-      useLocalSorting
+      disableBuiltinSorting
     );
 
     handleSort(1); // Sort by 'Age'
@@ -173,7 +183,12 @@ describe('useSorting', () => {
   });
 
   it('should sort rows by date column in ascending order', () => {
-    const { handleSort, sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
+    const { handleSort, sortedRows } = useSorting(
+      headers,
+      rows,
+      defaultSort,
+      disableBuiltinSorting
+    );
 
     handleSort(2); // Sort by 'Birthdate'
     expect(sortedRows.value).toEqual([
@@ -188,7 +203,7 @@ describe('useSorting', () => {
       headers,
       rows,
       defaultSort,
-      useLocalSorting
+      disableBuiltinSorting
     );
 
     handleSort(3); // Attempt to sort by 'Other'
@@ -197,7 +212,12 @@ describe('useSorting', () => {
   });
 
   it('should return correct aria-sort attribute based on current sorting', () => {
-    const { handleSort, getAriaSort } = useSorting(headers, rows, defaultSort, useLocalSorting);
+    const { handleSort, getAriaSort } = useSorting(
+      headers,
+      rows,
+      defaultSort,
+      disableBuiltinSorting
+    );
 
     expect(getAriaSort(0)).toBe('none');
 
@@ -213,7 +233,7 @@ describe('useSorting', () => {
       headers,
       rows,
       defaultSort,
-      useLocalSorting
+      disableBuiltinSorting
     );
 
     handleSort(0); // Sort by 'Name'
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 9b8332114..835438d2c 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -42,7 +42,7 @@ describe('KTable.vue', () => {
     const headers = [
       { label: 'Name', dataType: 'string', columnId: 'name' },
       { label: 'Age', dataType: 'number', columnId: 'age' },
-      { label: 'City', dataType: 'string', columnId: 'city' },
+      { label: 'Date', dataType: 'date', columnId: 'date' },
     ];
     const rows = [
       ['John', 30, '2023-01-01'],
@@ -94,8 +94,8 @@ describe('KTable.vue', () => {
       await wrapper.vm.$nextTick();
       const expectedRows = [
         ['Alice', 25, 'Los Angeles'],
-        ['Bob', 35, 'San Francisco'],
         ['John', 30, 'New York'],
+        ['Bob', 35, 'San Francisco'],
       ];
       assertTableContent(wrapper, expectedRows);
     });
@@ -120,6 +120,94 @@ describe('KTable.vue', () => {
     });
   });
 
+  describe('should handle disableBuiltinSorting correctly', () => {
+    const headers = [
+      { label: 'Name', dataType: 'string', columnId: 'name' },
+      { label: 'Age', dataType: 'number', columnId: 'age' },
+      { label: 'City', dataType: 'string', columnId: 'city' },
+    ];
+
+    const rows = [
+      ['John', 30, 'New York'],
+      ['Alice', 25, 'Los Angeles'],
+      ['Bob', 35, 'San Francisco'],
+    ];
+
+    const renderWrapper = async props => {
+      const wrapper = mount(KTable, {
+        propsData: {
+          headers,
+          rows,
+          caption: 'Test Table',
+          disableBuiltinSorting: true,
+          sortable: true,
+          ...props,
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+      return wrapper;
+    };
+
+    it('should not sort the rows', async () => {
+      const wrapper = await renderWrapper();
+      assertTableContent(wrapper, rows);
+    });
+
+    it('should not sort even if default sort is provided', async () => {
+      const wrapper = await renderWrapper({ defaultSort: { columnId: 'age', direction: 'asc' } });
+      assertTableContent(wrapper, rows);
+    });
+
+    it('should emit changeSort event when sortable column is clicked', async () => {
+      const wrapper = await renderWrapper();
+
+      const headerCells = wrapper.findAll('thead th');
+      await headerCells.at(1).trigger('click');
+
+      expect(wrapper.emitted('changeSort')).toBeTruthy();
+      const eventPayload = wrapper.emitted('changeSort')[0];
+      expect(eventPayload).toEqual([1, null]);
+    });
+
+    it('should call the custom sort function when sortable column is clicked', async () => {
+      const mockSortFunction = jest.fn();
+
+      const wrapper = await renderWrapper({ customSort: mockSortFunction });
+
+      const headerCells = wrapper.findAll('thead th');
+      await headerCells.at(1).trigger('click');
+
+      expect(mockSortFunction).toHaveBeenCalled();
+      expect(mockSortFunction).toHaveBeenCalledWith(rows, 1, null);
+    });
+
+    it('should change the table rows based on the custom sort function', async () => {
+      // Sort the rows by the second column in ascending order
+      const customSortFunction = jest.fn().mockImplementation(rows => {
+        return {
+          rows: rows.sort((a, b) => a[1] - b[1]),
+          sortKey: 1,
+          sortOrder: 'desc',
+        };
+      });
+
+      const wrapper = await renderWrapper({ customSort: customSortFunction });
+      const headerCells = wrapper.findAll('thead th');
+      await headerCells.at(1).trigger('click');
+
+      const sortedRows = [
+        ['Alice', 25, 'Los Angeles'],
+        ['John', 30, 'New York'],
+        ['Bob', 35, 'San Francisco'],
+      ];
+      assertTableContent(wrapper, sortedRows);
+
+      await headerCells.at(1).trigger('click');
+      expect(customSortFunction).toHaveBeenCalledWith(sortedRows, 1, 'desc');
+    });
+  });
+
   it('should handle sticky headers and columns', async () => {
     const headers = [
       { label: 'Name', dataType: 'string', columnId: 'name' },

From 66b33609205cf79e7c3c5540a83b1ca21b28cc14 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:05:22 +0530
Subject: [PATCH 12/17] minor changes to improve the documentation quality

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

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index a26479230..3f0cb6d78 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -310,21 +310,21 @@
       <!-- Disable Builtin Sorting -->
       <h3>Disable Builtin Sorting & Custom Sorting Logic</h3>
       <p>
-        You can make use of the <code>disableBuiltinSorting</code> attribute to disable all sorting functionality in the table. This is useful when you want to display the data in a particular order or want to define a custom sorting mechanism. 
+        You can make use of the <code>disableBuiltinSorting</code> attribute to disable all sorting functionality by the table component. This is useful when you want to display the data in a particular order or you want to define a custom sorting function. 
       </p>
 
       <p>
-        You should not use this attribute if the <code>sortable</code> attribute is set to <code>false</code>, as in that case the table headers for sorting will not be displayed at all. If the same is set to <code>true</code>, then table emits a <code>changeSort</code> event with column index of the header clicked and the sort order to notify the parent component to handle the sorting logic. 
+        You should not use this attribute if <code>sortable</code> is set to <code>false</code>. If <code>sortable</code> is set to <code>true</code>, then the table component will emit a <code>changeSort</code> event with column index of the header clicked and the sort order to notify the parent component to handle the sorting logic. 
       </p>
 
       <p>
-        You can also define a custom sorting logic using the <code>customSort</code> attribute. The <code>customSort</code> attribute takes a function that accepts the rows, column index and the current sort order as arguments. The function should return an object with the following properties:
+        You can also define custom sorting logic in such a scenario using the <code>customSort</code> attribute. The <code>customSort</code> attribute takes a function that accepts the current rows, column index of the click, and the current sort order as arguments. The function should return an object with the following properties:
         <ul>
           <li><code>rows</code>: The sorted rows</li>
           <li><code>sortOrder</code>: The sort order of the column</li>
           <li><code>sortKey</code>: The column index based on which the sorting was done</li>
         </ul>
-        These values are then used by the component to update the state of the table data and the headers. You can set the <code>sortOrder</code> to one of <code>['asc', 'desc', null]</code> to convey the sort order to the table. The <code>sortKey</code> is the column index based on which the sorting was done, and can be set to <code>null</code> as well to convey that no sorting was done.
+        These values are used by the <code>KTable</code> component to update the table rows and headers. You can set the <code>sortOrder</code> to one of <code>['asc', 'desc', null]</code> to convey the sort order. The <code>sortKey</code> is the column index based on which the sorting was done, and can be set to <code>null</code> as well to convey the default no-sorting state.
       </p>
 
       <DocsShowCode language="html">
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 07f44a22c..a58485762 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -263,8 +263,8 @@
         default: false,
         required: false,
       },
-      /*
-       * A function that is called when the user sorts the table. The function recieves the current rows, the column index and the current sort order as arguments. This function is called only when `disableBuiltinSorting` is set to `true` and the table is sortable.
+      /**
+       * Thus function is called when the user clicks on the headers of a sortable table with inbuilt sorting disabled. The function recieves the current rows, the column index and the current sort order as arguments.
        */
       customSort: {
         type: Function,

From e0e446a422b85d3d19b7d8059dbcbeea13d17cd1 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:25:15 +0530
Subject: [PATCH 13/17] remove custom sorting

---
 docs/pages/ktable.vue        | 34 +--------------------------------
 lib/KTable/index.vue         | 20 -------------------
 lib/__tests__/KTable.spec.js | 37 ------------------------------------
 3 files changed, 1 insertion(+), 90 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 3f0cb6d78..438fc8989 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -308,7 +308,7 @@
       </DocsShow>
 
       <!-- Disable Builtin Sorting -->
-      <h3>Disable Builtin Sorting & Custom Sorting Logic</h3>
+      <h3>Disable Builtin Sorting</h3>
       <p>
         You can make use of the <code>disableBuiltinSorting</code> attribute to disable all sorting functionality by the table component. This is useful when you want to display the data in a particular order or you want to define a custom sorting function. 
       </p>
@@ -317,16 +317,6 @@
         You should not use this attribute if <code>sortable</code> is set to <code>false</code>. If <code>sortable</code> is set to <code>true</code>, then the table component will emit a <code>changeSort</code> event with column index of the header clicked and the sort order to notify the parent component to handle the sorting logic. 
       </p>
 
-      <p>
-        You can also define custom sorting logic in such a scenario using the <code>customSort</code> attribute. The <code>customSort</code> attribute takes a function that accepts the current rows, column index of the click, and the current sort order as arguments. The function should return an object with the following properties:
-        <ul>
-          <li><code>rows</code>: The sorted rows</li>
-          <li><code>sortOrder</code>: The sort order of the column</li>
-          <li><code>sortKey</code>: The column index based on which the sorting was done</li>
-        </ul>
-        These values are used by the <code>KTable</code> component to update the table rows and headers. You can set the <code>sortOrder</code> to one of <code>['asc', 'desc', null]</code> to convey the sort order. The <code>sortKey</code> is the column index based on which the sorting was done, and can be set to <code>null</code> as well to convey the default no-sorting state.
-      </p>
-
       <DocsShowCode language="html">
         <KTable
           :headers="headers"
@@ -334,7 +324,6 @@
           caption="Disable Builtin Sorting Example"
           sortable
           disableDefaultSorting
-          :customSort="customSort"
           @changeSort="changeSortHandler"
         />
       </DocsShowCode>
@@ -362,16 +351,6 @@
           changeSortHandler(index, sortOrder) {
             console.log(`changeSort event emitted with index: ${index} and sortOrder: ${sortOrder}`);
           },
-          customSort(rows, columnIndex, currentSortOrder) {
-            // Demo Implementation: Reverse the order of the rows irrespective of the current sort order
-            console.log(`Custom sorting logic applied for column index: ${columnIndex}`);
-            const newRows = rows.reverse();
-            return {
-              rows: newRows,
-              sortOrder: currentSortOrder === "asc" ? "desc" : "asc",
-              sortKey: columnIndex,
-            }
-          },
         },
       </DocsShowCode>
       <!-- eslint-enable -->
@@ -383,7 +362,6 @@
           caption="Disable Builtin Sorting Example"
           sortable
           disableBuiltinSorting
-          :customSort="customSort"
           @changeSort="changeSortHandler"
         />
       </DocsShow>
@@ -465,16 +443,6 @@
       changeSortHandler(index, sortOrder) {
         console.log(`changeSort event emitted with index: ${index} and sortOrder: ${sortOrder}`);
       },
-      customSort(rows, columnIndex, currentSortOrder) {
-        // Demo Implementation: Reverse the order of the rows irrespective of the current sort order
-        console.log(`Custom sorting logic applied for column index: ${columnIndex}`);
-        const newRows = rows.reverse();
-        return {
-          rows: newRows,
-          sortOrder: currentSortOrder === 'asc' ? 'desc' : 'asc',
-          sortKey: columnIndex,
-        };
-      },
     },
   };
 
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index a58485762..a160368ff 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -144,18 +144,6 @@
         if (props.disableBuiltinSorting && props.sortable) {
           // Emit the event to the parent to notify that the sorting has been requested
           emit('changeSort', index, sortOrder.value);
-
-          if (props.customSort) {
-            const {
-              sortedRows: newSortedRows,
-              sortOrder: newSortOrder,
-              sortKey: newSortKey,
-            } = props.customSort(rows.value, index, sortOrder.value);
-
-            rows.value = newSortedRows;
-            sortOrder.value = newSortOrder;
-            sortKey.value = newSortKey;
-          }
         } else localHandleSort(index);
       };
 
@@ -263,14 +251,6 @@
         default: false,
         required: false,
       },
-      /**
-       * Thus function is called when the user clicks on the headers of a sortable table with inbuilt sorting disabled. The function recieves the current rows, the column index and the current sort order as arguments.
-       */
-      customSort: {
-        type: Function,
-        required: false,
-        default: undefined,
-      },
     },
     data() {
       return {
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 835438d2c..507106afd 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -169,43 +169,6 @@ describe('KTable.vue', () => {
       const eventPayload = wrapper.emitted('changeSort')[0];
       expect(eventPayload).toEqual([1, null]);
     });
-
-    it('should call the custom sort function when sortable column is clicked', async () => {
-      const mockSortFunction = jest.fn();
-
-      const wrapper = await renderWrapper({ customSort: mockSortFunction });
-
-      const headerCells = wrapper.findAll('thead th');
-      await headerCells.at(1).trigger('click');
-
-      expect(mockSortFunction).toHaveBeenCalled();
-      expect(mockSortFunction).toHaveBeenCalledWith(rows, 1, null);
-    });
-
-    it('should change the table rows based on the custom sort function', async () => {
-      // Sort the rows by the second column in ascending order
-      const customSortFunction = jest.fn().mockImplementation(rows => {
-        return {
-          rows: rows.sort((a, b) => a[1] - b[1]),
-          sortKey: 1,
-          sortOrder: 'desc',
-        };
-      });
-
-      const wrapper = await renderWrapper({ customSort: customSortFunction });
-      const headerCells = wrapper.findAll('thead th');
-      await headerCells.at(1).trigger('click');
-
-      const sortedRows = [
-        ['Alice', 25, 'Los Angeles'],
-        ['John', 30, 'New York'],
-        ['Bob', 35, 'San Francisco'],
-      ];
-      assertTableContent(wrapper, sortedRows);
-
-      await headerCells.at(1).trigger('click');
-      expect(customSortFunction).toHaveBeenCalledWith(sortedRows, 1, 'desc');
-    });
   });
 
   it('should handle sticky headers and columns', async () => {

From 328c1d3b8a90f81db9a9d0ebd8bb3e2e061f0b6e Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:30:10 +0530
Subject: [PATCH 14/17] minor documentation updates

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

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 438fc8989..bc0b176cd 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -320,7 +320,7 @@
       <DocsShowCode language="html">
         <KTable
           :headers="headers"
-          :rows="changeSortRows"
+          :rows="rows"
           caption="Disable Builtin Sorting Example"
           sortable
           disableDefaultSorting
@@ -337,7 +337,7 @@
               { label: 'Age', dataType: 'number', columnId: 'age' },
               { label: 'City', dataType: 'string', columnId: 'city' },
             ],
-            changeSortRows: [
+            rows: [
               ['John Doe', 28, 'New York'],
               ['Jane Smith', 34, 'Los Angeles'],
               ['Samuel Green', 22, 'Chicago'],
@@ -358,7 +358,7 @@
       <DocsShow block>
         <KTable
           :headers="headers"
-          :rows="changeSortRows"
+          :rows="rows"
           caption="Disable Builtin Sorting Example"
           sortable
           disableBuiltinSorting
@@ -430,13 +430,6 @@
           ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
           ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
         ],
-        changeSortRows: [
-          ['John Doe', 28, 'New York'],
-          ['Jane Smith', 34, 'Los Angeles'],
-          ['Samuel Green', 22, 'Chicago'],
-          ['Alice Johnson', 30, 'Houston'],
-          ['Michael Brown', 45, 'Phoenix'],
-        ],
       };
     },
     methods: {

From 45c105a540e6696ebdc5e9f074dca7f62dfca1a0 Mon Sep 17 00:00:00 2001
From: Eshaan Aggarwal <96648934+EshaanAgg@users.noreply.github.com>
Date: Thu, 21 Nov 2024 07:26:52 +0530
Subject: [PATCH 15/17] Documentation clarity suggestions from code review

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

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index bc0b176cd..801155d8e 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -61,12 +61,13 @@
       </DocsShow>
 
       <!-- Frontend Sorting Example-->
-      <h3>Table with Sorting</h3>
+      <h3>Table with sorting</h3>
       <p>
-        The <code>KTable</code> can be used with 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 sorting enabled. To allow client side sorting, set the <code>sortable</code> attribute to <code>true</code>.
+        The <code>KTable</code> offers built-in sorting functionality. 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 sorting enabled via the <code>sortable</code> prop.
+        
       </p>
       <p>
-        You can also notice that clicking the same header multiple times toggles the sort direction cyclically in the order of <code>asc</code>, <code>desc</code> and <code>none</code>. The <code>none</code> state is the default state when the table is loaded by default.
+       Clicking the same header multiple times toggles the sort direction cyclically in the order of ascending, descending, and unsorted.
       </p>
 
       <DocsShowCode language="html">
@@ -233,9 +234,9 @@
       <!-- eslint-enable -->
 
       <!--Table with Default Sort-->
-      <h3>Table with Default Sort</h3>
+      <h3>Table with default sort</h3>
       <p>
-        This is an example to show how <code>KTable</code> can be used with the <code>defaultSort</code> attribute to sort the table based on a particular column. This is useful if the table needs to be sorted based on any column from the beginning itself (by default). The <code>defaultSort</code> attribute can be used irrespective of the <code>sortable</code> attribute (as <code>sortable</code> is used to configure whether the client has sorting capabilities or not). 
+        This is an example to show how to use the <code>defaultSort</code> prop to sort the table based on a particular column upon the initial load. The <code>defaultSort</code> attribute can be used irrespective of the <code>sortable</code> attribute.
       </p>
 
       <p>
@@ -247,7 +248,7 @@
       </p>
 
       <DocsShowCode language="html">
-        <h4>Sortable Table with Rows Sorted by 'Age' Column</h4>
+        <h4>Sortable table with rows sorted by 'Age' column</h4>
         <KTable
           :headers="headers"
           :rows="rows"
@@ -256,7 +257,7 @@
           :defaultSort="{ columnId: 'age', direction: 'asc' }"
         />
 
-        <h4>Unsortable Table with Rows Sorted by 'Age' Column</h4>
+        <h4>Unsortable table with rows sorted by 'Age' column</h4>
         <KTable 
           :headers="headers"
           :rows="rows"
@@ -308,9 +309,9 @@
       </DocsShow>
 
       <!-- Disable Builtin Sorting -->
-      <h3>Disable Builtin Sorting</h3>
+      <h3>Disable built-in sorting</h3>
       <p>
-        You can make use of the <code>disableBuiltinSorting</code> attribute to disable all sorting functionality by the table component. This is useful when you want to display the data in a particular order or you want to define a custom sorting function. 
+        For <code>sortable</code> tables, you can use the <code>disableBuiltinSorting</code> prop to disable built-in sort function. This is useful when the table receives already sorted data, for example when sorting is done by backend or a custom sorting function outside the table. In this case, when one of the header sort buttons is clicked, the table won't sort the column itself, but only emit the <code>changeSort</code> event to notify the parent component to handle the sorting logic. The event contains column index of the header and the sort order in its payload.
       </p>
 
       <p>

From 09f55f43235fb8c37c44a345bd4045a7c0503a89 Mon Sep 17 00:00:00 2001
From: EshaanAgg <96648934+EshaanAgg@users.noreply.github.com>
Date: Thu, 21 Nov 2024 07:44:53 +0530
Subject: [PATCH 16/17] lint fix and other minor review changes

---
 docs/pages/ktable.vue | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 801155d8e..831535b15 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -39,15 +39,15 @@
               { label: 'Age', dataType: 'number', columnId: 'age' },
               { label: 'City', dataType: 'string', columnId: 'city' },
             ],
-          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'],
-            ]
-          };
+            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>
       <!-- eslint-enable -->
@@ -64,10 +64,9 @@
       <h3>Table with sorting</h3>
       <p>
         The <code>KTable</code> offers built-in sorting functionality. 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 sorting enabled via the <code>sortable</code> prop.
-        
       </p>
       <p>
-       Clicking the same header multiple times toggles the sort direction cyclically in the order of ascending, descending, and unsorted.
+        Clicking the same header multiple times toggles the sort direction cyclically in the order of ascending, descending, and unsorted.
       </p>
 
       <DocsShowCode language="html">
@@ -233,7 +232,7 @@
       </DocsShow>
       <!-- eslint-enable -->
 
-      <!--Table with Default Sort-->
+      <!--Table with default sort-->
       <h3>Table with default sort</h3>
       <p>
         This is an example to show how to use the <code>defaultSort</code> prop to sort the table based on a particular column upon the initial load. The <code>defaultSort</code> attribute can be used irrespective of the <code>sortable</code> attribute.
@@ -264,7 +263,6 @@
           caption="Unsortable Table with Rows Sorted by 'Age' Column"
           :defaultSort="{ columnId: 'age', direction: 'asc' }"
         />
-
       </DocsShowCode>
 
       <!-- eslint-disable -->
@@ -308,7 +306,7 @@
         />
       </DocsShow>
 
-      <!-- Disable Builtin Sorting -->
+      <!-- Disable built-in sorting -->
       <h3>Disable built-in sorting</h3>
       <p>
         For <code>sortable</code> tables, you can use the <code>disableBuiltinSorting</code> prop to disable built-in sort function. This is useful when the table receives already sorted data, for example when sorting is done by backend or a custom sorting function outside the table. In this case, when one of the header sort buttons is clicked, the table won't sort the column itself, but only emit the <code>changeSort</code> event to notify the parent component to handle the sorting logic. The event contains column index of the header and the sort order in its payload.

From 3f772d198bd81acf07856b615ecdb840b57ee6c7 Mon Sep 17 00:00:00 2001
From: Eshaan Aggarwal <96648934+EshaanAgg@users.noreply.github.com>
Date: Wed, 27 Nov 2024 17:37:37 +0530
Subject: [PATCH 17/17] Update lib/KTable/index.vue

Co-authored-by: Michaela Robosova <robosovam@gmail.com>
---
 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 a160368ff..6e2c6ab00 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -244,7 +244,7 @@
         },
       },
       /**
-       * Disables all the sorting functionality provided by the component. This is useful when you want to define your own sorting logic. Refer to the examples above for more details.
+       * Disables built-in sort function. This is useful when you want to define your own sorting logic. Refer to the examples above for more details.
        */
       disableBuiltinSorting: {
         type: Boolean,