p:panelGrid multiple columns don't work - jsf

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>