+ Start a Discussion
Roger PavelleRoger Pavelle 

How can I color code individual rows in a data table?

I have a custom object which I am importing into a data table.  What I want is for each row to have a background color that is based on the Edibility__c database field. 

Any suggestions?

Here is the IF statement that I am trying to use.  I get an error if I put this into the Search Results block or if I try to attach it to the pageBlockTable tag (the latter because it doesn't recognize the variable name.

            <apex:outputPanel styleClass="{!IF(bol.Edibility__c == 1,'red',
                                                       IF(bol.Edibility__c  == 2,'yellow',
                                                       IF(bol.Edibility__c  == 3,'blue',
                                                       'green')))}">

Here is the code for the table.

            <apex:pageBlock title="Search Results"  id="bolete_list">
                <apex:outputText >{!showResultSize} of {!showRecordSize} records displayed</apex:outputText>
                <br/>
                <apex:pageBlockTable value="{! Boletes }" var="bol" style="width: 100%">
                    <apex:column width="75">
                        <apex:outputLink value="/apex/boleteDetailView?id={!bol.Id}" id="viewLink">
                            View
                        </apex:outputLink>
                    </apex:column>
                   
                    <apex:column width="75">
                        <apex:image id="imageURL" url="{!bol.ImageURL__c}" height="75"/>
                    </apex:column>

                    <apex:column value="{! bol.genus__c }">
                        <apex:facet name="header">
                            <apex:commandLink action="{! sortByGenus }" reRender="bolete_list">Genus
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                   
                    <apex:column value="{! bol.species__c }">
                        <apex:facet name="header">
                            <apex:commandLink action="{! sortBySpecies }" reRender="bolete_list">Species
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                   
                    <apex:column value="{! bol.Common__c }"/>
                </apex:pageBlockTable>
            </apex:pageBlock>
        </apex:pageBlock>
Best Answer chosen by Roger Pavelle
Terence_ChiuTerence_Chiu
If you specify the style attribute for each apex:column tag in your page block table, it will essentially apply the background color for the row as each table cell rendered for the columns will have the color applied.

The below example is a table of account records with three columns. In each column tag I specify the same value for the style attribute which apply a background color of green if the account name contains the word "United" otherwise applies yellow.​
 
<apex:page standardController="Account" recordSetVar="Accounts">
    
    <apex:form >
        <apex:pageblock >
            <apex:pageBlockTable value="{!Accounts}" var="acc">
                <apex:column value="{!acc.Name }" style="{!IF(CONTAINS(acc.Name, 'United'), 'background-color: green;', 'background-color: yellow;')}"/>
                <apex:column value="{!acc.Id}" style="{!IF(CONTAINS(acc.Name, 'United'), 'background-color: green;', 'background-color: yellow;')}"/>
                <apex:column value="{!acc.website}" style="{!IF(CONTAINS(acc.Name, 'United'), 'background-color: green;', 'background-color: yellow;')}"/>
            </apex:pageBlockTable>
        </apex:pageblock>
    </apex:form>

</apex:page>

Here is an example of the rendered pageblock table:

User-added image

​Let me know if this helps.

All Answers

Terence_ChiuTerence_Chiu
Have you tried specifying the background color using the style attribute for each apex:column tag instead of using the outputpanel. For example:
 

<apex:column value="{! bol.genus__c }" style="{!IF(bol.Editibility__c == 1, 'background-color:  red', 
                     IF(bol.Editibility__c == 2, 'background-color:  yellow',    
                      IF(bol.Editibility__c == 3, 'background-color:  blue',  'background-color:  green') ) )}">
                        <apex:facet name="header">
                            <apex:commandLink action="{! sortByGenus }" reRender="bolete_list">Genus
                            </apex:commandLink>
                        </apex:facet>
</apex:column>

 
Roger PavelleRoger Pavelle
No, I haven't tried using the apex:column tag because I wanted each row to have a different background color (I also realize based on your answer that I was using the wrong syntax to set the background color, so thank you for sharing that).
.
I tried putting the code into an output panel, but get an error saying "must be the direct child of either or", which I'm not totally clear what it means.

When I put the code in the pageBlockTable, the error I get says "Unknown Property: BoleteController.bol", so I'm assuming I can't use the var in the same tag in which it is defined.
Terence_ChiuTerence_Chiu
If you specify the style attribute for each apex:column tag in your page block table, it will essentially apply the background color for the row as each table cell rendered for the columns will have the color applied.

The below example is a table of account records with three columns. In each column tag I specify the same value for the style attribute which apply a background color of green if the account name contains the word "United" otherwise applies yellow.​
 
<apex:page standardController="Account" recordSetVar="Accounts">
    
    <apex:form >
        <apex:pageblock >
            <apex:pageBlockTable value="{!Accounts}" var="acc">
                <apex:column value="{!acc.Name }" style="{!IF(CONTAINS(acc.Name, 'United'), 'background-color: green;', 'background-color: yellow;')}"/>
                <apex:column value="{!acc.Id}" style="{!IF(CONTAINS(acc.Name, 'United'), 'background-color: green;', 'background-color: yellow;')}"/>
                <apex:column value="{!acc.website}" style="{!IF(CONTAINS(acc.Name, 'United'), 'background-color: green;', 'background-color: yellow;')}"/>
            </apex:pageBlockTable>
        </apex:pageblock>
    </apex:form>

</apex:page>

Here is an example of the rendered pageblock table:

User-added image

​Let me know if this helps.
This was selected as the best answer
Roger PavelleRoger Pavelle
Thank you.  That works perfectly!