JARCH ShowCase

AjaxCore

• Listener • Basic • PartialSubmit • Event • Counter • Selector • Process • Search • Validation • Poll • RemoteCommand • Fragment • Dropdown • Status

Input

• AutoComplete • DatePicker • InputTextarea • Calendar • CascadeSelect • BooleanButton • Editor • BooleanCheckbox • Signature • OneButton • Spinner • OneRadio • Slider • CheckboxMenu • InputText • OneMenu • Switch • TriStateCheckbox • Password • InputGroup • Keyboard • Form Layout • Rating • InputNumber • ColorPicker • InputMask • Inplace • Listbox • KeyFilter • ManyButton • Knob • ManyMenu • TextEditor • ManyCheckbox • FilterGroup • MultiSelectListbox • FilterOrder • ToggleSwitch • FilterPeriod • Chips • FilterSearch • FilterSelect • Address • Cep • Cnpj • CnpjBase • Cpf • CpfCnpj • Email • Im • Integer • Money • MonthYear • Phone

Button

• Button • Link • CommandButton • LinkButton • CommandLink • SplitButton • Cancel • Clean • Delete • Download • Insert • Login • Print • Return • Save • Search • SearchLookup • LinkPrint

Data

Panel

• Accordion • Panel • Dashboard • PanelGrid • Fieldset • Ribbon • Grid CSS • ScrollPanel • Layout • TabView • NotificationBar • Toolbar • OutputPanel • Wizard • FlexGrid • Dashboard

Overlay

• ConfirmDialog • Tooltip • OverlayPanel • Dialog • LightBox • Sidebar • FilterSearch • InsertListFilter • Select • Unique

• Breadcrumb • PanelMenu • ContextMenu • SlideMenu • Dock • Stack • MegaMenu • Steps • Menu • TabMenu • Menubar • TieredMenu • MenuButton

Charts

• Area • Export • Bar • Interactive • Bubble • Live • Donut • Static • Line • Zoom • Pie • Combined • MeterGauge • MultiAxis • OHLC • Date • Animate • Responsive

ChartJs

• Bar • PolarArea • Bubble • Radar • Donut • Mixed • Line • Interactive • Pie • Export • Scatter

Messages

• Growl • Messages • StaticMessage

Multimedia

• Compare • Barcode • GraphicImage • Media • ContentFlow • PhotoCam • Cropper • Switch • Galleria

File

• Upload • Download

DragDrop

• Draggable • DataTable • DataGrid • Custom

Client Side Validation

• Basic • Custom • Bean • Event

Dialog Framework

• Basic • Message • Data • Nested

Misc

• Responsive • PrimeIcons • AutoUpdate • FontAwesome • ThemeSwitcher • Lifecycle • OutputLabel • Log • BlockUI • Focus • Cache • Hotkey • Captcha • Printer • Clock • ProgressBar • Collector • Context • DefaultCommand • ResetInput • Effect • Resizable • ExceptionHandler • Separator • FeedReader • Spacer • IdleMonitor • Spotlight • ImportConstants • Sticky • ImportEnum • Terminal • CSP • Watermark

JARCH SHOWCASE

DataTable - Scrollable Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.

Vertical

