fix(table): data not being re-rendered when sortingDataAccessor is changed

Fixes the table's data not re-rendering when a new `sortingDataAccessor` is assigned to the data source.

Fixes #15888.

Author: crisbeto

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

@@ -110,7 +110,12 @@ export class MatTableDataSource<T> extends DataSource<T> {
    * @param data Data object that is being accessed.
    * @param sortHeaderId The name of the column that represents the data.
    */
-  sortingDataAccessor: ((data: T, sortHeaderId: string) => string|number) =
+  get sortingDataAccessor() { return this._sortingDataAccessor; }
+  set sortingDataAccessor(value: (data: T, sortHeaderId: string) => string|number) {
+    this._sortingDataAccessor = value;
+    this._updateChangeSubscription();
+  }
+  private _sortingDataAccessor: ((data: T, sortHeaderId: string) => string|number) =
       (data: T, sortHeaderId: string): string|number => {
     const value = (data as {[key: string]: any})[sortHeaderId];
 

src/material/table/table.spec.ts

@@ -341,6 +341,18 @@ describe('MatTable', () => {
       ]);
     });
 
+    it('should emit if the sortingDataAccessor changes', () => {
+      const spy = jasmine.createSpy('data changes spy');
+      const subscription = dataSource.connect().subscribe(spy);
+
+      // Reset the `calls` since the data source emits upon subscription as well.
+      spy.calls.reset();
+      dataSource.sortingDataAccessor = () => '';
+
+      expect(spy).toHaveBeenCalled();
+      subscription.unsubscribe();
+    });
+
     it('should by default correctly sort an empty string', () => {
       // Activate column A sort
       dataSource.data[0].a = ' ';