Sheet

Sheet is an excel-like component to do data manipulation featuring resizable columns, ajax sorting, horizontal/vertical scrolling, frozen headers, keyboard navigation, multi cell selection with meta/shift keys, bulk delete/update and more.

List of Cars
A
B
C
D
1
Model
Year
Manufacturer
Color
2
6ba6619d
1969
Volkswagen
Blue
3
87c810a8
1971
Renault
Brown
4
4cad932b
1962
Audi
Black
5
a7c58df4
1990
Opel
Red
6
1644d809
1960
Audi
Black
7
77d3ce51
1964
Ferrari
Yellow
8
36d85ada
1992
Mercedes
Green
9
bebf1e7c
1963
Volvo
Black
10
316ce312
1963
Volvo
Silver
11
ec663b5b
1995
Ferrari
Red
12
e1c8bc10
1991
Opel
Red
13
5ef4c63e
1993
Opel
Blue
14
410a5c22
1980
Volvo
Red
15
c9feef39
1966
Chrysler
Silver
16
37584cfe
1978
Renault
Silver
17
fc0c1e01
1976
Volkswagen
Maroon
18
0cbbe39f
1992
BMW
Brown
19
d8dfccfb
1967
Mercedes
Blue
20
11d68dbb
1987
Audi
Maroon
21
079c66b4
1990
Mercedes
Green
22
edf3c3e9
2005
Audi
Maroon
23
5ab2b9bf
1977
Opel
Silver
24
05941862
1986
Opel
White
25
bcd0c7c1
1969
Chrysler
Green
26
e9726751
1984
Chrysler
Blue
27
97ec3137
2004
Renault
Orange
28
311484c0
1968
Opel
Brown
29
2fb503c6
1997
Audi
Brown
30
2d3542ea
2009
Mercedes
Silver
31
d876c6d9
1990
Volvo
Maroon
32
9f8026e1
1997
Ferrari
Maroon
33
54a26eba
2007
Renault
Yellow
34
c862784f
2007
Audi
Green
35
603a4ab6
1991
Chrysler
Black
36
39f160fd
1981
Renault
Brown
37
e9f09d9f
2002
Chrysler
Black
38
9c9f7bf2
1971
Ferrari
Orange
39
cacc9e5a
1993
Audi
Maroon
40
8076b9df
1989
Volvo
Maroon
41
a99bc9b7
1980
Volvo
Silver
42
b1770d5d
1962
Volvo
Yellow
43
9958f5f5
1978
Audi
Maroon
44
5e14c821
1992
Audi
Green
45
747f8552
2006
Volvo
Yellow
46
488ff579
1965
Ford
White
47
af42dcfd
2000
Ford
Green
48
9582c34c
1963
Renault
Brown
49
1b89681c
2004
Chrysler
White
50
0f552864
1992
Audi
Red
51
a69e5b59
1975
Opel
Green

Source

<h:form>
                
    <p:sheet value="#{tableBean.cars}" var="car" scrollHeight="300">
        <f:facet name="caption">
            List of Cars
        </f:facet>

        <p:column headerText="Model" style="width:125px" sortBy="#{car.model}">
            <h:inputText value="#{car.model}" />
        </p:column>

        <p:column headerText="Year" style="width:125px" sortBy="#{car.year}">
            <h:inputText value="#{car.year}" onkeypress="return restrict(event)"/>
        </p:column>

        <p:column headerText="Manufacturer" style="width:125px" sortBy="#{car.manufacturer}">
            <h:inputText value="#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color" style="width:125px" sortBy="#{car.color}">
            <h:inputText value="#{car.color}" />
        </p:column>
    </p:sheet>

</h:form>