Understanding apex:dataTable Component in Visualforce

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.