Pageblocktable display no of columns

I have the following code with pageblocktable, I have 13 columns to display which I want it display as 4 columns like this:

Delete      Role    Firstname        Lastname
Phone      Fax      GeneralEmail     PersonalEmail
Street     City      State            Zip


<apex:page standardcontroller="REL_VS_Submission__c" extensions="RELVSRenewalController" sidebar="false">
    <apex:sectionheader title="VSA Renewal Submission" subtitle="Step 2 of 10"/>
    <apex:messages />
    <apex:form >
        <apex:pageblock title="Contact Information">
            <!-- This facet tag defines the "Next" button that appears
            in the footer of the pageBlock. It calls the step2()
            controller method, which returns a pageReference to
            the next step of the wizard. -->
            <!--<apex:facet name="footer">
                <apex:commandbutton action="{!step3}" value="Save and Continue"
                                    styleclass="btn" />
            <apex:variable value="{!0}" var="rowContactNumber" />
            <!-- Here we will use an extra variable to define a row number -->
            <apex:outputpanel id="panelWithVar">
                <apex:variable value="{!0}" var="rowContactNumber" />
            <apex:pageblocksection title="Contact Information" >
                <apex:pageblocktable value="{!anewContact}" var="item" id="newContactitems">
                    <!-- A button to remove individual entry. s
                    We must to pass the line number to define a list entry number to remove -->
                    <apex:column width="5%" headervalue="Delete">
                        <apex:commandbutton immediate="true" action="{!removeContactObject}" value=" X " rerender="newContactitems,panelWithVar">
                            <apex:param name="p2" value="{!rowContactNumber}" assignto="{!numberOfContactRowToRemove}" />
                    <!-- Moreover here we incrementing the row number variable->
                    <!--<apex:column headerValue="RowCount">
                        <apex:outputText value="{!rowContactNumber}"/>

                   <apex:column headervalue="Role">
                        <apex:inputfield value="{!item.REL_VS_Contact_Role__c}" html-disabled="true"/>
                        <apex:variable var="rowContactNumber" value="{!rowContactNumber + 1}" />
                    <apex:column headervalue="Firstname">
                        <apex:inputfield value="{!item.Firstname}" required="true" />
                    <apex:column headervalue="Lastname">
                        <apex:inputfield value="{!item.Lastname}" required="true" />
                    <apex:column headervalue="Phone">
                        <apex:inputfield value="{!item.Phone}" required="true" />
                    <apex:column headervalue="Fax">
                        <apex:inputfield value="{!item.Fax}" required="true" />
                    <apex:column headervalue="Personal Email">
                        <apex:inputfield value="{!item.Email}" required="true" />
                    <apex:column headervalue="General Email">
                        <apex:inputfield value="{!item.REL_VS_Generic_Email__c}" />
                    <apex:column headervalue="Title">
                        <apex:inputfield value="{!item.Title}" required="true"/>
                     <apex:column headervalue="Mailing Street">
                        <apex:inputfield value="{!item.MailingStreet}" required="true"/>
                    <apex:column headervalue="Mailing City">
                        <apex:inputfield value="{!item.MailingCity}" required="true"/>
                    <apex:column headervalue="Mailing State">
                        <apex:inputfield value="{!item.MailingState}" required="true" />
                    <apex:column headervalue="Mailing Zip">
                    <apex:inputfield value="{!item.MailingPostalCode}" required="true" />
            <!-- A main button to add a new item -->
            <apex:commandbutton value="Add Contact" action="{!addContactObject}" rerender="newContactitems,panelWithVar" immediate="true" />

        <apex:pageblock >
            <apex:pageblocksection columns="4">
                <apex:commandbutton action="{!step3}" value="Save and Continue"
                                    styleclass="btn" />
                <apex:commandbutton action="{!reset}" value="Reset Page"
                                    styleclass="btn" immediate="true" />
                <apex:commandbutton action="{!exit}" value="Exit"
                                    styleclass="btn" immediate="true" />
                <apex:commandbutton action="{!Back}" value="Back"
                                    styleclass="btn" immediate="true" />


  • That's only 12 columns, not 14. – sfdcfox May 30 '18 at 18:47
  • I don't really get the objective. Are you seeking to "stack" multiple data points in each table cell/row? – David Reed May 30 '18 at 18:50

To create multiple rows, use the breakBefore attribute:

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

However, please note that headers beyond the first breakBefore won't be displayed, but for each row, the values will be displayed.

  • Thanks for the reply, How can I display with headers. breakbefore attribute works great but I am missing the headers as you mentioned. – mvr May 30 '18 at 18:56
  • @mvr The only real way would be for a apex:panelGrid instead. – sfdcfox May 30 '18 at 19:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.