CODEWITHSUNDEEP
angularangular-material
RajeshTV
RajeshTV

Reputation: 331

MatSort not working. Throws Error: MatSortHeader must be placed within a parent element with the MatSort directive

After i specify the mat-sort-header attribute on matHeaderCellDef to create a Sortable table in Angular Material, getting the following error

MatSortHeader must be placed within a parent element with the MatSort directive.

<mat-table #table matSort [dataSource]="myHttpDataSource">
....
<ng-container matColumnDef="myColumnName">
<mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.somedetails}} </mat-cell>
</ng-container>
</mat-table>

Any pointers/help appreciated

Upvotes: 21

Views: 27397

Answers (6)

Alexey Ryzhkov
Alexey Ryzhkov

Reputation: 441

I wrote step by step code manually and the problem is the official Angular 13 documentation, the page (https://material.angular.io/components/table/overview) "For example, you can add sorting and pagination to the table by using MatSort and MatPaginator and mutating the data provided to the table according to their outputs." This way it causes the error. And it repeats again in a number of places "The MatSort is one provided...". In my case, the problem is adding "MatSort" instead of "matSort". In the source code of the example it is different (the 1st line is "<table mat-table [dataSource]="dataSource" matSort ". Thus it is solved with changing MatSort to matSort.

The 2nd issue with TypeScript 2.7+ version. Need to change

@ViewChild(MatSort) sort: MatSort;

to something like that

@ViewChild(MatSort, {static: true}) sort!: MatSort;

Here is the link to discussion MatSort not working. Throws Error: MatSortHeader must be placed within a parent element with the MatSort directive

Upvotes: 0

King Midas
King Midas

Reputation: 1699

After following the Angular documentation, I have ended in the same issue described here. The solution is:

  • Add the matSort directive to the table and add mat-sort-header to each column header, as described in other questions.

  • Import MatSortModule: import { MatSortModule } from '@angular/material/sort'; As described on the API docs. And remember to import it on the imports section imports: [..., MatSortModule]

  • And assign the sorting property to the datasource in the component of your table.

     @ViewChild(MatSort, {static: true}) sort!: MatSort;

 ngOnInit(): void {
  this.dataSource = new MatTableDataSource<...>(...);
  this.dataSource.sort = this.sort;
 }

Upvotes: 3

Belete Yaregal
Belete Yaregal

Reputation: 111

<mat-table mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
To add sorting behavior to the table, add the matSort directive to the 
table and add mat-sort-header to each column header cell that should 
trigger sorting.

Upvotes: 9

RajeshTV
RajeshTV

Reputation: 331

Realized that I was using the old mdSort tag in another mat-table which was causing this issue. After changing to matSort the issue got resolved.

Upvotes: -3

chinaski
chinaski

Reputation: 126

could you give us more info please?

have you try catch the event?

<mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)">

Upvotes: 0

Siddaram H
Siddaram H

Reputation: 1176

Add 'matSort' attribute to mat-table

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

Upvotes: 46

Related Questions