One big thing missing from Vaadin Flow component set (compared to Vaadin 6/7/8) is gridlayout. It is clearely identified need but our R&D has been avoiding that task as “the css grid API will solve this, but the API is not stable”.
One project I’m working on needs some sort of grid layouting. I noticed there is an add-on that essentially replicates the good old GridLayout API. But I’d like use something drafted on top of the infamous CSS Grid, which nowadays is pretty much standard. There was actually two (same code published twice ) add-ons building on it, but I wasn’t quite happy with it (the API appeared to be influenced by old revisions of css grid & built on templating → add-on requires a custom front-end bundle → my project becomes slow if I use the add-on).
I gave a quick trial to create one with only the Style API from Flow and it looks very promising ATM. Althought some might claim the API would belong to (extended) Style object, I think shorthands on the component level makes a lot of sense.
No docs, or public builds yet, but check out this branch in Viritin and let me know what you think! Especially comments on naming and API. I’ll try to release something today or tomorrow, but we can change the API with low barrier in the beginning.
Related development, in the same space, a component based on the good old table html element seems to be on its way, although the implementation should probably be improved still based on the proven add-on: Add html table component et al · Issue #15475 · vaadin/flow · GitHub
LumoUtility provides set of predefined CSS Grid rules
Those are naturally quite different to use than Vaadin 7/8 GridLayout, which was not CSS Grid based, not responsive etc. LumoUtility however can be a good approach if you want to rewrite the layout to be responsive, see example
There is a free GridLayout add-on that has a subset of Vaadin 7/8 GridLayout API, i.e. is somewhat easy to use as replacement (expand ratios not implemented)
A more complete API is provided in ClassicComponents packakge
Then there are bunch of other grid layout components, where the API is different. For example this one
I noticed the LumoUtility “grid”, but if I understood correctly there are limits (constants for rows/cols) and “coding” the grid logic with a bunch of strings doesn’t feel quite right for a Java dude. Thumb up for the constants, but that just slightly improves the DX. The add-on improvest it more, but it doesn’t give you more rows or the flexibility you get with css grid.
The logic is less rigid there. You give either number of rows or columns and let it flow the layout. So either one is fixed. This is important for responsive nature as well. Hence a bit different approach than more rigid Java API. LumoGridLayout add-on tries to be on a middle ground here, i.e. provides another abstraction layer.
) add-ons building on it, but I wasn’t quite happy with it (the API appeared to be influenced by old revisions of css grid & built on templating → add-on requires a custom front-end bundle → my project becomes slow if I use the add-on).
