Angular Material Datatable not sorting data from Http request

Question

I am using Angular Material datatable with Http request to get data.

However, it is not sorting data in Data table.

export class ContactComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = [
    "firstname",
    "middlename",
    "lastname",
    "status",
    "dateofbirth"
  ];     
  selected;
  dataSource = new MatTableDataSource<Yuvak>();

  constructor(
    private router: Router,
    private dialogService: NbDialogService,
    private contactService: ContactService
  ) { }

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

  ngOnInit() {
    this.contactService.getAllUser().subscribe(
      data => {
        this.dataSource.data = data.data.user;
      },
      error => {
        console.log("There was an error while retrieving Users !!!" + error);
      }
    )
  }

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

above is my ts file. Previously when i was loading data from local json file it was working fine inside constructor. However, now i am getting data from GET request.

Tanmay Parmar · Accepted Answer · 2018-12-11 15:34:37Z

1

Check for you displayed columns names with the one you are using as columnheader. Every thing else looks ok. If possible post your template file.

Try this after checking your html file.

ngOnInit() {
    this.contactService.getAllUser().subscribe(
      data => {
        this.dataSource.data = data.data.user;
this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
      },
      error => {
        console.log("There was an error while retrieving Users !!!" + error);
      }
    )
  }

answered Dec 11, 2018 at 15:34

Tanmay Parmar

1771 gold badge3 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mourad Riahi · Accepted Answer · 2018-12-09 20:22:39Z

0

try to replace dataSource = new MatTableDataSource<Yuvak>(); with dataSource: Yuvak[] = [] and this.dataSource.data = data.data.user; with this.dataSource = data

answered Dec 9, 2018 at 20:22

Mourad Riahi

1052 silver badges13 bronze badges

1 Comment

tanmay parmar Over a year ago

i am using this "data.data.user "because i am accessing my inner nested object.

Collectives™ on Stack Overflow

Angular Material Datatable not sorting data from Http request

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related