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

@@ -78,7 +78,7 @@ export class _MatTableDataSource<
    * For example, a 'selectAll()' function would likely want to select the set of filtered data
    * shown to the user rather than all the data.
    */
-  filteredData: T[];
+  filteredData: T[] = [];
 
   /** Array of data that should be rendered by the table, where each object represents one row. */
   get data() {
@@ -151,7 +151,30 @@ 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 = (
+  sortingDataAccessor: (data: T, sortHeaderId: string) => string | number;
+
+  /**
+   * `sortingDataAccessor` is currently a regular property, however we need to know when it is
+   * updated so that we can re-render the data. The problem is that we can't turn it into a
+   * getter/setter, because it'll break existing users that define the accessor by extending the
+   * class and initializing it to a new value. This is a workaround that'll preserve the old
+   * behavior for users who override it and apply the fix for ones who don't. Eventually we should
+   * reconcile these behaviors.
+   * @breaking-change 15.0.0
+   */
+  private _defineSortingDataAccessor() {
+    if (!this.sortingDataAccessor) {
+      Object.defineProperty(this, 'sortingDataAccessor', {
+        get: () => this._sortingDataAccessor,
+        set: accessor => {
+          this._sortingDataAccessor = accessor;
+          this._updateChangeSubscription();
+        },
+      });
+    }
+  }
+
+  private _sortingDataAccessor: (data: T, sortHeaderId: string) => string | number = (
     data: T,
     sortHeaderId: string,
   ): string | number => {
@@ -258,7 +281,6 @@ export class _MatTableDataSource<
   constructor(initialData: T[] = []) {
     super();
     this._data = new BehaviorSubject<T[]>(initialData);
-    this._updateChangeSubscription();
   }
 
   /**
@@ -267,6 +289,8 @@ export class _MatTableDataSource<
    * the provided base data and send it to the table for rendering.
    */
   _updateChangeSubscription() {
+    this._defineSortingDataAccessor();
+
     // Sorting and/or pagination should be watched if MatSort and/or MatPaginator are provided.
     // The events should emit whenever the component emits a change or initializes, or if no
     // component is provided, a stream with just a null event should be provided.
@@ -385,6 +409,8 @@ export class _MatTableDataSource<
    * @docs-private
    */
   connect() {
+    this._defineSortingDataAccessor();
+
     if (!this._renderChangesSubscription) {
       this._updateChangeSubscription();
     }

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 = ' ';