tabulator

How to add new rows all with the same default data into a Tabulator table?

When I add new rows into Tabulator, I use some object with default values:

var defaults =  { id: 11, country_id: 4 };
table.addRow( defaults );
table.addRow( defaults );

But Tabulator uses this object for data storage. Here all rows refer to the same data. Thus when one row is edited whole table is updated.

How to reproduce: open JSFiddle and edit country column

What is correct way to add rows into Tabulator?

Solution

  • The issue is because objects are passed by reference, if you want to pass the same object in to multiple rows you need to deep copy it to break the reference using the Object.assign function.

    var defaults =  { id: 11, country_id: 4 };
table.addRow(Object.assign({}, defaults));
table.addRow(Object.assign({}, defaults));