The original view in handsontable mode does not stretch to fix the width

Question

I have a portable object (actually two objects, as in a boot modal) that have data loaded after the page is built. Here's a jsfiddle that duplicates the issue https://jsfiddle.net/mtbdeano/w7dofbyy/

Tables are too narrow, even with stretchH: all . As soon as I click on the content, they change like magic to the desired column width. Is the initialization parameter missing? How can I get the size to the correct width after loading new data?

  /* these tables are in the modal */ $('#keyword_table').handsontable({ data: keyword_data, rowHeaders: true, colHeaders: ['Keywords'], columnSorting: true, contextMenu: true, height: 256, stretchH: "last", enterBeginsEditing: false, minSpareRows: 1 }); 

I load data using this code, which is called when ajax is successful:

 function load_table_from_ajax(tbl, data) { var $tbl = $(tbl); var hot = $tbl.handsontable('getInstance'); // this formats my data appropriately var new_data = _.map(data, function (kw) { return new Array(kw); }); hot.loadData(new_data); /* I have tried also doing a: hot.render(); */ } 

All code looks correct according to tutorials, any idea why the table doesn't stretch / resize correctly?

Before interacting with Handsontable, it looks like this: but after clicking on the title or adding a value:

Answer 1

Try initializing width . Since you do not install it, stretchH may encounter difficulties in performing the calculations it needs. I have seen this behavior before and installing this usually fixes it.

Answer 2

try colWidths:[100]

Defines the width of the columns in pixels. It takes a number, a string (which will be converted to a number), an array of numbers (if you want to determine the column width separately for each column) or (if you want to dynamically set the column width on each render).