angular 2 material table refresh

Question

My situation: I have a drop down and a table below the drop down. For understanding assume drop down is city and table below shows list of cities with details. When user selects a city in the drop down the row for that city must be made the first row in the table. I know how to change the underlying data structure/array to find and insert replace the first item in array. Having done that how the heck do I get the table to refresh so it now shows that row on top ? Using the basic sample how do I get say row 5 Boron to show on row one when some button clicked on this stackblitz. https://stackblitz.com/angular/epkqlvvjdqn?file=app%2Ftable-basic-example.ts

Answer 1

You can use destructuring to swap array items as below:

dataSource = new MatTableDataSource();
  ngOnInit(){
    this.dataSource.data = ELEMENT_DATA;
  }
  changeData(){
    let data = this.dataSource.data;

    [data[0],data[4]] = [data[4],data[0]];

    this.dataSource.data = data;    
  }

Working demo here: https://stackblitz.com/edit/angular-exkuqd