title: Initial handsontable view does not stretch to correct width
body: <p>I have a handsontable object (in fact two objects, both in a bootstrap modal) that have data loaded after the page is built. Here's a jsfiddle that duplicates the problem <a href="https://jsfiddle.net/mtbdeano/w7dofbyy/" rel="nofollow noreferrer">https://jsfiddle.net/mtbdeano/w7dofbyy/</a> </p>
  
  <p>The tables are sized way too narrow, even given the <code>stretchH: all</code> option. Once I click in the content, they resize like magic to the correct column width. Am I missing some initialization parameter? How can I have it size to the correct width after loading new data?</p>
  
  <pre><code>  /* 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
    });
  </code></pre>
  
  <p>I am loading the data using this code which is called on a successful ajax call:</p>
  
  <pre><code>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(); */
  }
  </code></pre>
  
  <p>All the code looks correct as per tutorials, any idea why the table doesn't stretch/resize correctly?</p>
  
  <p>Before interacting with the Handsontable, it looks like this:
  <a href="https://i.stack.imgur.com/wMzgI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wMzgI.png" alt="Table is not rendered correctly"></a>
  but after clicking the header or adding a value:
  <a href="https://i.stack.imgur.com/qCFR6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qCFR6.png" alt="enter image description here"></a></p>