DataTable control: Zebra striping

[foolshat]

The DataTable is a great control. My client would like the rows "zebra striped" i.e alternating colours. I could not find anything to do this, other than using conditional colouring with the rowStyleClass attribute and an expression.
This seems overkill for this particular usecase, is there a simpler and more CPU efficient way ?

[callahan]

It's the only way that I'm aware of. It wouldn't worry about cpu cycles, after all, a data table rarely displays more that 10 or 20 rows at the same time .

[cagatay.civici]

You can create a feature request for this, we haven't added alternating rows as ThemeRoller has none. Still rowStyleClass can be used though.

[bumble.bee]

floolshat - did you actually get this to work? It would seem zebra striping is not available at all due to the bug mentioned here:

http://primefaces.prime.com.tr/forum/vi ... f=3&t=5753

[foolshat]

No. It is nearly working. I found another posting which suggests using the following attribute on the datatable.

Code: Select all

  rowStyleClass="row-#{rowIndex % 2}"

but, the problem is the first two <tr> have a class of row-0, rather than row-0 then row-1. So I have left it for the moment.

[callahan]

If the DataTables rows attribute is set to an even number, the following should work:

Code: Select all

      <p:dataTable
          ...
          rows="6"
          rowIndexVar="rowIx"
          rowStyleClass="#{empty rowIx or rowIx mod 2 ne 0 ? 'even-row' : 'odd-row'}"
        >

[foolshat]

Thanks. Yes, at the time my table had 5 rows. They are not even and I get the alternate odd/even required.

[callahan]

This issue with the unusual behavior of rowIndexVar in the rowStyleClass has been fixed http://code.google.com/p/primefaces/iss ... il?id=1408. This means that

Code: Select all

<p:dataTable
          ...
          rows="6"
          rowIndexVar="rowIx"
          rowStyleClass="#{rowIx mod 2 ne 0 ? 'even-row' : 'odd-row'}"
        >

should work correctly now.

[ethermion]

Can somebody post the rest of the story on this? I am clueless on styles, so if somebody could throw out the correct style syntax for coloring rows, I would be grateful.
-e

[foolshat]

My datatable looks like this. The rowStyleClass discussed above, works fine. You then have to modify your css to provide the styles

Code: Select all

    <p:dataTable id="resultstable"
                 var="row"
                 value="#{p_entity.dataRows}"
                 paginator="true"
                 rows="20"
                 dynamic="true"
                 lazy="true"
                 
                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 rowsPerPageTemplate="10,20,30,40,50"
                 rowStyleClass="#{empty rowIx or rowIx mod 2 ne 0 ? 'even-row' : 'odd-row'}"
                 rowIndexVar="rowIx"
                 rowEditListener="#{p_entity.rowEditListener}"
                 onRowEditUpdate ="growlmessages"
                 loadingMessage="#{resources.datatable_loading}"
                 emptyMessage="#{resources.datatable_no_data_found}"
                 selection="#{p_entity.selectedItems}"                 
                 >

style.css contains this

.ui-datatable .ui-datatable-data .even-row td{
background-color:#DDE3FD;
}

.ui-datatable .ui-datatable-data .odd-row td{
background-color:#C9D1F7;
}