Angular Material table matSort not working

Question

I'm having troubles with my table

I fetch data and then pass it to my table

Here is my code:

html

<div class="mainContainer">
  <div class="mat-elevation-z8 content">

  <mat-table
    class="mat-elevation-z3 productsTable"
    matSort
    mat-table
    [dataSource]="productsDataForTable">

    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Title
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        {{row.name.en}}
      </mat-cell>
    </ng-container>

  <ng-container matColumnDef="image">
      <mat-header-cell *matHeaderCellDef>
        Image
      </mat-header-cell>
      <mat-cell *matCellDef="let prod; let i = index" >
        <img class="prodThumbnail" src={{prodsThumbnails[i]}} alt="Product thumbnail">
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Description
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        {{prod.description.en}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Weight
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        {{prod.weight + ' ' + prod.weightUnit}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="SKU">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        SKU
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        {{prod.sku}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="price">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Price
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        $ {{prod.prices[0].unitPrice}} {{prod.prices[0].currency}}
      </mat-cell>
    </ng-container>

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

    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Status
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        {{prod.status}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef>
        Actions
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        <mat-icon class="actionOnProductButton" (click)="openProductDetailsDialog(prod)">create</mat-icon>
        <mat-icon class="actionOnProductButton" (click)="openDeleteProductDialog(prod)">delete</mat-icon>
      </mat-cell>
    </ng-container>

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

    </mat-row>


  </mat-table>

  </div>
</div>

TS

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Catalog } from '../../catalog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ProductsService } from '../../products.service';
import { EnvironmentConfigService } from 'src/app/manufacturer/environment-config.service';

@Component({
  selector: 'app-catalog-details',
  templateUrl: './catalog-details.component.html',
  styleUrls: ['./catalog-details.component.scss']
})
export class CatalogDetailsComponent implements OnInit {

  catalogID: string;
  productsFetched: any;

  // For product thumbnail in table 
  prodsThumbnails = [];

  // Data for products table
  productsDataForTable: MatTableDataSource<[]>;
  tableHeaders = [
    'image',
    'title',
    'description',
    'weight',
    'SKU',
    'price',
    'category',
    'status',
    'actions'
  ];

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

  constructor(
    private envService: EnvironmentConfigService,
    private prodsService: ProductsService,
    private snackBar: MatSnackBar,
    public dialog: MatDialog,
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private catService: CatalogsService
  ) { }

  ngOnInit(): void {
    this.route.params.subscribe((params: Params) => {
      this.getProducts(params.id);
    });
  }

  getProducts(id: string) {
    this.prodsService.getProducts(id)
    .subscribe((prods: any) => {
      this.prodsThumbnails = [];
      for (const prod of prods) {
        if (prod && prod.images && prod.images.length > 0 && prod.images[0].path && prod.images[0].path !== '') {
          const src = `${this.envService.getEnvService().getBackendUrl()}/${prod.images[0].path}`;
          this.prodsThumbnails.push(src);
        } else {
          this.prodsThumbnails.push('../../../../assets/images/placeholder-img.png');
        }
      }
      this.productsFetched = prods;
      this.productsDataForTable = new MatTableDataSource(prods);
      this.productsDataForTable.sort = this.sort;
    },
    err => {
      console.log('Error fetching products');
      this.openSnackBar('Error getting porducts data', 'Ok');
    });
  }

  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
    });
  }

}

The table was with *ngIf and i read that a matTable shouldn't has that because the @ViewChild(MatSort, {static: true}) sort: MatSort would be undefined so i erased an *ngIf that I was actually using but I still cant achieve the sorting.

I tried matPagination feature too without success, I suppose it is due to the same error.

I'll appreciate any help

Answer 1

I found out what was wrong:

What you define in matColumnDef should actually match the object properties of the objects that will be displayed on each row.

So I did populate my objects before passing data to table

Answer 2

Please try to add the MatSortModule to your module.

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


imports: [
    BrowserModule,
    ...
    MatTableModule,
    MatSortModule
],

Answer 3

Try this:

 ngAfterViewInit() {
      this.productsDataForTable = new MatTableDataSource(this.productsFetched);
      this.productsDataForTable.sort = this.sort;
  }


    getProducts(id: string) {
    this.prodsService.getProducts(id)
    .subscribe((prods: any) => {
      this.prodsThumbnails = [];
      for (const prod of prods) {
        if (prod && prod.images && prod.images.length > 0 && prod.images[0].path && prod.images[0].path !== '') {
          const src = `${this.envService.getEnvService().getBackendUrl()}/${prod.images[0].path}`;
          this.prodsThumbnails.push(src);
        } else {
          this.prodsThumbnails.push('../../../../assets/images/placeholder-img.png');
        }
      }
      this.productsFetched = prods;
    },
    err => {
      console.log('Error fetching products');
      this.openSnackBar('Error getting porducts data', 'Ok');
    });
  }