Add Column visibility toggler for the grid

[jcgueriaud1]

The column visibility toggler is a common feature for datatable.

Is it possible to add this feature in vaadin-grid or add an example of code to create a column toggler?
There are few problems or missing features: (if you have a simple solution for these, please comment this ticket)

• no hideable attribute for a column (you cannot configure this easily for your custom toggler)
• no getHeaderText or getHeader to display a label for each column in the column visibility toggler
• a non visible column is different than having a column removed. (from the Column.setVisible Note that column related data is sent to the client side even if the column is invisible. Use {@link Grid#removeColumn(Column)} to remove column (or don't add the column all) and avoid sending extra data.). So if you have a lot of hidden columns, the grid could be slow down because of the hidden columns.

Here one forum post: https://vaadin.com/forum/thread/17131429/set-hidable-and-hidden-columns-in-grid

[tomivirkki]

Related vaadin-grid issue https://github.com/vaadin/vaadin-grid/issues/1431

[web-padawan]

Closing as duplicate of vaadin/vaadin-grid-flow#341 (which depends on the web component issue linked above).

[jcgueriaud1]

Is it really a duplicate?
A column visibility toggler for the grid is quite different than a hidable attribute for column.

[tomivirkki]

Dupe of this then? https://github.com/vaadin/vaadin-grid/issues/1431

[jcgueriaud1]

Same idea: hidable attribute for the vaadin-grid. Not really a column visibility toggler.
I won't have any labels for the toggler, not the component.
Probably dupe of this: vaadin/vaadin-grid#819 but it's just an example not something in the component.

[tomivirkki]

The description of the issue doesn't clearly state it but it seems to also be about the UI controls for toggling visiblity: https://github.com/vaadin/vaadin-grid/issues/1431#issuecomment-423908532

[mvysny]

I believe this bug references the Column Visibility Picker Popup that used to be provided by Vaadin 8 Grid but is no longer provided by Vaadin 14 Grid. Since the feature is still missing, I'd suggest to reopen this issue.

[jcgueriaud1]

There is one example to implement it as a custom component here: https://github.com/TatuLund/devday-demo-flow/blob/master/src/main/java/com/vaadin/devday/demo/views/GridView.java#L142

[mvysny]

Also see vaadin/web-components#986

[jcgueriaud1]

There is another example of how to implement this in the cookbook: https://cookbook.vaadin.com/grid-column-toggle

[jouni]

The documentation for column visibility, which includes an example of this: https://vaadin.com/docs/latest/ds/components/grid/#column-visibility

[rolfsmeds]

The initial implementation of this could be just the column toggle dropdown itself, with an API for triggering it from anywhere. That way each application could implement the trigger in whatever makes the most sense there (custom Grid toolbar, right-click context menu, whatever).

We could then later provide an option to show a standard trigger somewhere somehow.

[rolfsmeds]

Design detail: the button for opening the column selector should provide some kind of indication when one or more columns are hidden.

[mstahv]

I missed this feature (again) today while trying to clean up one of our start.vaadin.com templates: mstahv/enhancing-master-detail-view@62a5ac7

[mstahv]

I modified the workaround shared previously to be triggered via "column selector icon", like in previous Vaadin versions, and it is now shared in in.virit:viritin:2.0.1. See this change how it is down and how to use it.

[TatuLund]

Just as concept testing and feeling I have had column selector menu in BeanTable for a while

https://v-herd.eu/tatulund-addons/beantable

Just noting that in addition to Vaadin 8 style menu as shown in the demo, the component has actually two modes for the menu, the button on the right corner and context menu that opens by right click. (configurable via API).

[vaithu]

Having this as the default feature available in grid is what I'm thinking of. If not provide APIs to have this toggleColumn visibility and also considering the ViewPort size automatically identify how many columns to show. Then user can use this toggle button if they want to see more or less. Also have some click listener for this toggle button checked/unchecked if any custom action is required for the developer