fix(table): unable to sort large numbers in strings (#12052)

Author: crisbeto

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

@@ -20,6 +20,11 @@ import {MatPaginator, PageEvent} from '@angular/material/paginator';
 import {MatSort, Sort} from '@angular/material/sort';
 import {map} from 'rxjs/operators';
 
+/**
+ * Corresponds to `Number.MAX_SAFE_INTEGER`. Moved out into a variable here due to
+ * flaky browser support and the value not being defined in Closure's typings.
+ */
+const MAX_SAFE_INTEGER = 9007199254740991;
 
 /**
  * Data source that accepts a client-side data array and includes native support of filtering,
@@ -104,7 +109,16 @@ export class MatTableDataSource<T> extends DataSource<T> {
   sortingDataAccessor: ((data: T, sortHeaderId: string) => string|number) =
       (data: T, sortHeaderId: string): string|number => {
     const value: any = data[sortHeaderId];
-    return _isNumberValue(value) ? Number(value) : value;
+
+    if (_isNumberValue(value)) {
+      const numberValue = Number(value);
+
+      // Numbers beyond `MAX_SAFE_INTEGER` can't be compared reliably so we
+      // leave them as strings. For more info: https://goo.gl/y5vbSg
+      return numberValue < MAX_SAFE_INTEGER ? numberValue : value;
+    }
+
+    return value;
   }
 
   /**

src/lib/table/table.spec.ts

@@ -400,6 +400,38 @@ describe('MatTable', () => {
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
     }));
+
+    it('should sort strings with numbers larger than MAX_SAFE_INTEGER correctly', () => {
+      const large = '9563256840123535';
+      const larger = '9563256840123536';
+      const largest = '9563256840123537';
+
+      dataSource.data[0].a = largest;
+      dataSource.data[1].a = larger;
+      dataSource.data[2].a = large;
+
+      component.sort.sort(component.sortHeader);
+      fixture.detectChanges();
+      expectTableToMatchContent(tableElement, [
+        ['Column A', 'Column B', 'Column C'],
+        [large, 'b_3', 'c_3'],
+        [larger, 'b_2', 'c_2'],
+        [largest, 'b_1', 'c_1'],
+        ['Footer A', 'Footer B', 'Footer C'],
+      ]);
+
+
+      component.sort.sort(component.sortHeader);
+      fixture.detectChanges();
+      expectTableToMatchContent(tableElement, [
+        ['Column A', 'Column B', 'Column C'],
+        [largest, 'b_1', 'c_1'],
+        [larger, 'b_2', 'c_2'],
+        [large, 'b_3', 'c_3'],
+        ['Footer A', 'Footer B', 'Footer C'],
+      ]);
+    });
+
   });
 });