Repository navigation
Column selector is hard to reach when the grid has many columns #177
Description
Feature proposal
When a grid has more columns than fit on screen, the ⋮ button that lets you hide columns ends up off screen too — you have to scroll all the way to the right, through the data, to get to it.
It feels backwards. That button is there to help me deal with having too many columns, and having too many columns is the one thing that hides it. Every time I want to tidy up the grid I first have to go looking for the control that does the tidying.
It also means that if I don't already know the button is there, nothing on screen tells me the columns can be hidden at all. I'd have to scroll sideways for no reason and happen to find it.
And a smaller thing: the button's column leaves an empty strip running down the whole table, which just looks like something is missing.
Describe solution expectations
What would help is being able to put that button somewhere that stays put when I scroll sideways. A small toolbar above the grid seems like the natural spot, and it's where plenty of other grids keep this kind of control.
I realise that isn't free. Today the add-on doesn't add anything above the grid, and I assume that's on purpose — it keeps the grid looking like a plain Vaadin grid. Having a toolbar show up just because you enabled the column toggle could be unwelcome for people who don't want it.
So maybe it shouldn't be the default, but an option: a toolbar above the grid that you can turn on — useful on its own for other grid-level controls — plus a setting to render the column selector into it instead of into a column. Anyone who likes the current behaviour keeps it.
The footer toolbar that already exists would be a cheaper home, but it seems like a worse one: it's easy to miss, it can end up below the fold, and it's far from the headers it actually changes.
One small extra: a bare ⋮ usually means "more actions". Calling it Columns, or using a columns icon, would make it much easier to recognise for what it is.
Either way, it seems worth thinking about — right now the control is least reachable in exactly the situation it was built for.
Additional information
Related: #176 — the same button also disappears from the header completely after hiding a column.
Observed with add-on 2.1.0 on Vaadin 25.2.3.
Activity
feat: move column toggle into a slot
javier-godoy commentedon Aug 20, 2026
Thanks for the detailed write-up. The reachability problem is real and #180 fixes it, but it takes a different route than the one you proposed, so it's worth recording why here.
What was implemented. The ⋮ control no longer lives in a column of its own. It is rendered into a new
fc-column-toggleslot appended to the grid's shadow root and pinned to the grid's top-right corner, over the header. Because it is positioned against the grid instead of against the scrolling content, it stays put when you scroll sideways, and since it no longer reserves a column, the empty strip running down the table is gone as well. Nothing is added above or below the grid: the grid keeps the same outer box and still looks like a plain grid.Why not the opt-in toolbar. The toolbar would have meant two new settings (turn the toolbar on, and render the selector into it instead of into a column), a default to pick for each, and a change to the grid's outer layout. Pinning the toggle to the grid gives the same reachability with no new placement API, no layout change, and one behaviour to document and test instead of two.
setColumnToggleVisible(grid, true)remains the only opt-in.Icon. Agreed that a bare ⋮ reads as "more actions". The default is unchanged, so existing applications keep the current appearance, but the icon can now be replaced:
The overload taking a
Componentaccepts any content, not just an icon.As a side note, the new positioning no longer relies on the grid's
overflowattribute, whose values were renamed in Vaadin 25 — the cause of #176.All of this lands in 2.2.0.
feat: add API for replacing column toggle icon
feat: move column toggle into a slot
feat: add API for replacing column toggle icon
feat: add API for replacing column toggle icon
WIP: refactor: remove the column-based getHelper overload
WIP: feat: fit the column toggle into the first header row
WIP: fix: prevent the column toggle from covering cell content
feat: change the default icon of the column toggle
feat: add API for aligning the column toggle
feat: add API for setting the label of the column toggle
feat(demo): add a selector for the column toggle icon
javier-godoy commentedon Sep 1, 2026
#180 was closed without merging.