Introducing the PanelGrid component

The panelGrid component is an extension to a standard JSF <h:panelGrid> component supporting rowspan and colspan features along with theming support.

Let us see how to create a PanelGrid along with header and footer:

<p:panelGrid columns="2">
  <f:facet name="header">
    <h:outputLabel value="User Login Form" />
  </f:facet>
  <h:outputLabel value="UserName:" />
  <p:inputText value="#{userController.userName}"/>
  
  <h:outputLabel value="Password:" />
  <p:password value="#{userController.password}"/>
  
  <f:facet name="footer">
    <p:commandButton value="Login"/>
    <p:commandButton type="reset" value="Rest"/>
  </f:facet>
</p:panelGrid>

The preceding code renders a panelGrid component as follows:

By default PrimeFaces panelGrid generates an HTML table with borders. If you want to remove borders you can apply a custom style to remove borders as follows:

<p:panelGrid...