//HTML code

<h5 class="ml-4 mt-4 mb-0 heading-primary">Reminders</h5>
    <mat-spinner diameter="50" class="mx-auto" *ngIf="isLoadingResults"></mat-spinner>
        <div class="ml-4 table-content">
            <table mat-table matSort [dataSource]="datasource" class="mat-elevation-z8" matSortDisableClear>
                <ng-container matColumnDef="dateCreated">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Date Created</th>
                    <td mat-cell *matCellDef="let row">{{row.dateCreated}}</td>
                </ng-container>
                <ng-container matColumnDef="reminderText">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Reminder Text</th>
                    <td mat-cell *matCellDef="let row">{{row.reminderText}}</td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="cursor"></tr>
                <mat-footer-row *matFooterRowDef="['noData']"
                    [hidden]="isLoadingResults || (datasource && datasource.data.length > 0)"></mat-footer-row>
            </table>
        </div>
        <mat-paginator [length]="data.total" [pageSize]="data.per_page" (page)="getNext($event)"></mat-paginator>

//TS code

import { MatSort } from '@angular/material/sort';

  @ViewChild(MatSort) sort: MatSort;
   this.clRemindersApiService.getClRemindersList(this.locationId, this.data.per_page, this.data.page).subscribe((response) => {
      if (response) {
        this.data.items = response.items;
        this.data.total = response.total;
        this.datasource.data = response.items;
        this.datasource.sort = this.sort;
      }
    });

I have tried all the way search in Google along with this site also still no answer, Have tried all the answers related to : mat-sort-header / mat-sort not working on a particular column

0

There are 0 best solutions below