add column dynamically to handsontable

Question

I am trying to dynamically add a column to a handsontable. I don't see a sample anywhere nor o i see a method to do so in the API. Has anyone figured out a way to overcome this or have some sample code that I can look at that would help.

Thank you.

Answer 1

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.

Answer 2

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

Answer 3

if you define columns settings then it will not adding columns runtime to fix this please see link How to create dynamic columns for Handsontable?

Answer 4

<div id="handsontable"></div>

JS

var Data = [{
    "header": {scope1: Name, scope2: Address, scope3: Address, scope4: Country},
    "tableData":[{....}, {....}]
}]
var $container = $('#handsontable');
var headerData = [];
var tableData = Data.tableData; 

$.each(Data.header, function(k,v){
    headerData.push(v);
});

$container.handsontable({
    colHeaders: function (col) {
        var j=0;
        var colCount = headerData.length;
        do {
            if(col == j)
                return headerData[j];
            j++;
        } while (j<colCount)
    }
});

var hot = $container.data('handsontable');
hot.loadData(tableData);

Answer 5

You should use alter function

Suppose you have a 2x3 Table and you want it be 5x5.

curRows = myTable.countRows() //curRows = 2
curCols = myTable.countCols() //curCols = 3
var newRows = 5
var newCols = 5

if(newRows > curRows){
   myTable.alter('insert_row',curRows ,newRows - curRows); 
}
else if (newRows < curRows){
    myTable.alter('remove_row', curRows,curRows - newRows );
}
if(newCols > curCols){
    myTable.alter('insert_col',curCols, newCols - curCols); 
}
else if (newCols < curCols){
    myTable.alter('remove_col',curCols, curCols - newCols);
}