Collapsing columns when many are present

Vaadin 6 / 7 / 8 Framework UI
1

We have the following problem with Vaadin 6.8.3:
we have a dynamically generated table that can have from 10 up to 100 columns, our customer requested us to enable collapsing of the columns in the table so that they can exclude some of them when/if needed. Problem: the drop-down list that allows selecting which columns are shown overflows the screen if you have more than 40-45 columns so you can’t see the others in the list.

Switching to a custom widgetset and extend the component Table to achieve this simple thing is out of question, customer will never pay for that much work :wink:
We’d need a quick hack to resolve this if available - maybe with CSS? Tried making the thing scrollable but didn’t succeed.

Can you offer some help with this?

2

As quick hack - fiddling the chrome inspector for an app in Vaadin 6.8.7 - this CSS seems to work. Not sure max-height is supported in all browsers (http://caniuse.com/minmaxwh), but ultimately you need to set the size of the container to get scrollbars to work. Also, the shadow element behind the menu can’t be controlled. But, it would make it at least functioning.

#PID_VAADIN_CM .gwt-MenuBar {
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
}

Cheers,

Charles.

3

Simply add a Button ( independent of the Table ) on the screen that pops up a custom dialog screen where the user can select/toggle the visible properties…

All the default table do is setColumnCollapsed( propertyId, collapsed) on the selected fields…

4

Yep, looks ok. Thanks for your help!