O'Reilly logo

PrimeFaces Beginner's Guide by K. Siva Prasad Reddy

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Displaying data in the grid layout using the DataGrid component

The DataGrid component can be used to display a collection of data in the grid layout along with pagination support.

Let us see how we can use the DataGrid component to display user details in a grid layout using pagination, displaying five users per page:

<p:dataGrid var="user" value="#{adminController.users}" 
      columns="3" rows="5" paginator="true"  
      rowsPerPageTemplate="5,10,15">  

  <p:panel header="#{user.firstName} #{user.lastName}" 
      style="text-align:center">  
    <h:panelGrid columns="1">  
      <h:outputText value="#{user.id} : #{user.emailId}" />  
    </h:panelGrid>  
  </p:panel>
</p:dataGrid>

The preceding code displays DataGrid as shown in the following screenshot:

As we have specified columns="3" and ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required