Building a Table of Data in a Page

Some Visualforce components, such as <apex:pageBlockTable> or <apex:dataTable>, allow you to display information from multiple records at a time by iterating over a collection of records. To illustrate this concept, the following page uses the <apex:pageBlockTable> component to list the contacts associated with an account that is currently in context:

<apex:page standardController="Account">
   <apex:pageBlock title="Hello {!$User.FirstName}!">
      You are viewing the {!account.name} account.
   </apex:pageBlock>
   <apex:pageBlock title="Contacts">
      <apex:pageBlockTable value="{!account.Contacts}" var="contact">
         <apex:column value="{!contact.Name}"/>
         <apex:column value="{!contact.MailingCity}"/>
         <apex:column value="{!contact.Phone}"/>
      </apex:pageBlockTable>
   </apex:pageBlock>
</apex:page>

Remember, for this page to display account data, the ID of a valid account record must be specified as a query parameter in the URL for the page. For example:

https://MyDomain_login_URL/apex/myPage?id=001x000xxx3Jsxb

Note

The <apex:pageBlockTable> Component The apex:pageBlockTable component displayed in the Visualforce code window. The page view displays 3 contact columns.
Like other iteration components, <apex:pageBlockTable> includes two required attributes, value and var:
  • value takes a list of sObject records or values of any other Apex type. In the example above, {!account.Contacts} retrieves the ID of the account that is currently in context and then traverses the relationship to retrieve the list of the associated contacts.
  • var specifies the name of the iteration variable. This variable is used within the body of the <apex:pageBlockTable> tag to access the fields on each contact. In this example, value="{!contact.Name}" is used on the <apex:column> tag to display the name of the contact.

The <apex:pageBlockTable> component takes one or more child <apex:column> components. The number of rows in the table is controlled by the number of records returned with the value attribute.

The <apex:pageBlockTable> component automatically takes on the styling of a standard Salesforce list. To display a list with your own styling, use <apex:dataTable> instead.

Note