How do I transpose rows and columns in pageblocktable?

Question

I have several values for a child campaign that I'd like to display as columns rather than rows.

I would like the first row to be Hidden_Speaker_Name__c and the second row to be Average_Speaker_Value__c, rather than columbs as they are now. Thanks.

My current controller:

public class CampaignController {
public Campaign camp {get; set;}
public CampaignController(ApexPages.StandardController controller) {
    camp = (Campaign) controller.getRecord();

    if(camp != null && camp.Id != null) {
        camp = [Select Id, Name, (Select Id, Average_Speaker_Value__c,
               Hidden_Speaker_Name__c, Type 
               FROM ChildCampaigns
               WHERE Type = 'Speakers')

        FROM Campaign WHERE Id =: camp.Id];
    }
}
}

My current VF page:

<apex:page standardController="Campaign" 
extensions="CampaignController" 
renderAs="PDF" 
showHeader="false" 
applyHtmlTag="true"
applyBodyTag="true"
>

<apex:pageBlockTable value="{!camp.ChildCampaigns}"
    var="cc"
    >

    <apex:column headerValue="Speaker" 
    headerClass="headerStyle" value="!cc.Hidden_Speaker_Name__c}"/>

    <apex:column headerValue="Score" 
    headerClass="headerStyle" 
    value="!cc.Average_Speaker_Value__c}"
    />
</apex:pageBlockTable>
</apex:page>

Answer 1

If I understood your question correctly, you want to transpose the table headers and values horizontally. So, currently your table is like this:

Name  Phone
ABC   1234
PQR   2356
XYZ   7654

And you want to change it to:

Name:   ABC    PQR    XYZ
Phone:  1234   2356   7654

I checked if we can do this using any available VF page tag attribute but it seems we cant. There is a way to transpose a table using JS or jQuery but it will not work as you are rendering the page as PDF. So, the only way I found to achieve this is to use HTML table tags and apex:repeat tag. I have chosen the Contacts and Account instead of ChildCampaigns and Campaign. Please find the code below:

VF page:

<apex:page standardController="Account" 
extensions="TaskMngrHelper" 
renderAs="PDF" 
showHeader="false" 
applyHtmlTag="true"
applyBodyTag="true"
>
<table style="width:100%" >
<tr>
    <th>Language:</th>
    <apex:repeat value="{!camp.Contacts}" var="ct">
    <td>{!ct.Languages__c}</td>
    </apex:repeat>
</tr>


<tr>
    <th>Level:</th>
    <apex:repeat value="{!camp.Contacts}" var="ct">
    <td>
    {!ct.Level__c}
    </td>
    </apex:repeat>
  </tr>
  </table>
</apex:page>

And controller:

public class TaskMngrHelper{

public Account camp {get; set;}
public TaskMngrHelper(ApexPages.StandardController controller) {
    camp = (Account) controller.getRecord();

    if(camp != null && camp.Id != null) {
        camp = [Select Id, Name, (Select Id, Languages__c,
               Level__c 
               FROM  Contacts
                ORDER BY Languages__c limit 10)

        FROM Account WHERE Id =: camp.Id];
    }
}

}

Should you need any clarification, leave a comment.

Thanks!