Multiple adjacent tables, as hierarchy, like Mac Finder > View > as Columns

I want the user to navigate a hierarchy of related database tables. For example: Customers > Invoices > Line Items.

I would like to have a series of data grids with scroll bars (Table in Vaadin?), each representing a table in the hierarchy. Ideally they would have splitters between them to allocate more or less space to each data grid.

This is just like you see in Mac OS X > Finder > View > as Columns. Except instead of a single column in each grid, I want multiple columns (such as First Name, Last Name, Phone Number of Customers).

Even better would be a big scroll box around all of them so I could display more data grids than fit across the window.

Is any of this possible in Vaadin?

I’ve seen these two threads in the forum, but they don’t exactly say if my idea is possible:

can split panel be used to divide the layout into 3 parts?

SplitPanel 3 up

Those posts suggest the use of HorizontalSplitPane. But that widget is built to only handle 2 areas, one on each side, not multiple areas. The first thread suggests nesting a HorizontalSplitPane inside another. Does that really work? Would I continue the nesting for more than 3 areas? Being new to Vaadin, I don’t to be fighting against the way Vaadin is designed.

Or is there a better way to let the user navigate a multi-field hierarchy of data in Vaadin?


You could probably take a look at
add-on by Henri Kerola.

best regards