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 rows="5"
, DataGrid displayed five items arranged in three columns resulting in two rows. Here, rows
represent the number of items to be displayed per page...