add column dynamically to handsontable

Have you tried use handsontable('alter', 'insert_col', index, amount) method? You can add and remove columns and rows using alter method. See the documentation page of the handsontable project.


A temporarily solution is to maintain a data table dynamically. When a new column is required, update the data structure and reinitiate the whole table. Maybe the following snippets may be helpful to you.

(function($) {
$(function() {
    var data = [['a', 'b', 'c', 'd'], [1, 1, 1, 1], [2, 2, 2, 2]];
    $('#a-div').handsontable({data: data});

    /* add a new column */
    data[0].push('e');
    var len = data.length;
    for (var i = 1; i < len; i++) {
        data[i].push(i);
    }
    $('#a-div').handsontable({data: data});

    /* if new column isn't at the tail */
    data[0].splice(idx, 0, "f");
});})(jQuery);

Tags:

Handsontable