How to add a click Listener to a table's cell in vaadin?

Question

I created a multiselectable table in vaadin, but I can't select only a cell in this table when I click it selects all row.

Is there any way of selecting only a cell of a row ?

Answer 1

The title of the question doesn't reflect the actual question inside

Is there any way of selecting only a cell of a row ?

No. The whole point of a Vaadin table is to reflect rows of data in a tabular form. Setting a table to selectable keeps track of the itemIds of the selected rows with the table

You might be able to simulate selecting cells by using a ColumnGenerator in the table, and adding a listener to the generated component. Removing the listener may be tricky, however.

Alternatively, you may wish to simply generate components in a GridLayout and keep track of the selected cells yourself.

Ultimately, the approach here really depends upon exacly what you are trying to achieve.

Answer 2

It depends on what you're trying to accomplish. (Your question title and your question details are addressing two different questions.) If you're wondering whether or not you can target a specific cell and add a click listener to it, then yes, of course you can:

//initial layout setup
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);

//Create a table and add a style to allow setting the row height in theme.
final Table table = new Table();
table.addStyleName("components-inside");

//Define the names and data types of columns.
//The "default value" parameter is meaningless here.
table.addContainerProperty("Sum",            Label.class,     null);
table.addContainerProperty("Is Transferred", CheckBox.class,  null);
table.addContainerProperty("Comments",       TextField.class, null);
table.addContainerProperty("Details",        Button.class,    null);

//Add a few items in the table.
for (int i=0; i<100; i++) {
    // Create the fields for the current table row
    Label sumField = new Label(String.format(
                   "Sum is <b>$%04.2f</b><br/><i>(VAT incl.)</i>",
                   new Object[] {new Double(Math.random()*1000)}),
                               Label.CONTENT_XHTML);
    CheckBox transferredField = new CheckBox("is transferred");

    //Multiline text field. This required modifying the 
    //height of the table row.
    TextField commentsField = new TextField();
    //commentsField.setRows(3);

    //The Table item identifier for the row.
    Integer itemId = new Integer(i);

    //Create a button and handle its click. A Button does not
    //know the item it is contained in, so we have to store the
    //item ID as user-defined data.
    Button detailsField = new Button("show details");
    detailsField.setData(itemId);
    detailsField.addListener(new Button.ClickListener() {
        public void buttonClick(ClickEvent event) {
            // Get the item identifier from the user-defined data.
            Integer iid = (Integer)event.getButton().getData();
            Notification.show("Link " +
                              iid.intValue() + " clicked.");
        } 
    });
    detailsField.addStyleName("link");

    //Create the table row.
    table.addItem(new Object[] {sumField, transferredField,
                                commentsField, detailsField},
                  itemId);
}

//Show just three rows because they are so high.
table.setPageLength(3);

layout.addComponent(table);

It might be beneficial to examine the documentation.