Angular Material Table doesnt show sorted table

Question

earthlings. I am desperately trying to get sorting to work on my mat table, At first I thought that it didn't work at all, however using

<table mat-table matSort (matSortChange)="sortData($event)" [dataSource]="source" class="mat-elevation-z8">

and

sortData(event: any){
   this.dataSource.sort = this.sort;
   console.log(this.dataSource.sortData(this.dataSource.data, this.sort));
   this.dataSource.sortingDataAccessor
}

I am able to determine that sorting works (via console log), however my table displayed stays the same

Background: I am using a json server npm package and displaying the data (from subscription) in a mat-table. I am quite positive it has something to do with the subscription of the data (it not being avilable outright). However there are no data refreshes happening (logging refreshes as well):

loadData() {
    this.dataService.getAllData().subscribe((response: any) => {
     this.data = response;
     this.dataSource = new MatTableDataSource<IData>(this.data);
     this.dataSource.sort = this.sort;
     console.log('getting Data');
   });
}

I'm not sure how would I go about setting up a stackblitz for such a scenario.

I have knocked down some usual suspects - MatSortModule is imported in app module, MatColumnDef"xxx" matches data column name "xxx".

Any help would be great or if there are some other code snippets i could show.

Answer 1

Set initially as an empty array in property declaration

public dataSource = new MatTableDataSource<any>([]);

Now you will never reset dataSource by new MatTableDataSource . Only use its dataSource.data property to set it up.

loadData() {
    this.dataService.getAllData().subscribe((response: any) => {
      this.data = response;
      this.dataSource.data = this.data;
    });
  }

Answer 2

when you use a MatTableDataSource(*) with sort you:

1.-use ViewChild to get the "sort"

@ViewChild(MatSort) sort: MatSort;

2.-assing the sort after create the dataSource and when the table is visible.

 this.dataSource=new MatTableDataSource(data)
 this.dataSource.sort=this.sort

The second condition means that, if we are using a service to get the data we need equal inside subscribe

 this.myService.getData().subscribe((res:any)=>{
    this.dataSource=new MatTableDataSource(res)
    this.dataSource.sort=this.sort
 }

BUT also means that if we has in.html some like

  <div *ngIf="dataSource" else loading>
     <table mat-table>...</table>
  </div>
  <ng-template #loading>
    loading...
  </ng-template>

We need Angular give a change to display the data (usign a setTimeout), and after assing the sort

 this.myService.getData().subscribe((res:any)=>{
    this.dataSource=new MatTableDataSource(res)
    seTimeout(()=>{
       this.dataSource.sort=this.sort
    })
 }

(*)And what about you don't use a MatTableDataSource?, remember that a dataSource can be a MatTableDataSource or an Array (or and observable with pipe async). in this case (and only in this case) is when we use the event (matSortChange) . Well, also, if we want use a custom sort we use the event.

In this case we change directly the datasource (the array)