Flow Grid with multiple rows per row of data and rows spanning several columns

Flow
1

I have a requirement to produce a grid layout like in the image below:

grid-with-multiple-rows-and-column-spanning
grid-with-multiple-rows-and-column-spanning1047Ă—716 20 KB

Is the Vaadin grid flexible enough to produce this kind of Grid layout with multiple rows per row of data, and then to have the rows spanning several columns?

What features should I go looking for to produce a Grid like that which can have the data across multiple rows?

I do not have access to the Vaadin Grid Pro, but I am using the latest Vaadin versions.

2

I would recommend using the Spreadsheet for this kind of presentation. It is however a commercial component, so depending on your project, it might not be an option. But it should fit your needs, since your table looks like an excel sheet.

If using the spreadsheet is not an option, you maybe want to use a tree grid, since your data seems to be hierarchical (the expand icon might need to be hidden in your case, but not sure if that is a requirement).

However, the grid (and thus the tree grid) does not support colspan for cells afaik. If styling and “wider” columns is not an option, you maybe have to use a native html table instead or check the directory for other table/grid addons, that maybe provide that option.

Last option, that comes into my mind, would be to integrate a 3rd party javascript spreadsheet library as a Flow component - but from my own experience I can tell you, that it will take time, effort and experience to do so. So I list this one more or less for the sake of completeness.

3

By quick glance your column “party” looks like a hierarchy column, so you could potentially use TreeGrid variant here. Grid itself does not support rowspan or colspan as it is not not a layout component, but a data grid component to be backed by bean list.

4

Thanks for the advice @Stefan.27 @Tatu2

I looked into whether I could use the TreeGrid, and it was definitely not going to work without the ability to do colspan. I also looked for other addons, but could not find one that was going to work well.

The spreadsheet could have worked, but I would have had to make it readonly and then constrain the scrolling to make it more like a report, and I would also have to buy the component just for this one use case. So that was not an option.

The solution I went with was to use the Table Vaadin addon from @Stefan.27 :slight_smile: and I am happy with the end result. I am now using several of stefan’s addon’s.

I found it was easier to just use the old HTML table as the guide to make the programmatic Vaadin version and the code is now better than the original in how it is generated.

1 Like