Colorful look for rich:datatable

Did you ever want to color row of the table in specific event, for example: when the user moves the mouse over a row it will color with red?

Did you ever think about coloring certain column of table according to the row value?

In this post you can find an explanation how to color rich:datatable as a response to events, and also with logic conditions.

How to color datatable row as a response to user event ?

This operation is really simple and easy, all you have to do is in the client side;

Let’s say we have a rich:datatable

<rich:dataTable id="mytable" >

Now we have to add a4j:support to the table , in the a4j:support we set the event that will cause the coloring, for example: onRowDblClick, onRowMouseDown ect.

And onsubmit operation we send to javascript function that color row that sent as an argument to the function;

<a4j:support event="onRowClick" onsubmit="changeColorRow(this)" >

a4j:support>

Here is the javascript function in ‘script’ section in the jsp page:

<script type="text/javascript">

var oldRow;

var oldRowChild;

function changeColorRow (row) {

if (oldRow != undefined) {

oldRow.style.backgroundColor = '#ffffff';

}

row.style.backgroundColor = '#3399FF';

oldRow = row;

}

script>

That its!

Do you want to color the rows according to the index?

Odd row in one color and the even in another? It simple!

Just add to the datatable rowKeyVar="rowIndex" , this attribute is a variable that represents the index of the row where the event takes place on (for example: if the user clicked on the second row the index will be 2).

<rich:dataTable id="mytable" rowKeyVar="rowIndex" >

Add the #{rowIndex} as an argument when calling the function:

onsubmit="changeColorRow(this,#{rowIndex})"

Here is the javascript function that colors the rows according to the index- you can also write other implementations according to what you need;

var oldRow;

var oldIndex;

function changeColor(row, index) {

if (oldRow != undefined) {

if(oldIndex%2==0)

oldRow.style.backgroundColor = '#b7e2fd';

if(oldIndex%2==1)

oldRow.style.backgroundColor = '#ffffff';

}

row.style.backgroundColor = '#88dfeb';

oldRow = row;

oldIndex=index;

}

How to Color datatable column with logic condition?

Let’s think about such a situation, as we come up in the web application that we are developing:

We have a table that contains a list of job opportunities, each job has a status and according to the status we want to color the status cell of this spot.

We can’t use the columnStyle attribute of the table because we had to add a logic condition that color for each status different color!

So- we solved the problem in a creative way:

To the status column of the table we defined the styleClass as the following:

styleClass="#{spot.statusName}"

and we added to the .css file classes with the statues names:

.Booked {
      background-color: #C3C3C7;
}
.OnHold {
      background-color: #82ABED;
}
.Empty {
      background-color: #91A6C7;
}
 background-color: #2D82E3;
}

You can also set in the class other attributes of the column as forecolor, text-align and more.

You can also add an el expression when setting the styleClass, for example:

 
styleClass="#{job.id > 50 ? ‘big’ : ‘small’}".