Skip to main content
Salesforce

About

Ask Question
Tag Info
Info Newest Frequent Score Active Unanswered

An HTML table that is defined by iterating over a set of data, displaying information about one item of data per row.

The body of the <apex:dataTable> contains one or more column components that specify what information should be displayed for each item of data. The data set can include up to 1,000 items.

For Visualforce pages running Salesforce.com API version 20.0 or higher, an <apex:repeat> tag can be contained within this component to generate columns.

This component supports HTML pass-through attributes using the "html-" prefix. Pass-through attributes are attached to the generated table's tag.

<!-- For this example to render properly, you must associate the Visualforce page 
with a valid account record in the URL. 
For example, if 001D000000IRt53 is the account ID, the resulting URL should be: 
https://Salesforce_instance/apex/myPage?id=001D000000IRt53
See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->            

<!-- Page: -->          
<apex:page controller="dataTableCon" id="thePage">
    <apex:dataTable value="{!accounts}" var="account" id="theTable" rowClasses="odd,even"
                        styleClass="tableClass">
        <apex:facet name="caption">table caption</apex:facet>
        <apex:facet name="header">table header</apex:facet>
        <apex:facet name="footer">table footer</apex:facet>
        <apex:column>
                <apex:facet name="header">Name</apex:facet>
            <apex:facet name="footer">column footer</apex:facet>
            <apex:outputText value="{!account.name}"/>
        </apex:column>
        <apex:column>
            <apex:facet name="header">Owner</apex:facet>
            <apex:facet name="footer">column footer</apex:facet>
            <apex:outputText value="{!account.owner.name}"/>
        </apex:column>
    </apex:dataTable>
</apex:page>        

/*** Controller: ***/
public class dataTableCon {
    List<Account> accounts;

    public List<Account> getAccounts() {
        if(accounts == null) accounts = [select name, owner.name from account limit 10];
        return accounts;
    }
}
The example above renders the following HTML:

<table class="tableClass" id="thePage:theTable" border="0" cellpadding="0" cellspacing="0">
    <colgroup span="2"></colgroup>
    <caption>table caption</caption>
    <thead>
        <tr>
            <td colspan="2" scope="colgroup">table header</td>
        </tr>
        <tr>
            <td scope="col">Name</td>
            <td scope="col">Owner</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td scope="col">column footer</td>
            <td scope="col">column footer</td>
        </tr>
        <tr>
            <td colspan="2" scope="colgroup">table footer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="odd">
            <td>Bass Manufacturing</td>
            <td>Doug Chapman</td>
        </tr>
        <tr class="even">
            <td>Ball Corp</td>
            <td>Alan Ball</td>
        </tr>
        <tr class="odd">
            <td>Wessler Co.</td>
            <td>Jill Wessler</td>
        </tr>
    </tbody>
</table>
History Excerpt history