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:
<apex:dataTable align="center"></apex:dataTable>
2. bgcolor
The border is a string-type attribute used to specify the background color of the rendered HTML table.
Syntax:
<apex:dataTable bgcolor="red"></apex:dataTable>
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:
<apex:dataTable border="2"></apex:dataTable>
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:
<apex:dataTable captionClass="className"></apex:dataTable>
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:
<apex:dataTable captionStyle="inline CSS"></apex:dataTable>
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:
<apex:dataTable cellpadding="5px;"></apex:dataTable>
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:
AD
<apex:dataTable cellspacing="5px;"></apex:dataTable>
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:
<apex:dataTable columnClasses="classNames"></apex:dataTable>
9. columns
The 'columns' is an integer-type attribute that defines the number of columns in this table.
Syntax:
<apex:dataTable columns="5"></apex:dataTable>
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
AD
Syntax:
<apex:dataTable columns="100px,100px"></apex:dataTable>
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:
<apex:dataTable dir="LTR"></apex:dataTable>
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:
<apex:dataTable first="2"></apex:dataTable>
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:
<apex:dataTable footerClass="className"></apex:dataTable>
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:
<apex:dataTable frame="box"></apex:dataTable>
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:
<apex:dataTable headerClass="className"></apex:dataTable>
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:
<apex:dataTable id="dataId"></apex:dataTable>
17. lang
The lang is a string type attribute that defines the base language for the generated HTML output.
Syntax:
<apex:dataTable lang="en"></apex:dataTable>
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:
<apex:dataTable onclick="saveRecords();"></apex:dataTable>
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:
<apex:dataTable ondblclick="saveRecords();"></apex:dataTable>
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:
<apex:dataTable onkeydown="saveRecords();"></apex:dataTable>
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:
<apex:dataTable onkeypress="saveRecords();"></apex:dataTable>
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:
<apex:dataTable onkeyup="saveRecords();"></apex:dataTable>
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:
<apex:dataTable onmousedown="countKeys();"></apex:dataTable>
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:
<apex:dataTable onmousemove="countKeys();"></apex:dataTable>
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:
<apex:dataTable onmouseout="countKeys();"></apex:dataTable>
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:
<apex:dataTable onmouseover="countKeys();"></apex:dataTable>
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:
<apex:dataTable onmouseup="countKeys();"></apex:dataTable>
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:
<apex:dataTable onRowClick="countKeys();"></apex:dataTable>
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:
<apex:dataTable onRowDblClick="countKeys();"></apex:dataTable>
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:
<apex:dataTable onRowMouseDown="countKeys();"></apex:dataTable>
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:
<apex:dataTable onRowMouseOut="countKeys();"></apex:dataTable>
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:
<apex:dataTable onRowMouseMove="countKeys();"></apex:dataTable>
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:
<apex:dataTable onRowMouseOver="countKeys();"></apex:dataTable>
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:
<apex:dataTable rendered="true"></apex:dataTable>
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:
<apex:dataTable onRowMouseUp="countKeys();"></apex:dataTable>
36. rowClasses
The rowClasses is a string-type attribute used to specify one or more classes associated with the table's rows.
-->
Syntax:
<apex:dataTable rowClasses="className"></apex:dataTable>
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:
<apex:dataTable rows="2"></apex:dataTable>
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:
<apex:dataTable rules="all"></apex:dataTable>
39. style
The style is a string-type attribute that defines the inline CSS to apply the data list component.
Syntax:
<apex:dataTable style="inline css"></apex:dataTable>
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:
<apex:dataTable styleClass="className"></apex:dataTable>
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:
<apex:dataTable summary="summary content"></apex:dataTable>
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:
<apex:dataTable title="Data List Example"></apex:dataTable>
43. value
The value is an Object type attribute that defines the data collection displayed in the list.
Syntax:
<apex:dataTable value="object"></apex:dataTable>
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:
<apex:dataList value="object" var="variableName"></apex:dataList>
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:
<apex:dataTable width="80%"></apex:dataTable>
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];
}
}
