Angular material table sorting doesn't work correctly

Question

My mat-table working fine with multiple filter. Then adding mat-sort and trying the sort, nothing change.

table-filtering-example.html

<mat-card>
<div class="row">
    <div class="col-12">
        <mat-form-field>
            <mat-label>Category</mat-label>
            <mat-select [(ngModel)]="categoryFilter" (selectionChange)="applyFilter($event.target)">
                <mat-option>All</mat-option>
                <mat-option *ngFor="let category of categories" [value]="category">
                    {{ category }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>

    <div class="col-12">
        <mat-form-field>
            <input
  matInput
  [(ngModel)]="productFilter"
  (keyup)="applyFilter($event.target.value)"
  placeholder="Search"
/>
            <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>
    </div>
</div>

    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef  mat-sort-header>Product</mat-header-cell>
        <mat-cell *matCellDef="let product">
            {{ product.name }}
        </mat-cell>
    </ng-container>

    <ng-container matColumnDef="category">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Category</mat- 
    header-cell>
        <mat-cell *matCellDef="let product">
            {{ product.category}}
        </mat-cell>
    </ng-container>

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

table-filtering-example.ts

import { Component, ViewChild, OnInit } from "@angular/core";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";

@Component({
selector: 'table-filtering-example',
styleUrls: ['table-filtering-example.css'],
templateUrl: 'table-filtering-example.html',
})
export class TableFilteringExample {
@ViewChild(MatSort) sort: MatSort;

products = [
{ name: "Lenovo", category: "Notebook" }, 
{ name: "Asus", category: "Notebook" },
{ name: "HP", category: "Notebook" },
{ name: "Dell", category: "Notebook" },
{ name: "Logitech MX Master Mouse", category: "Notebook Accessories" },
{ name: "Razer DeathAdder Mouse", category: "Notebook Accessories" },
{ name: "Apple Magic Keyboard", category: "Notebook Accessories" },
{ name: "İphone X", category: "Mobile Phone" },
{ name: "Xaomi9", category: "Mobile Phone" },
{ name: "Galaxy Note 10", category: "Mobile Phone" }
];

categories = ["Notebook", "Notebook Accessories", "Mobile Phone"];
displayedColumns = ["name", "category"];

dataSource = new MatTableDataSource(this.products);

categoryFilter;
productFilter = "";

ngAfterViewInit() {
this.dataSource.sort = this.sort;
}

applyFilter() {
let filteredData;

if (this.categoryFilter === undefined) {
  filteredData = this.products.filter(x =>
    x.name.toLocaleLowerCase()
      .trim()
      .includes(this.productFilter)
  );
  } else {
  filteredData = this.products.filter(
    x =>
      x.name.toLocaleLowerCase()
        .trim()
        .includes(this.productFilter) && x.category === 
this.categoryFilter
  );
}

this.dataSource = new MatTableDataSource(filteredData);
}
}

Here is the stackblitz :

https://stackblitz.com/edit/angular-material-datatable-multi-column-filter-d1dt1l?file=app/table-filtering-example.css

Welcome to SO. You should post complete questions with code etc. If your link is removed from stackblitz then this question becomes obsolete. — Thodoris

yurzui yurzui · Accepted Answer · 2019-11-30T04:53:52

Angular @ViewChild decorator can't recognize MatSort instance in your template since you're importing MatSort from two different packages:

main.ts

import { MatSortModule } from '@angular/material';

app.component.ts

import { MatSort } from '@angular/material/sort';

Once you import MatSort from the same path in your AppComponent:

import { MatSort } from '@angular/material';

the sort functionality should work

Forked Stackblitz

Angular material table sorting doesn't work correctly

1 Answers