Sorting and pagination not working on Angular 5 data table.

I am trying to use this Angular material 5 data table component in my project: https://stackblitz.com/angular/jyerrrrdxrp?file=polyfills.ts that features filtering, sorting and pagination. So far, my data are properly fetched from the database and displayed in the table but can't make sorting and pagination working.

My HTML:

<app-header></app-header>
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>

<div *ngIf="dataSource.data.length === 0">
There were no applicants found.
</div>
<div *ngIf="dataSource.data.length > 0">
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort>

<!-- ID Column -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
<mat-cell *matCellDef="let row"> row.applicantId </mat-cell>
</ng-container>

<!-- First Name Column -->
<ng-container matColumnDef="fname">
<mat-header-cell *matHeaderCellDef mat-sort-header> First Name </mat-header-cell>
<mat-cell *matCellDef="let row"> row.applicantFirstName </mat-cell>
</ng-container>

<!-- Last Name Column -->
<ng-container matColumnDef="lname">
<mat-header-cell *matHeaderCellDef mat-sort-header>Last Name </mat-header-cell>
<mat-cell *matCellDef="let row"> row.applicantLastName </mat-cell>
</ng-container>

<!-- Status Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]="row.color"> row.applicantStatus.applicationStatusDescription </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</div>


My TS:

import Component, OnInit, ViewChild from '@angular/core';
import MatPaginator, MatSort, MatTableDataSource from '@angular/material';
import APIService from '../shared/api.service';
import Router from '@angular/router';
import DataService from '../shared/data.service';

@Component(
selector: 'app-reviewerhome',
templateUrl: './reviewerhome.component.html',
styleUrls: ['./reviewerhome.component.css']
)
export class ReviewerhomeComponent implements OnInit
displayedColumns = ['id', 'fname', 'lname', 'status'];
dataSource: MatTableDataSource<ApplicantData>;
datalist:any = ;
ApplicantIndex: any;

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;


constructor(private apiService: APIService, dataService: DataService, private router: Router)



ngOnInit()
this.apiService.getAllApplicants(this.ApplicantIndex).subscribe(datalist =>
console.log('Return from getAllApplicants()');
this.datalist = datalist;


this.dataSource = new MatTableDataSource(datalist.content);
console.log(datalist);
);



ngAfterViewInit()
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;



applyFilter(filterValue: string)
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;




export interface ApplicantData
id: number;
fname: string;
lname: string;
status: string;



Any insight into what might be going wrong?

1 Answer
1

The problem was that I did not import MatSortModule and MatPaginatorModule in my app.module.ts.

imports: [
MatSortModule,
MatPaginatorModule
]


Once I added them, it worked fine.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.