Vaadin 23 proper usage of nested layouts

Question

Typically, when I need to present some information, I use VerticalLayout (VL) as a main container and many of nested HorizonalLayouts (HL). I may be wrong, but I feel that this is not a very effective way to organize the information. I suppose I may achieve the same without nesting of such amount of HorizonalLayouts. For example, I need to present user info with 100 lines, each line will have 5-10 spans. Typically, with my current approach, I'll create 1 VL and 100 HL for that.

Is there a more effective way to present this information other than nesting 100 HL into VL ?

Answer 1

You're absolutely correct about that – the main inefficiency being that HorizontalLayouts are a bit heavier than plain html elements that would probably do the job just fine.

There are many different ways to approach this, but I'm going to assume that you're basically rendering a table where you want each element to line up in neat columns.

HTML has the <table> element for that, but unfortunately Flow does not have an API for doing <table>s easily.

The easiest way is probably to use this add-on that provides such an API: https://vaadin.com/directory/component/html-table/overview

Other ways would be to e.g. use Divs for tables, rows and cells instead. Divs can be made to render as those elements by applying the appropriate display css values table, table-row and table-cell. These can be applied via classnames or the Style API in Flow:

Div cell = new Div();
cell.getStyle().set("display", "table-cell");