+ Start a Discussion
UU 

Table(apex:dataTable) Structure Question

Hi all,

I have multiple records in the list in Apex and want to display them like below by using apex:dataTable. Is it possible to do that?

Let's say I have three contact records,
Contact A
First Name : John
Phone No. : 123xx

Contact B
First Name: Emily
Phone No. 567xx

Contact C
First Name: Bob
Phone No. 987xx


I want to display three records like this table↓

==================
|  First Name  |  John    |
--------------------------------
|  Phone          |  123xx   |
================== 
First Name  |  Emily   |
--------------------------------
Phone          |  567xx   |
==================
First Name  |  Bob      |
--------------------------------
Phone          |  987xx   |
==================



*****
I could achieve this table sturucture by using apex:repeat and HTML table tag but I want to know if it is possible by using apex:dataTable
here is my sample code
<table>
 <apex:repeat value="{!lcontactList}" var="c">
  <tr><td>FirstName</td><td>{!c.FirstName}</td></tr>
  <tr><td>Phone</td><td>{!c.Phone}</td></tr>
 </apex:repeat>
</table>

Thank you in advance!
Best Answer chosen by U
Hargobind_SinghHargobind_Singh
You can include both values in one column: 

<apex:page controller="TestPageController">
	<apex:datatable value="{!cList}" var="c">
		<apex:column >
			Firstname: {!c.name}<br/>
			Phone: {!c.phone} 
		</apex:column>
	</apex:datatable>
</apex:page>

Or, you can use a table in a single column:

<apex:page controller="TestPageController">
	<apex:datatable value="{!cList}" var="c">
		<apex:column >
			<table>
				<tr><td>Name</td><td>{!c.name}</td></tr>
				<tr><td>Phone</td><td>{!c.phone}</td></tr>
			</table>
		</apex:column>
	</apex:datatable>
</apex:page>




All Answers

ForceComForceCom
Hi ,

Yes , You can do it using <apex:dataTable> but you might have to also use HTML Tags. Please find below the code. 

<apex:datatable value="{!ContactList}" var="c">
   <apex:column > 
       <tr><td>First Name: {!c.FirstName}</td></tr>
   </apex:column>
 
  <apex:column >
     <tr><td>Phone: {!c.Phone} </td></tr>
  </apex:column>

</apex:dataTable>

Thank You. 
Hargobind_SinghHargobind_Singh
You can include both values in one column: 

<apex:page controller="TestPageController">
	<apex:datatable value="{!cList}" var="c">
		<apex:column >
			Firstname: {!c.name}<br/>
			Phone: {!c.phone} 
		</apex:column>
	</apex:datatable>
</apex:page>

Or, you can use a table in a single column:

<apex:page controller="TestPageController">
	<apex:datatable value="{!cList}" var="c">
		<apex:column >
			<table>
				<tr><td>Name</td><td>{!c.name}</td></tr>
				<tr><td>Phone</td><td>{!c.phone}</td></tr>
			</table>
		</apex:column>
	</apex:datatable>
</apex:page>




This was selected as the best answer
UU
Hi both,

Thank you for your reply.

I used hs1's second suggestion in the end with a css to minimize padding space.
<apex:dataTable value="{!lcontactList}" var="c" border="1">
  <apex:column style="padding:0px;"  >
    <table border="1">
      <tr><td>First Name</td><td>{!c.FirstName}</td></tr>
      <tr><td>Phone</td><td>{!c.Phone}</td></tr>
    </table>
  </apex:column>
</apex:dataTable>

Once again, thank you so much.
It was really helpful!