DataTable - Scrollable

Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.

Documentation

Vertical

IdYearBrandColor
62c6c7521969VolvoYellow
9e05fc7d1997BMWWhite
582b122a2003AudiSilver
2102cfc22001MercedesRed
8e5ac2961987JaguarBrown
6b9334731972FordGreen
43676e2c1973VolkswagenWhite
54bb063a1971RenaultRed
056b5be21989MercedesGreen
0ccf324f1996FiatBrown
9fbf3dd91967AudiBlue
fbcac5871978VolkswagenYellow
71fb44f72000VolkswagenBlue
bf8fbcc01979MercedesMaroon
280da7da1999VolvoYellow
513b45601960HondaGreen
2242d3131985JaguarSilver
7259bb821976FordBlue
f126817e1968FiatBlue
97838f2d2001HondaYellow
b942a2d52007VolkswagenRed
e8e769341961FiatYellow
4f1286802005BMWSilver
179511742006VolvoGreen
9389b6f21999MercedesBrown
e15a69401976HondaOrange
93991b4d1964AudiMaroon
03bec3ea1968FiatSilver
44457a1f1997VolkswagenSilver
e26414ac1989VolvoWhite
2de9a00c1989JaguarWhite
b05adfc11978BMWWhite
4f25ba762002BMWMaroon
0fb122391976FordWhite
f6c74bd71974VolkswagenSilver
95d54eef1981RenaultOrange
f94890191966FordWhite
58f527a21990RenaultGreen
c3dccffc2002VolvoSilver
3c0b01b31966BMWBlack
b3e4e0d41989HondaBlue
b724b0961992FordMaroon
f4deaf3d1962JaguarRed
f82f86501984HondaBlue
0e823e031974AudiMaroon
d6feedb51960RenaultSilver
7b32cdfe1990HondaYellow
22effd0a1974RenaultBrown
c07be06e1991AudiBlue
12c100901970FiatWhite

Horizontal

