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, 2018 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, 2018 at 18:50

1 Answer 1


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, 2018 at 18:56
  • @mvr The only real way would be for a apex:panelGrid instead.
    – sfdcfox
    May 30, 2018 at 19:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .