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

d28dff48	2000	Honda	White
8ab6473c	1988	Audi	Yellow
a06ed154	2000	Jaguar	Orange
912aa0f9	1974	Volkswagen	Yellow
515ffdb9	1976	Jaguar	Silver
7d5688e7	2008	Ford	Red
b9815df5	1975	Volvo	Green
aab960f8	2008	Honda	Maroon
d15af7ef	1987	Ford	Silver
a246c771	1973	Ford	White
7f8e9584	1991	Mercedes	Silver
c6a7da5e	1993	Jaguar	Blue
8852bede	1994	Volkswagen	Brown
a1654074	2006	Jaguar	Orange
20b6472e	1973	Ford	Brown
89a77b33	1997	Ford	Silver
da338de4	1981	Volkswagen	Black
73ba25e9	1962	Ford	Red
7bc9b662	1966	Mercedes	Yellow
9d72ba70	1966	Renault	White
52103f9a	1962	Ford	Brown
3746b821	2006	Volkswagen	Silver
bd14a5e0	1972	Volkswagen	Black
8e2cfde8	1988	BMW	Blue
1f0e2bf5	2009	Audi	Black
c0ea6f86	1993	Mercedes	White
23aabb66	1989	BMW	Silver
055bd2e5	2005	Honda	Black
9239fe1e	1989	Jaguar	Orange
8d2b710c	1973	Audi	Black
5bf6f6c2	1984	Jaguar	Maroon
4876f540	1974	Mercedes	Orange
0cb22933	1965	Jaguar	Green
074842c5	1964	Fiat	Black
ceb8b5bc	1998	Audi	Red
579d692d	1986	BMW	Orange
cd3c431a	1964	BMW	Yellow
7997b962	1968	Honda	Red
8ded7206	1980	Jaguar	Silver
48511d9f	2004	Mercedes	Brown
123e9e21	1991	Honda	Silver
73ab3007	1980	BMW	Maroon
079a50d1	1983	Honda	Red
918b0c81	1988	Fiat	Orange
5d52ab66	2000	Audi	Blue
f282a8e9	2009	Mercedes	White
3dcf4bf0	1983	Mercedes	Blue
026484d7	1996	Honda	Blue
73fb7b88	1988	Volvo	Orange
e993aad9	1975	Volkswagen	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@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