table autoscroll to out-of-view item?

Probably missing something obvious.

I have a table with 50 items, and the table currently displays the first 20 rows. If I select item 35 (by programming), is there a way to have the table auto scroll to that item ? The item is properly shown as selected if I scroll down.

Is there something somewhat like Panel.setScrollTop(), but for a table?. I am running on an indexed container and I can figure out a row number if needed.


Yes, very simple, though the method names may be a bit obscure: setCurrentPageFirstItemId() and setCurrentPageFirstItemIndex().

Just make sure you call them after a possible setPageLength().

In Knowledge Base:
#187: How do I set scroll position of Table?

This is an old forum topic, but I’m using Vaadin 7.3.3 and I still cannot make this work. In my case, the Table is known to have an acceptable number of elements from 1-500 row. I want the Table to fill the vertical space, and so I’m using setPageLength(0) to bring them all in and to allow the Table to be as tall as can fit.

But when I call setCurrentPageFirstItemId(), it often will not show that item at all. I am trying to simply add a new item and want to ensure that newly added item is visible in the scrollable area. Is there a way to do what I’m trying to do?

Often when the scrolling takes place, the previous entries just become a blank area in the table, and Chrome debugger shows that in fact a big empty spacer DIV is used.

The first image (table1.png) shows the table rendered correctly, and the v-table-row-spacer is set to height 0.

The second image (table2.png) shows the table after calling Table.setCurrentPageFirstItemIndex(), and now there is a v-table-row-spacer set to height 660. All of the prior table rows appear blanked out. If I refresh the view, then all table values are shown again.

From what I gather on other posts, the above is working as it “should” since I am saying the “current page’s first item” it the one I want to be visible.

I guess the question is whether there are any plans for Vaadin to support scrolling to a particular row in a table. Or is this possible using a scheme I’ve not yet discovered? Thanks for any good ideas.

We know either the index or the id of the row we want to be visible to the user (regardless of whether it’s “visible” in that it’s in the table’s cache of rows), which requires that the table scroll that row into view.

Obviously I don’t really understand how the Table plumbing works, but if I change Table.setPageLength(0) to be something like setPageLength(30), this all seems to work, even if the container holds all 100+ Items.

Is there any scheme to determine a “somewhat optimal” page length to use so that I can fill my table to 100% height? When I use 0, the table fills the vertical space and puts scrollbars if there are more entries than can fit, so it effectively knows how many rows can appear at once. I want that 100% height capability, but also want to be able to position myself to a given Item in the Table.

We found that in order that setCurrentPageFirstItemIndex (or setCurrentPageFirstItemId) will work properly,
the table rows must be one line width.
To achieve this, we forced the ui settings not to wrap the cells.
we used td style: white-space: nowrap