Vaadin 24.4 integrates with React, unifies Flow and Hilla development, and more!

Mission RIP Table: Migrate to Grid! - Selection

A.Mahdy AbdelAziz
On Aug 29, 2017 10:37:00 AM

This is a series of tutorials for upgrading the Table component to Grid. It will be performed by migrating to Framework 7 style of Grid, then migrating to Framework 8. As a reference, Gridv7 is the Grid component from Framework 7, while Grid is the latest Grid component in Framework 8. Naturally, you can also migrate straight from Table to the Framework 8 style Grid.


In the previous post, we saw the migration of a basic Table to Grid for Framework 7, then to Framework 8. Moving forward, I will skip all similar code related to containers and populating data, and will only focus on the highlighted APIs for the examples we have.


In this part, I will cover two examples about the selection modes, and make some comparisons on how Grid deals with data, as well as some corner cases that got modified.

Single Selection

Migrate from Table to Framework 7 Grid

Grid by default has single selection, so we don’t need to explicitly write this:


But at any point, if you want to move or revert back to default selection mode, you can use:


Grid is immediate by default, so we don’t need this line anymore:


To keep track of a selected item, instead of:

table.addValueChangeListener( … )

We use:

table.addSelectionListener( … )

And the selection event does not contain information about the selected item, instead of:


We get it from the table directly:


Related commit: Single Select: To Grid v7


The event.getProperty().getValue() was always returning a raw Object, instead of a class of the type of the container’s data, and it was required to cast it. But losing information about the selected item all together was not an optimal solution either in the early phase of Grid, and this got fixed as we will see in Framework 8.

Migrate to Framework 8 Grid

No big difference from the previous code, except that the new Grid deals with data a bit differently, so we need to differentiate between SingleSelect and MultiSelect, this code:

if (table.getSelectedRow() != null)

Should be replaced with:

if (table.asSingleSelect().getValue() != null)

And to get the selected bean, you can replace this code:




And here comes an important note: table.getSelectedRow() returns the ID of the selected row, which was a number because it is using an IndexedContainer. Most often developers were actually using BeanItemContainer, where the ID was the actual bean presented on the selected row. Now, in Framework 8, it is always the bean.


One more thing we notice, if we compare the final result here, is the order of the columns, as well as the case of the first letter in the column name.

You can adjust the order using setColumnOrder:

table.setColumnOrder("name", "city", "year");

And you can modify the captions manually using setCaption:


In this demo I will skip all those corner cases, they are explained here just for elaboration.


Related commit: Single Select: To Grid v8

Multi Selection

Migrate from Table to Framework 7 Grid

Similar to what we have done in Single Selection, here is the only code difference to get multi selection enabled, instead of:




The result is different though, multi selection in Grid is done through checkboxes instead of holding ctrl/cmd while selecting other items. There is a feature request for it, however it is not highly demanded by many developers. If you want this feature to be implemented, I encourage you to show interest by giving it a +1 on Github, otherwise it might never be implemented due to low need by the community, and probably due to bad UX.


Related commit: Multi Select: To Grid v7

Migrate to Framework 8 Grid

In Framework 8, Grid multi selection would be defined as the following:


And retrieving the set of selected beans is done by using:


Related commit: Multi Select: To Grid v8


Do you think migration from Table to Grid is complicated or doable?

A.Mahdy AbdelAziz
AMahdy is an international technical speaker, Google developer expert (GDE), trainer and developer advocate. Passionate about Web and Mobile apps development, including PWA, offline-first design, in-browser database, and cross platform tools. Also interested in Android internals such as building custom ROMs and customize AOSP for embedded devices.
Other posts by A.Mahdy AbdelAziz