HandsOnTable not rendering all columns until right mouse click

Question

This appears to be completely insane and I can't even post a proper JSFiddle because I can't replicate this, but...

I have a handsontable element contained within a div which should be used to force scrollbars. The table only has 3 columns but only the first column renders (and I can see the other two do not exist by inspecting with the developer console) until I right-mouse-click on the HandsOnTable element.

The table is based on this: https://jsfiddle.net/horacebury/2vc606wx/30/

And the CSS I'm using is this:

#handscontainer {
    width: 320px;
    height: 400px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    overflow: hidden;
}

#trendgrid {
    width: 300px;
}

The HTML I'm using is this:

                    <div id="tablecontainer">
                      <table class="tgh">
                        <tr>
                          <td>Tag Name</td>
                        </tr>
                      </table>
                      <div id="handscontainer">
                        <div id="trendgrid" class="maximise"></div>
                      </div>
                      <table class="tg">
                        <tr>
                          <td class="footbuffer"></td>
                          <td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td>
                        </tr>
                      </table>
                    </div>

If I don't have the overflow: xxx the problem is not there and the table is very, very long (because I need to load ~288 rows.)

Answer 1

Turns out the angular tab which the HandsOnTable element is displayed in was not visible. I had to make that tab active/visible and then used $interval to give HoT control a moment before loading it with data.

        $interval(function() {
                loadTableData();
            },
            100,
            1);