You need to sign in to do that
Don't have an account?
![Whyser Whyser](https://dfc-org-production.my.site.com/img/userprofile/default_profile_45_v2.png)
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 1 | Header Grouping 2 | ||||
Header 1-a | Header 1-b | Header 1-c | Header 2-a | Header 2-b | Header 2-c |
data | data | data | data | data | data |
data | data | data | data | data | data |
data | data | data | data | data | data |
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.
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.
Hi Whyser;
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>
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.