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
35477e38
1966
Mercedes
Black
3
312c34af
1963
Ford
Maroon
4
8e8c7148
1974
Renault
Black
5
9da728bb
1984
Mercedes
Blue
6
c6792282
1996
Ferrari
Red
7
b42b48f5
1984
Volvo
Red
8
2ff1977e
1976
Ford
White
9
7e37f046
1965
Mercedes
Maroon
10
44524736
1973
Audi
Red
11
44d1f908
1993
Ford
Red
12
db9f0d3b
1994
Volkswagen
Brown
13
66fe47cb
1979
Volkswagen
Green
14
631921d3
1983
Volkswagen
Brown
15
ee346162
1992
Mercedes
Maroon
16
14bb5125
1981
Ferrari
Black
17
6ec9dc80
1960
Ferrari
Red
18
e77ad583
1994
Mercedes
White
19
f9666eb4
1965
Ferrari
Orange
20
0418d8ba
2007
Mercedes
Orange
21
1b308316
1984
Opel
White
22
8f66346c
1983
Audi
Silver
23
92c85828
1978
Opel
Yellow
24
94a4ead7
1977
Opel
Red
25
95299797
2000
Chrysler
Black
26
ff650d6f
1992
Ferrari
Blue
27
5d409348
1980
Mercedes
Orange
28
9ed0725a
1967
Ford
Black
29
4d68abcc
1963
Mercedes
Maroon
30
56afcaf3
1963
Audi
Silver
31
0df8a72e
1985
Audi
Black
32
8528a651
1993
Audi
Black
33
97e52ef0
2009
BMW
White
34
da8de809
1973
Volkswagen
Silver
35
0e5f0b72
2001
Ford
Orange
36
5ac0cf9d
1996
Mercedes
Red
37
eb85be00
1987
Volvo
White
38
b5fba5a6
1997
Ford
White
39
821f208f
1991
Volkswagen
Brown
40
ce1f3a68
1961
Ford
Orange
41
67cd667c
1980
Mercedes
Brown
42
6172dbe8
2008
Renault
White
43
2acf7df2
1967
Ford
Red
44
60ba5f0a
1982
BMW
Black
45
5542fc09
1995
Ford
Brown
46
910194ae
2008
Volkswagen
Black
47
59853d35
1991
Volvo
Red
48
14440521
1962
Ford
Orange
49
a3fc5dfe
1984
Audi
Orange
50
20f8fc71
2006
Opel
Maroon
51
83963855
1972
Opel
White

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" width="125" sortBy="#{car.model}">
            <h:inputText value="#{car.model}" />
        </p:column>

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

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

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

</h:form>