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

c9f8c2af	1989	Renault	Green
6d45672a	2008	Mercedes	Orange
ef660d4c	1987	BMW	Maroon
2af8806a	1970	Fiat	Blue
2ba9eef7	1982	Mercedes	Red
6aac1a1d	1973	Fiat	White
b4199541	1989	Audi	Blue
fe8782ca	1969	Honda	Silver
7023e34a	1997	BMW	Green
b435123f	1987	Volkswagen	White
2addb252	2007	Volkswagen	Yellow
58209e29	1991	Audi	Red
33aa0e26	1998	BMW	Red
0046c431	2000	Renault	Yellow
34b0922c	1969	BMW	Blue
9afcee28	1989	Volvo	Black
6a60c750	1987	Ford	Maroon
a9503ce7	2004	Honda	Red
d0e2b77b	1972	Ford	Blue
6f1d4d5a	2002	Audi	Blue
2a764b0b	1988	Jaguar	Red
8162f4fc	1984	Mercedes	Black
5fdb3b8c	1980	BMW	Orange
23611753	2008	Fiat	Silver
352863d9	1980	BMW	Brown
f130e46d	2002	Jaguar	Yellow
7fab0107	1963	BMW	Green
5e930808	1996	Honda	Maroon
a649b718	1962	Volvo	Silver
fabdb3b0	1966	Jaguar	Orange
a1779a98	1984	Ford	Green
09bade12	1999	Jaguar	Silver
58fb7d2d	1984	Mercedes	White
ff43d132	1980	Volvo	Blue
3a9a86db	1995	Fiat	Yellow
657421da	1983	Audi	Red
294d25dd	2006	Renault	Yellow
14c10dcd	1979	Mercedes	Black
9f61c4dc	1974	BMW	Silver
07689f40	1994	Volvo	Green
b72da24f	1966	Jaguar	White
55571496	1999	Honda	Maroon
ff36dcdb	1992	Fiat	Green
919f6d8e	2001	Volvo	Yellow
7a964d38	1961	Renault	Green
c78886b4	1979	Fiat	Yellow
b1cb3b4a	1990	Fiat	White
95b827ae	1973	Fiat	Yellow
193f9e6c	1963	Volkswagen	Silver
641e2a11	1988	Fiat	Black

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@3e69721a")
    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