3dd368e6	1995	Fiat	Blue
edf073d3	1981	Renault	Maroon
91aa33f1	1985	Mercedes	Brown
2aa78b7c	2006	Renault	Black
85784f60	1965	Mercedes	Blue
786f26b8	1984	Audi	Orange
dd9262f2	1964	Volvo	Blue
0fcf490c	1990	BMW	Black
a0276f85	2007	Renault	Brown
a995b369	1988	Volvo	Blue
3d89fbf9	1983	Volkswagen	Orange
52ada727	1971	Jaguar	Maroon
0895dccc	2002	Fiat	Silver
60abece7	2007	BMW	Orange
5eed4d3d	1985	Audi	Orange
17e52669	1989	Volkswagen	Maroon
b7fb94b5	1975	Fiat	Red
8fffbd2f	1968	Honda	Maroon
8456829c	1974	Mercedes	Green
e93a319f	1990	Honda	Black
b00b3e24	1964	Ford	Yellow
53ed0bef	1974	Mercedes	Yellow
57fc5135	2007	Ford	Brown
7591bb29	1993	Ford	Orange
ad861111	1968	Audi	Red
61f09e66	1977	Ford	Yellow
90f14f73	2007	Volvo	Silver
bbb976b9	2005	Renault	Brown
58a8b8b3	1991	Audi	Silver
d1df2197	1984	Volvo	Maroon
677c9053	1998	Volkswagen	Black
8941625c	1960	Volvo	Blue
cd45a5cf	1999	Honda	Silver
cea67bd0	1989	BMW	Blue
035f3af9	1985	Audi	Brown
2e7df3d0	1974	Jaguar	Black
2b879247	1963	Fiat	Black
c651b17b	1989	Fiat	Maroon
e41c5954	1981	Volkswagen	Orange
1f8a3564	1969	Ford	Maroon
8af2ed0b	1964	Jaguar	Green
12fe0053	2009	Volkswagen	White
0cb1cd20	1982	Volvo	Blue
d2461e9e	1986	BMW	Blue
ec91a54f	1960	Ford	Orange
c7502288	2001	Ford	Yellow
9391f284	1964	Mercedes	Brown
257c3aa5	1963	Jaguar	Maroon
2a94dd7c	1969	Volkswagen	Brown
04e02929	1966	Mercedes	Yellow

Horizontal

Horizontal and Vertical

Frozen Rows

Frozen Columns

On-Demand Data

Virtual Scrolling - 20000 Rows

<a:form>
    <h3 style="margin-top:0">Vertical</h3>
    <a:dataTable var="car" value="#{dtScrollView.cars1}" scrollable="true" scrollHeight="150">
        <a:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>

    <h3>Horizontal</h3>
    <a:dataTable var="car" value="#{dtScrollView.cars2}" scrollable="true" scrollWidth="400">
        <a:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>

    <h3>Horizontal and Vertical</h3>
    <a:dataTable var="car" value="#{dtScrollView.cars3}" scrollable="true" scrollWidth="50%" scrollHeight="150">
        <a:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </a:column>
        <a:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </a:column>
        <a:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </a:column>
        <a:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </a:column>
        <a:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>

    <h3>Frozen Rows</h3>
    <a:dataTable var="car" value="#{dtScrollView.cars4}" scrollable="true" scrollHeight="150" frozenRows="2">
        <a:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>

    <h3>Frozen Columns</h3>
    <a:dataTable var="car" value="#{dtScrollView.cars5}" scrollable="true" scrollHeight="150" scrollWidth="300" frozenColumns="1">
        <a:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>

    <h3>On-Demand Data</h3>
    <a:dataTable var="car" value="#{dtScrollView.cars6}" scrollRows="20" scrollable="true" liveScroll="true" scrollHeight="150">
        <a:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>

    <h3>Virtual Scrolling - 20000 Rows</h3>
    <a:dataTable var="car" value="#{dtScrollView.lazyModel}" scrollRows="20" scrollable="true" virtualScroll="true" scrollHeight="200" lazy="true" rows="40" style="margin-bottom:0">
        <a:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>
</a:form>

package com.jarch.showcase.view.data.datatable;

import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;
import org.primefaces.model.LazyDataModel;
import org.primefaces.showcase.domain.Car;
import org.primefaces.showcase.service.CarService;

@ManagedBean(name="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;
    
    @ManagedProperty("org.primefaces.showcase.service.CarService@239bc37f")
    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;
    }
}

package com.jarch.showcase.service;

import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import org.primefaces.showcase.domain.Car;

@ManagedBean(name = "carService")
@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)];
	}
    
    public int getRandomPrice() {
		return (int) (Math.random() * 100000);
	}
    
    public 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);
    }
}

Id	Year	Brand	Color