Handsontable

a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery

Understanding binding as reference

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.

	Ford	Nissan	Toyota	Honda
2008	10	11	12	13
2009	20	11	14	13
2010	30	15	12	13

var data = [
  ["", "Kia", "Nissan", "Toyota", "Honda"],
  ["2008", 10, 11, 12, 13],
  ["2009", 20, 11, 14, 13],
  ["2010", 30, 15, 12, 13]
];

var $container = $("#example1");
$container.handsontable({
  data: data
});

data[0][1] = "Ford"; //change "Kia" to "Ford" programatically
$container.handsontable('render'); //refresh the grid to display the new value

But I want to change my data without rendering changes!

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 $.extend method.

var data2 = [
  ["", "Kia", "Nissan", "Toyota", "Honda"],
  ["2008", 10, 11, 12, 13],
  ["2009", 20, 11, 14, 13],
  ["2010", 30, 15, 12, 13]
];

var $container = $("#example2");
$container.handsontable({
  data: $.extend(true, [], data2) //for object data source, use {} instead of []
});

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]
];

var $container = $("#example3");
$container.handsontable({
  data: data3,
  onChange: function () {
    var tmpData = $.extend(true, [], data3);
    //now tmpData has a copy of data3 that can be manipulated
    //without breaking the Handsontable data source object
  }
});

For more examples, head back to the main page.