TwinColSelect - Vaadin Add-on Directory

TwinColSelect for Flow (Vaadin 24, 23.3.x and 14.x)

This is a fully server side custom component demo. There are many ways to implement TwinColSelect or so called list builder component. This one is build using layouts and checkboxes. The serverside API is a bit mimicing the CheckBoxGroup component of the framework. There is some resemblance to old TwinColSelect component of Vaadin 8, but this one has many new features. Supported features - Drag and drop selection, - Range selection (shift + click by mouse) - Adopts left to right / right to left direction based on ui.setDirection(); - DataView API - Tooltip generator for items - Tooltips for the buttons, I18n object to provide tooltip texts - Rudimentary A11y features - Keyboard navigation (cursor up/down, space for checked, enter to select) - Vertical and buttonless theme variants

View on GitHub
Online Demo

TwinColSelect version 1.0.0
### Version 1.0.0 - Initial release

TwinColSelect version 1.1.0
### Version 1.1.0 - Small fixes, added some JavaDocs added Drag and Drop support - Vaadin 14.1 or newer required

TwinColSelect version 1.2.0
### Version 1.2.0 - Keep lists sorted if in memory DataProvider has Comparator set

TwinColSelect version 1.2.1
### Version 1.2.1 - Changed default value of the error message

TwinColSelect version 1.2.2
### Version 1.2.2 - Fixes broken setValue(..)

TwinColSelect version 1.2.3
### Version 1.2.3 - Fix broken clear()

TwinColSelect version 1.2.4
### Version 1.2.4 - Fixes deselect / deselectAll - Clering now resets checkboxes too

TwinColSelect version 1.3.0
### Version 1.3.0 - Added clearTicks(..) and setClearTicksOnSelect(..)

TwinColSelect version 1.3.1
### Version 1.3.1 - Adding proper readOnly handling and styles

TwinColSelect version 1.4.0
### Version 1.4.0 - Added range selection option

TwinColSelect version 1.4.1
### Version 1.4.1 - Fixed the default constructor to use empty set as default value (see #4)

TwinColSelect version 1.5.0
### Version 1.5.0 - Added right to left support, requires Vaadin 14.3 or newer

TwinColSelect version 1.5.1
### Version 1.5.1 - Fixed issue with undefined direction

TwinColSelect version 1.6.0
### Version 1.6.0 - Add option to configure whether value is reset when filter is changed or not - Fixed corner case bugs related to filtering and sorting

TwinColSelect version 1.7.0
### Version 1.7.0 - Made the items look less like conventional checkboxes - Added API to customize button icons and captions

TwinColSelect version 1.8.0
### Version 1.8.0 - Improved range select & Double click to select, kudos to Michael Thorne for contributions - Other small fixes

TwinColSelect version 1.8.1
### Version 1.8.1 - Fixed a typo in CSS that prevented add-on to work with Vaadin 14.6

TwinColSelect version 2.0.0
### Version 2.0.0 - Build against Vaadin 21 - Added support for DataView API

TwinColSelect version 2.1.0
### Version 2.1.0 - Fixed issue with buttons enabled when no data - Fixed issue with Filter and SortComparator not working via DataView - Fixed issue with sorting not done when moving items - Compiled with Java 11 for Vaadin 23

TwinColSelect version 2.2.0
### Version 2.2.0 - Fix the required indicator to be similar to rest of the Vaadin components

TwinColSelect version 2.2.1
### Version 2.2.1 - Fix issue with buttons being disabled if the items were not initially set - Fix issue with error message not appearing at right time

TwinColSelect version 2.2.2
### Version 2.2.2 - Made TwinColSelect preserve order of selection when there is no Comparator set. Note, MultiSelect interface uses Set as value, which is not promising preserving order. This feature is implementation detail.

TwinColSelect version 2.2.3
### Version 2.2.3 - Correct button states after setting readonly false

TwinColSelect version 2.3.0
### Version 2.3.0 - Add API's to set tooltips for items and buttons. Requires Vaadin 23.3.0.

TwinColSelect version 2.3.1
### Version 2.3.1 - Fix bugs with disabled checkbox behaviors - Reset filter when programmatic selection is done

TwinColSelect version 2.4.0
### Version 2.4.0 - Improved A11y and keyboard navigation - Added configurable PickMode

TwinColSelect version 2.5.0
### Version 2.5.0 - Added buttonless and vertical variants - A11y improvements

TwinColSelect version 2.5.1
### Version 2.5.1 - Accessibility fixes: Error label, label and invalid status announced correctly. Moving to selected announced.

TwinColSelect version 2.5.2
### Version 2.5.2 - Fix issue with drag and drop clearing error color

TwinColSelect version 3.0.0
### Version 3.0.0 - Fix Vaadin 24 compatibility

TwinColSelect version 3.0.1
### Version 3.0.1 - Improve keyboard navi - Use NativeLabel instead of Label

TwinColSelect version 1.9.0
### Version 1.9.0 - Backport recent improvements from Vaadin 23/24 versions - Configurable pickmode - Better A11y - Theme variants (buttonless and vertical) - Improved required indicator looks - Tooltips

TwinColSelect version 3.1.0
### Version 3.1.0 - Major internal optimization by removing need to use Checkboxes by internal class SelectItem. This has some implications to styling as options are no longer Checkboxes.

TwinColSelect version 1.9.1
### Version 1.9.1 - Fix keyboard navigation and A11y

TwinColSelect version 2.6.0
### Version 2.6.0 - Optimize DOM, note this impacts styling, check demo app for styling: https://github.com/TatuLund/TwinColSelect/blob/nextlts/frontend/themes/mytheme/styles.css - Fix container height CSS

TwinColSelect version 2.6.1
### Version 2.6.1 - Fix issue with item padding

TwinColSelect version 2.6.2
### Version 2.6.2 - Do not allow drag and drop from other TwinColSelect instances

TwinColSelect version 2.6.3
### Version 2.6.3 - Prevent drag and drop between TwinColSelect instances

TwinColSelect version 3.1.1
### Version 3.1.1 - Fix container height - Fix item padding issue - Prevent drag and drop between multiple TwinColSelect's - Fix item tooltip being null

TwinColSelect version 3.1.2
### Version 3.1.2 - Small fix

TwinColSelect version 3.2.0
### Version 3.2.0 - Add API to control filtering when sorting to improve performance with bigger data sets

TwinColSelect version 2.7.0
### Version 2.7.0 - Added API to control filtering when using sorting