p:panelGrid multiple columns don't work

Question

I want to create a grid layout with <p:panelGrid> to show a complex form, 4 columns, the third and the fourth column will be merged to show a table. The first column will show two form fields. but it doesn't work.

Thanks

<p:panelGrid columns="4"  rendered="#{productController.selected != null}">
    <p:row>
        <p:column colspan="1">
            <p:panelGrid columns="2">
                <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId" />
                <p:inputText id="productId" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>
            </p:panelGrid>

            <p:panelGrid columns="2">
                <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId11" />
                <p:inputText id="productId11" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>
            </p:panelGrid>
        </p:column>

        <!-- second column -->
        <p:column colspan="1">
            <p:panelGrid columns="2">
                <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId1" />
                <p:inputText id="productId1" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>

            </p:panelGrid>
        </p:column>

        <!-- third, fourth column -->
        <p:column colspan="2">
            <p:dataTable var="car" value="#{dtBasicView.cars}">
                <p:column headerText="Id">
                    <h:outputText value="#{car.id}" />
                </p:column>

                <p:column headerText="Year">
                    <h:outputText value="#{car.year}" />
                </p:column>

                <p:column headerText="Brand">
                    <h:outputText value="#{car.brand}" />
                </p:column>
            </p:dataTable>
        </p:column>
    </p:row>
</p:panelGrid>

Answer 1

Remove columns="4" attribute in most outer <p:panelGrid> and setting width for p:datatable will fix the issue.

Following is working code :

<p:panelGrid rendered="#{productController.selected != null}">
  <p:row>
    <p:column colspan="1">
        <p:panelGrid columns="2">
            <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId" />
            <p:inputText id="productId" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>
        </p:panelGrid>

        <p:panelGrid columns="2">
            <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId11" />
            <p:inputText id="productId11" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>
        </p:panelGrid>
    </p:column>

    <!-- second column -->
    <p:column colspan="1">
        <p:panelGrid columns="2">
            <p:outputLabel value="#{bundle.CreateProductLabel_productId}" for="productId1" />
            <p:inputText id="productId1" value="#{productController.selected.productId}" title="#{bundle.CreateProductTitle_productId}" required="true" requiredMessage="#{bundle.CreateProductRequiredMessage_productId}"/>

        </p:panelGrid>
    </p:column>

    <!-- third, fourth column -->
    <p:column colspan="2">
        <p:dataTable var="car" value="#{dtBasicView.cars}" style="width:300px;">
            <p:column headerText="Id">
                <h:outputText value="#{car.id}" />
            </p:column>

            <p:column headerText="Year">
                <h:outputText value="#{car.year}" />
            </p:column>

            <p:column headerText="Brand">
                <h:outputText value="#{car.brand}" />
            </p:column>
        </p:dataTable>
    </p:column>
  </p:row>
</p:panelGrid>