Angular Material Table: Sorting not working
Solution 1
Make sure that the column_name in the displayedColumns array,
displayedColumns = ['column_name'];
the html container,
ng-container matColumnDef="column_name"
and the keys of the dataSource objects,
dataSource = [ {"column_name": "value"} ];
ALL MATCH PERFECTLY.
This can also be the reason that a specific set of data doesn't work and others do.
Solution 2
Are you sure your second table ( the one where sort is not working ) is not wrapped in a div with *ngIf ? Because that is a common problem, as when the template is rendered, because of the *ngIf, matSort is undefined. Here is how to fix it : Angular 5 Material Data Table sorting not working
Tommy
Updated on July 01, 2022Comments
-
Tommy about 2 years
In my Angular app (using Angular Material) I have several tables.
The strange thing is that, in one case, sorting works, while, in another case, it doesn't.
Here is the table that works:
<table mat-table [dataSource]="dataSource" matSort> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef> ID </th> <td mat-cell *matCellDef="let row"> {{row.id}} </td> </ng-container> <ng-container matColumnDef="firstName"> <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th> <td mat-cell *matCellDef="let row"> {{row.firstName}} </td> </ng-container> <ng-container matColumnDef="lastName"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th> <td mat-cell *matCellDef="let row"> {{row.lastName}} </td> </ng-container> <ng-container matColumnDef="viewProfile"> <th mat-header-cell *matHeaderCellDef class="viewProfile"> Profile </th> <td mat-cell *matCellDef="let row" class="viewProfile"> <button mat-icon-button (click)="openProfile(row.id)"> <mat-icon aria-label="icon-button with a page-view icon">pageview</mat-icon> </button> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
... and here is the table that doesn't work:
<table class="table2" mat-table [dataSource]="dataSource2" matSort> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Project </th> <td mat-cell *matCellDef="let row"> {{row.name}} </td> </ng-container> <ng-container matColumnDef="role"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Role </th> <td mat-cell *matCellDef="let row"> {{row.role}} </td> </ng-container> <ng-container matColumnDef="beginning"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Beginning </th> <td mat-cell *matCellDef="let row"> {{row.beginning | date : "mediumDate"}} </td> </ng-container> <ng-container matColumnDef="end"> <th mat-header-cell *matHeaderCellDef mat-sort-header> End </th> <td mat-cell *matCellDef="let row"> {{row.end | date : "mediumDate"}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns2;"></tr> </table>
As you can see, in both cases I use "
matSort
" (in thetable
tag) and "mat-sort-header
" (for the columns that are supposed to be sortable).Furthermore, in each case I do the same import in the component.ts file:
import { MatTableDataSource, MatPaginator, MatSort, MatDialog } from '@angular/material';
I just don't get why sorting works in the first case but not in the second. Does anybody have any ideas what's going on here?
-
Tommy almost 6 yearsThank you for your suggested answer ... the table is wrapped inside several divs but none of these divs is with *ngIf
-
Manoj De Mel almost 5 yearsI had the same issue. This solution works. Make sure column names and columnDef are the same.
-
Nisanur almost 4 yearsthank you for your suggested answer <3 I used ngIf in mat-table tags. I removed it after sorting works :)