Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

how to change row color of table in vaadin at the AddeEvent

DR Dev
9 years ago Apr 24, 2012 9:13am
Charles Anthony
9 years ago Apr 24, 2012 10:10am

Hi,
To change the style of a cell, you need to use a CellStyleGenerator. There is no way to only style items added by "Table#addItem" - it's all or nothing.

Here's an example (based on the book of vaadin), that highlights the rows that a firstname that starts with "G" in green, or that have "a" in the firstName in red.

Note the CSS has to cope with even and odd rows, in order

Cheers,

Charles.

/* Create the table with a caption. */
    final Table table = new Table("This is my Table");

    /* Define the names and data types of columns.
     * The "default value" parameter is meaningless here. */
    table.addContainerProperty("First Name", String.class, null);
    table.addContainerProperty("Last Name", String.class, null);
    table.addContainerProperty("Year", Integer.class, null);

    /* Add a few items in the table. */
    table.addItem(new Object[]{"Nicolaus", "Copernicus", 1473}, 1);
    table.addItem(new Object[]{"Tycho", "Brahe", 1546}, 2);
    table.addItem(new Object[]{"Giordano", "Bruno", 1548}, 3);
    table.addItem(new Object[]{"Galileo", "Galilei", 1564}, 4);
    table.addItem(new Object[]{"Johannes", "Kepler", 1571}, 5);
    table.addItem(new Object[]{"Isaac", "Newton", 1643}, 6);

    table.setCellStyleGenerator(new Table.CellStyleGenerator() {
      @Override
      public String getStyle(Object itemId, Object propertyId) {
        if (propertyId == null) {
          // Styling for row
          Item item = table.getItem(itemId);
          String firstName = (String) item.getItemProperty("First Name").getValue();
          if (firstName.toLowerCase().startsWith("g")) {
            return "highlight-green";
          } else if (firstName.contains("o")) {
            return "highlight-red";
          } else {
            return null;
          }
        } else {
          // styling for column propertyId
          return null;
        }
      }
    });

CSS

.v-table-row.v-table-row-highlight-green,
.v-table-row-odd.v-table-row-highlight-green {
  background-color: #00ff00;
}

.v-table-row.v-table-row-highlight-red,
.v-table-row-odd.v-table-row-highlight-red {
  background-color: #ff0000;
}
Last updated on Apr, 24th 2012
DR Dev
9 years ago Apr 24, 2012 11:06am
DR Dev
9 years ago Apr 24, 2012 1:20pm
Agata Vackova
8 years ago Sep 05, 2013 8:45am
Agata Vackova
8 years ago Sep 10, 2013 8:29am
Alex Radkevich
8 years ago Sep 10, 2013 8:38am
Agata Vackova
8 years ago Sep 10, 2013 8:42am
Marius Reinwald
8 years ago Sep 10, 2013 9:13am
gary hebel
8 years ago Sep 10, 2013 8:02pm
Kishore kumar
7 years ago May 28, 2014 2:48pm
Agata Vackova
7 years ago May 30, 2014 11:29am
Wissem Ayari
6 years ago Apr 27, 2015 9:41am
Jon Inazio Sánchez Martínez
6 years ago Apr 27, 2015 11:04am
Ajay Shankar R
6 years ago Oct 07, 2015 11:56am