HandsonTable not rendering all rows

Question

HandsonTable is not rendering all rows - it loads only part of all rows. But when I do Ctrl+A and paste into Excel I see all the rows. Why is Handsontable not displaying all the rows?

 <hot-table col-headers="true" row-headers="true" datarows="data" context-menu  width="1080">
      <hot-column ng-repeat="column in columns" data="{{column.data}}"></hot-column>
</hot-table>

Instrumentation

Answer 1

To render all rows, just set renderAllRows: true

Preinstruct

fantastic, fixes issue where rows not rendering until scrolling as well. – Castillo

it looks like this can cause performance issues for a large number of rows: forum.handsontable.com/t/… – Nurseryman

Answer 2

The current answer does not answer the original question.

Handsontable does not render all cells at once because it is designed to be efficient for very large data sets. It does this using virtual rendering, dynamically modifying the DOM to include only the cells at the scroll position.

The rows virtual rendering can be disabled by setting renderAllRows: true, as described in the docs: "If typed true then virtual rendering mechanism for handsontable will be disabled." Although it will then not be as efficient for large data sets.

You can also change the number of pre-rendered rows and columns instead of rendering them all. From the performance tips,

You can explicitly specify the number of rows and columns to be rendered outside of the visible part of the table. In some cases you can achieve better results by setting a lower number (as less elements get rendered), but sometimes setting a larger number may also work well (as less operations are being made on each scroll event). Tweaking these settings and finding the sweet spot may improve the feeling of your Handsontable implementation.

This is done by setting viewportRowRenderingOffset and viewportColumnRenderingOffset in the handsontable options. These are by default set to auto which lets handsontable try to find the best value, but may be provided an integer value (e.g. viewportRowRenderingOffset: 70, viewportColumnRenderingOffset: 70).

Classis

Answer 3

I had the same problem (using HandsOnTable 6.2.1 and the old AngularJS) and customers would start complaining about not being sure if they were at the end of the table or not.

I was able to create two buttons linked to the functions 'scrollToBeginning' and 'scrollToEnd'. This way the user is sure to be at the last line. Three things specific about my answer:

• I expose the functions to the DOM using $scope;
• I have an object 'goToLine' holding 3 properties (scrollingToEnd: boolean, row: number, col: number), it is used in other functions not posted here;
• I have a list of ID referencing HandsOnTable objects stored in $scope.hots.

Here is my raw solution, feel free to adapt / enhance:

$scope.stopScrollingToEnd = function () { 
    $scope.goToLine.scrollingToEnd = false;
}; 

$scope.scrollToBeginning = function (goToLine) {
    $scope.stopScrollingToEnd();
    const hot = $scope.hots[goToLine.id];
    hot.scrollViewportTo(0, 0);
};

/**
 * Scroll to the end of the List Element.
 * We need this functionality because of a bug in HandsOnTable related to its Virtualization process.
 * In some cases (complex table), when manually scrolling, the max row is wrong, hence causing major confusion for the user.
 * @param {*} goToLine
 * @returns
 */
$scope.scrollToEnd = function (goToLine) {
    // We scroll to the first line before going to the last to avoid the bug and being sure we get to the last line
    $scope.scrollToBeginning(goToLine);
    const hot = $scope.hots[goToLine.id];
    var numberOfRows = hot.countRows();
    // This variable is used to repeat the scrollViewportTo command.
    // It is built using the length of `numberOfRows`.
    var repeat = numberOfRows ? 1 * Math.ceil(Math.log10(numberOfRows + 1)) : 1;
    // Used in other goTo function to avoid conflict.
    $scope.goToLine.scrollingToEnd = true;
    // FIXME : not supposed to call scrollViewportTo several times... => fixed in recent versions of HandsOnTable ?
    for (let n = 0; n < repeat; n++) {
        if (!$scope.goToLine.scrollingToEnd) {
            return;
        }
        setTimeout(function () {
            if (!$scope.goToLine.scrollingToEnd) {
                return;
            }
            hot.scrollViewportTo(numberOfRows - 1, 0);
        }, 500);
    }
};

Osteopath