Add Column visibility toggler for the grid

jcgueriaud1 commented 4 years ago

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 commented 4 years ago

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

web-padawan commented 4 years ago

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

jcgueriaud1 commented 4 years ago

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

tomivirkki commented 4 years ago

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

jcgueriaud1 commented 4 years ago

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: https://github.com/vaadin/vaadin-grid/issues/819 but it's just an example not something in the component.

tomivirkki commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

Also see https://github.com/vaadin/web-components/issues/986

jcgueriaud1 commented 3 years ago

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

jouni commented 3 years ago

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

rolfsmeds commented 2 years ago

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 commented 1 year ago

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

mstahv commented 1 year ago

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

mstahv commented 1 year ago

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 commented 1 year ago

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 commented 10 months ago

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

rolfsmeds commented 3 weeks ago

We could consider combining this with an alternative column reordering (maybe also resizing) UI for users who can't do drag-n-drop: https://github.com/vaadin/web-components/issues/130

vaadin / flow-components

Add Column visibility toggler for the grid #1603