I'm having trouble sorting the table using MatTableDataSource...
I'm struggling to figure out how to pass an array to MatTableDataSource. I want the data in the table to be displayed and sorted accordingly.
//Component.ts file
export class TestSortTableComponent implements OnInit {
displayedColumns = ['fullName', 'birthDate', 'phone', 'email', 'skype',
'position', 'startDate', 'endDate', 'action'];
data: UserDataSource ;
dataSource = new MatTableDataSource(this.data);
@ViewChild(MatSort) sort: MatSort;
constructor(
private userService: UserService,
private activatedRoute: ActivatedRoute,
private tableQueryParams: TableQueryParamsService,
private httpService: UserService,
private router: Router
) {}
ngOnInit() {
this.data = new UserDataSource(this.userService, this.activatedRoute);
}
}
//HTML code:
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-
z8">
<ng-container matColumnDef="fullName">
<mat-header-cell *matHeaderCellDef >Full name</mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.fullName }}</mat-cell>
</ng-container>
<ng-container matColumnDef="birthDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>Birthday</mat-header-
cell>
<mat-cell *matCellDef="let user">{{ user.birthDate | date }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-header-row *matRowDef="let row; columns: displayedColumns"></mat-
header-row>
</table>
//UserDataSource.ts file:
export class UserDataSource implements DataSource<UserModel> {
[x: string]: any;
public usersSubject = new BehaviorSubject<PagedContentModel>({
items: [],
total: 0
});
private queryParamsSubscriber: Subscription;
paginator: any;
sort: any;
constructor(
private userService: UserService,
private activatedRoute: ActivatedRoute,
) { }
public connect(collectionViewer: CollectionViewer):
Observable<UserModel[]> {
this.queryParamsSubscriber =
this.activatedRoute.queryParamMap.subscribe((paramMap) => {
this.loadUsers(
+paramMap.get('page'),
paramMap.get('sortBy'),
paramMap.get('sortOrder'),
paramMap.get('gender'),
paramMap.get('startDate'),
paramMap.get('endDate'),
paramMap.get('keyWord'),
);
});
return this.usersSubject.asObservable()
.pipe(
map((response) => response.items)
);
}
disconnect(collectionViewer: CollectionViewer) {
this.queryParamsSubscriber.unsubscribe();
this.usersSubject.complete();
}
getTotalObservable(): Observable<number> {
return this.usersSubject.asObservable()
.pipe(
map((response) => response.total)
);
}
private loadUsers(page = 0, sortBy = '', sortOrder = 'asc', gender,
startDate, endDate,keyWord) {
const f = {
gender,
startDate,
endDate,
keyWord
};
this.userService.getUsers(page, sortBy, sortOrder,
f).subscribe((response) => {
this.usersSubject.next(response);
});
}
}
//getUser method:
getUsers(page = 0, sortBy = '', sortOrder = 'asc', filter):
Observable<any> {
let params: HttpParams = new HttpParams()
.set('page', page ? page.toString() : '0')
.set('sortBy', sortBy || '')
.set('sortOrder', sortOrder || '');
if (filter) {
for (let key in filter) {
let value = filter[key];
if(value){
params = params.set(key, value);
}
}
}
return this.http.get(`${environment.apiBaseUrl}/employees`, { params });
}
The issue I'm facing is with transferring the desired list into MatTableDataSource which is causing the sorting not to work as expected.
Although everything seems straightforward in the official Angular Material documentation, I have encountered unknown problems that are likely related to UserDataSource implementation.