listShuttle component allows to select items using two lists with move controls and reorder items in result list.

List Shuttle could contain several columns in list representation. And it also has strong keyboard support out of the box.

ListShuttle example

Customize simple application toolbar using List Shuttle. In this example you may select items and their order within the toolBar.
After you move some items between lists or reorder them in "Currently Active" list - you'll see the changes on the toolbar

Content definition for this component - analogous to any Iteration component. So, all you need is define collection in List Shuttle sourceValue attribute and iterate the collection in nested columns through var attribute.

Result items will be stored under the collection defined in targetValue attribute.

In order to set initially selected rows or to process submitted selection - use sourceSelection and targetSelection attributes.