Building a Table of Data in a Visualforce Page

Source code:


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


Define a custom controller that returns the set of records you want to display, and then use the ** 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: [code apex]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')]; } }[/code] Iterate over the resulting contacts with the ** tag. This tag allows us to define an iteration variable that we can use to access the fields on each contact: [code visualforce] You belong to the {!} account. {!contact.FirstName} {!contact.LastName} [/code] The Component [img apex_page_data_table]


    Notice that the ** tag supports styling attributes like *cellPadding* and *border*. You can also style individual data elements with HTML tags. For example, the following ** component makes the last name of each contact bold: [code visualforce] {!contact.FirstName} {!contact.LastName} [/code]