DataGrid
DataGrid displays a collection of data in grid layout. Ajax Pagination is a built-in feature and paginator UI is fully customizable via various options like paginatorTemplate, rowsPerPageOptions, pageLinks and more.
Source
<h:form id="form">
<p:dataGrid var="car" value="#{tableBean.cars}" columns="3"
rows="12" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="9,12,15">
<p:column>
<p:panel header="#{car.model}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="/images/cars/#{car.manufacturer}.jpg"/>
<h:outputText value="#{car.year}" />
<p:commandLink update=":form:carDetail" oncomplete="carDialog.show()" title="View Detail">
<p:graphicImage value="/images/search.png"/>
<f:setPropertyActionListener value="#{car}"
target="#{tableBean.selectedCar}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>
<p:dialog p:dialog header="Car Detail" widgetVar="carDialog" modal="true">
<p:outputPanel id="carDetail" style="text-align:center;" layout="block">
<p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="modelNo" value="Model No: " />
<h:outputText id="modelNo" value="#{tableBean.selectedCar.model}" />
<h:outputLabel for="year" value="Year: " />
<h:outputText id="year" value="#{tableBean.selectedCar.year}" />
<h:outputLabel for="color" value="Color: " />
<h:outputText id="color" value="#{tableBean.selectedCar.color}" style="color:#{tableBean.selectedCar.color}"/>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
package org.primefaces.examples.view;
import java.io.IOException;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.servlet.ServletContext;
import org.primefaces.examples.domain.Car;
public class TableBean implements Serializable {
private final static String[] colors;
private final static String[] manufacturers;
static {
colors = new String[10];
colors[0] = "Black";
colors[1] = "White";
colors[2] = "Green";
colors[3] = "Red";
colors[4] = "Blue";
colors[5] = "Orange";
colors[6] = "Silver";
colors[7] = "Yellow";
colors[8] = "Brown";
colors[9] = "Maroon";
manufacturers = new String[10];
manufacturers[0] = "Mercedes";
manufacturers[1] = "BMW";
manufacturers[2] = "Volvo";
manufacturers[3] = "Audi";
manufacturers[4] = "Renault";
manufacturers[5] = "Opel";
manufacturers[6] = "Volkswagen";
manufacturers[7] = "Chrysler";
manufacturers[8] = "Ferrari";
manufacturers[9] = "Ford";
}
private List<Car> cars;
private Car selectedCar;
public TableBean() {
cars = new ArrayList<Car>();
populateRandomCars(cars, 50);
}
public Car getSelectedCar() {
return selectedCar;
}
public void setSelectedCar(Car selectedCar) {
this.selectedCar = selectedCar;
}
private void populateRandomCars(List<Car> list, int size) {
for(int i = 0 ; i < size ; i++)
list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
}
public List<Car> getCars() {
return cars;
}
private int getRandomYear() {
return (int) (Math.random() * 50 + 1960);
}
private String getRandomColor() {
return colors[(int) (Math.random() * 10)];
}
private String getRandomManufacturer() {
return manufacturers[(int) (Math.random() * 10)];
}
private String getRandomModel() {
return UUID.randomUUID().toString().substring(0, 8);
}
}