vaadin
[grid] Responsive column configuration
I'm using Vaadin Grid and need responsiveness (any kind of wrapping would work). Is it possible to do this cleanly?
ping @jouni, gave a quick try with 2.0 and flex-direction: column on the body rows works out of the box. The headers need some thinking though.
Good to know, Sauli!
I wonder where the sweet spot with these responsive tables really is – how much extra configuration is acceptable/needed per viewport size or can it be mostly automated?
I mean, you could just have a completely different data grid configured per viewport, and just switch between those (either the full grid or just the column configuration). But is that exactly what designers/developers try to avoid, not having to worry too much about how the data looks like in a small viewport, and just have it work automatically?
The linked prototype looks usable when you have a very small number of columns. Becomes unwieldly after 5-7 columns, I would say.
Here’s a good article that outlines possible solutions: https://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions/
As a workaround/partial solution, see the example for vaadin-grid 2.0, where iron-media-query is used to toggle the hidden property of certain columns, to show/hide them (resize the browser window smaller to hide the first two columns): https://cdn.vaadin.com/vaadin-grid/2.0.0-alpha2/demo/columns.html#hiding-columns
With this, you could create one set of columns for narrow viewports, and another for wider viewports.
This issue has been stalled for sometime now, but I think it's still relevant. Have you considered implementing something like DataTables' automatic column hiding?
There is a Cookbook example for this: https://cookbook.vaadin.com/responsive-grid
