What is the difference between apex:dataTable and apex:pageBlockTable

Only standard style sheets can be used in apex:pageBlockTable tag in Visualforce page. <apex:pageBlockTable> must be contained in <apex:pageBlock> or <apex:pageBlockSection>.

If we want to add custom style sheets we have to use apex:dataTable tag in Visualforce page.

Sample Code:

Visualforce page:

<apex:page controller="sample" sidebar="false" >
<style type="text/css">
    .outBorder
    {
        border:3px outset black;
    }
   
    .inBorder
    {
        border-top:3px dotted black;
        border-left:3px dotted black;
    }   
</style>
    <apex:pageBlock title="Pageblock Table">
        <apex:pageblockTable value="{!acc}" var="a">
            <apex:column value="{!a.Name}"/>
            <apex:column value="{!a.Name}"/>           
        </apex:pageblockTable>
    </apex:pageBlock>
   
    <apex:pageBlock title="Data Table">
        <apex:dataTable value="{!acc}" var="a" styleClass="outBorder" width="550px">
            <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 Number</apex:facet>
                <apex:outputText >{!a.AccountNumber}</apex:outputText>
            </apex:column>             
        </apex:dataTable>
    </apex:pageBlock>   
</apex:page>


Apex Controller:

 public with sharing class sample
{

    public List<Account> acc {get;set;}
    public sample()
    {
        acc = [SELECT Name, AccountNumber FROM Account];
    } 
   
}


Output:



Cheers!!!

No comments:

Post a Comment