Hugoer/material table

src/material/table/table-data-source.spec.ts

@@ -47,6 +47,10 @@ describe('MatTableDataSource', () => {
     it('should be able to correctly sort an array of string', () => {
       testSortWithValues(['apples', 'bananas', 'cherries', 'lemons', 'strawberries']);
     });
+
+    it('should be able to correctly sort an array of strings and numbers', () => {
+      testSortWithValues([3, 'apples', 'bananas', 'cherries', 'lemons', 'strawberries']);
+    });
   });
 });
 

src/material/table/table-data-source.ts

@@ -148,6 +148,14 @@ export class MatTableDataSource<T> extends DataSource<T> {
       let valueA = this.sortingDataAccessor(a, active);
       let valueB = this.sortingDataAccessor(b, active);
 
+      const valueAType = typeof valueA;
+      const valueBType = typeof valueB;
+      const sameType = valueAType === valueBType;
+      if (!sameType) {
+        valueA = valueAType === 'number' ? valueA.toString() : valueA;
+        valueB = valueBType === 'number' ? valueB.toString() : valueB;
+      }
+
       // 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.