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
WhyserWhyser 

How to do slightly more complex table headers

Hi everyone,

 

Does anyone know how to create slightly more complex headers using VisualForce and dataTables and columns?.

I'm trying to create a table that looks something like this:

Table Caption
Header Grouping 1Header Grouping 2
Header 1-aHeader 1-bHeader 1-cHeader 2-aHeader 2-bHeader 2-c
datadatadatadatadatadata
datadatadatadatadatadata
datadatadatadatadatadata

 

 

Sorry it seems like in the preview that it cannot generate any lines on the table. I tried to increase the spacing so that people can see the general idea that I want.

bob_buzzardbob_buzzard

I doubt you'll be able to do this - as far as I'm aware, the table components generate header values in a single header cell, rather than allowing column and row spans etc. 

 

I've found that when I need this level of control, I move to regular HTML tables and use repeat components to generate the body rows.
prageethprageeth

Hi 

If your purpose is only displaying headers, I don't see a matter of using something like below.

 In following method, you need to have a list with "size=1" in your controller. In following example it is the method getTempList().

Controller:

 

public class MyClass{

public List<String> getDataList() {

List<String> myList = new List<String>();

myList.add('aaaaa');

myList.add('aaaaa');

myList.add('aaaaa');

myList.add('aaaaa');

return myList;

}

public List<String> getTempList() {

List<String> myList = new List<String>();

myList.add('');

return myList;

}

}  

 

Page:

 

 

<apex:page controller="MyClass">
<style>
    .myHeader{
        border:solid 1px;
        text-align:center;
    }
</style>
    <apex:datatable headerClass="myHeader" style="width:100%;" value="{!tempList}" var="">
        <apex:column headerValue="Table Caption">
            <apex:datatable headerClass="myHeader" style="width:100%;" value="{! tempList}" var="">
                <apex:column headerValue="Table Caption">
                   <apex:datatable headerClass="myHeader" style="width:100%;" value="{!dataList}" var="v">
                        <apex:column headerValue="Header1" style="border:solid 1px;" value="{!v}">
			</apex:column>                        
			<apex:column headerValue="Header2" style="border:solid 1px;" value="{!v}">
			</apex:column>                        
			<apex:column headerValue="Header2" style="border:solid 1px;" value="{!v}">
			</apex:column>                    
		   </apex:datatable>                 
		</apex:column>                 
		<apex:column headerValue="Table Caption">                   
		   <apex:datatable headerClass="myHeader" style="width:100%;" value="{!dataList}" var="v">
                        <apex:column headerValue="Header1" style="border:solid 1px;" value="{!v}">
 			</apex:column>
                        <apex:column headerValue="Header2" style="border:solid 1px;" value="{!v}"> 
			</apex:column>
                        <apex:column headerValue="Header2" style="border:solid 1px;" value="{!v}">
			</apex:column>
                    </apex:datatable>
                 </apex:column>
            </apex:datatable>
        </apex:column>
    </apex:datatable>
</apex:page> 
 
 


WhyserWhyser
Thanks to both of you for your replies.
 
Unfortunately prageeth, I don't think this method will work for me, though the headers may turn out looking correct. Of course I'm looking for more than just displaying headers, because I want the appropriate values to be displayed under the headers. However, since I'm nesting dataTables within a dataTable with the same "value" list, if I ever wanted to display data that is not under these nested headers, I would guess that this would not display properly, as each "dataTable" tag would display the entire contents of it's value. Not sure if what I'm describing is coming across correctly.