TwinColGrid add-on
TwinColSelect component based on Vaadin Grids
TwinColGrid is built upon the same idea of TwinColSelect component, but using Vaadin Grid instead of Select.
It provides a multiple selection component that shows two grids side by side. Left grid contains unselected items and the right grid the selected items. The user can select items from the list on the left and click on the ">" button to move them to the list on the right. Items can be deselected by selecting them in the right list and clicking on the "<" button. Component also supports drag and drop between grids. Also a fluent API is available to ease the usage of the component.
Found a bug or have a suggestion? Report it on GitHub
For bug reports, feature suggestions, or questions, please open an issue on GitHub. This makes it easier for us to track and respond efficiently, ensuring you get the best possible support. Your input helps us improve—thank you!
Sample code
final TwinColGrid<Book> twinColGrid = new TwinColGrid<>("TwinColGrid no binding demo and drag and drop support", availableBooks)
.addColumn(Book::getIsbn, "ISBN")
.addColumn(Book::getTitle, "Title")
.withLeftColumnCaption("Available books")
.withRightColumnCaption("Added books")
.withoutAddAllButton()
.withSizeFull()
.withDragAndDropSupport();
twinColGrid.setValue(selectedBooks);
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Version 3.0.0 retains the functionality of 2.9.5 but eliminates deprecated methods.
A LegacyTwinColGrid class is provided to facilitate the transition from deprecated methods.
Bug fixes:
- Define a min-height to avoid confusion when the parent height is relative (#125)
- Fix button position when orientation changes (#154)
- Associate Label with components (#159)
- Hide grid selection column using JavaScript (#156)
- Fix double-click in read-only mode (#177)
- Align buttons in horizontal orientati (#174)
New features:
- Add CSS class for Read-Only mode (#178)
- Released
- 2025-03-25
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 14
- Vaadin 22
- Vaadin 23
- Vaadin 24
- Vaadin 8.9 in 1.0.5
- Vaadin 8.8 in 1.0.5
- Vaadin 8.7 in 1.0.5
- Vaadin 8.6 in 1.0.5
- Vaadin 8.5 in 1.0.5
- Vaadin 8.4 in 1.0.5
- Vaadin 8.3 in 1.0.5
- Vaadin 14+ in 2.9.0
- Vaadin 8.3+ in 1.0.3
- Vaadin 8.0+ in 1.0.1
- Browser
- Firefox
- Safari
- Google Chrome
- iOS Browser
- Android Browser
- Microsoft Edge
TwinColGrid add-on - Vaadin Add-on Directory
TwinColSelect component based on Vaadin Grids
Issue Tracker
Author Homepage
Online Demo
TwinColGrid add-on version 1.0.0
First release of the component.
- Drag and drop supported
- Fluent API available
TwinColGrid add-on version 1.0.1
Modified the project's pom, so no longer inherits from the parent's pom.
TwinColGrid add-on version 1.0.2
* Now compatible with Vaadin 8.3 and later.
* Support for Vaadin Designer.
* Read-only mode.
TwinColGrid add-on version 2.0.0
First release for Vaadin 14+ NPM mode. Several API improvements.
TwinColGrid add-on version 2.0.1
Support for extending and customizing the component ([Solves #6](https://github.com/FlowingCode/TwinColGridAddon/issues/6))
TwinColGrid add-on version 1.0.3
Support for extending and customizing the component ([Solves #6](https://github.com/FlowingCode/TwinColGridAddon/issues/6))
TwinColGrid add-on version 1.0.4
Support for extending the component's class (fixes [#7](https://github.com/FlowingCode/TwinColGridAddon/issues/7))
TwinColGrid add-on version 2.0.2
Support for extending the component's class (fixes [#7](https://github.com/FlowingCode/TwinColGridAddon/issues/7))
TwinColGrid add-on version 1.0.5
Added support for adding sorteable columns (fixes [#8](https://github.com/FlowingCode/TwinColGridAddon/issues/8))
TwinColGrid add-on version 2.0.3
Added support for adding sorteable columns (fixes [#8](https://github.com/FlowingCode/TwinColGridAddon/issues/8))
TwinColGrid add-on version 2.1.0
### New features
* Allow setting a fixed height [#15](https://github.com/FlowingCode/TwinColGridAddon/issues/15)
* Provide an option for selecting items on row clicking [#13](https://github.com/FlowingCode/TwinColGridAddon/issues/13)
* Add filtering feature [#19](https://github.com/FlowingCode/TwinColGridAddon/issues/19)
### Fixes
* Clear throws NPE [#17](https://github.com/FlowingCode/TwinColGridAddon/issues/17)
* Dragged out items disappear [#21](https://github.com/FlowingCode/TwinColGridAddon/issues/21)
TwinColGrid add-on version 2.1.1
Fix: prevent items from disappearing when trying to drop within same grid
TwinColGrid add-on version 2.2.0
### Features
* Add public getters for left/right grids ([#68](https://github.com/FlowingCode/TwinColGridAddon/issues/68), [#31](https://github.com/FlowingCode/TwinColGridAddon/issues/31))
* Expose the component as a HasValue of List ([#66](https://github.com/FlowingCode/TwinColGridAddon/issues/66))
* Preserve UI sort orders in getValue (#66)
* Implement addSortableColumn overload that sets the column key ([#70](https://github.com/FlowingCode/TwinColGridAddon/issues/70))
* Deprecate the protected final leftGrid/rightGrid fields.
* Deprecate all the methods that just delegate into an equivalent call on the left/right grid.
### Fixes
* Return empty set in getEmptyValue ([#72](https://github.com/FlowingCode/TwinColGridAddon/issues/72))
TwinColGrid add-on version 2.3.0
### New features
* Implement clear all feature ([#75](https://github.com/FlowingCode/TwinColGridAddon/issues/75))
### Bugfixes
* Preserve applied filters in Move All buttons ([#76](https://github.com/FlowingCode/TwinColGridAddon/issues/76))
TwinColGrid add-on version 2.4.0
### New Features
* Add support to set component orientation (#82)
* Move action buttons styles to CSS
TwinColGrid add-on version 2.5.0
### New Features
* Add CSS classes for grid parts
* Implement setRequiredIndicatorVisible ([#86](https://github.com/FlowingCode/TwinColGridAddon/issues/86))
* Add support for reversed orientation ([#87](https://github.com/FlowingCode/TwinColGridAddon/issues/87))
* Replace the concepts/namings of "right" and "left" grid ([#88](https://github.com/FlowingCode/TwinColGridAddon/issues/88))
### Bugfixes
* Fix implementation of isReadOnly
TwinColGrid add-on version 2.6.0
### New Features
* Allow drag-and-drop within the selection grid
* Handle in-between drops when reordering is enabled
TwinColGrid add-on version 2.7.0
### New Features
* Add public method forEachGrid ([#94](https://github.com/FlowingCode/TwinColGridAddon/issues/94))
* Add overloads for addFilterableColumn with column key ([#95](https://github.com/FlowingCode/TwinColGridAddon/issues/95))
* Allow usage of custom Grid ([#96](https://github.com/FlowingCode/TwinColGridAddon/issues/96))
* Deprecate the constructor that receives a ListDataProvider ([#98](https://github.com/FlowingCode/TwinColGridAddon/issues/98))
[More information in GitHub](https://github.com/FlowingCode/TwinColGridAddon/releases/tag/twincolgrid-2.7.0)
TwinColGrid add-on version 2.7.1
### Bug fixes:
* fix: make setValue clear the previous value ([#100](https://github.com/FlowingCode/TwinColGridAddon/issues/100))
TwinColGrid add-on version 2.8.0
#### New features:
- Allow component to update orientation on resize.
#### Bug fixes:
- Fix return value of isFromClient in valueChangeListener when the event is coming from the server ([#106](https://github.com/FlowingCode/TwinColGridAddon/issues/106)).
TwinColGrid add-on version 2.9.0
#### New features:
* feat: add setter/getter for caption ([#97](https://github.com/FlowingCode/TwinColGridAddon/issues/97))
* feat: deprecate constructors that receive caption
* feat: move items by doubleclick ([#73](https://github.com/FlowingCode/TwinColGridAddon/issues/73))
TwinColGrid add-on version 2.9.1
#### Bug fixes:
* fix: refresh available and selection grid items on orientation change ([#117](https://github.com/FlowingCode/TwinColGridAddon/issues/117))
TwinColGrid add-on version 2.9.2
#### Bug fixes:
* fix implementation of isReadOnly ([#119](https://github.com/FlowingCode/TwinColGridAddon/issues/119))
TwinColGrid add-on version 2.9.3
#### Bug fixes:
* Define a min-height to avoid confusion ([#125](https://github.com/FlowingCode/TwinColGridAddon/issues/125))
TwinColGrid add-on version 2.9.4
#### New features:
* Associate Label with components ([#159](https://github.com/FlowingCode/TwinColGridAddon/issues/159))
#### Bug fixes:
* Fix button position when orientation changes ([#154](https://github.com/FlowingCode/TwinColGridAddon/issues/154))
TwinColGrid add-on version 2.9.5
TwinColGrid add-on version 3.0.0
Version 3.0.0 retains the functionality of 2.9.5 but eliminates deprecated methods.
A LegacyTwinColGrid class is provided to facilitate the transition from deprecated methods.
#### Bug fixes:
* Define a min-height to avoid confusion when the parent height is relative ([#125](https://github.com/FlowingCode/TwinColGridAddon/issues/125))
* Fix button position when orientation changes ([#154](https://github.com/FlowingCode/TwinColGridAddon/issues/154))
* Associate Label with components ([#159](https://github.com/FlowingCode/TwinColGridAddon/issues/159))
* Hide grid selection column using JavaScript ([#156](https://github.com/FlowingCode/TwinColGridAddon/issues/156))
* Fix double-click in read-only mode ([#177](https://github.com/FlowingCode/TwinColGridAddon/issues/177))
* Align buttons in horizontal orientati ([#174](https://github.com/FlowingCode/TwinColGridAddon/issues/174))
#### New features:
* Add CSS class for Read-Only mode ([#178](https://github.com/FlowingCode/TwinColGridAddon/issues/178))