Sorting a list of items in Vaadin 12

Flow
1

Hi,

currently I’m building a page for useroptions where the user can switch between his own preferences.
One of those options should be that the user is able to decide which columns in which order he want’s to see in some results.

My customer has the request that this should be in a graphical way with drag and drop. I can’t find such an component in Vaadin 12.
The only component which was something near this request was the TwinColumnSelect, which is deprecated for 12.

The Drag & Drop HTML5 components also where nice, but I don’t know how someone could activate and deactivate a component.

So I’m asking the community, if someone has built something equally with Vaadin 12.

Greetings
Daniel

2

Hi Daniel,

the user is able to decide which columns in which order he want’s to see in some results.

Columns in a grid?

My customer has the request that this should be in a graphical way with drag and drop. I can’t find such an component in Vaadin 12.

If you’re talking about grid columns, they be reordered with drag and drop, https://vaadin.com/components/vaadin-grid/html-examples/grid-columns-demos#reordering-and-resizing-columns.

3

Hi,

yes columns in a grid would be best to explain. I know that you can reorder the columns by dragging, but the customer wants that every user is able to define this order for his own preferences and the system should save these.

Also the user should be able to deactivate some columns. So I have an Array of possible columns and the user is able to sort and enable these like he wants.

Here is an (very bad) example, what I’m looking for: http://interactjs.io/ in the section Drag and Drop.

There you are able to take a shape and drop it in a box.

4

Hi Daniel,

Is it actually columns of a grid you want to re-arrange and show/hide??

Stuart

5

Unfortunately, we don’t have a component that does that out of the box.

If you have the time, I’d recommend building that component. There’s quite a few tutorials re: drag and drop using HTML and JS.

But if you don’t have time you can either:

  1. Enable column reordering and store whatever order they put the columns in. Let them toggle a column’s visibility by using a checkbox group that lists all of the columns.

  2. Build a component that contains a checkbox (toggles visibility), column name, and two buttons: up/down that defines the order. Alternatively, use an input field of sorts.