General
Support
Resources
Theming
Accessiblity
PrimeBlocks
PrimeFlex
PrimeIcons
UI KIT
Ajax Framework
Introduction
Process
PartialSubmit
Selector
Search
Validation
RemoteCommand
Observer
Poll
Fragment
Status
Lifecycle
Dropdown
Form
AutoComplete
CascadeSelect
Chips
Inplace
InputGroup
InputMask
InputNumber
InputText
InputTextArea
KeyFilter
Keyboard
Knob
MultiSelectListBox
Password
Rating
SelectBooleanButton
SelectBooleanCheckbox
SelectOneButton
SelectOneRadio
SelectCheckboxMenu
SelectOneMenu
SelectOneListbox
SelectManyButton
SelectManyMenu
SelectManyCheckbox
Signature
Slider
Spinner
TextEditor
ToggleSwitch
TriStateCheckbox
Button
Data
Panel
Accordion
Card
Dashboard
Divider
Fieldset
NotificationBar
OutputPanel
Panel
PanelGrid
Splitter
ScrollPanel
TabView
Toolbar
Wizard
Overlay
Menu
Chart
BarNew
BubbleNew
DoughnutNew
LineNew
PieNew
ScatterNew
PolarAreaNew
RadarNew
CustomNew
FacetNew
ExportNew
Charts
BarDeprecated
BubbleDeprecated
DonutDeprecated
LineDeprecated
PieDeprecated
ScatterDeprecated
PolarAreaDeprecated
RadarDeprecated
MixedDeprecated
InteractiveDeprecated
ExportDeprecated
Messages
Multimedia
File
DragDrop
Client Side Validation
Dialog Framework
Misc
DataTable Scroll
Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.
<style>
.ui-datatable-frozenlayout-left {
width: 20%;
}
.ui-datatable-frozenlayout-right {
width: 80%;
}
</style>
<h:form>
<div class="card">
<h5 style="margin-top:0">Vertical</h5>
<p:dataTable var="customer" value="#{dtScrollView.customers1}" scrollable="true" scrollHeight="250">
<p:column headerText="Name" footerText="Name">
<h:outputText value="#{customer.name}"/>
</p:column>
<p:column headerText="Country" footerText="Country">
<h:outputText value="#{customer.country}"/>
</p:column>
<p:column headerText="Representative" footerText="Representative">
<h:outputText value="#{customer.representative.name}"/>
</p:column>
<p:column headerText="Status" footerText="Status">
<span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
</p:column>
</p:dataTable>
</div>
<div class="card">
<h5>Horizontal</h5>
<p:dataTable var="customer" value="#{dtScrollView.customers2}" scrollable="true" scrollWidth="600">
<p:column headerText="Name" footerText="Name">
<h:outputText value="#{customer.name}"/>
</p:column>
<p:column headerText="Country" footerText="Country">
<h:outputText value="#{customer.country}"/>
</p:column>
<p:column headerText="Representative" footerText="Representative">
<h:outputText value="#{customer.representative.name}"/>
</p:column>
<p:column headerText="Status" footerText="Status">
<span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
</p:column>
</p:dataTable>
</div>
<div class="card">
<h5>Horizontal and Vertical</h5>
<p:dataTable var="customer" value="#{dtScrollView.customers3}" scrollable="true" scrollWidth="50%" scrollHeight="250">
<p:column headerText="Id" footerText="Id">
<h:outputText value="#{customer.id}"/>
</p:column>
<p:column headerText="Name" footerText="Name">
<h:outputText value="#{customer.name}"/>
</p:column>
<p:column headerText="Country" footerText="Country">
<h:outputText value="#{customer.country}"/>
</p:column>
<p:column headerText="Date" footerText="Date">
<h:outputText value="#{customer.date}"/>
</p:column>
<p:column headerText="Company" footerText="Company">
<h:outputText value="#{customer.company}"/>
</p:column>
<p:column headerText="Status" footerText="Status">
<span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
</p:column>
<p:column headerText="Activity" footerText="Activity">
<h:outputText value="#{customer.activity}"/>
</p:column>
<p:column headerText="Representative" footerText="Representative">
<h:outputText value="#{customer.representative.name}"/>
</p:column>
</p:dataTable>
</div>
<div class="card">
<h5>Frozen Rows</h5>
<p:dataTable var="customer" value="#{dtScrollView.customers4}" scrollable="true" scrollHeight="250"
frozenRows="2">
<p:column headerText="Name" footerText="Name">
<h:outputText value="#{customer.name}"/>
</p:column>
<p:column headerText="Country" footerText="Country">
<h:outputText value="#{customer.country}"/>
</p:column>
<p:column headerText="Representative" footerText="Representative">
<h:outputText value="#{customer.representative.name}"/>
</p:column>
<p:column headerText="Status" footerText="Status">
<span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
</p:column>
</p:dataTable>
</div>
<div class="card">
<h5>Frozen Columns</h5>
<p:dataTable var="customer" value="#{dtScrollView.customers5}" scrollable="true" scrollHeight="250"
scrollWidth="300" frozenColumns="1">
<p:column headerText="Name" footerText="Name">
<h:outputText value="#{customer.name}"/>
</p:column>
<p:column headerText="Id" footerText="Id">
<h:outputText value="#{customer.id}"/>
</p:column>
<p:column headerText="Country" footerText="Country">
<h:outputText value="#{customer.country}"/>
</p:column>
<p:column headerText="Date" footerText="Date">
<h:outputText value="#{customer.date}"/>
</p:column>
</p:dataTable>
</div>
<div class="card">
<h3>On-Demand Data</h3>
<p:dataTable var="customer" value="#{dtScrollView.customers6}" scrollRows="20" scrollable="true" liveScroll="true" scrollHeight="150">
<p:column headerText="Name" footerText="Name">
<h:outputText value="#{customer.name}"/>
</p:column>
<p:column headerText="Id" footerText="Id">
<h:outputText value="#{customer.id}"/>
</p:column>
<p:column headerText="Country" footerText="Country">
<h:outputText value="#{customer.country}"/>
</p:column>
<p:column headerText="Date" footerText="Date">
<h:outputText value="#{customer.date}"/>
</p:column>
</p:dataTable>
</div>
<div class="card">
<h5>Virtual Scrolling - 20000 Rows</h5>
<p:dataTable var="customer" value="#{dtScrollView.lazyModel}" scrollRows="20" scrollable="true"
virtualScroll="true" scrollHeight="200" rows="40" style="margin-bottom:0">
<p:column headerText="Name" footerText="Name">
<h:outputText value="#{customer.name}"/>
</p:column>
<p:column headerText="Country" footerText="Country">
<h:outputText value="#{customer.country}"/>
</p:column>
<p:column headerText="Representative" footerText="Representative">
<h:outputText value="#{customer.representative.name}"/>
</p:column>
<p:column headerText="Status" footerText="Status">
<span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
</p:column>
</p:dataTable>
</div>
</h:form>
@Named("dtScrollView")
@ViewScoped
public class ScrollView implements Serializable {
private List<Customer> products1;
private List<Customer> products2;
private List<Customer> products3;
private List<Customer> products4;
private List<Customer> products5;
private List<Customer> products6;
private LazyDataModel<Customer> lazyModel;
@Inject
private CustomerService service;
@PostConstruct
public void init() {
products1 = service.getCustomers(50);
products2 = service.getCustomers(10);
products3 = service.getCustomers(50);
products4 = service.getCustomers(50);
products5 = service.getCustomers(50);
products6 = service.getCustomers(200);
lazyModel = new LazyCustomerDataModel(service.getCustomers(20000));
}
public List<Customer> getCustomers1() {
return products1;
}
public List<Customer> getCustomers2() {
return products2;
}
public List<Customer> getCustomers3() {
return products3;
}
public List<Customer> getCustomers4() {
return products4;
}
public List<Customer> getCustomers5() {
return products5;
}
public List<Customer> getCustomers6() {
return products6;
}
public LazyDataModel<Customer> getLazyModel() {
return lazyModel;
}
public void setLazyModel(LazyDataModel<Customer> lazyModel) {
this.lazyModel = lazyModel;
}
public void setService(CustomerService service) {
this.service = service;
}
}
@Named
@ApplicationScoped
public class CustomerService {
private Random random = new SecureRandom();
private Country[] countries;
private Representative[] representatives;
private String[] firstNames;
private String[] lastNames;
private String[] companies;
@PostConstruct
public void init() {
countries = new Country[]{
new Country(0, "Argentina", "ar"),
new Country(1, "Australia", "au"),
new Country(2, "Brazil", "br"),
new Country(3, "Canada", "ca"),
new Country(4, "Germany", "de"),
new Country(5, "France", "fr"),
new Country(6, "India", "in"),
new Country(7, "Italy", "it"),
new Country(8, "Japan", "jp"),
new Country(9, "Russia", "ru"),
new Country(10, "Spain", "es"),
new Country(11, "United Kingdom", "gb")};
companies = new String[]{"Benton, John B Jr", "Chanay, Jeffrey A Esq", "Chemel, James L Cpa", "Feltz Printing Service",
"Printing Dimensions", "Chapman, Ross E Esq", "Morlong Associates", "Commercial Press", "Truhlar And Truhlar Attys",
"King, Christopher A Esq", "Dorl, James J Esq", "Rangoni Of Florence", "Feiner Bros", "Buckley Miller Wright",
"Rousseaux, Michael Esq"};
representatives = new Representative[]{
new Representative("Amy Elsner", "amyelsner.png"),
new Representative("Anna Fali", "annafali.png"),
new Representative("Asiya Javayant", "asiyajavayant.png"),
new Representative("Bernardo Dominic", "bernardodominic.png"),
new Representative("Elwin Sharvill", "elwinsharvill.png"),
new Representative("Ioni Bowcher", "ionibowcher.png"),
new Representative("Ivan Magalhaes", "ivanmagalhaes.png"),
new Representative("Onyama Limba", "onyamalimba.png"),
new Representative("Stephen Shaw", "stephenshaw.png"),
new Representative("Xuxue Feng", "xuxuefeng.png")};
firstNames = new String[]{"James", "David", "Jeanfrancois", "Ivar", "Tony",
"Adams", "Claire", "Costa", "Juan", "Maria", "Jennifer",
"Stacey", "Leja", "Morrow", "Arvin", "Darci", "Izzy",
"Ricardo", "Clifford", "Emily", "Kadeem", "Mujtaba", "Aika",
"Mayumi", "Misaki", "Silvio", "Nicolas", "Antonio",
"Deepesh", "Aditya", "Aruna", "Jones", "Julie", "Smith",
"Johnson", "Francesco", "Salvatore", "Kaitlin", "Faith",
"Maisha", "Jefferson", "Leon", "Rodrigues", "Alejandro",
"Munro", "Cody", "Chavez", "Sinclair", "Isabel", "Octavia",
"Murillo", "Greenwood", "Wickens", "Ashley"};
lastNames = new String[]{"Butt", "Darakjy", "Venere", "Paprocki", "Foller",
"Morasca", "Tollner", "Dilliard", "Wieser", "Marrier", "Amigon",
"Maclead", "Caldarera", "Ruta", "Albares", "Poquette", "Garufi",
"Gaucho", "Rim", "Whobrey", "Flosi", "Nicka", "Inouye",
"Kolmetz", "Royster", "Slusarski", "Iturbide", "Caudy",
"Chui", "Kusko", "Figeroa", "Vocelka", "Stenseth", "Glick",
"Sergi", "Shinko", "Stockham", "Ostrosky", "Gillian",
"Rulapaugh", "Schemmer", "Oldroyd", "Campain", "Perin",
"Ferencz", "Saylors", "Briddick", "Waycott", "Bowley", "Malet",
"Malet", "Bolognia", "Nestle", "Doe"};
}
public List<Customer> getCustomers(int number) {
List<Customer> customers = new ArrayList<>();
for (int i = 0; i < number; i++) {
customers.add(
new Customer(i + 1000, getName(), getCompany(), getCountry(), getDate(),
CustomerStatus.random(), getActivity(), getRepresentative()));
}
return customers;
}
public List<Country> getCountries() {
return Arrays.asList(countries);
}
public CustomerStatus[] getCustomerStatus() {
return CustomerStatus.values();
}
public List<Representative> getRepresentatives() {
return Arrays.asList(representatives);
}
private String getName() {
return firstNames[random.nextInt(firstNames.length)] + Constants.SPACE
+ (char) (random.nextInt(26) + 'A') + Constants.SPACE
+ lastNames[random.nextInt(lastNames.length)];
}
private Country getCountry() {
return countries[random.nextInt(countries.length)];
}
private String getCompany() {
return companies[random.nextInt(companies.length)];
}
private LocalDate getDate() {
LocalDate now = LocalDate.now();
long randomDay = ThreadLocalRandom.current().nextLong(now.minusDays(30).toEpochDay(), now.toEpochDay());
return LocalDate.ofEpochDay(randomDay);
}
private int getActivity() {
return random.nextInt(100);
}
private Representative getRepresentative() {
return representatives[random.nextInt(representatives.length)];
}
}
PrimeFaces v14.0.0 by
PrimeTek