I am trying to implement matSort. It is not Working in angular

Issue

0

I want to include matSort in the mat-table for the project I am working on. The table is working fine but the sort is not working. I have imported the MatSort module from @angular/material. This is the code implementation - HTML -

<div class="container mt-4">
  <mat-card>
    <mat-card-header></mat-card-header>
    <mat-card-content>
      <table matSort mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

        <!-- Position Column -->
        <ng-container matColumnDef="Company Name">
          <th mat-sort-header mat-header-cell *matHeaderCellDef>Company Name</th>
          <td mat-cell *matCellDef="let element">{{ element.companyName }}</td>
        </ng-container>

        <ng-container matColumnDef="Industry">
          <th mat-header-cell *matHeaderCellDef>Industry</th>
          <td mat-cell *matCellDef="let element">{{ element.industryName }}</td>
        </ng-container>

        <ng-container matColumnDef="Office Premisis No.">
          <th mat-header-cell *matHeaderCellDef>Office Premisis No.</th>
          <td mat-cell *matCellDef="let element">
            {{ element.officePremisisNo }}
          </td>
        </ng-container>

        <ng-container matColumnDef="Mobile No.">
          <th mat-header-cell *matHeaderCellDef>Mobile No.</th>
          <td mat-cell *matCellDef="let element">
            {{ element.primaryMobileNo }}
          </td>
        </ng-container>

        <ng-container matColumnDef="Details">
          <th mat-header-cell *matHeaderCellDef>Actions</th>
          <td mat-cell *matCellDef="let element">
            <a (click)="onClick(element.id)">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                x="0px"
                y="0px"
                width="30"
                height="30"
                viewBox="0 0 48 48"
              >
                <path
                  fill="#2196f3"
                  d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"
                ></path>
                <path
                  fill="#fff"
                  d="M22 22h4v11h-4V22zM26.5 16.5c0 1.379-1.121 2.5-2.5 2.5s-2.5-1.121-2.5-2.5S22.621 14 24 14 26.5 15.121 26.5 16.5z"
                ></path>
              </svg>
            </a>
            <!-- <button mat-button (click)="onClick(element.id)">Edit</button> -->
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayColumn"></tr>
        <tr mat-row *matRowDef="let row; columns: displayColumn"></tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5, 10, 15, 20]"
        showFirstLastButtons
      ></mat-paginator>
    </mat-card-content>
    <mat-card-footer>
      
    </mat-card-footer>
  </mat-card>
</div>

This is the .ts file. I have tried to write the code properly but no luck so far with the matSort working.

export class Table5Component implements OnInit {
  public dataSource = new MatTableDataSource();

  public displayColumn: string[] = [
    'Company Name',
    'Industry',
    'Office Premisis No.',
    'Mobile No.',
    'Details',
  ];
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;


  constructor(private companyService: CompanyService) {}

  ngOnInit()  {
    this.CompanyList();
    
  }

  CompanyList = () => {
    this.companyService.getCompany('addCompany').subscribe((data) => {
      console.log(data);
      this.dataSource.data = data;
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });
  };

  onClick = (id: any) => {
    alert(id);
  };
}

Solution

Your displayColumn should be:

displayColumn=['companyName ','industryName','officePremisisNo',
               'primaryMobileNo','Details']`

You need also change your matColumnDef, e.g.

matColumnDef="primaryMobileNo"

The mat-sort-header gets by defect the value of the displayColumns to order the columns. With your code Angular try to get, e.g. "Mobile No." as "field" to sort.

NOTE: Well, you can also use

 mar-sort-header="primaryMobileNo"

But, better change the displayColumns :)

Answered By - Eliseo