Vertical Grid

How can I show the columns and it values vertically ? Like this

That’s not possible with the standard Grid

And unfortunately I don’t know of a component that implements this

Theoretically the spreadsheet component could be used for that, even tho it would be a total overkill

@nice-camel Are you trying to implement DBeaver with Vaadin :wink:


this helps to show mulitple columns easily when there is only one row of values

I’ve to show 20 columns and its exceeding the screen size. Users are not happy in scrolling horizontally.

I would rethink this design. Are people suppose to read / use all 20 columns equally important or can you hide some by default and show them for example with the row details feature

yes that’s the alternative but when there is only one row of values always, item details is annoying and user prefers the way how DBeaver is able to show

:face_with_monocle: Well you can ditch the grid if the items returned by your query are one or less and build a layout to represent the data better to the user and once more data is available you can go back to the normal grid

If there’s only one row (or only a handful of rows), you could make a custom data structure that represents a single property of the bean, and fill it with each row’s values. Then add a column for each bean. Not pretty, but probably doable.

yeah I made them as a form showing 10 columns at one side and the rest on other