Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Table - Disable Lazy Loading (I think that's what it's called)
First, let me clarify what I mean ... when a table has more than 100 rows, as I scroll down using the slider I see numbers representing the rows that will be loaded once I drop the slider. I need it to load all data and keep it in the table so that users can quickly scroll through the data watching a particular column.
Checking forums, I can see that if I set page length to 0 it will disable lazy loading. In my case, this doesn't happen. This may be because I am immediately afterwards setting the height of the table.
The method description is probably rather old, from the ancient time when Table actually used to have paging... I can't check it right now, but I'd guess setting page length to 0 will show all the items in the table. So if you have a 10000 items there, it will show them all. So scrolling will be disabled. In such case, you can put the table in a Panel to have a scrollbar.
And yes, the table must have undefined height in such case or otherwise it will get vertical scrollbar. So my guess is that you want to put the table in a Panel, for which you set a defined (fixed or relative) height.
Thank you Marko. I feel a bit stupid now. I had the solution in hand, yet let it slip through my fingers. I put the table in a panel and it works great. Sorry for posting a dumb question.
Hello again. I spoke too soon when I said it works great. It works really well when there are less than 200 rows, but after that performance very quickly degrades. At 1000 rows the table is all but unusable, taking almost a full minute to load but navigating it is virtually impossible.
The problem is simple, 3 of the columns are TextFields and 3 other columns are buttons. If I change them to Strings, everything works great, but this isn't an option.
It seems to me that this is a browser problem, but maybe you guys know a way around this? Am I screwed, or is there an option I hadn't thought of? And, in case you're wondering, the data must be quickly easily manipulated, so something like a text field and button is essential.
... As a possible solution, can I somehow link the scrollbar of the Table to the scrollbar of the Panel? It seems that a PageLength of 100 could potentially work, but if I try that I get two scroll bars, one for the table and one for the panel. Is there a way to somehow draw the table at a particular height yet increase the number of rows cached and only have a single scrollbar?
Yeah, a table can't be very huge without lazy loading, that's why lazy loading is normally used. And Vaadin components have much bigger rendering performance footprint than plain text.
You can use setCacheRate() to adjust how much Table caches rows. When I come to think of it, setting it to a huge value is another way to disable lazy loading.
The issue is really a tradeoff between server latency and rendering speed.
Note that Grid should be much faster to render, although it doesn't support editable mode, only row-based editing. It is possible to make a custom renderer to enable editing in all rows, and I think some people have done that, even though it requires client-side coding.
Thanks again Marko. I am trying to setup a Grid separately as well and have started another thread in this form on that subject. I figured I may as well try to fix the current setup, just in case it is fixable.
That being said, I gave a shot to setCacheRate. While it helps when I set it to 10, that still isn't really enough. Setting it to 20 is closer to the requirements of what the client wants, but it makes the table far too slow. Hence, it seems the only way to go about fixing this is to migrate to a Grid.
I greatly appreciate you helping out.