Categories
Development

MatSort is not sorting the but data got populated

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>
       ()</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">  () </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"> </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">  </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-14T07:00:00+00:00"
endDate: "2020-01-14T09:00:00+00:00"
totalTime: 120
totalTimeTimeUnit: "minute"
dateRequested: "0001-01-01T00:00:00+00:00"
notes: "req note type123"
dateApproved: null
userId: "9212bb7e-636c-4b75-ac6f-0a19362b6713"
ownerId: 1
approvalStatus: "inQuery"
type: {id: 1, name: "test type 1", startTime: "15:00:00", endTime: "17:00:00", rate: 2,…}
deleted: false

Leave a Reply

Your email address will not be published. Required fields are marked *