CODEWITHSUNDEEP
angularangular-material
Heena
Heena

Reputation: 1773

Transferring selected rows between tables in angular 2 using angular material

I have implemented a simple table in angular 2 using the angular material.

I have implemented transferring selected rows functionality from the first table to the second table and deleting the selected rows from the second table.

As I select rows from the first table and click on button Move To Second Table , the selected rows are transferred to the second table but are not getting spliced from the first table, although I have spliced the selected rows in the transferSelectedRows() method.

please access my sample app here...

Upvotes: 0

Views: 1457

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58563

Here are the changes you need to do in your component side (Please also read the comments)

Component Side :

uncheckedData = this.data; // to maintain data for table 1

transferSelectedRows() {
    this.selection.selected.forEach(item => {
        let index: number = this.uncheckedData.findIndex(d => d === item);

        this.checkedData.push(this.uncheckedData[index]); // adding to table 2
        this.uncheckedData.splice(index,1); // remove data from table 1

    });

    this.selection = new SelectionModel<Element>(true, []);
    this.dataSource = new MatTableDataSource<Element>(this.uncheckedData);
    this.checkedDataSource = new MatTableDataSource<Element>(this.checkedData);
    this.dataSource.paginator = this.paginator;
    this.checkedDataSource.paginator = this.checkedpaginator;
}

WORKING DEMO

Upvotes: 2

Related Questions