[SM-552] make string sort in TableDataSource case insensitive (#4889)

* make string sort case insensitive

* use localeCompare

libs/components/src/table/table-data-source.ts

@@ -132,7 +132,7 @@ export class TableDataSource<T> extends DataSource<T> {
    */
   protected sortData(data: T[], sort: Sort): T[] {
     const column = sort.column;
-    const direction = sort.direction;
+    const directionModifier = sort.direction === "asc" ? 1 : -1;
     if (!column) {
       return data;
     }
@@ -140,7 +140,7 @@ export class TableDataSource<T> extends DataSource<T> {
     return data.sort((a, b) => {
       // If a custom sort function is provided, use it instead of the default.
       if (sort.fn) {
-        return sort.fn(a, b) * (direction === "asc" ? 1 : -1);
+        return sort.fn(a, b) * directionModifier;
       }
 
       let valueA = this.sortingDataAccessor(a, column);
@@ -161,6 +161,10 @@ export class TableDataSource<T> extends DataSource<T> {
         }
       }
 
+      if (typeof valueA === "string" && typeof valueB === "string") {
+        return valueA.localeCompare(valueB) * directionModifier;
+      }
+
       // If both valueA and valueB exist (truthy), then compare the two. Otherwise, check if
       // one value exists while the other doesn't. In this case, existing value should come last.
       // This avoids inconsistent results when comparing values to undefined/null.
@@ -179,7 +183,7 @@ export class TableDataSource<T> extends DataSource<T> {
         comparatorResult = -1;
       }
 
-      return comparatorResult * (direction === "asc" ? 1 : -1);
+      return comparatorResult * directionModifier;
     });
   }
 

libs/components/src/table/table.stories.ts

@@ -168,3 +168,31 @@ const FilterableTemplate: Story = (args) => ({
 });
 
 export const Filterable = FilterableTemplate.bind({});
+
+const data4 = new TableDataSource<{ name: string }>();
+
+data4.data = [...Array(5).keys()].map((i) => ({
+  name: i % 2 == 0 ? `name-${i}`.toUpperCase() : `name-${i}`.toLowerCase(),
+}));
+
+const VariableCaseTemplate: Story = (args) => ({
+  props: {
+    dataSource: data4,
+  },
+  template: `
+    <bit-table [dataSource]="dataSource">
+      <ng-container header>
+        <tr>
+          <th bitCell bitSortable="name" default>Name</th>
+        </tr>
+      </ng-container>
+      <ng-template body let-rows$>
+        <tr bitRow *ngFor="let r of rows$ | async">
+          <td bitCell>{{ r.name }}</td>
+        </tr>
+      </ng-template>
+    </bit-table>
+    `,
+});
+
+export const VariableCase = VariableCaseTemplate.bind({});