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

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

Only standard style sheets can be used in apex:pageBlockTable tag in aVisualforce 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="SampleVisualforcePageController" 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="{!listAccounts}" var="acc">
            <apex:column value="{!acc.Name}"/>
            <apex:column value="{!acc.AccountNumber}"/>           
        </apex:pageblockTable>
    </apex:pageBlock>
    <apex:pageBlock title="Data Table">
        <apex:dataTable value="{!listAccounts}" var="acc" styleClass="outBorder" width="550px">
            <apex:column styleClass="inBorder">
                <apex:facet name="header">Account Name</apex:facet>
                <apex:outputText >{!acc.Name}</apex:outputText>
            </apex:column>      
            <apex:column styleClass="inBorder">
                <apex:facet name="header">Account Number</apex:facet>
                <apex:outputText >{!acc.AccountNumber}</apex:outputText>
            </apex:column>             
        </apex:dataTable>
    </apex:pageBlock>   
</apex:page>

Apex Controller:

public class SampleVisualforcePageController {
    
    public List < Account > listAccounts { get;set; }
    
    public SampleVisualforcePageController() {
        
        listAccounts = [
            SELECT Name, AccountNumber 
            FROM Account
            LIMIT 10
        ];
        
    } 
    
}

Output:

Leave a Reply