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.

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
I have a table and im using the addItem Method to add items , what i want to do is at the moment of adding a new item i have to make some tests and set the color of the added row.
For example the resutlt of test is 1 then row color should be Red , and if the result is 2 row color should be green.
So any help how to do this ?
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;
}
Hey Thanks for reply , this is really what i want i tried the same example but nothing happen to the rows color maybe i didnt put the css in the right file !! :
First thing the getStyle Method it's not @Override !! im using vaadin 6.7.4
Second thing im using the reindeer themes and the css file (VAADIN/themes/reindeer/style.css) looks :
@CHARSET "ISO-8859-1";
@import "../reindeer/styles.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;
}
THANKS IT WORKS , the problem was just the css file i named style.css and it should be styles.css
Does it exist an way to change the row color dynamically? I'd like to mark edited rows, but can't manage how to do that.
When using CellStyleGenerator, the row color is changed when rolling down/up through the table. When adding a style name in text change listener the color is forgotten, when rolling down and up through the table. I would need to change the color immediately and have it all the time.
Thanks works :-). As well as markAsDirtyRecursive(). What is better from the point of performance/memory consumption?
I would guess that refreshrowcache is better as it should only refresh the rows which changed and not rerender the entire table like markAsDirtyRecursive does. You should generally avoid using markAsDirty as it shouldn't normally be necessary in a normal Vaadin App as there should (nearly) always be a better workaround for a problem where markAsDirty works.
Hi All,
I followed steps which you have posted above. I am unable to change the color of row in filtertable of vaadin.
Can any one please help me in this?
Thanks,
Kishore
Charles Anthony: 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; }
where shall i paste the css code ? in which file ?
Wissem Ayari:
Charles Anthony: 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; }
where shall i paste the css code ? in which file ?
You must add your style code in a SCSS file. Then, compile your Theme.
Hi all,
I have implemented highlighting in the filterTable, and we can save the state of the table such as re ordering table columns or hiding columns.
But after saving state highlighting is not working
Please help...