CODEWITHSUNDEEP
handsontable
Asaf David
Asaf David

Reputation: 3297

Changing table's width after load in Handsontable

I'm trying to add a button that will make the table get 100% width. I can see that the settings do change when checking with table1.getSettings(), but the table doesn't change.

html:

<div id="table1" class="table"></div>
<button id="fullWidth">Strech to full width</button>

css:

#table1 {width: 100%;}

JS:

var myData = Handsontable.helper.createSpreadsheetData(10, 5);

var container = document.getElementById('table1');
var table1 = new Handsontable(container,
                          {data: myData,
                           stretchH: "none",
                           colHeaders: true
                          });

Handsontable.Dom.addEvent(fullWidth, 'click', function () {
    table1.updateSettings({
        stretchH: "all"
    });
});

Here's a JSFiddle: http://jsfiddle.net/asafusan/z0g2zz05/2/

Upvotes: 1

Views: 1585

Answers (1)

ZekeDroid
ZekeDroid

Reputation: 7209

You're right, and this may be the intended behavior since there is a different way of doing it. When expanding your table, it may make more sense to update the actual width of your table and set the stretchH: "all" from the beginning.

It's a little cleaner since you can imagine the user could have modified the width of the columns and then just wanted to expand the table's size rather than the column widths. Regardless, check this modified version of your fiddle.

Upvotes: 1

Related Questions