Data Table with Custom Styles in Visualforce page.

Data Table with Custom Styles in Visualforce page.

Hi,
In this post i am giving an example of <apex:dataTable> applying custom styles.

Controller Class:

public class TableController{
 public List<Account> accList{get;set;}

 public TableController(){
  accList= new List<Account>();
  accList= [select id,name,type,industry from Account];
 }
}

Static Resources : 
i upload an image from http://free-121d5f44d20-121d603d1c5-121ee2b8103.force.com/force2b/salesforceicons   to static resources in salesforce.




Visualforce Page :

<apex:page controller="TableController" sidebar="false" wizard="true">
  <style type="text/css">
   .outBorder {
    border:3px outset black;
   }
   .inBorder{
    border-top:2px dotted blue;
    border-left:2px dotted blue;
   }
  </style>
  <apex:form >
   <apex:pageBlock title="Data Table">
    <apex:dataTable value="{!accList}" var="a" styleclass="outBorder" width="550px">
    
       <apex:column styleclass="inBorder">
        <apex:facet name="header">Image </apex:facet> 
        <apex:image value="{!$Resource.customerImage}"/>        
      </apex:column>
      
      
      <apex:column styleclass="inBorder">
        <apex:facet name="header">Account Name </apex:facet> 
        <apex:outputText >{!a.Name}</apex:outputText>
      </apex:column>
      
      <apex:column styleclass="inBorder">
        <apex:facet name="header">Account type </apex:facet>
        <apex:outputText >{!a.type}</apex:outputText>
      </apex:column>      
      
      <apex:column styleclass="inBorder">
        <apex:facet name="header">Account Industry </apex:facet>
        <apex:outputText >{!a.industry}</apex:outputText>
      </apex:column>      
    
    </apex:dataTable>   
   </apex:pageBlock>  
  </apex:form> 
 </apex:page>


Test Class: 
@isTest
Public class DataTableWithStyles_Test {
 static testmethod void testPageblockTable(){
  //Test converage for the myPage visualforce page
  PageReference pageref = Page.DataTableWithStyles;
  Test.setCurrentPageReference(pageref);
  
  // create an instance of the controller
  TableController tc= new TableController();
  }
}

Output: 



That's it.

Keep enjoying.

Posted in: Apex Examples,apex:dataTable with custom styles in Visualforce pages,Salesforce,salesforce training,Visualforce,Visualforce examples,Visualforce Pages