HandsOnTable does not render all rows

[msmo...@gmail.com]

I am using HandsOnTable in my program to display rows from CSV files loaded by the browser. Regardless of how many rows I load into the table it only shows about 40 first rows (anywhere between 35 and 45).

The same happens even if I create the table with static data:

$container.handsontable({
data: createBigData(),
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
afterChange: afterChange,
});

vat handsontable = $container.handsontable('getInstance')

I used function createBigData() from the scrolling example on the HandsOnTable site (http://handsontable.com/demo/scroll.html).

When I construct the table and call handsontable.getData(), I get back all 1000 rows. The browser only displays first 35 rows. I examined the DOM - that's all it has, 35 rows. I played with heights of different divs, and scroll settings, nothing affects the number of displayed rows.

I am using Handsontable 0.11.4.

Why does not the table render all the rows it has?

Thank you,

Michael

[Vladimir]

Hi Michael,

Hve you manage to solve this or made some workaround? I have the same problem with Handsontable included.

Vladimir

четверг, 13 ноября 2014 г., 19:11:50 UTC+3 пользователь msmo...@gmail.com написал:

[Vladimir]

Not optimized solution of this problem is here

https://github.com/handsontable/handsontable/issues/941#issuecomment-65611971

четверг, 13 ноября 2014 г., 19:11:50 UTC+3 пользователь msmo...@gmail.com написал:

[jpb...@gmail.com]

I've definitely seen this as well. After messing around with it for a while it seems like its related to the tables height definition prior to the initial render.

[msmo...@gmail.com]

On Tuesday, December 9, 2014 4:49:48 PM UTC-5, jpb...@gmail.com wrote:
> I've definitely seen this as well. After messing around with it for a while it seems like its related to the tables height definition prior to the initial render.

Thank you for the replies. I am still puzzled by this behavior. First of all, I do not understand why only a small portion of rows is displayed in my table. The Scroll Demo easily displays 10000 rows (I tried it in JSFiddle). My code uses the same HTML, CSS and Handsontable options as the example.

I read through the thread posted by Vladimir. It suggests using renderAllRows: true option. It works fine as long as I have under 1000 rows in the input array. Beyond that, the table construction fails with error:

Security brake: Too much TRs. Please define height for your table, which will enforce scrollbars.

I am not sure what defining height for the table means. My CSS defines the height for the div element serving as the Handsontable container.

[spilka.krzysztof]

Try using this setting:

renderAllRows: true;

[Zeke Schmois]

For all those still interested in understanding this behavior, it has to do with the "Virtual rendering" used to speed up the table instance. What this means is that it will only render to the DOM enough rows and columns to fill the screen, plus a bit more, but nothing else. As you scroll, it moves that window so that it seems like there's infinite data rendered. 

The problem is that some people will attempt to use CSS and jQuery to access the state of the table, or even modify it. This is not the intended behavior of Handsontable and should not be for anyone developing maintainable JS web apps. Instead of looking at the DOM, Handsontable attempts to provide us with all the tools to observe and modify its data sources without needing to look at the DOM at all. Of course there are exceptions at times but in recent versions (0.18) it's looking quite nice.

The solution to use `renderAllRows:true` is one that would get around the virtual renderer but should be avoided if possible. And as for the "setting the height of the container" bit, it refers to the height of container div. You can either set it manually on the DOM or supply the parameter when initializing the HOT instance: `height: 500 // or any number to set the pixel height`.

[mohit.ka...@gmail.com]

Hi all,

i also facing the same issue ,
i'm adding the handsontalbe on a popup but when popup is render only two columns are showing initially but if i click on the scroll bar then it will show the other columns also.

i tried to give the style="width:100%; height: 200px; " on the container div ,but it still not resolved ..

any kind of help is a big support for me...

Thanks

[Zeke Schmois]

That's a different issue which I've seen happen before but am not sure what it is. I came up with two different solutions which are just workarounds the real problem:

1. after the table is rendered, perform a "click" event on the container. For example, if your hot container has id "#hot-container", then do $("#hot-container").click().

2. put the rendering of the handsontable instance on a timeout function so that it's delayed by abour 300ms. That should be enough to cause the bug to stop but doesn't always work.

[hatv...@gmail.com]

Vào 20:24:58 UTC+7 Thứ Tư, ngày 23 tháng 9 năm 2015, mohit.ka...@gmail.com đã viết:

It's too late but if anyone face same issude like this, pls try to change css at ".handsontable td"

/white-space: pre-line;/
max-width:300px!important;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;

more detail in: https://github.com/handsontable/handsontable/issues/941#issuecomment-65611971