Handsontable binds to your data source (array or object) by reference. Therefore, all the data entered in the grid will alter the original data source.
In complex applications, you may have a purpose to change data source programatically (outside of Handsontable). A value change that was done programatically will not be presented on the screen unless you refresh the grid on screen using the render method.
var
data1 = [
['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
['2008', 10, 11, 12, 13],
['2009', 20, 11, 14, 13],
['2010', 30, 15, 12, 13]
],
container1 = document.getElementById('example1'),
settings1 = {
data: data1
},
hot1;
hot1 = new Handsontable(container1, settings1);
data1[0][1] = 'Ford'; // change "Kia" to "Ford" programatically
hot1.render();
In case you want to keep separate working copy of data for Handsontable, it is suggested to clone the data source before you load it to Handsontable.
This can easily be done with JSON.parse(JSON.stringify(data)) or some other deep-cloning function.
var
data2 = [
['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
['2008', 10, 11, 12, 13],
['2009', 20, 11, 14, 13],
['2010', 30, 15, 12, 13]
],
container2 = document.getElementById('example2'),
hot2;
hot2 = new Handsontable(container2, {
data: JSON.parse(JSON.stringify(data2))
});
In a similar way, you may find it useful to clone data before saving it.
That would be useful to make programmatic changes that would be saved to server but kept not invisible to the user.
var
data3 = [
['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
['2008', 10, 11, 12, 13],
['2009', 20, 11, 14, 13],
['2010', 30, 15, 12, 13]
],
container3 = document.getElementById('example3'),
hot3;
hot3 = new Handsontable(container3, {
data: data3,
afterChange: function () {
var tmpData = JSON.parse(JSON.stringify(data3));
// now tmpData has a copy of data3 that can be manipulated
// without breaking the Handsontable data source object
}
});