Merge pull request #854 from BabyElias/ktable-sort

Fixed case-sensitive sorting for KTable
learningequality · Dec 16, 2024 · 901a5a1 · 901a5a1
2 parents 788ce09 + b8456de
commit 901a5a1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/lib/KTable/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
@@ -21,7 +21,7 @@ describe('useSorting', () => {
 
     rows = ref([
       ['John', 30, new Date(1990, 5, 15)],
-      ['Jane', 25, new Date(1995, 10, 20)],
+      ['jane', 25, new Date(1995, 10, 20)],
       ['Alice', 28, new Date(1992, 8, 10)],
     ]);
 
@@ -52,7 +52,7 @@ describe('useSorting', () => {
       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)],
+        ['jane', 25, new Date(1995, 10, 20)],
         ['John', 30, new Date(1990, 5, 15)],
       ]);
     });
@@ -66,7 +66,7 @@ describe('useSorting', () => {
       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)],
+        ['jane', 25, new Date(1995, 10, 20)],
         ['Alice', 28, new Date(1992, 8, 10)],
       ]);
     });
@@ -79,7 +79,7 @@ describe('useSorting', () => {
 
       const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
       expect(sortedRows.value).toEqual([
-        ['Jane', 25, new Date(1995, 10, 20)],
+        ['jane', 25, new Date(1995, 10, 20)],
         ['Alice', 28, new Date(1992, 8, 10)],
         ['John', 30, new Date(1990, 5, 15)],
       ]);
@@ -95,7 +95,7 @@ describe('useSorting', () => {
       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)],
+        ['jane', 25, new Date(1995, 10, 20)],
       ]);
     });
   });
@@ -144,7 +144,7 @@ describe('useSorting', () => {
     handleSort(0); // Sort by 'Name'
     expect(sortedRows.value).toEqual([
       ['Alice', 28, new Date(1992, 8, 10)],
-      ['Jane', 25, new Date(1995, 10, 20)],
+      ['jane', 25, new Date(1995, 10, 20)],
       ['John', 30, new Date(1990, 5, 15)],
     ]);
   });
@@ -159,7 +159,7 @@ describe('useSorting', () => {
 
     handleSort(1); // Sort by 'Age'
     expect(sortedRows.value).toEqual([
-      ['Jane', 25, new Date(1995, 10, 20)],
+      ['jane', 25, new Date(1995, 10, 20)],
       ['Alice', 28, new Date(1992, 8, 10)],
       ['John', 30, new Date(1990, 5, 15)],
     ]);
@@ -169,14 +169,14 @@ describe('useSorting', () => {
     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)],
+      ['jane', 25, new Date(1995, 10, 20)],
     ]);
     expect(sortOrder.value).toBe(SORT_ORDER_DESC);
 
     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)],
+      ['jane', 25, new Date(1995, 10, 20)],
       ['Alice', 28, new Date(1992, 8, 10)],
     ]);
     expect(sortOrder.value).toBe(null);
@@ -194,7 +194,7 @@ describe('useSorting', () => {
     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)],
+      ['jane', 25, new Date(1995, 10, 20)],
     ]);
   });
 

diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
@@ -24,25 +24,39 @@ export default function useSorting(headers, rows, defaultSort, disableBuiltinSor
   const sortKey = ref(null);
   const sortOrder = ref(null);
 
+  /**
+   * Helper function to get the value for sorting.
+   * @param {Object} row - The row object.
+   * @param {Number} index - The index of the column to sort by.
+   * @returns {any} - The value to be used for sorting.
+   */
+  const getSortValue = (row, index) => {
+    const value = row[index];
+    if (typeof value === 'string' && value != null) {
+      return value.toString().toLocaleLowerCase();
+    }
+    return value;
+  };
+
   /**
    * Computed property that returns the sorted rows based on the current sort key and order.
    * If local sorting is disabled or no sort key is set, it returns the original rows.
    */
   const sortedRows = computed(() => {
     if (disableBuiltinSorting.value) return rows.value;
 
-    // No sort key or value has been explicity set till now
+    // No sort key or value has been explicitly set till now
     if (sortKey.value === null || sortOrder.value === null) {
       if (defaultSort.value.index === -1) return rows.value;
 
       return _.orderBy(
         rows.value,
-        [row => row[defaultSort.value.index]],
+        [row => getSortValue(row, defaultSort.value.index)],
         [defaultSort.value.direction],
       );
     }
 
-    return _.orderBy(rows.value, [row => row[sortKey.value]], [sortOrder.value]);
+    return _.orderBy(rows.value, [row => getSortValue(row, sortKey.value)], [sortOrder.value]);
   });
 
   /**