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); } }