Styling the table rows and columns based on criteria

Support
#1

Styling the table rows and columns based on criteria.
Is it possible to style the row and column based on different criterias.
Does someone have an example of doing it?

1 Like
Login Window resizing
#2

Hi,
Table can be styled using setStyleProvider() method which accepts StyleProvider implementation:


@Inject
protected Table customersTable;

@Override
public void init(Map<String, Object> params) {
    customersTable.setStyleProvider(new Table.StyleProvider() {
        @Override
        public String getStyleName(Entity entity, @Nullable String property) {
            Customer customer = (Customer) entity;
            if (property == null) {
                // style for row
                if (hasComplaints(customer)) {
                    return"unsatisfied-customer";
                }
            } else if (property.equals("grade")) {
                // style for column "grade"
                switch (customer.getGrade()) {
                    case PREMIUM: return "premium-grade";
                    case HIGH: return "high-grade";
                    case MEDIUM: return "medium-grade";
                    default: return null;
                }
            }
            return null;
        }
    });
}

Then you can add CSS to your theme extension:


.v-table-row.unsatisfied-customer {
  font-weight: bold;
}
.v-table-cell-content.premium-grade {
  background-color: red;
}
.v-table-cell-content.high-grade {
  background-color: green;
}
.v-table-cell-content.medium-grade {
  background-color: blue;
}

You can read more about Table here: [url=https://doc.cuba-platform.com/manual-6.2/gui_Table.html]https://doc.cuba-platform.com/manual-6.2/gui_Table.html[/url].

#3

Yes. That is correct. I found the document earlier.
Can I use the css browser in chrome and Firefox to find and extend the tag as I want.

#4

Yes, you can use the development console of your browser to find DOM elements for styling. Just select element using DOM inspector and find CSS class name from your StyleProvider and you will be able to write CSS rule using additional Vaadin class names, for example: .v-table-cell-content.

#5

Hello!
I used an example from this topic, but only 1,3,5 etc rows got new color.

has new class, but row is still white. Do you have any ideas about this problem?
#6

Have you put the css class in the right document?
Have you deployed the changes?
Do you call the right class in code.

#7

yes.
yes.
yes.

it looks like this table problems

all rows have class bg-yellow. but only half of them has style background:yellow

My code is rather common:

 trainingsTable.setStyleProvider(new Table.StyleProvider<Training>() {
        @Override
        public String getStyleName(Training entity, @Nullable String property) {
            Training training = (Training) entity;
            if (property == null) {
                // style for row
                if ((training.getStatus()==TrainingStatus.Planned)) {
                    return"bg-yellow";
                }
            } else if (property.equals("status")) {
                // style for column "grade"
                switch (training.getStatus()) {
                    case Planned: return "premium-grade";

                    default: return null;
                }
            }
            return null;
                                    }});
#9

Strange. Do you want all rows to be color yellow no matters the status or different colors based on status? Does status exists in property?

#10

Due to my code, I want to change color of all rows where status = Planned. It code works fine, I’ve seen it in debug.

Also as you can see on screenshot, white row has class “bg-yellow”. But css use “background-color:white” for every %2 row.

It might be cause by different css for odd rows. I am pretty sure. But I am surprised that only I faced this problem

#11

Have you tried to extend the bg-color in this table.

#12

Could you share your CSS code? It seems that your styles have lower specificity than CSS for odd/even rows (by default Table odd rows have background #f5f5f5):

.halo .v-table-row-odd {
    background-color: #f5f5f5;
}

Also, I’d recommend that you check CSS specificity docs: Специфичность - CSS | MDN

#13

How to style table rows and columns if it is a GROUP TABLE ??

@artamonov