IdYearBrandColor
4db0f1581984RenaultBlue
49653ece1971HondaBlue
d28b46a22003FordMaroon
091e3ced1998FordWhite
662956c51981RenaultBlue
de51bd721991JaguarBlack
06cf11f82000JaguarYellow
3b3fde971989JaguarRed
b57c29d61973FiatSilver
615b48792000MercedesBlack

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
e2a4e0e31988FordBluee2a4e0e31988FordBluee2a4e0e31988FordBluee2a4e0e31988FordBluee2a4e0e31988FordBlue
c485f8221990FordBlackc485f8221990FordBlackc485f8221990FordBlackc485f8221990FordBlackc485f8221990FordBlack
aca7a4f62000MercedesWhiteaca7a4f62000MercedesWhiteaca7a4f62000MercedesWhiteaca7a4f62000MercedesWhiteaca7a4f62000MercedesWhite
136a2d9e1982MercedesWhite136a2d9e1982MercedesWhite136a2d9e1982MercedesWhite136a2d9e1982MercedesWhite136a2d9e1982MercedesWhite
334b785a1976VolvoMaroon334b785a1976VolvoMaroon334b785a1976VolvoMaroon334b785a1976VolvoMaroon334b785a1976VolvoMaroon
b1c565ad2004JaguarRedb1c565ad2004JaguarRedb1c565ad2004JaguarRedb1c565ad2004JaguarRedb1c565ad2004JaguarRed
0c7f68ed1970RenaultOrange0c7f68ed1970RenaultOrange0c7f68ed1970RenaultOrange0c7f68ed1970RenaultOrange0c7f68ed1970RenaultOrange
fc6b79b62001FiatYellowfc6b79b62001FiatYellowfc6b79b62001FiatYellowfc6b79b62001FiatYellowfc6b79b62001FiatYellow
92a229191968VolvoBrown92a229191968VolvoBrown92a229191968VolvoBrown92a229191968VolvoBrown92a229191968VolvoBrown
bd9aa0f92009HondaGreenbd9aa0f92009HondaGreenbd9aa0f92009HondaGreenbd9aa0f92009HondaGreenbd9aa0f92009HondaGreen
4a9b7ece1994VolvoRed4a9b7ece1994VolvoRed4a9b7ece1994VolvoRed4a9b7ece1994VolvoRed4a9b7ece1994VolvoRed
408e28b11992VolvoBlue408e28b11992VolvoBlue408e28b11992VolvoBlue408e28b11992VolvoBlue408e28b11992VolvoBlue
87f54bf32003VolkswagenRed87f54bf32003VolkswagenRed87f54bf32003VolkswagenRed87f54bf32003VolkswagenRed87f54bf32003VolkswagenRed
5413803f1971AudiBlack5413803f1971AudiBlack5413803f1971AudiBlack5413803f1971AudiBlack5413803f1971AudiBlack
b7d168081976JaguarRedb7d168081976JaguarRedb7d168081976JaguarRedb7d168081976JaguarRedb7d168081976JaguarRed
b5a5e3411988VolvoWhiteb5a5e3411988VolvoWhiteb5a5e3411988VolvoWhiteb5a5e3411988VolvoWhiteb5a5e3411988VolvoWhite
dfd7e9251970BMWReddfd7e9251970BMWReddfd7e9251970BMWReddfd7e9251970BMWReddfd7e9251970BMWRed
2b5709362001JaguarWhite2b5709362001JaguarWhite2b5709362001JaguarWhite2b5709362001JaguarWhite2b5709362001JaguarWhite
a2ace4011970MercedesBluea2ace4011970MercedesBluea2ace4011970MercedesBluea2ace4011970MercedesBluea2ace4011970MercedesBlue
fa8129741984RenaultBlackfa8129741984RenaultBlackfa8129741984RenaultBlackfa8129741984RenaultBlackfa8129741984RenaultBlack
dc4f49601994VolvoBrowndc4f49601994VolvoBrowndc4f49601994VolvoBrowndc4f49601994VolvoBrowndc4f49601994VolvoBrown
0e9d06862006VolvoOrange0e9d06862006VolvoOrange0e9d06862006VolvoOrange0e9d06862006VolvoOrange0e9d06862006VolvoOrange
5fd8eb631997AudiGreen5fd8eb631997AudiGreen5fd8eb631997AudiGreen5fd8eb631997AudiGreen5fd8eb631997AudiGreen
1aedd5862000BMWYellow1aedd5862000BMWYellow1aedd5862000BMWYellow1aedd5862000BMWYellow1aedd5862000BMWYellow
22369d2e1987AudiMaroon22369d2e1987AudiMaroon22369d2e1987AudiMaroon22369d2e1987AudiMaroon22369d2e1987AudiMaroon
905aae111997HondaBlack905aae111997HondaBlack905aae111997HondaBlack905aae111997HondaBlack905aae111997HondaBlack
a75fd9f61996JaguarMaroona75fd9f61996JaguarMaroona75fd9f61996JaguarMaroona75fd9f61996JaguarMaroona75fd9f61996JaguarMaroon
dd4f5cbd1985RenaultGreendd4f5cbd1985RenaultGreendd4f5cbd1985RenaultGreendd4f5cbd1985RenaultGreendd4f5cbd1985RenaultGreen
524344231989RenaultSilver524344231989RenaultSilver524344231989RenaultSilver524344231989RenaultSilver524344231989RenaultSilver
18bf52b31993BMWBlue18bf52b31993BMWBlue18bf52b31993BMWBlue18bf52b31993BMWBlue18bf52b31993BMWBlue
e774f6631968VolvoYellowe774f6631968VolvoYellowe774f6631968VolvoYellowe774f6631968VolvoYellowe774f6631968VolvoYellow
297aa0b51987JaguarBlue297aa0b51987JaguarBlue297aa0b51987JaguarBlue297aa0b51987JaguarBlue297aa0b51987JaguarBlue
961626862000BMWBlue961626862000BMWBlue961626862000BMWBlue961626862000BMWBlue961626862000BMWBlue
13fcf9ba1990VolkswagenBrown13fcf9ba1990VolkswagenBrown13fcf9ba1990VolkswagenBrown13fcf9ba1990VolkswagenBrown13fcf9ba1990VolkswagenBrown
e859951f1963BMWBlacke859951f1963BMWBlacke859951f1963BMWBlacke859951f1963BMWBlacke859951f1963BMWBlack
20625ca21969MercedesBrown20625ca21969MercedesBrown20625ca21969MercedesBrown20625ca21969MercedesBrown20625ca21969MercedesBrown
5be2e0ab1968JaguarSilver5be2e0ab1968JaguarSilver5be2e0ab1968JaguarSilver5be2e0ab1968JaguarSilver5be2e0ab1968JaguarSilver
9e18f7c81974VolvoRed9e18f7c81974VolvoRed9e18f7c81974VolvoRed9e18f7c81974VolvoRed9e18f7c81974VolvoRed
fbba1e421988HondaYellowfbba1e421988HondaYellowfbba1e421988HondaYellowfbba1e421988HondaYellowfbba1e421988HondaYellow
a21e828e2003MercedesBluea21e828e2003MercedesBluea21e828e2003MercedesBluea21e828e2003MercedesBluea21e828e2003MercedesBlue
298b59ce1960FiatYellow298b59ce1960FiatYellow298b59ce1960FiatYellow298b59ce1960FiatYellow298b59ce1960FiatYellow
16fe1f701988VolkswagenYellow16fe1f701988VolkswagenYellow16fe1f701988VolkswagenYellow16fe1f701988VolkswagenYellow16fe1f701988VolkswagenYellow
a470dc3e2005RenaultWhitea470dc3e2005RenaultWhitea470dc3e2005RenaultWhitea470dc3e2005RenaultWhitea470dc3e2005RenaultWhite
b4fbf1ac1989JaguarBlackb4fbf1ac1989JaguarBlackb4fbf1ac1989JaguarBlackb4fbf1ac1989JaguarBlackb4fbf1ac1989JaguarBlack
81e4d39b1995BMWBlue81e4d39b1995BMWBlue81e4d39b1995BMWBlue81e4d39b1995BMWBlue81e4d39b1995BMWBlue
ae8cfebd2000HondaOrangeae8cfebd2000HondaOrangeae8cfebd2000HondaOrangeae8cfebd2000HondaOrangeae8cfebd2000HondaOrange
dd2d43e81995FiatOrangedd2d43e81995FiatOrangedd2d43e81995FiatOrangedd2d43e81995FiatOrangedd2d43e81995FiatOrange
967cc16a1996VolkswagenOrange967cc16a1996VolkswagenOrange967cc16a1996VolkswagenOrange967cc16a1996VolkswagenOrange967cc16a1996VolkswagenOrange
bc87e2b31980VolkswagenSilverbc87e2b31980VolkswagenSilverbc87e2b31980VolkswagenSilverbc87e2b31980VolkswagenSilverbc87e2b31980VolkswagenSilver
acc393b11976VolkswagenRedacc393b11976VolkswagenRedacc393b11976VolkswagenRedacc393b11976VolkswagenRedacc393b11976VolkswagenRed

