Displaying a floating Vaadin-8-like column visibility selector

Vaadin 8 has a column visibility toggle in the upper right corner that is always visible.

Has anyone come up with a solution to display one in a Vaadin Flow Grid? I don’t want to go the right-click-context-menu route, as I don’t want to override the right-click behavior.

I tried creating a frozen column at the end, and adding a button to the header. It works, but the Grid bugs out if the column width is too small, so you end up with a visible empty column at the end.

In short, I want an absolutely positioned button at the top-right of a Grid’s scroller.

I’m aware of this issue https://github.com/vaadin/flow-components/issues/1603, just trying to come up with a Java-based solution.

just trying to come up with a Java-based solution.
Tweaking that would not be possible with Java alone. Some CSS is needed if you want absolutely positioned button there.

You need to place the Grid inside Div. You need to set the Div have position relative, then you can add the Button to the same Div and set absolute position to it.

I.e. you do not need to have the Button as child in Grid or its cell. You can use that Div as a wrapper.

Sorry for being unclear, by Java-based I meant as opposed to JS/TS (e.g. making a custom extension of the vaadin-grid) :slightly_smiling_face:

I’ve thought about wrapping it in a Div, but then I’d need to change my Grid extension to a Composite, and change hundreds of usages.

Even if I did that, there’s the issue of the scrollbar. The grid’s internal scroller may or may not display a scroll bar depending on the window size and number of rows, and I’d need to take that into account, unless I move the toggle to the left side, but that’s not ideal.

Try VGrid in in.virit:viritin:2.0.1 add-on. Introduce all your columns like normally and then call grid.withColumnSelector()

I didn’t know the getHeaderText was added. I learnt it with your changes in viritin :magic_wand:

In some 23.x minor IIRC.

Thanks @quintessential-ibex , I found a couple of things that were useful to my solution.

I have to use setFrozenToEnd as I have a lot of horizontal scrolling. Interestingly enough, the button doesn’t show up with a width of “0”, but does show with “0px”.

Either way, with a 0 width, I still have a border on the right, about 8px from the right edge of the grid, you can see it cross the numbers in the screenshot. Haven’t managed to get rid of it. This should do for now, though.
image.png

Maybe it should be absolutely positioned and let the “fake column” reserve what it needs. Frozen column sure makes it more complicated with the border…

Yeah, maybe. Can’t say which option looks better, but that would certainly reduce the chance of bugs. I have two header rows, and some widths caused the columns to be misaligned.