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

c2fd0f5f	1975	Volkswagen	Blue
b7c9e194	2001	BMW	White
28dc78bc	1986	Honda	Blue
9bf672db	1960	Volvo	Orange
e905a77d	1969	Audi	Maroon
4e159bab	1987	Honda	Brown
b12ee8b6	1995	Ford	Maroon
fcc661e7	1968	Mercedes	Black
9824ce11	1981	Volkswagen	Silver
773ef78d	1966	BMW	Maroon
8167f8d2	2007	Renault	Green
3e8f0b83	1967	Fiat	Yellow
fc5995e3	1990	Ford	Silver
2e36c214	1965	Renault	Brown
b16c0a90	1960	Volvo	White
de51cbed	1988	Jaguar	Maroon
2fb8cba4	1973	Audi	Red
6651ff92	1983	Renault	Black
e71a78ed	2004	Audi	Silver
eba82636	1965	Jaguar	Black
131edd13	1968	Audi	White
e7faa7cb	1973	Jaguar	Orange
597e3e10	1996	Mercedes	Red
46e1bcd0	1965	Volkswagen	Silver
193aa2ea	2003	Volkswagen	Maroon
c65d2a57	1974	Honda	Maroon
dcdcbd41	1993	Fiat	Silver
6cacaa99	1968	Jaguar	Yellow
98b3cfc2	1970	Renault	Yellow
7ae922bb	1966	Fiat	Green
f47f2f27	1969	BMW	Blue
76a01444	1994	Renault	White
59c8456a	1999	Audi	Brown
4cb10df9	1964	Renault	Black
3148fcfc	1993	Renault	Blue
f063a596	1963	Ford	Silver
834c5736	1964	Audi	Yellow
9fd1ec27	2003	Mercedes	Blue
53dae611	2006	Ford	Green
68a78fc5	1977	Ford	Green
57a90aa1	1997	Ford	Yellow
48f2a783	1966	Jaguar	Brown
a1e89b8d	1986	Fiat	Green
3a673ca6	1979	Mercedes	Brown
41b72cc1	2001	Jaguar	Blue
0b730b06	1973	Jaguar	Green
d16eaeb8	1965	Honda	Black
aee311e7	1995	Volvo	Blue
7fbd1689	1967	BMW	Blue
212c495b	1994	Audi	Blue

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@1f2f826")
    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