The <apex:dataTable> component is used to display data in a structured tabular format. It is one of the most powerful components in Visualforce for rendering collections with columns, headers, and styles.
Key Features
- Renders rows and columns dynamically.
- Supports headers, footers, and custom styles.
- Integrates easily with collections like List, Set, or custom objects.
Syntax
xmlCopyEdit<apex:dataTable value="{!contacts}" var="c">
<apex:column headerValue="Name">
{!c.Name}
</apex:column>
<apex:column headerValue="Email">
{!c.Email}
</apex:column>
</apex:dataTable>
value: The list of items.var: Variable to access each item.apex:column: Defines each table column.
Example: Display Contacts Table
xmlCopyEdit<apex:page controller="ContactTableController">
<apex:form>
<apex:dataTable value="{!contacts}" var="c" border="1" cellpadding="5">
<apex:column headerValue="Name">
{!c.Name}
</apex:column>
<apex:column headerValue="Phone">
{!c.Phone}
</apex:column>
</apex:dataTable>
</apex:form>
</apex:page>
Apex Controller:
apexCopyEditpublic class ContactTableController {
public List<Contact> getContacts() {
return [SELECT Name, Phone FROM Contact LIMIT 10];
}
}
Styling the Table
You can apply styles using the styleClass, rowClasses, and columnClasses attributes.
xmlCopyEdit<apex:dataTable value="{!contacts}" var="c" styleClass="myTable">
...
</apex:dataTable>
Use Cases
- Tabular representation of records.
- Display related lists.
- Format output with headers and styles.