Cogwheel in top right corner of a Grid?

Flow
1

I’m looking at various alternatives for adding a panel/menu to a grid where I can do column hiding and other meta-stuff.
Today it is in a “Configure ->” submenu on the regular grid menu, but users think it is too hidden.

I can place it outside the Grid, in a toolbar. That is trivial, but will always waste some space:
{C46EBEE7-8DE4-49FE-8195-51783E330704}

I can use an overlay, but that comes with its own problems:

  • It has to be inset a bit to not overlap the scrollbar
  • That means the text will be split, which looks a bit naff

{E472BC33-151E-402E-B611-4073587AA8FF}

I’ll go with the toolbar for now, but wanted to know what you guys think.

2

There is example here How do I show a menu to toggle the visibility of grid columns - Vaadin Cookbook

That is based on idea by adding a column where the menu is in the header.

But that has also its own pros and cons.

The optimal solution is application specific.

3

Thought of that, but it is in the same category as my first example;
It is a column, so it will take vertical space.
It will also be outside visible area for many of our grids, but I guess that can be fixed by freezing it.

One benefit of having a button in a toolbar is that I can have more buttons, and if the grid has a title, I can place the buttons there

4

This is the solution we are planning on doing at some point: a toolbar with title, column selector etc above the Grid: Header toolbar for Grid · Issue #986 · vaadin/web-components · GitHub

5

Looks good, but I’ll not wait for that :sweat_smile:

6

I also had similar requirement and this is what I’ve created

image
image1644×420 31.7 KB

image
image1590×453 46.9 KB

7

Yeah no, didn’t expect so, just meant that as the solution that the Vaadin design system is most likely going to go with, so you might want to do the same (which then probably makes it easier to migrate to it once it ships).