PageBlockTable - Multiple rows of headers

Question

Is there a way to make columns wrap to the next row? I want to only have like 5 columns on row one and the rest on row two. Is there an easy way to do this?

<apex:pageBlockTable id="pbt_myTable" value="{!esb_List}" var="ben" rendered="{!!serviceSession}">

            <apex:column style="{!if(ben.Account_Benefit__r.Grandfathered__c = TRUE,'background:#BDB76B;', '')}" >
                <apex:facet name="header">Account Benefit</apex:facet>
                <apex:outputLink value="/{!ben.Account_Benefit__r.id}" target="_blank">{!ben.Account_Benefit__r.Name}</apex:outputLink>
            </apex:column>


            <apex:column headerValue="Election Status" style="{!if(ben.Account_Benefit__r.Grandfathered__c = TRUE,'background:#BDB76B;', '')}">
                <img src="/img/alohaSkin/help_orange.png" title="{!$ObjectType.Employee_Session_Benefit__c.Fields.Election_Status__c.inlineHelpText}" height="14" width="14"/>
                <apex:inputField value="{!ben.Election_Status__c}" rendered="{!!sessionEditDisable}"/>
                <apex:outputField value="{!ben.Election_Status__c}" rendered="{!sessionEditDisable}"/>
            </apex:column>

            <apex:column headerValue="Paper Status" style="{!if(ben.Account_Benefit__r.Grandfathered__c = TRUE,'background:#BDB76B;', '')}">
                <apex:inputField value="{!ben.Paper_Status__c}" rendered="{!paperRender && !sessionEditDisable}" />
                <apex:outputText value="{!ben.Paper_Status__c}" rendered="{!paperRender && !!sessionEditDisable}" />  
            </apex:column>

            <apex:column headerValue="Incomplete Reason" style="{!if(ben.Account_Benefit__r.Grandfathered__c = TRUE,'background:#BDB76B;', '')}">
                <apex:inputField value="{!ben.Incomplete_Reason__c}" rendered="{!incompleteRender && !sessionEditDisable}" />
                <apex:outputText value="{!ben.Incomplete_Reason__c}" rendered="{!incompleteRender && !!sessionEditDisable}" />  
            </apex:column>

            <apex:column headerValue="Per Payroll Premium" id="Premium" style="{!if(ben.Account_Benefit__r.Grandfathered__c = TRUE,'background:#BDB76B;', '')}">
                <apex:inputField value="{!ben.Premium__c}" rendered="{!!sessionEditDisable}"/> 
                <apex:outputText value="{!ben.Premium__c}" rendered="{!sessionEditDisable}"/> 
            </apex:column>

            <apex:column headerValue="Reduced Premium" >
                <apex:inputField value="{!ben.Reduced_Premium__c}" rendered="{!!sessionEditDisable}" />
                <apex:outputText value="{!ben.Reduced_Premium__c}" rendered="{!sessionEditDisable}" />
            </apex:column>

            <apex:column headerValue="Adjusted Per Payroll Premium" >
                <apex:inputField value="{!ben.Adjusted_Per_Payroll_Premium__c}" rendered="{!!sessionEditDisable}" />
                <apex:outputText value="{!ben.Adjusted_Per_Payroll_Premium__c}" rendered="{!sessionEditDisable}" />
            </apex:column>

            <apex:column headerValue="Volume" rendered="{!showVolume}" style="{!if(ben.Account_Benefit__r.Grandfathered__c = TRUE,'background:#BDB76B;', '')}"> 
                <apex:inputField value="{!ben.Volume__c}" rendered="{!ben.Account_Benefit__r.Show_Volume__c && !sessionEditDisable}" />
                <apex:outputText value="{!ben.Volume__c}" rendered="{!ben.Account_Benefit__r.Show_Volume__c && !!sessionEditDisable}" />
            </apex:column>

            <apex:column headerValue="Elimination Period" rendered="{!showEliminationPeriod}" style="{!if(ben.Account_Benefit__r.Grandfathered__c = TRUE,'background:#BDB76B;', '')}">
                <apex:inputField value="{!ben.Elimination_Period__c}" rendered="{!ben.Account_Benefit__r.Show_Elimination_Period__c && !sessionEditDisable}"/> 
                <apex:outputText value="{!ben.Elimination_Period__c}" rendered="{!ben.Account_Benefit__r.Show_Elimination_Period__c && !!sessionEditDisable}"/> 
            </apex:column>

        </apex:pageBlockTable>

Looking for end goal like this:

Answer 1

You can use the breakBefore attribute on an apex:column, but those additional columns won't have headers.

<apex:column breakBefore="true"> ...

You'd probably be better off using an apex:panelGrid. Here's a very trivial example that I wrote up for this question.

<apex:page controller="panelGrid2">
    <apex:repeat value="{!rows}" var="row">
        <apex:panelGrid columns="5">
            <apex:outputText style="background: #88f; color: white" value="Value1" />
            <apex:outputText style="background: #88f; color: white" value="Value2" />
            <apex:outputText style="background: #88f; color: white" value="Value3" />
            <apex:outputText style="background: #88f; color: white" value="Value4" />
            <apex:outputText style="background: #88f; color: white" value="Value5" />

            <apex:outputText value="{!row.value1}" />
            <apex:outputText value="{!row.value2}" />
            <apex:outputText value="{!row.value3}" />
            <apex:outputText value="{!row.value4}" />
            <apex:outputText value="{!row.value5}" />

            <apex:outputText style="background: #88f; color: white" value="Value6" />
            <apex:outputText style="background: #88f; color: white" value="Value7" />
            <apex:outputText />
            <apex:outputText />
            <apex:outputText />

            <apex:outputText value="{!row.value6}" />
            <apex:outputText value="{!row.value7}" />
            <apex:outputText />
            <apex:outputText />
            <apex:outputText />
        </apex:panelGrid>
    </apex:repeat>
</apex:page>

Basically, you have to sequence the values per row, which is tricky to get right, especially when you start messing with "rendered" attributes (if not rendered, they don't take up a cell space).

Honestly, at this point, it's practically easier to just render your own HTML and save on the overhead of using all this extra logic.

<table>
<tbody>
<apex:repeat value="{!rows}" var="row">
<tr><td>Value 1</td><td>Value 2</td><td>Value 3</td><td>Value 4</td><td>Value 5</td></tr>
<tr><td><apex:inputField /></td><td><apex:inputField ... /></td><td><apex:inputField ... /></td><td><apex:inputField ... /></td><td><apex:inputField ... /></td></tr>
<tr><td>Value 6</td><td>Value 7</td><td>Value 8</td></tr>
<tr><td><apex:inputField ... /></td><td><apex:inputField ... /></td><td><apex:inputField ... /></td></tr>
</apex:repeat>
</tbody>
</table>