Responsive Grid / Table

Hi, does anyone has an idea how to implement a responsive Grid?

If i have 10 columns and go on a smaller screen, i need to scroll the grid horizontally. Maybe there is a way how the columns which not fit the screen gets wrapped and shown with a accordion or so?

Example image below. The black arrows should be collapsable and show the values which doesnt fit into the view with its header bevor the value

I suppose you could implement something like that with a Details Row in the Grid quite easily. Then you just need to use something like MediaQuery - Vaadin Add-on Directory to trigger the display mode.

You can also check this: How do I make a responsive Grid that has a different set of columns depending on the browser width. - Vaadin Cookbook

Grid | Components | Vaadin Docs

Maybe this would also be an option?

If the view is so small i could hide columns and make more details visible and vice versa or?

Yes, that was my suggestion above. In order to toggle the Details visibility, you could use the mentioned add-on.

1 Like