DataTable - Scrollable
Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.
Documentation
<style type="text/css">
.ui-datatable {
margin-bottom:20px;
}
.ui-datatable-frozenlayout-left {
width:20%;
}
.ui-datatable-frozenlayout-right {
width:80%;
}
</style>
<h:form>
<h3 style="margin-top:0">Vertical</h3>
<p:dataTable var="car" value="#{dtScrollView.cars1}" scrollable="true" scrollHeight="150">
<p:column headerText="Id" footerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<h3>Horizontal</h3>
<p:dataTable var="car" value="#{dtScrollView.cars2}" scrollable="true" scrollWidth="400">
<p:column headerText="Id" footerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<h3>Horizontal and Vertical</h3>
<p:dataTable var="car" value="#{dtScrollView.cars3}" scrollable="true" scrollWidth="50%" scrollHeight="150">
<p:column headerText="Id" footerText="Id" width="200">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year" width="200">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand" width="200">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color" width="200">
<h:outputText value="#{car.color}" />
</p:column>
<p:column headerText="Id" footerText="Id" width="200">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year" width="200">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand" width="200">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color" width="200">
<h:outputText value="#{car.color}" />
</p:column>
<p:column headerText="Id" footerText="Id" width="200">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year" width="200">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand" width="200">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color" width="200">
<h:outputText value="#{car.color}" />
</p:column>
<p:column headerText="Id" footerText="Id" width="200">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year" width="200">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand" width="200">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color" width="200">
<h:outputText value="#{car.color}" />
</p:column>
<p:column headerText="Id" footerText="Id" width="200">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year" width="200">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand" width="200">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color" width="200">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<h3>Frozen Rows</h3>
<p:dataTable var="car" value="#{dtScrollView.cars4}" scrollable="true" scrollHeight="150" frozenRows="2">
<p:column headerText="Id" footerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<h3>Frozen Columns</h3>
<p:dataTable var="car" value="#{dtScrollView.cars5}" scrollable="true" scrollHeight="150" scrollWidth="300" frozenColumns="1">
<p:column headerText="Id" footerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<h3>On-Demand Data</h3>
<p:dataTable var="car" value="#{dtScrollView.cars6}" scrollRows="20" scrollable="true" liveScroll="true" scrollHeight="150">
<p:column headerText="Id" footerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<h3>Virtual Scrolling - 20000 Rows</h3>
<p:dataTable var="car" value="#{dtScrollView.lazyModel}" scrollRows="20" scrollable="true" virtualScroll="true" scrollHeight="200" lazy="true" rows="40" style="margin-bottom:0">
<p:column headerText="Id" footerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" footerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" footerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" footerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
</h:form>
@Named("dtScrollView")
@ViewScoped
public class ScrollView implements Serializable {
private List<Car> cars1;
private List<Car> cars2;
private List<Car> cars3;
private List<Car> cars4;
private List<Car> cars5;
private List<Car> cars6;
private LazyDataModel<Car> lazyModel;
@Inject
private CarService service;
@PostConstruct
public void init() {
cars1 = service.createCars(50);
cars2 = service.createCars(10);
cars3 = service.createCars(50);
cars4 = service.createCars(50);
cars5 = service.createCars(50);
cars6 = service.createCars(200);
lazyModel = new LazyCarDataModel(service.createCars(20000));
}
public List<Car> getCars1() {
return cars1;
}
public List<Car> getCars2() {
return cars2;
}
public List<Car> getCars3() {
return cars3;
}
public List<Car> getCars4() {
return cars4;
}
public List<Car> getCars5() {
return cars5;
}
public List<Car> getCars6() {
return cars6;
}
public LazyDataModel<Car> getLazyModel() {
return lazyModel;
}
public void setLazyModel(LazyDataModel<Car> lazyModel) {
this.lazyModel = lazyModel;
}
public void setService(CarService service) {
this.service = service;
}
}
@Named
@ApplicationScoped
public class CarService {
private final static String[] colors;
private final static String[] brands;
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";
brands = new String[10];
brands[0] = "BMW";
brands[1] = "Mercedes";
brands[2] = "Volvo";
brands[3] = "Audi";
brands[4] = "Renault";
brands[5] = "Fiat";
brands[6] = "Volkswagen";
brands[7] = "Honda";
brands[8] = "Jaguar";
brands[9] = "Ford";
}
public List<Car> createCars(int size) {
List<Car> list = new ArrayList<Car>();
for(int i = 0 ; i < size ; i++) {
list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState()));
}
return list;
}
private String getRandomId() {
return UUID.randomUUID().toString().substring(0, 8);
}
private int getRandomYear() {
return (int) (Math.random() * 50 + 1960);
}
private String getRandomColor() {
return colors[(int) (Math.random() * 10)];
}
private String getRandomBrand() {
return brands[(int) (Math.random() * 10)];
}
private int getRandomPrice() {
return (int) (Math.random() * 100000);
}
private boolean getRandomSoldState() {
return (Math.random() > 0.5) ? true: false;
}
public List<String> getColors() {
return Arrays.asList(colors);
}
public List<String> getBrands() {
return Arrays.asList(brands);
}
}
