Changes made in one table have to replicate in other too

Getting help Questions
1

Hi,

Following is my complete scenario, please help me to fix it:

I have two tables in a single page, where in the first table if the user do any operations such as insert new row, delete a row, same has to be replicated in the second table, to achieve this, I was tried creating an instance for the second table in afterCreateRow() hook, but I can’t able to create the instance there.

Can anyone please help me how to achieve this with an working example.

Since I am developing with angular6, please give suggestion regarding.

Thanks,
Bala

2

Hi Bala,

Here I have an example http://jsfiddle.net/handsoncode/ctx16hyd/ where one table is inside a window and the second one (prime) on the page. When you change change content or add a new row in the first table it will change for the second table as well.

3

Thanks @aleksandra_budnik,

But what I expected isn’t it, let me explain my requirement clearly once again:

I have two tables in the screen, both also be visible in the screen always.

What I expect is, if i create a row in table1 of position 5, in the same position table2 also should create a new empty row.

4

This is exactly how it works in my example. You just use the same table settings. It isn’t an obstacles if they run on the same page or in a modal windows. The Handsontable settings are the same. You need to attach a afterCreateRow hook in one instance and pass

your_second_instance.alter(insert_row, 2nd parameter, 3rd parameter)

5

It’s really cool!!!..

But, I am using customised context menu for deletion(which actually doesn’t delete the row, insted just wipes the data), How to apply that here.

6

Oh yes, I remember this demo https://jsfiddle.net/handsoncode/8L2uwg1f/

Then you just copy this

for (var i = 0; i < hot.countCols(); i++) {
                hot.setDataAtCell(row, i, '')
              }

and change hot to the second table’s name

7

Thank you @aleksandra_budnik,

But I am using angular, here is a demo(https://stackblitz.com/edit/angular-uehock?file=src%2Fapp%2Fapp.component.ts) how I had implemented, please guide me how to implement here

8

It will be easier for you to pass the settings by if you’ll define two objects for settings, one for each of the tables. Here is an example https://stackblitz.com/edit/angular-handsontable-issue-28

9

This looks good, but I didn’t know how it will meet my requirement, As I make change in one table that has to reflect in the other and the second table should not have any context menu, but in this example I didn’t see anything that helps me… Please guide me how to achieve with the single context menu, but that have control on both the tables.

10

If you’d like to delete the context menu from the second table just delete lines 60-76 from the app.component.ts file.

11

Ok If I do that will that be replicated in both the tables? and will that meet my requirement?

12

Yes, it should. The tables 1 should take the data from table 2

13

But this brings me all the values, but I need only one column of values, but other columns should not get changed.

14

If you could share a full draft for the table 1 and table 2 I will do my best to help. You did not mention the 1-column so it hasn’t been attached to the example