Multiple components in a table cell

Hi all,
I would like to display a string and a button/icon in one column of table cell. For example “description of an item” and want to display an image that says “new”/“on sale” next to it. This image should be clickable so that more info is displayed when the image is displayed/some other action is performed.

What is the best way to achieve this?

You should use a layout as the cell content, containing e.g. a Label and an Embedded/Label/Button representing the clickable part. A click listener can be attached either to a button or to the layout (see LayoutClickListener).

As you will probably have a large number of such layouts visible, I would recommend using CssLayout for performance reasons.

You can either have the layout in the items themselves or use a generated column. However, pay attention to the number of component creations (for performance) and the direction of references (to avoid memory leaks, especially if you are creating a very large number of components).

An example of using components in a table column can be found e.g.
in the Sampler
(the e-mail column is a generated one containing Link components). Click the “View Source” link to see how this is done.

Hi Henri,

Thanks for your help. I have tried this and it worked perfectly. Only thing is when I used CssLayout for cell content, I lost my context menu for that column. I mean when I place mouse on that column and right click, my context-menu does not appear, instead browser menu is appearing. Context-menu for other columns seems to be OK. Is there any trick to get the context-menu back?


My requirement is quite similar to the above one. I want to display multiple Vaadin components (like CheckBox, Label) in a single cell of the Vaadin Grid which gets populated dynamically with data from the database. I tried the same by adding a CssLayout component. But instead of components being displayed in the cell, the String representation of the CssLayout is displayed. Here is my code

CssLayout approverDetails = new CssLayout(); CheckBox isApproved = new CheckBox(); isApproved.setValue(true); Label approverNameLabel = new Label(); approverNameLabel.setValue(approverJson.getString("approverName")); Label approvedDateLabel = new Label(); approvedDateLabel.setValue(new Date(approverJson.getLong("approvedDate")).toString()); approverDetails.addComponents(isApproved, approverNameLabel, approvedDateLabel); Someone please help.
Thanks in advance.

@Debasish Sena, The Vaadin Grid does not support adding Vaadin components to Grid cells like the old Table class does. You have to use specific renderers or build your own renderer. You could try out this
that adds support for adding Vaadin components to the Grid.

The most typical use case why people want to have many components in one Grid cell is to have selection of action buttons. There is an optimized renderer for that purpose.!addon/gridactionrenderer-add-on

@Tetris Dev: Thanks a lot for the help. It works fine for me.