Alternating DataTable Rows

Here is a tip to display datatable rows with alternating color. PrimeFaces datatable adds ui-datatable-even and ui-datatable-odd classes during rendering to the rows so it is quite simple to bring in alternating rows.

.ui-datatable-odd {
    background: none repeat scroll 0 0 #F2F5F9;

Also note that you can style specific rows using rowStyleClass attribute.

This style is added to PrimeFaces 3.1 that bundles default Aristo theme, for other themes you can easily add this in your projects and if it looks good share it with us :)

7 thoughts on “Alternating DataTable Rows

  1. Great – keep going working on the datatable – this is the most important component for our business applications.