Recipes by Category

App Distribution (2) Bundle logic, interface and services for distribution. App Logic (37) The Apex programming language, workflow and formulas for logic. Collaboration (5) The Salesforce Chatter collaboration platform. Database (29) Data persistence, reporting and analytics. Integration (33) Web Service APIs and toolkits for integration. Security (9) Platform, application and data security. Tools (4) Force.com tooling User Interface (36) Visualforce MVC and metadata-drive user interfaces. Web Sites (12) Public web sites and apps with optional user registration and login.
Beta Feedback
Cookbook Home » Building a Table of Data in a Visualforce Page

Building a Table of Data in a Visualforce Page

Post by Developer Force  (2010-07-16)

Status: Certified
Level: novice

Problem

You want to display a set of records in a table in a Visualforce page.

Solution

Define a custom controller that returns the set of records you want to display, and then use the <apex:dataTable> tag to display the results. For example, assume that you want to display the contacts associated with a record in a table.

  1. Create a controller so that it returns a list of associated contacts with an account record:
    public class mySecondController {
    
      public Account getAccount() {
        return [select id, name,
                (select id, firstname, lastname
                 from Contacts limit 5)
                from Account where id =
                 :System.currentPageReference()
                 .getParameters().get('id')];
      }
    }
    Iterate over the resulting contacts with the <apex:dataTable> tag. This tag allows us to define an iteration variable that we can use to access the fields on each contact:
    <apex:page controller="mySecondController" tabStyle="Account">
      <apex:pageBlock title="Hello {!$User.FirstName}!">
        You belong to the {!account.name} account.
      </apex:pageBlock>
      <apex:pageBlock title="Contacts">
        <apex:dataTable value="{!account.Contacts}"
                        var="contact"
                        cellPadding="4" border="1">
          <apex:column >
            {!contact.FirstName}
          </apex:column>
          <apex:column >
            {!contact.LastName}
          </apex:column>
        </apex:dataTable>
      </apex:pageBlock>
    </apex:page>
    
    The <apex:dataTable> Component

    Discussion

    Notice that the <apex:dataTable> tag supports styling attributes like cellPadding and border. You can also style individual data elements with HTML tags. For example, the following <apex:dataTable> component makes the last name of each contact bold:
    <apex:dataTable value="{!account.Contacts}" var="contact"
                    cellPadding="4" border="1">
      <apex:column>{!contact.FirstName}</apex:column>
      <apex:column>{!contact.LastName}</apex:column>
    </apex:dataTable>
    

Share

Recipe Activity - Please Log in to write a comment

I am getting this error when using this source code. "List has no rows for assignment to SObject  An unexpected error has occurred. Your development organization has been notified." 
What do I need to change in the controller?

by a093000000YjsA9  (2015-06-18)

How does one modify the controller so that it always pulls the contacts from the same named account. I want to publish the names of our staff on our website, and this almost has me there. I just want to get the contacts from our company account.

by a093000000Yhy0s  (2014-10-14)

A great introduction to how Apex classes and Visualforce pages interact.

voted as verified by a093000000YHlsw  (2014-06-21)

I'm guessing the name of the controller function (getAccount) is wrong and should be getContacts?.

by a093000000XABEU  (2013-06-03)

X

Vote to Verify a Recipe

Verifying a recipe is a way to give feedback to others and broaden your own understanding of the capabilities on Force.com. When you verify a recipe, please make sure the code runs, and the functionality solves the articulated problem as expected.

Please make sure:
  • All the necessary pieces are mentioned
  • You have tested the recipe in practice
  • Have sent any suggestions for improvements to the author

Please Log in to verify a recipe

You have voted to verify this recipe.