Swapping data rows between two tables in angular using angular material

Question

I have implemented a sample angular app where i have taken a popup component.

In my popup component i have taken two tables ,the first table contains the list data rows and the second table is empty.

I have implemented swapping functionality between the tables.

on clicking the Move to second table button on first table , the selected rows should be transferred to the second table.

And on clicking the Move to first table button on second table, the selected rows should be transferred to the first table.

But I am getting an issue during swapping the data rows.If I make a selectAll in the first table and click on the button Move to second table, the rows are being tansferred.

But initially after opening the popup if I just select 2 or 3 rows and transfer, the selected rows are being transferred but the remaining rows in the first table are getting deleted.....!

please access my sample app here

Can any body please tell what is that i am missing .....?

G. Tranter G. Tranter · Accepted Answer · 2018-10-26T16:31:43

In your moveToSecondTable() function, your data copy operation relies on the isSelected property which doesn't exist, so the isSelected === false check fails because undefined is not equal to false. You could easily fix that by using a less strict comparison and just checking for truthiness such as isSelected == false or just !isSelected:

this.dataSource = new MatTableDataSource<Element>(this.uncheckedData.filter(x => !x.isSelected));

But the root cause of the problem is that your data model defined in Element does not include an isSelected property. The best fix is to add the property to the model and provide a default value:

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  isSelected: boolean
}

const ELEMENT_DATA: Element[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', isSelected: false },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', isSelected: false },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', isSelected: false },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be', isSelected: false },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', isSelected: false }
];

Swapping data rows between two tables in angular using angular material

1 Answers