0

Hi everyone i have been trying to implement the guide from https://material.angular.io/components/table/overview

I am trying to sort my table but when i go click on the table header nothing happens, can you guys see anything i am missing in my code? And any suggestions if my code is incorrect, this is my first time playing with Material Tables.

html:

<table mat-table [dataSource]="dataList" matSort>

   <ng-container matColumnDef="asset">
     <th mat-header-cell *matHeaderCellDef> Asset </th>
     <td mat-cell *matCellDef="let element"> <img width="30px" [src]="element.asset"> </td>
   </ng-container>

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

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

component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {MatSort} from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

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

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

  appName = 'title';

  dataList = new MatTableDataSource();
  displayedColumns: string[] = ['asset', 'name'];
  isLoading = true;

  constructor(
    private http: HttpClient,
  ) { }

  ngOnInit() {
    this.getRemoteData();
    this.dataList.sort = this.sort;
  }

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

  getRemoteData() {
    this.http
      .get<any>(http://someapi.api)
      .subscribe((response) => {
        this.isLoading = false;
        this.dataList.data = response.data;
      }, error => {
        console.log(error);
      })
  }

}

1 Answers1

0

First of all if you want to sort on both columns add mat-sort-header on both columns.

1.Try removing {static: true} from declaration of sort.
2. Initialize your sort in subscribe.
3.try removing filter code first and then check if sort is working. 4.Try Adding interface for your mat table data source
4. Your final code will look like this. 

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {MatSort} from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

export interface crewElement{
  name: string;
  asset: string;
  }


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

  @ViewChild(MatSort) sort: MatSort;

  appName = 'title';

  dataList = new MatTableDataSource<crewElement>();
  displayedColumns: string[] = ['asset', 'name'];
  isLoading = true;

  constructor(
    private http: HttpClient,
  ) { }

  ngOnInit() {
    this.getRemoteData();
  }

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

  getRemoteData() {
    this.http
      .get<any>(http://someapi.api)
      .subscribe((response) => {
        this.isLoading = false;
        this.dataList =MatTableDataSource<crewElement>(response.data); //please try this
    this.dataList.sort = this.sort;
      }, error => {
        console.log(error);
      })
  }

}

Please check if it works or not

Sanket wani
  • 213
  • 1
  • 7