Angular Material table is not Sorting, Paginating and Filtering(using Angular, Nodejs & Mysql)

Question

HTML file

<mat-card>

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Bulls">
</mat-form-field>


<table mat-table [dataSource]="dataSource.data" matSort
 class="mat-elevation-z8">

  <ng-container matColumnDef="id">
    <th mat-header-cell mat-sort-header *matHeaderCellDef> Serial No </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="stud_id">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header> Stud_id </th>
    <td mat-cell *matCellDef="let element"> {{element.stud_id}} </td>
  </ng-container>

  <ng-container matColumnDef="stud_app_date">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
    <td mat-cell *matCellDef="let element"> {{element.stud_app_date | date}} </td>
  </ng-container>

  <ng-container matColumnDef="stud_first_name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.stud_first_name}} </td>
  </ng-container>

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

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

</mat-card>

Component File

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { student } from '../_interface/stud.model';
import { RegistrationService } from '../../../registration.service';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {Sort} from '@angular/material/sort';

@Component({
  selector: 'app-get-stud',
  templateUrl: './get-stud.component.html',
  styleUrls: ['./get-stud.component.css']
})
export class GetStudComponent implements OnInit, AfterViewInit {

  displayedColumns : string[] = ['id', 'stud_id', 'stud_app_date','stud_first_name'];

  public dataSource = new MatTableDataSource<student>();

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

  constructor(private _registrationService : RegistrationService) { }

  ngOnInit(){
    this.getAllStudents();       
    this.dataSource.paginator = this.paginator;
    // this.dataSource.sort = this.sort;
    // this.studSort();
  }


  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    console.log(this.sort);    
  }

  public getAllStudents = () => {
    this._registrationService.registerGetStud()
    .subscribe(res => {
      console.log(res),
      this.dataSource.data = res.response as student[],
      response => console.log('Success!',response),
              error => console.error('Error!',error);
              console.log(this.dataSource.data); 
    })
  }

 applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
 }
}

Material file

import { NgModule } from '@angular/core';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatListModule} from '@angular/material/list';
import {MatCardModule} from '@angular/material/card';
import {MatInputModule} from '@angular/material/input';
import {MatTabsModule} from '@angular/material/tabs';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatButtonModule} from '@angular/material/button';
import {MatDividerModule} from '@angular/material/divider';
import {MatIconModule} from '@angular/material/icon';
import {MatExpansionModule} from '@angular/material/expansion';
// import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {MatDialogModule} from '@angular/material/dialog';
import {MatRadioModule} from '@angular/material/radio';
import {MatTableModule} from '@angular/material/table';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatSortModule} from '@angular/material/sort';
import {MatFormFieldModule} from '@angular/material/form-field';


const MaterialComponents = [
  MatToolbarModule,
  MatSidenavModule,
  MatListModule,
  MatButtonModule,
  MatInputModule,
  MatTabsModule,
  MatCardModule,
  MatDatepickerModule,
  MatDividerModule,
  MatIconModule,
  MatExpansionModule,
  // MatDialog, MAT_DIALOG_DATA
  MatDialogModule,
  MatRadioModule,
  MatTableModule,
  MatPaginatorModule,
  MatSortModule,
  MatFormFieldModule
]

@NgModule({
  imports: [MaterialComponents],
  exports: [MaterialComponents]

})
export class MaterialModule { }

hi folks, i am beginner to Angular UI. So, my table data is not sorting, paginating and filtering even though it's not shows any errors in console. So please anyone can help me and suggest, where i am wrong? In this project i used the Nodejs, Mysql Database, Angular, Angular Material Softwares.

Thank you

Answer 1

Hey your code looks fine at first appearance, but I have some questions to you why you wrote in the html-File by the first column mat-sort header="id" I think you should remove ="id" because the ng-container have the name which the component call specific functions and you some css/scss styles (if you didn't know that yet). Second have you tip in the filter field something because a console log comes only if you do that.

Answer 2

对于排序，您需要在各自的模块中导入 MatSortModule。