primefaces datatable row coloring

Question

I want to show datatable rows with different colors.

I am using rowStyleClass attribute. But It is not changing the colors

My code in datatable is,

rowStyleClass="highlight";

and my css file is looks like this,

.highlight {
    background: yellow  !important ;
}

Answer 1

You should have like two classes with different colors and use, in the rowStyleClass attribute, inline if:

rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}" 

Where "rowIndex" you should set in the datatable rowIndexVar attribute

rowIndexVar="rowIndex"

That means that even rows will have row style class set as 'highlight1' and odd rows - 'highlight2'

See here more info

Answer 2

The easiest way is to implement .ui-datatable-odd and .ui-datatable-even style classes in your CSS, which are implemented by p:dataTable by default. Example:

.ui-datatable-odd {
    background: #ffffff;
}

.ui-datatable-even {
    background: #F2F5F9;
}

Ends up looking something like

It could be you need to use more specific selectors, read about css specificity for that

Answer 3

Try this...It is working in my case

.ui-widget-content .ui-datatable-even{
    background: #F2F5F9;
}

.ui-widget-content .ui-datatable-odd{
    background: red;
}

Answer 4

Tudor's answer is the correct way. In case you use treeTable you can do it this way:

.ui-treetable tbody tr:nth-child(odd) {
    background-color: #edf2f6 !important;
}

.ui-treetable tbody tr:nth-child(even) {
    background-color: #ffffff !important;
}