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

641b81b5	1991	Fiat	Brown
9bb61ebf	1962	Mercedes	Brown
d0e8ac48	1978	Audi	Black
ad0e0f07	1965	Volkswagen	Silver
c6fb7257	1981	Jaguar	Blue
67050b7e	1976	Honda	Blue
ead49752	1964	Volkswagen	Brown
634c047e	1971	Honda	Maroon
8ccc1c96	1989	Ford	Silver
4fd9d53b	1972	Audi	Blue
ac9f1327	1972	Renault	Silver
a9e949b9	1970	Mercedes	Red
f90f1eb8	1973	Ford	Yellow
99277009	1999	Renault	Red
b3ef54b1	1969	Audi	Blue
b682efd9	1962	Audi	Silver
362d96bb	1990	Ford	White
342cf0a2	1961	Renault	White
5315052d	2004	Honda	Blue
01d1f859	1991	Jaguar	Blue
61a537e0	1960	Volvo	Red
6ca8d0e6	1980	Honda	Brown
f6c5c1f8	1973	BMW	Orange
c1750157	2007	Jaguar	Orange
d361ffdd	1965	Honda	Blue
76156fc6	2006	BMW	Silver
6718232f	1989	Fiat	Green
ad7b0077	2008	Volkswagen	Black
e0d09360	1992	Volvo	Brown
0010d54a	1964	Audi	Red
6cb08360	1982	Volvo	Black
f36a4fb7	2006	Mercedes	Orange
baf10fef	1960	BMW	Yellow
d37adeae	1993	Fiat	Green
35590542	2007	Volvo	Red
eb245bc7	1998	Mercedes	Orange
00f02366	1981	Audi	Silver
a6c9b1b8	2001	Fiat	Black
88ec5a15	1970	Volvo	White
a1105ca5	2008	Mercedes	Green
c6fb7cd1	1981	Ford	Black
7974d618	1970	Volkswagen	Brown
ae158f6f	1980	Volkswagen	Orange
88c926d0	1969	Mercedes	White
be2a3f1f	1984	Mercedes	Green
a2be522e	1995	Mercedes	Yellow
1699bc45	2006	Volkswagen	Red
9c11e632	2000	Volkswagen	Orange
29d5d4d0	1985	Fiat	Green
567c10ae	1966	Fiat	Green

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@34dc7e92")
    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