function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
salesforcesss_deveoper211salesforcesss_deveoper211 

apex:datatable join column headers

Hi

 

I want to create table which has column headers spanning over 2 rows & 3columns please find attached sample table.

 

Please let me me know how can I do it with apex:datatable & apex:column.

 

Thanks.

 


 

colemabcolemab

I am not sure I think that you will need to use apex:repeat with a wrapper sub / inner class to achive what you want.
salesforcesss_deveoper211salesforcesss_deveoper211

Hi,

 

Here I just want to place headers, I think wrapper class i'll need if I want to have serial no.s but I am looking for only placement of headers.

 

Thanks.
colemabcolemab

I don't think you can do this with a data table because you have 2 rows of headers and some have rowspan=2 (the left one) and others have a colspan.  As far as I know, you can't have all of these toghether in a datatable directly.

 

You might be able to mimic this with some CSS (as opposed to a table).

 

Wrapper class for the win . . . . .

 
colemabcolemab

You can mimic this by nesting a table (really not recommended but it works) inside the header and then not having actual row column headers directly.

 

The trade off here is that your table width must be 100% or the column headers will be different size than the data table columns.

 

Example code:

 

<apex:datatable width="100%" value="{!OppList}" var="Opp" border="1">	
<apex:facet name="header">

	<table border="1" width="100%">
		<tr>
			<td width="25%" rowspan="2">ID</td>
			<td colspan="3">Table Header</td>
		</tr>
		<tr>
			<td width="25%">Name</td>
			<td width="25%">Stage</td>
			<td width="25%">Amount</td>
		</tr>
	</table>

</apex:facet>
	
	<apex:column width="25%">
		<apex:outputText value="{!Opp.id}"/>								
	</apex:column>

	<apex:column width="25%">
		<apex:outputText value="{!Opp.Name}"/>	
	</apex:column>

	<apex:column width="25%">
		<apex:outputText value="{!Opp.StageName}"/>	
	</apex:column>

	<apex:column width="25%">
		<apex:outputText value="{!Opp.Amount}"/>	
	</apex:column>
	
</apex:datatable>