<apex:dataTable> Component in Visualforce Page

The <apex:dataTable> is another important component on the Visualforce page. An HTML table displays information about one data item per row. The <apex:dataTable> is defined by iterating over a data set. The <apex:dataTable> body includes one or more column components. These components specify the information which needs to be displayed for each data item.

The HTML pass-through attributes are supported by this component using the "html-" prefix.

The <apex:dataTable> component has the following attributes:

1. align

The align is a string-type attribute used to define the position of the rendered HTML table with respect to the page. Possible values include left, right, or center. By default, its value is set to left.

Syntax:

2. bgcolor

The border is a string-type attribute used to specify the background color of the rendered HTML table.

Syntax:

3. border

The id attribute is a string-type attribute that defines the width of the frame around the rendered HTML table in pixels.

Syntax:

4. captionClass

The captionClass attribute is a string-type attribute that defines a style class used to display the caption for the rendered HTML table. The external stylesheet will be applied when the caption facet is specified.

Syntax:

5. captionStyle

The captionStyle attribute is a string-type attribute that defines the inline CSS used to display the caption for the rendered HTML table. The inline CSS will be applied when the caption facet is specified.

Syntax:

6. cellpadding

The cellpadding attribute is a string-type attribute used to define the amount of space between the border of each table cell and its contents.

Syntax:

7. cellspacing

The cellspacing attribute is a string-type attribute that defines the amount of space between the border of each table cell and the border of the other cells surrounding it. Its value can be in pixels or percentages.

Syntax:

8. columnClasses

The columnClasses attribute is a string-type attribute used to define one or more style classes as a comma-separated list associated with the table's columns.

Syntax:

9. columns

The 'columns' is an integer-type attribute that defines the number of columns in this table.

Syntax:

10. columnsWidth

The columnsWidth is a string-type attribute that defines a comma-separated list of the widths applied to each table column. Values can be expressed as pixels

Syntax:

11. dir

The dir is a string-type attribute that defines the direction in which the generated HTML component should be read. RTL and LTR are the two possible values for this attribute.

Syntax:

12. first

The first is an integer type attribute that indicates the first element in the iteration visibly rendered in the list. The index of the first element in the data set specified by the value attribute is 0.

Syntax:

13. footerClass

The footerClass is a string type attribute that defines the style class used for displaying the footer for the rendered HTML table. The footer class will be applied when the footer facet is specified.

Syntax:

14. frame

The frame is a string-type attribute that defines the border drawn for this table. The "none", "above", "below", "hsides", "vsides", "lhs", "rhs", "box" and "border" are the possible values for this attribute.

Syntax:

15. headerClass

The headerClass is a string type attribute that defines the style class used for displaying the header for the rendered HTML table. The header class will be applied only when the header facet is specified.

Syntax:

16. id

The id attribute is a string-type attribute that defines a unique identifier which allows this component to be referenced by other components on the page.

Syntax:

17. lang

The lang is a string type attribute that defines the base language for the generated HTML output.

Syntax:

18. onclick

The onclick is a string-type attribute used to invoke the JavaScript method when the onclick event occurs or when the user clicks the data table.

Syntax:

19. ondblclick

The ondblclick is a string-type attribute used to invoke the JavaScript method when the ondblclick event occurs or when the user clicks the data table twice.

Syntax:

20. onkeydown

The onkeydown is a string-type attribute used to invoke the JavaScript method when the onkeydown event occurs or when the user presses a keyboard key.

Syntax:

21. onkeypress

The onkeypress is a string type attribute used to invoke the JavaScript method when the onkeypress event occurs or when the user holds down or presses a keyboard key.

Syntax:

22. onkeyup

The onkeyup is a string-type attribute used to invoke the JavaScript method when the onkeyup event occurs or when the user releases a keyboard key.

Syntax:

23. onmousedown

The onmousedown is a string-type attribute used to invoke the JavaScript method when the onmousedown event occurs or when the user presses the mouse button.

Syntax:

24. onmousemove

The onmousemove attribute is a string-type attribute used to invoke the JavaScript method when the onmousemove event occurs or when the user moves the mouse pointer.

Syntax:

25. onmouseout

The onmouseout is a string-type attribute used to invoke the JavaScript method when the onmouseout event occurs or when the user moves the mouse pointer away from the data table.

Syntax:

26. onmouseover

The onmouseover is a string-type attribute used to invoke the JavaScript method when the onmouseover event occurs or when the user moves the pointer over the data table.

Syntax:

27. onmouseup

The onmouseup is a string-type attribute used to invoke the JavaScript method when the onmouseup event occurs or when the user releases the mouse button.

Syntax:

28. onRowClick

The onRowClick is a string-type attribute used to invoke the JavaScript method when the onRowClick event occurs or simply when the user clicks a row in the table.

Syntax:

29. onRowDblClick

The onRowDblClick is a string-type attribute used to invoke the JavaScript method when the onRowDblClick event occurs or when the user clicks a row in the data table twice.

Syntax:

30. onRowMouseDown

The onRowMouseDown is a string-type attribute used to invoke the JavaScript method when the onRowMouseDown event occurs or when the user clicks a mouse button in a data table row.

Syntax:

31. onRowMouseOut

The onRowMouseOut attribute is a string-type attribute used to invoke the JavaScript method when the onRowMouseOut event occurs or simply when the user moves the mouse pointer away from a row in the data table.

Syntax:

32. onRowMouseMove

The onRowMouseMove attribute is a string-type attribute used to invoke the JavaScript method when the onRowMouseMove event occurs or when the user moves the mouse pointer over a row of the data table.

Syntax:

33. onRowMouseOver

The onRowMouseOver is a string-type attribute used to invoke the JavaScript method when the onRowMouseMove event occurs or when the user moves the mouse pointer over a row in the data table.

