Set Handsontable to 100% width and height and if necessary with scrollbar

Question

How can i set Handsontable width and height to 100% always. I want the table to always extend the whole screen size or inside an additional div container. The default width of each cell should be set to minWidth. So if there are to many columns the table extends over the whole screen and adds in a horizontal scrollbar.

I searched many forums for any solutions but couldnt find anything helpful. I tried to set the diffrent Handsontable divs to 100% but whenever i did that, the whole table started to bug.

var hot = new Handsontable(container, {
  data: data(),
  minSpareCols: 1,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  width: '100%',
  height: '100%',
});

I set the width and height bouth to 100% but that doesnt change anything.

I created a JSFiddle which displays a Table with the exact problem. Just press once on Fullscreen and exit again. After that you will see how the table doesnt extend to the Scrollbar.

https://jsfiddle.net/6gvkLyf1/

Thank you for helping!

Answer 1

I managed to solve it myself. I created a container div around the handsontable and set that on to 100% width. Now all i had to do is to add

stretchH: 'all' 

to the table settings.