fix(material/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-experimental/mdc-table/table.spec.ts

@@ -447,6 +447,18 @@ describe('MDC-based 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 = ' ';

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

@@ -151,7 +151,14 @@ export class _MatTableDataSource<
    * @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 => {

src/material/table/table.spec.ts

@@ -432,6 +432,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 = ' ';

tools/public_api_guard/material/table.md

@@ -190,7 +190,8 @@ export class _MatTableDataSource<T, P extends MatTableDataSourcePaginator = MatT
     get sort(): MatSort | null;
     set sort(sort: MatSort | null);
     sortData: (data: T[], sort: MatSort) => T[];
-    sortingDataAccessor: (data: T, sortHeaderId: string) => string | number;
+    get sortingDataAccessor(): (data: T, sortHeaderId: string) => string | number;
+    set sortingDataAccessor(value: (data: T, sortHeaderId: string) => string | number);
     _updateChangeSubscription(): void;
     _updatePaginator(filteredDataLength: number): void;
 }