Frozen Rows

IdYearBrandColor
d915e5471970AudiWhite
6260dcc61966FordBlack
e456bb6f1995AudiRed
7957c1251963AudiWhite
ee5c6a2f1995VolvoGreen
dca7dfc51977MercedesBlack
df27aa3e1962MercedesSilver
402a3dca2004HondaOrange
31d4c9371967FiatRed
8a0e69842002FordOrange
467009b52000AudiRed
b99c1dde1962BMWWhite
932f84bf1966VolkswagenOrange
da02eabd1995BMWWhite
7aadde061981FordRed
b9befba91962VolkswagenWhite
4001c87a1989FiatBrown
b64fb0c71974FiatYellow
c211df052002RenaultMaroon
9a69e0511987VolvoBrown
df8aaeaf2001FordBlue
ed52dc742005VolkswagenYellow
ec27dd141988JaguarGreen
450e663c1995JaguarBrown
3b43071c1971HondaBrown
78920bfd1985VolkswagenMaroon
0fe791632005AudiBlack
f9db63242008FiatOrange
ced24c282003FiatBlack
f999c4531993MercedesRed
888a378f1979JaguarBrown
0d0d7bef1984VolkswagenMaroon
640b7af01963MercedesWhite
f2e5c84a2009HondaBlack
724826c52008AudiOrange
133dc4541977JaguarWhite
86c563ac1973JaguarSilver
8dc424271986JaguarBrown
54d5a5951999FordSilver
972b0c3f1972RenaultRed
65da6e662006FordYellow
34b22eff1980AudiYellow
0c49430c1980RenaultRed
9ae562692008FiatRed
e2ffcedf2008AudiGreen
9d57bd752000FordYellow
b166c2941973MercedesYellow
6fff05ee1987FordBlue
23b5f0731988BMWGreen
f5fc926f1993RenaultBlack

Frozen Columns

