Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Table row height vs page length
I have a table to display search results, which include variable-height rows. If I only specify pageLength then the last rows are sometimes not visible even with scrolling. I thought that I could set row height and pageLength to minimize that problem.
I set row height in css like so:
.r-table-row-query .v-table-row, .r-table-row-query .v-table-row-odd
and then I call table.setPageLength(7).
The row height part works fine: the length set is used as the minimum height of each row.
However the table renders as if the page length had not been set: it is one long table, with scrollbars.
Is this behavior expected? Is there any way to set both row height and pageLength? Thanks for any help!
My understanding now: Table.setHeight() would only make sense if page length is 0, but then the table is not buffered; row height is only useful to set a minimum height per row (could be useful esthetically).
My use case for having variable row height: model entities are grouped in aggregates (see Domain Driven Design); an aggregate is displayed as a "page" with tabs corresponding to various contained elements. When a user runs a query, the results are displayed in a table, each row corresponds to an aggregate and displays not only the aggregate "name" but also a list of the elements (contained in the aggregate) that satisfy the search criteria. Thus the user has a good idea of the search results even without going to the aggregate page, and/or can go directly to the most interesting result; this is particularly useful when the search includes a full-text component.
My solution to the problem explained above: page length is simply the height available to the table, divided by an estimate of the average row height, for instance 100 pixels for a search with sub-results, 30 pixels for a search without sub-results. This allows using table buffering as well as making sure, in most cases at least, that all rows are accessible to the user.