Sunday, September 11, 2016

How to group header for two apex:columns while using pageblock table?

In order to achieve above functionality you need to "pack" two values into the one apex:column using the html table


<apex:pageBlock title="Page Block Title">
 <apex:pageBlockTable value="{!accounts}" var="a" >
        <apex:column headerValue="My header">
             <table class="tbl">
                   <tr><td>
                          <apex:outputField value="{!a.Name}" /></td><td>
                          <apex:outputField value="{!a.CustomerPriority__c}" />
                  </td></tr>
              </table>
        </apex:column>
        <apex:column value="{!a.Id}"/>
    </apex:pageBlockTable>
</apex:pageBlock>

And apply the below CSS

<style>
.tbl {
    border: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
.tbl td {
    width: 50%;
    border: none !important;
    margin: 0;
    padding: 0;
}
</style>

Expected Output


No comments:

Post a Comment