Syntax:

34. rendered

The rendered is a Boolean-type attribute used to specify whether this component is rendered on the page or not. By default, the boolean value true is set to this attribute.

Syntax:

35. onRowMouseUp

The onRowMouseUp is a string-type attribute used to invoke the JavaScript method when the onRowMouseUp event occurs or when the user releases the mouse button over a row in the data table.

Syntax:

36. rowClasses

The rowClasses is a string-type attribute used to specify one or more classes associated with the table's rows.

-->

Syntax:

37. rows

The "rows" is an integer-type attribute that specifies the maximum number of items to display in the list. 0 is the default value for this attribute that results in all possible list items.

Syntax:

38. rules

The "rules" is a string-type attribute used to specify the borders drawn between cells in the table. The "none", "groups", "rows", "cols", and "all" are the possible values for this attribute, and by default, its value is set to "none".

Syntax:

39. style

The style is a string-type attribute that defines the inline CSS to apply the data list component.

Syntax:

40. styleClass

The styleClass is a string-type attribute used to define the CSS class to apply the data list component. The styleClass attribute specifies the external CSS stylesheet applied to the component.

Syntax:

41. summary

The summary is a string-type attribute used for specifying the summary of the table's purpose and structure for Section 508 compliance.

Syntax:

42. title

The title is a string-type attribute used to specify the text displayed when the user's mouse pointer hovers over this component.

Syntax:

43. value

The value is an Object type attribute that defines the data collection displayed in the list.

Syntax:

44. var

The var is a string-type attribute that defines the variable's name and represents one element in the data collection specified by the value attribute.

Syntax:

45. width

The width is a string-type attribute that defines the entire table's width, expressed as a relative percentage of the total amount of available horizontal space.

Syntax:

The <apex:dataTable> has the following three facets:

1. caption

The components that appear in the caption for the table.

2. footer

The component that shows in the footer row for the table.

3. header

The component that shows in the header row for the table.

Let's take an example to understand how we can use the <apex:dataList> component on the Visualforce page.

ApexDataTableExample.vfp

<!-- create Visualforce page for apex data table with custom controller-->
<apex:page controller="ApexDataTableController">
    <!-- apex form start-->
    <apex:form >
        <!-- use apex:datatable with header and caption facet to display account information-->
        <apex:dataTable value="{!accList}" var="accRec" id="theTable1" rowClasses="odd,even" styleClass="tableClass" border="2px">
            <apex:facet name="caption">Account information</apex:facet>
            <apex:facet name="header">New Records:</apex:facet>
            
            <!--apex:column for displaying fields -->
            <apex:column>
                <apex:facet name="header">Name</apex:facet>
                <apex:outputText value="{!accRec.Name}"/>
            </apex:column>
            <apex:column>
                <apex:facet name="header">Owner</apex:facet>
                <apex:outputText value="{!accRec.owner.name}"/>
            </apex:column>
            <apex:column>
                <apex:facet name="header">Account Number</apex:facet>
                <apex:outputText value="{!accRec.AccountNumber}"/>
            </apex:column>
            <apex:column>
                <apex:facet name="header">Phone</apex:facet>
                <apex:outputText value="{!accRec.Phone}"/>
            </apex:column>
            <apex:column>
                <apex:facet name="header">Rating</apex:facet>
                <apex:outputText value="{!accRec.Rating}"/>
            </apex:column>
            <apex:column>
                <apex:facet name="header">Website</apex:facet>
                <apex:outputText value="{!accRec.Website}"/>
            </apex:column>
        </apex:dataTable><br/>
        <!-- use apex:datatable with header and caption facet to display contact information-->
        <apex:dataTable value="{!conList}" var="conRec" id="theTable2" rowClasses="odd,even" styleClass="tableClass" border="2px">
            <apex:facet name="caption">Contact information</apex:facet>
            <apex:facet name="header">New Records:</apex:facet>
            
            <!--apex:column for displaying fields -->
            <apex:column>
                <apex:facet name="header">First Name</apex:facet>
                <apex:outputText value="{!conRec.FirstName}"/>
            </apex:column>
            <apex:column>
                <apex:facet name="header">Last Name</apex:facet>
                <apex:outputText value="{!conRec.LastName}"/>
            </apex:column>
            <apex:column>
                <apex:facet name="header">Owner</apex:facet>
                <apex:outputText value="{!conRec.Owner.Name}"/>
            </apex:column>
            <apex:column>
                <apex:facet name="header">Account Name</apex:facet>
                <apex:outputText value="{!conRec.Account.Name}"/>
            </apex:column>
            <apex:column>
                <apex:facet name="header">Email</apex:facet>
                <apex:outputText value="{!conRec.Email}"/>
            </apex:column>
            <apex:column>
                <apex:facet name="header">Phone</apex:facet>
                <apex:outputText value="{!conRec.Phone}"/>
            </apex:column>
        </apex:dataTable>
    </apex:form>
</apex:page>

ApexDataListController.apxc

// create ApexDataTableController class to get list of Accounts and Contacts
public class ApexDataTableController {
    public List<account> accList{get;set;}
    public List<contact> conList{get;set;}
    
    //default constructor to get account and contact records
    public ApexDataTableController(){
        accList = [select Id, Name, Owner.Name, Rating, Phone, AccountNumber, Website From Account Where Name != null AND Rating != null
                   AND Phone != null AND AccountNumber != null AND Website != null LIMIT 3];
        conList = [select Id, FirstName, LastName, Owner.Name, Account.Name, AccountId, Email, Phone From Contact Where FirstName != null AND LastName != null
                   AND AccountId != null AND Email != null AND Phone != null LIMIT 3];
    }
}

Output