Drag and drop table columns

I have the need to display a table where the user can select which columns he wants to see and which he doesn’t.
I know there is the column collapsing feature which is nice but I may have a few thousand columns in total…

So I was thinking of having a table and a tree. Each leaf in the tree would be a column and I would drag columns from the tree to add them or from the table to remove them.

I tried looking fiddling but it does not seem possible to drag a column of the table (outside of reordering it) and it also doesn’t seem possible to add columns on the fly (let alone showing drop markers).

Do I need to write a brand new client side table component or can somebody think of some tricks to make it work ?

[quote=Mathias Clerc]
I may have a few thousand columns in total…
[/quote] :open_mouth:

Tree and Table has drag and drop support where you can drag item’s from the tree to the table. As your tree has the columns as items, you can drag those on the table. It doesn’t actually move the item, it just says that item x was dragged from component a into component b into place y. With this info you can just fetch the column name hidden into the item and set that column visible in the table, without adding any items there. The problem is that you have to drag it into the body of that table and not the header, and the user can’t specify directly in that drag on which position in the table the column should come.

To get the exact feature that you request you’d have to go into modifying table and add drop points between the columns like there are between the rows. As the table already have column reordering and indicators for that, I wouldn’t think it would be crazy, crazy hard… (You never know when modifying table.)

Still, having thousands of columns in one table really sounds that there is now something that should be redesigned. If you’d say you had 20-30 columns I might have thought that it would be okay in some weird border case, but anything over that would be totally useless.

The missing drop indicators is what is making it not so convenient to drop columns.
The table code is too much for me to fiddle with, so I am thinking of having an edit mode were I would recreate a fake table header using a CssLayout, do my drag and drop there and upon leaving the edit mode, update the actual table. With some CSS the user should not be able to see that it is not the table header anymore.

The user will be using anything between 5 to maybe max 20 columns at once, but he has the choice of between thousands of columns to do it.
It may seem weird but in this very specific case it is the best way to manage it. I would not consider it as a good design generally thought.

Now our old interface is using trees in a twinselect ind of way and it is really efficient. Our vaadin implementation is adding drag and drop for a more intuitive way of handling the GUI.

would a checkbox list of the columns be an option, where checking one will add it to the table, and then the user can rearrange with dragging? wouldn’t need any client side modifications of fake header hack.

That’s a good idea. Thanks for sharing it.

I went the fake header way and got it working in under an hour. As it feels pretty good and act as a preview to the user. I am pretty happy with that result.
Maybe doing it directly on the table would have been too sluggish with the lazy loading of column data which would have happened all the time.