Visualforce Apex:dataTable Tag

Apex:dataTable Tag

Apex:dataTable Tag :-In our previous Salesforce Tutorial we have clearly learned about <apex:column> tag. In this Salesforce training Tutorial we are going to learn about apex:datatable tag and how it works in visualforce page.

<Apex:datatable>:- apex:datatable tag is create data tables in visualforce pages. Each item in the data table is displayed in the form of rows and columns.

Ex:- <apex:datatable value=”{!leads}” var=”le” width=”75%”>

Different attributes supported by <apex:datatable> tag.

align bgcolor border captioclass
columnClasses columns first captionstyle
columnsWidth dir frame cellpadding
Footerclass id lang cellspacing
Headerclass onclick ondblclick onkeydown
onkeypress onkeyup onmousedown onmouseout
onmouseover onmouseup onmousemove onRowClick
OnRowDblClick onRowMousemove onRowmouseOut rendered
Onrowmousedown onRowMouseOver OnrowMouseUp rowClasses
rows rules style styleclass
title var width value

Let us see how apex:datatable tag works.

Create new Visualforce page as shown below.


Click on create page apexdatatable link to create new visualforce page.


Now write visualforce page code as shown below.


Here we creating datatable for standard object leads. We are inserting all record set variables of leads in to leads data table. Name, phone number and company are the three columns in data table. “Width” is the attribute to adjust width of data table.

Output:- apex:datatable tag