MatSort is not sorting the but data got populated

Question

Data is getting displayed but sort is not working

If I use sample example it works but not with my data... Here is my code...

HTML:

<table class="query-table"  #table mat-table [dataSource]="dataSource"  matSort>

  <!-- Start Column -->
  <ng-container matColumnDef="start">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Starts </th>
    <td mat-cell *matCellDef="let overtime"> 
      <span *ngIf="!this.globalOvertimeVarService.summaryState" class="status_circle" [ngClass]="{'status-green': overtime.type.approvalStatus == 'Approved'}"></span>
      {{overtime.startDate | date:'d/M/yyyy'}} ({{overtime.startDate | date:'hh:mm'}})</td>
  </ng-container>

  <!-- Date Column -->
  <ng-container matColumnDef="end">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Ends </th>
    <td mat-cell *matCellDef="let overtime"> {{overtime.endDate | date:'d/M/yyyy'}} ({{overtime.endDate | date:'hh:mm'}}) </td>
  </ng-container>

  <!-- Time Column -->
  <ng-container matColumnDef="time">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Time </th>
    <td mat-cell *matCellDef="let overtime"> {{overtime.totalTime | hoursMinutes}}</td>
  </ng-container>

  <!-- Type Column -->
  <ng-container matColumnDef="type" *ngIf="!this.globalOvertimeVarService.summaryState">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
    <td mat-cell *matCellDef="let overtime"> {{overtime.type.name}} </td>
  </ng-container>

  <!-- Edit/View Column -->
  <ng-container matColumnDef="view">
    <th mat-header-cell *matHeaderCellDef>  </th>
    <td mat-cell *matCellDef="let overtime"> 
      <i class="material-icons edit" (click)="editOvertime(overtime);">edit</i>
      <i class="material-icons view" (click)="viewOvertime(overtime.id);">visibility</i> 
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="globalOvertimeVarService.summaryState ? queryColumns : detailColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: (globalOvertimeVarService.summaryState ? queryColumns : detailColumns);"  [ngClass]="{'highlight': globalOvertimeVarService.selectedOvertimeId  == row.id}" [class.hidden]="!globalOvertimeVarService.summaryState ? (row.type.hideSelected || row.type.hideBasedOnDates) : (row.approvalStatus !== 'inQuery')"></tr>
</table>

Component:

    ...
    detailColumns =['start', 'end', 'time', 'type', 'view'];
    queryColumns =['start', 'end', 'time', 'view'];
    dataSource = new MatTableDataSource<UserModel>();
    @ViewChild(MatSort, { static: true }) sort: MatSort;
    ...
this.userService.getUserList()
            .subscribe(
                success => {
                  this.globalOvertimeVarService.overtimeList = success;
                  this.dataSource = new MatTableDataSource(this.globalOvertimeVarService.overtimeList);
                  this.dataSource.sort = this.sort;
                }
            );

Model is like:

id: 2
startDate: "2020-01-14"
endDate: "2020-01-14"
totalTime: 120
totalTimeTimeUnit: "minute"
dateRequested: "0001-01-01"
notes: "test"
dateApproved: null
userId: "9-XXX"
ownerId: 1
approvalStatus: "inQuery"
type: {id: 1, name: "test type 1", startTime: "15:00:00", endTime: "17:00:00", rate: 2,…}
deleted: false

Answer 1

Your matColumnDef definition column name must match model property name. If they are different, you need to set mat-sort-header value. For example:

<!-- Start Column -->
<ng-container matColumnDef="start">
  <th mat-header-cell *matHeaderCellDef mat-sort-header="startDate"> Starts </th>

mat-sort-header="startDate" tells MatTableDataSource to sort by startDate property of your rows.

---

For nested objects, you must implement SortingDataAccessor:

this.dataSource = new MatTableDataSource(yourData);
this.dataSource.sortingDataAccessor = (item, property) => {
  switch(property) {
    case 'type.name': return item.type.name;
    default: return item[property];
  }
};