As a newcomer to Angular, I find myself working on a project that requires sorting a table based on columns. In my attempt to achieve this, I am utilizing MatSort from Angular Material as shown in this example on Table with Sorting. Despite successfully displaying the table values, I'm encountering difficulties in implementing the sorting functionality.
Below is the code snippet:
admin-user.component.html:
<table mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- UserID Column -->
<ng-container matColumnDef="userid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> User ID </th>
<td mat-cell *matCellDef="let element"> {{element.userId}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"> {{element.userName}} </td>
</ng-container>
<!-- Title Column -->
<ng-container matColumnDef="booktitle">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
<td mat-cell *matCellDef="let element"> {{element.bookTitle}} </td>
</ng-container>
<!-- Author Column -->
<ng-container matColumnDef="bookname">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Author </th>
<td mat-cell *matCellDef="let element"> {{element.bookAuthor}} </td>
</ng-container>
<!-- Issue Date Column -->
<th mat-header-cell *matHeaderCellDef mat-sort-header> Issue Date </th>
<td mat-cell *matCellDef="let element"> {{element.issueDate}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
admin-user.component.ts:
export class AdminUserComponent implements OnInit {
users: User2[];
displayedColumns: string[] = [
'userid',
'username',
'booktitle',
'bookname',
'issuedate'
];
dataSource: MatTableDataSource<IssueDetail>;
@ViewChild(MatSort) sort: MatSort;
issueList: IssueDetail[];
constructor(
public userService: UserService,
public bookService: BookService,
public router: ActivatedRoute
) {
}
ngOnInit() {
this.issueList = [];
this.userService.getAllUsers().subscribe(users => {
this.users = users.filter(user => user.checkout.length > 0);
for (let i = 0; i < this.users.length; i++) {
for (let j = 0; j < this.users[i].checkout.length; j++) {
this.issueList.push(
new IssueDetail(
this.users[i].id,
this.users[i].name,
this.users[i].checkout[j].book.title,
this.users[i].checkout[j].book.author,
this.users[i].checkout[j].startDate + ''
)
);
}
}
this.dataSource = new MatTableDataSource(this.issueList);
this.dataSource.sort = this.sort;
});
}}
Thank you for any assistance provided in advance.enter image description here
The IssueDetail class is structured as follows:
export class IssueDetail {
constructor(
public userId: number,
public userName: string,
public bookTitle: string,
public bookAuthor: string,
public issueDate: string
) {
}}
It has come to my attention that many examples utilize interfaces for sorting, whereas my implementation focuses on classes. I am unsure if this difference impacts the functionality.