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.
