Difference between pageBlockTabe, dataTable & Repeat

Visualforce Aug 22, 2014

Confused? which one to use <apex:pageBlockTable> or <apex:dataTable> or <apex:repeat> all three display data from Collections but differs here

pageBlockTable

  1. Inherits Default Salesforce styles
  2. must be under <apex:pageBlock> or <apex:pageBlockSection>
  3. For displaying data we use one or more <apex:column>
  4. up to 1,000 items.

Example:

<apex:page standardController="Account">
    <apex:pageBlock title="My Content">
        <apex:pageBlockTable value="{!account.Contacts}" var="item">
            <apex:column value="{!item.name}"/> 
            <apex:column value="{!item.OwnerId}" />
            <!-- Header Generated automatically -->
        </apex:pageBlockTable> 
    </apex:pageBlock> 
</apex:page>

dataTable

  1. Doesn't Inherit Salesforce styles
  2. No <apex:pageBlock> or <apex:pageBlockSection> needed
  3. For displaying data we use one or more <apex:column>, CSS styles can be applied
  4. Headers need to mentioned Seperately unless like <apex:pageBlockTable>
  5. up to 1,000 items.

Example:

Visualforce Page

<apex:page controller="dataTableCon" id="thePage">
	<apex:dataTable value="{!accounts}" var="account" id="theTable" rowClasses="odd,even" styleClass="tableClass">
		<apex:facet name="caption">table caption</apex:facet>
		<apex:facet name="header">table header</apex:facet>
		<apex:facet name="footer">table footer</apex:facet>
		<apex:column>
        	<apex:facet name="header">Name</apex:facet>
			<apex:facet name="footer">column footer</apex:facet>
			<apex:outputText value="{!account.name}"/>
		</apex:column>
		<apex:column>
			<apex:facet name="header">Owner</apex:facet>
			<apex:facet name="footer">column footer</apex:facet>
			<apex:outputText value="{!account.owner.name}"/>
		</apex:column>
	</apex:dataTable>
</apex:page>

Controller

public class dataTableCon {
	List<Account> accounts;	
    public List<Account> getAccounts() {
		if(accounts == null) 
        	accounts = [SELECT name, owner.name 
            			FROM Account 
                        LIMIT 10];
		return accounts;
	}
}

repeat

  1. No Salesforce styles inherited, no need to use <apex:column>
  2. simply data displayed in irregular format.
  3. you can have full control over rendering data.
  4. up to 1,000 items.

Example

Visualforce Page

<apex:page controller="repeatCon" id="thePage">
    <apex:repeat value="{!strings}" var="string" id="theRepeat">
        <apex:outputText value="{!string}" id="theValue"/><br/>
    </apex:repeat>
</apex:page>

Controller:

public class repeatCon {
    public String[] getStrings() {
        return new String[]{'ONE','TWO','THREE'};
    }
}

For more information check Standard Component Reference on Visualforce Developers's guide

Phanindra Mangipudi

Salesforce, Lightning Web Componets, Node.Js, Angular 2+, Bootstrap