Saturday, July 26, 2014

Data Table with Custom Styles in Visualforce page.

Data Table with Custom Styles in Visualforce page.

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   to static resources in salesforce.

save image

Visualforce Page :

<apex:page controller="TableController" sidebar="false" wizard="true">
  <style type="text/css">
   .outBorder {
    border:3px outset black;
    border-top:2px dotted blue;
    border-left:2px dotted blue;
  <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 styleclass="inBorder">
        <apex:facet name="header">Account Name </apex:facet> 
        <apex:outputText >{!a.Name}</apex:outputText>
      <apex:column styleclass="inBorder">
        <apex:facet name="header">Account type </apex:facet>
        <apex:outputText >{!a.type}</apex:outputText>
      <apex:column styleclass="inBorder">
        <apex:facet name="header">Account Industry </apex:facet>
        <apex:outputText >{!a.industry}</apex:outputText>

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

save image

That's it.

Keep enjoying.


Post a Comment

| ,