Tukukkk

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

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