Id
459cbcd7
84b7f240
a1792b6c
94606638
e8e5cbaf
3bc36ce1
361a05d0
f4791d3f
5ce18bc1
5f4e846f
9523788b
92ec292e
809a43b4
f6e2550a
87ae6c7c
1f7f8a8a
39a550f2
4261d4e9
2d438b34
5d9b2945
75c4b4c8
999f6223
a50a7d63
7d49f09c
d9c12688
b31b3b06
51b67771
0102749a
350ab95e
2c8847bc
168013ef
4c4f2c35
5a550475
90a76d6d
1ad21af3
aab0d461
4450c27b
63e4ae42
b2ebbf30
45a51c5c
e49c795c
5c9b0be7
3ee51717
d4e0ef58
adbac608
841f26d3
51dcbb50
5c406941
97976a44
78aad623
YearBrandColor
1970AudiRed
2008HondaYellow
2002BMWBrown
2001RenaultYellow
2002JaguarBlack
1969RenaultBlue
1976MercedesMaroon
1982BMWMaroon
2009AudiBlue
2004VolkswagenBlue
1974MercedesRed
1970RenaultMaroon
1986BMWMaroon
1979AudiOrange
1966AudiBrown
1971FordWhite
1967AudiMaroon
1974JaguarOrange
1996FiatMaroon
1989MercedesWhite
1993FiatGreen
2009JaguarBlue
1960MercedesRed
1997RenaultWhite
1985BMWBlack
1987FordYellow
1970MercedesSilver
1987JaguarOrange
2003JaguarBlue
1964VolkswagenBlue
1997RenaultOrange
1964MercedesRed
1976VolvoOrange
1988JaguarSilver
2004MercedesBrown
1985MercedesGreen
1982HondaMaroon
1999FordYellow
1973VolkswagenSilver
2006FiatWhite
2006FordYellow
1969HondaYellow
2009JaguarMaroon
2001MercedesBlack
1988JaguarSilver
2009FordWhite
2002VolkswagenRed
1997FordRed
1993FordBlue
1974HondaWhite

On-Demand Data

IdYearBrandColor
960906b11992VolvoSilver
9932ec2b1978BMWBrown
97152b9a1975BMWSilver
c822f6161981BMWYellow
929989d01973VolkswagenSilver
1b75db522007HondaBlack
ad28a4231986RenaultMaroon
6ddfd5d31961AudiBrown
db55d3f51993VolkswagenBrown
e340f3fe1968AudiYellow
e55b73f21988BMWYellow
2885bf791981AudiYellow
ec444a251983BMWWhite
10422c971968FordWhite
389a21201982VolvoMaroon
8dd481da1992AudiBlack
dae06f1c2009HondaYellow
52a2085c1974VolvoWhite
95fa72131991VolvoBlack
969155b41961VolkswagenOrange

Virtual Scrolling - 20000 Rows

IdYearBrandColor
a957e98a1961MercedesGreen
6ffb3a1f1992VolkswagenSilver
afbb95bd1966AudiGreen
5ffe7d4d1989HondaSilver
0881ac3a1983RenaultGreen
fe23eabe1999AudiRed
561096db1973MercedesSilver
48bdad191963RenaultBlue
53324f2b1973HondaMaroon
a1873ef11992VolkswagenGreen
37b77bb31997AudiBlue
174826ae1971MercedesBrown
f80116d41995MercedesOrange
9d2c5beb1993BMWGreen
9d5c52971990BMWBrown
627f5ac61972AudiOrange
09f7caf61997RenaultBlack
c686f4121979JaguarOrange
17323a4e1985BMWMaroon
dadc57c11967FordYellow
3ccaccd51988BMWYellow
0ff5e1d21981VolkswagenBlue
8ad7147b1981FiatRed
9dd10d921965BMWBlue
6613c7aa1999VolvoBrown
9de21f8e1998BMWYellow
f8c142441970JaguarBlue
160260fa1976VolkswagenSilver
a31339611968AudiWhite
d3ff799a1998BMWBlack
3d9860be1991HondaOrange
1c51af531989JaguarGreen
baa70f871965FordMaroon
701f42821971JaguarBrown
a2a7c5da1971VolvoYellow
df1a251b1999HondaMaroon
cd0c390b2006JaguarYellow
7f51065c1961FiatRed
218423ea1981VolvoYellow
9345baf51989RenaultBrown
<style type="text/css">   
  .ui-datatable {
      margin-bottom:20px;
  }

  .ui-datatable-frozenlayout-left {
      width:20%;
  }

  .ui-datatable-frozenlayout-right {
      width:80%;
  }
      </style>


<h:form>
    <h3 style="margin-top:0">Vertical</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars1}" scrollable="true" scrollHeight="150">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <h3>Horizontal</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars2}" scrollable="true" scrollWidth="400">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <h3>Horizontal and Vertical</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars3}" scrollable="true" scrollWidth="50%" scrollHeight="150">
        <p:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
    
    <h3>Frozen Rows</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars4}" scrollable="true" scrollHeight="150" frozenRows="2">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
    
    <h3>Frozen Columns</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars5}" scrollable="true" scrollHeight="150" scrollWidth="300" frozenColumns="1">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <h3>On-Demand Data</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars6}" scrollRows="20" scrollable="true" liveScroll="true" scrollHeight="150">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
    
    <h3>Virtual Scrolling - 20000 Rows</h3>
    <p:dataTable var="car" value="#{dtScrollView.lazyModel}" scrollRows="20" scrollable="true" virtualScroll="true" scrollHeight="200" lazy="true" rows="40" style="margin-bottom:0">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
</h:form>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.