Directory

← Back

TwinColGrid add-on

TwinColSelect component based on Vaadin Grids

Author

Rating

Popularity

200+

TwinColGrid is built upon the same idea of TwinColSelect component, but using 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.

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);

Compatibility

(Loading compatibility data...)

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

Released
2023-11-06
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14
Vaadin 22
Vaadin 23
Vaadin 24
Vaadin 8.0+ in 1.0.0
Vaadin 8.3+ in 1.0.2
Vaadin 8.9 in 1.0.4
Vaadin 8.8 in 1.0.4
Vaadin 8.7 in 1.0.4
Vaadin 8.6 in 1.0.4
Vaadin 8.5 in 1.0.4
Vaadin 8.4 in 1.0.4
Vaadin 8.3 in 1.0.4
Vaadin 14+ in 2.0.0
Browser
Firefox
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

TwinColGrid add-on - Vaadin Add-on Directory

TwinColSelect component based on Vaadin Grids TwinColGrid add-on - Vaadin Add-on Directory
TwinColGrid is built upon the same idea of TwinColSelect component, but using 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.
Online