Vaadin grid in mobile view

Flow
1

Hi,

I use grid component in my CRM App, what do you suggest to manage a mobile view where the width is small ?

i was thinking a way to show the first 5 columns value in a vertical layout instead as columns.

what is your experience / suggestions ?

Thanks

2

Did you check if either of these approaches might make sense for you?

3

There’s a cookbook example of how to show/hide certain columns in Grid based on the viewport size (so that there’s a special column with a renderer that’s only shown on mobile-size viewports): How do I make a responsive Grid that has a different set of columns depending on the browser width. - Vaadin Cookbook, which sounds like what you’re looking for. It’s a bit old, but I think the same approach is still largely valid.

1 Like
4

Thanks, very useful example.

5
  1. Check if client is desktop or mobile . Lot of convenient isXXX methods available in VaadinSession.getCurrent().getBrowser()
  2. If desktop, use Grid
  3. Else use VirtualList

IMO this is better usability as compared to selective column display