Transferring selected rows between tables in angular 2 using angular material

Question

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...

you don't splice it from the table, you do splice it from selection... — smnbbrv
– smnbbrv, Commented Mar 29, 2018 at 12:59
yes i spliced from selection ,,, but not getting spliced.....! — Heena
– Heena, Commented Mar 29, 2018 at 13:01

Vivek Doshi · Accepted Answer · 2018-03-29 13:37:05Z

2

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

edited Mar 29, 2018 at 13:37

answered Mar 29, 2018 at 13:08

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

7 Comments

Heena Over a year ago

hmm yes ........... even i need to move it from 2-->1 ........ i will try it.. if any problem exist i will come back again ..... thanks a lot..

Vivek Doshi Over a year ago

@Heena , Glad that hepled you , Happy coding BTW.

Heena Over a year ago

can you also tell me how to push from 2-->1

Vivek Doshi Over a year ago

@Heena , please check the demo again I have updated the demo

Vivek Doshi Over a year ago

@Heena Check again , it will be added last so you have to go to 2nd page to check that.

|

Collectives™ on Stack Overflow

Transferring selected rows between tables in angular 2 using angular material

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related