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

Fixes not being able to sort numbers, inside strings, that are greater than the `MAX_SAFE_INTEGER`. These changes treat these numbers as strings since JS can't compare them reliably.

Fixes #12009.

Author: crisbeto

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

@@ -104,7 +104,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 < Number.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'],
+      ]);
+    });
+
   });
 });