Table - Cell in selected row in different color?

Hi Everyone,

as some of you might already have noticed (due to the amount of questions I am asking) I am new to Vaadin.

This time I have a question concerning Table. So here we go…

When a row in a table is selected the whole row gets highlighted. Is there a way to color the cell (where the actual click happened that highlighted the cell) in a different color?

Thanks.

Hi there!

You can make one cell look different with css, and Table.setCellStyleGenerator(). The problem is, however, catching which cell the user clicked on. The table only notifies you of which row was selected. You could hack around it and catch the clicks with some clickable layouts in every cell, but that would get really really bad performance quite fast, and would not be so nice to develop.

In recent versions, the ItemClickEvent from Table should also include the property identifier (if available), so you could find which cell was clicked. I think this does not apply to keyboard navigation, though.

Right you are, Henir. I tried it and it works. Thank you very much


table.addListener(new ItemClickListener() {

    @Override
    public void itemClick(ItemClickEvent event) {
          System.out.println("PropertyId: " + event.getPropertyId());
    }
});

All I have to do now is to find out the css thing Jens suggested. As soon as I have I will post the solution.

As I promised to post the solution…

But first let me say thank’s to Jens who pointed me into the right direction and to Henri for his hint.

Unfortunately its not quite what I was looking for in the first place. The code below changes the background color of a cell, in a selected row, when hovering over it. It does not stay this way when the mouse leaves the cell. I was not able to find that out.

So what i did is that apart from the selected row I am highlighting all other rows. The cell with the mouse hovering over gets a different color.

I attached two screenshots to make things clearer. Also the code below is a working example.

If anyone knows how to make the selected cell in the selected row stay in its different color please inform me.

Vaadin application:


package com.example.vaadin;

import com.vaadin.Application;
import com.vaadin.ui.*;
import com.vaadin.data.util.BeanItemContainer;
import com.vaadin.ui.Table.CellStyleGenerator;

public class CellColorApp extends Application {

        private BeanItemContainer<Person> container;
        private Table table;
        private String[] visibleCol = new String[]
{"firstName", "middleName", "lastName", "nickName", "age"};

        @Override
        public void init() {
                fillContainer();
                createUi();
        }

        private void createUi() {
                Window mainWindow = new Window("CellColorApp");

                setTheme("cellcolor");

                table = new Table("Cell Color");
                table.setSelectable(true);
                table.setImmediate(true);
                table.setNullSelectionAllowed(false);

                table.setContainerDataSource(container);
                table.setVisibleColumns(visibleCol);
                table.setCellStyleGenerator(new ColorCellStyleGenerator());
                
                mainWindow.addComponent(table);
                setMainWindow(mainWindow);
        }

        private void fillContainer() {
                container = new BeanItemContainer<Person>(Person.class);

                Person vanessa = new Person("Vanessa", "Clair", "Hurtable", "Nessa", 20);
                container.addBean(vanessa);
                Person nick = new Person("Nick", "Phil", "Bean", "NP", 48);
                container.addBean(nick);
                Person michael = new Person("Michael", "David", "Hoff", "Davi", 42);
                container.addBean(michael);
                Person jane = new Person("Jane", "Kyren", "Ahearn", "Jak", 33);
                container.addBean(jane);
                Person edgar = new Person("Edgar", "Hellen", "Masio", "Edhel", 12);
                container.addBean(edgar);


        }

        public class ColorCellStyleGenerator implements CellStyleGenerator {
                @Override
                public String getStyle(Object itemId, Object propertyId) {
                        return "cellcolored";
                }
        }

        public class Person {
                private String firstName;
                private String middleName;
                private String lastName;
                private String nickName;
                private int age;

                public Person(String firstName, String middleName, String lastName, String nickName, int age) {
                        this.firstName = firstName;
                        this.middleName = middleName;
                        this.lastName = lastName;
                        this.nickName = nickName;
                        this.age = age;
                }

                public int getAge() {
                        return age;
                }

                public void setAge(int age) {
                        this.age = age;
                }

                public String getFirstName() {
                        return firstName;
                }

                public void setFirstName(String firstName) {
                        this.firstName = firstName;
                }

                public String getLastName() {
                        return lastName;
                }

                public void setLastName(String lastName) {
                        this.lastName = lastName;
                }

                public String getMiddleName() {
                        return middleName;
                }

                public void setMiddleName(String middleName) {
                        this.middleName = middleName;
                }

                public String getNickName() {
                        return nickName;
                }

                public void setNickName(String nickName) {
                        this.nickName = nickName;
                }

        }

}

.css


@import "../reindeer/styles.css"; 

/* Style specifically for the colored cells. */
.v-table tr.v-table-row:hover,
.v-table tr.v-table-row-odd:hover {
	background-color: #5C8EBD;
}

.v-table tr.v-selected {
	background: #466c90;
	color: #fff;
}

.v-table tr.v-selected:hover {
	background: #5C8EBD;
	color: #fff;
}

.v-table-cell-content-cellcolored:hover{
    background: #C3D9EE;
    color: white;
}

11725.png
11726.png