DataTable - Scrollable

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

Vertical

IdYearBrandColor
1558803b1986RenaultRed
385aba301999HondaWhite
a754f2c72005AudiMaroon
7b12bbca1975MercedesOrange
71a30de51989FordYellow
c7e2e4a31961FordRed
d9e5e34d1980JaguarRed
4b4f81dd1965FordBlue
d26c74a62009AudiWhite
4f1ed1601987HondaGreen
893b5c241977VolkswagenSilver
631f33342008HondaMaroon
59cfa7c01968AudiBrown
87b67e281985VolkswagenSilver
9a51c38f2002VolvoWhite
282169391972AudiRed
d299f96b1985RenaultOrange
e257be8d2003VolkswagenYellow
8a11a8071990HondaYellow
d3c310121993JaguarWhite
a34705b81992FordBlue
26ee7b862006BMWWhite
2860c5fa2000HondaBrown
0d4123382000VolvoMaroon
e7d9a9571965FordSilver
d0a23f3c1997VolvoSilver
97bd55032002FordBlack
b1577c9f1997FordGreen
de95078d1967VolvoGreen
dc5166671968BMWYellow
2160caff1960MercedesRed
717402172006FordOrange
d41938d51991FiatBlue
a61ee6231982FiatBlue
58305b351974MercedesSilver
90747d211987MercedesBlue
09e6b54a1997HondaWhite
57f9b5f41964FordGreen
de371ae51998VolkswagenGreen
dd9a2a4d1990VolvoYellow
fc516a3d1975HondaRed
79f8dee62000MercedesSilver
9520e3221991VolkswagenBrown
7e7bc6e91982FordRed
a75c293e2000AudiBrown
a49860a81999FiatBlack
68dbb0a51978VolkswagenOrange
b14e402e1973VolkswagenYellow
9b6d2c581971FiatOrange
164220c21992FiatMaroon

Horizontal

IdYearBrandColor
90b67d4b1976MercedesBlack
8943011e1967MercedesBlack
fd54a5921999FordGreen
52e778692002AudiWhite
baf068671991HondaMaroon
88aac5eb1975JaguarSilver
9e2ea8381970MercedesMaroon
93e090821967HondaWhite
6ab4147e1985JaguarYellow
b80d9d9b2001VolkswagenWhite

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
6ab414df1966AudiGreen6ab414df1966AudiGreen6ab414df1966AudiGreen6ab414df1966AudiGreen6ab414df1966AudiGreen
32de97321968VolvoSilver32de97321968VolvoSilver32de97321968VolvoSilver32de97321968VolvoSilver32de97321968VolvoSilver
b0a1e9381999MercedesBlackb0a1e9381999MercedesBlackb0a1e9381999MercedesBlackb0a1e9381999MercedesBlackb0a1e9381999MercedesBlack
a1d784ca1983JaguarSilvera1d784ca1983JaguarSilvera1d784ca1983JaguarSilvera1d784ca1983JaguarSilvera1d784ca1983JaguarSilver
2acc1f571978VolkswagenOrange2acc1f571978VolkswagenOrange2acc1f571978VolkswagenOrange2acc1f571978VolkswagenOrange2acc1f571978VolkswagenOrange
402589131997VolkswagenWhite402589131997VolkswagenWhite402589131997VolkswagenWhite402589131997VolkswagenWhite402589131997VolkswagenWhite
9ce934051961FiatGreen9ce934051961FiatGreen9ce934051961FiatGreen9ce934051961FiatGreen9ce934051961FiatGreen
7169bc621985JaguarSilver7169bc621985JaguarSilver7169bc621985JaguarSilver7169bc621985JaguarSilver7169bc621985JaguarSilver
21abfecd1992HondaBlue21abfecd1992HondaBlue21abfecd1992HondaBlue21abfecd1992HondaBlue21abfecd1992HondaBlue
a798eaa71978VolvoOrangea798eaa71978VolvoOrangea798eaa71978VolvoOrangea798eaa71978VolvoOrangea798eaa71978VolvoOrange
877137e42008BMWBlack877137e42008BMWBlack877137e42008BMWBlack877137e42008BMWBlack877137e42008BMWBlack
c7c61ba21985HondaOrangec7c61ba21985HondaOrangec7c61ba21985HondaOrangec7c61ba21985HondaOrangec7c61ba21985HondaOrange
3b1ac6a21999RenaultRed3b1ac6a21999RenaultRed3b1ac6a21999RenaultRed3b1ac6a21999RenaultRed3b1ac6a21999RenaultRed
20df38cd2004MercedesBrown20df38cd2004MercedesBrown20df38cd2004MercedesBrown20df38cd2004MercedesBrown20df38cd2004MercedesBrown
08f0664a1965RenaultWhite08f0664a1965RenaultWhite08f0664a1965RenaultWhite08f0664a1965RenaultWhite08f0664a1965RenaultWhite
f0e5f10a1997JaguarWhitef0e5f10a1997JaguarWhitef0e5f10a1997JaguarWhitef0e5f10a1997JaguarWhitef0e5f10a1997JaguarWhite
829e51731988RenaultSilver829e51731988RenaultSilver829e51731988RenaultSilver829e51731988RenaultSilver829e51731988RenaultSilver
418989422001VolkswagenYellow418989422001VolkswagenYellow418989422001VolkswagenYellow418989422001VolkswagenYellow418989422001VolkswagenYellow
cb3d8c221966FordYellowcb3d8c221966FordYellowcb3d8c221966FordYellowcb3d8c221966FordYellowcb3d8c221966FordYellow
7fdf4b3a1973JaguarSilver7fdf4b3a1973JaguarSilver7fdf4b3a1973JaguarSilver7fdf4b3a1973JaguarSilver7fdf4b3a1973JaguarSilver
d9ecb1da1976BMWYellowd9ecb1da1976BMWYellowd9ecb1da1976BMWYellowd9ecb1da1976BMWYellowd9ecb1da1976BMWYellow
c8db9e661992FiatBrownc8db9e661992FiatBrownc8db9e661992FiatBrownc8db9e661992FiatBrownc8db9e661992FiatBrown
1480882b1997VolkswagenMaroon1480882b1997VolkswagenMaroon1480882b1997VolkswagenMaroon1480882b1997VolkswagenMaroon1480882b1997VolkswagenMaroon
9e7458691998FordWhite9e7458691998FordWhite9e7458691998FordWhite9e7458691998FordWhite9e7458691998FordWhite
f6f72e5a1967JaguarOrangef6f72e5a1967JaguarOrangef6f72e5a1967JaguarOrangef6f72e5a1967JaguarOrangef6f72e5a1967JaguarOrange
8315bfd72006FordBrown8315bfd72006FordBrown8315bfd72006FordBrown8315bfd72006FordBrown8315bfd72006FordBrown
972b03d61989FiatMaroon972b03d61989FiatMaroon972b03d61989FiatMaroon972b03d61989FiatMaroon972b03d61989FiatMaroon
5a87b2101977FiatBrown5a87b2101977FiatBrown5a87b2101977FiatBrown5a87b2101977FiatBrown5a87b2101977FiatBrown
c15add382009MercedesGreenc15add382009MercedesGreenc15add382009MercedesGreenc15add382009MercedesGreenc15add382009MercedesGreen
58ef4bee1966VolkswagenOrange58ef4bee1966VolkswagenOrange58ef4bee1966VolkswagenOrange58ef4bee1966VolkswagenOrange58ef4bee1966VolkswagenOrange
6472c1ff1980VolvoMaroon6472c1ff1980VolvoMaroon6472c1ff1980VolvoMaroon6472c1ff1980VolvoMaroon6472c1ff1980VolvoMaroon
d9dd929c1965FiatBlackd9dd929c1965FiatBlackd9dd929c1965FiatBlackd9dd929c1965FiatBlackd9dd929c1965FiatBlack
e69e2f701984FordBluee69e2f701984FordBluee69e2f701984FordBluee69e2f701984FordBluee69e2f701984FordBlue
b28a823e1965VolkswagenMaroonb28a823e1965VolkswagenMaroonb28a823e1965VolkswagenMaroonb28a823e1965VolkswagenMaroonb28a823e1965VolkswagenMaroon
a6af073c2008RenaultMaroona6af073c2008RenaultMaroona6af073c2008RenaultMaroona6af073c2008RenaultMaroona6af073c2008RenaultMaroon
ef3b4d981965BMWGreenef3b4d981965BMWGreenef3b4d981965BMWGreenef3b4d981965BMWGreenef3b4d981965BMWGreen
8c693e261973MercedesMaroon8c693e261973MercedesMaroon8c693e261973MercedesMaroon8c693e261973MercedesMaroon8c693e261973MercedesMaroon
090a36f81965VolkswagenBlue090a36f81965VolkswagenBlue090a36f81965VolkswagenBlue090a36f81965VolkswagenBlue090a36f81965VolkswagenBlue
b7141f9c1960RenaultRedb7141f9c1960RenaultRedb7141f9c1960RenaultRedb7141f9c1960RenaultRedb7141f9c1960RenaultRed
a370d6fe2005VolvoMaroona370d6fe2005VolvoMaroona370d6fe2005VolvoMaroona370d6fe2005VolvoMaroona370d6fe2005VolvoMaroon
f145ebb21961FiatYellowf145ebb21961FiatYellowf145ebb21961FiatYellowf145ebb21961FiatYellowf145ebb21961FiatYellow
2764e9591999FordRed2764e9591999FordRed2764e9591999FordRed2764e9591999FordRed2764e9591999FordRed
21047ecf1982MercedesBrown21047ecf1982MercedesBrown21047ecf1982MercedesBrown21047ecf1982MercedesBrown21047ecf1982MercedesBrown
bc73202f1977RenaultBlackbc73202f1977RenaultBlackbc73202f1977RenaultBlackbc73202f1977RenaultBlackbc73202f1977RenaultBlack
4992c04b1975HondaMaroon4992c04b1975HondaMaroon4992c04b1975HondaMaroon4992c04b1975HondaMaroon4992c04b1975HondaMaroon
b3da95441972BMWSilverb3da95441972BMWSilverb3da95441972BMWSilverb3da95441972BMWSilverb3da95441972BMWSilver
8756734c1974VolkswagenWhite8756734c1974VolkswagenWhite8756734c1974VolkswagenWhite8756734c1974VolkswagenWhite8756734c1974VolkswagenWhite
448f3d2f1972AudiWhite448f3d2f1972AudiWhite448f3d2f1972AudiWhite448f3d2f1972AudiWhite448f3d2f1972AudiWhite
528fc2e91998RenaultGreen528fc2e91998RenaultGreen528fc2e91998RenaultGreen528fc2e91998RenaultGreen528fc2e91998RenaultGreen
3b3d7d681967AudiBlack3b3d7d681967AudiBlack3b3d7d681967AudiBlack3b3d7d681967AudiBlack3b3d7d681967AudiBlack

Frozen Rows

IdYearBrandColor
5e59267a1996AudiOrange
cb9f3d0c1963JaguarBrown
33e833412008RenaultGreen
0ca8bdd11967MercedesGreen
48fd12501996FordYellow
208a9c3e2008RenaultRed
1c2a40951972RenaultWhite
9b27a24e1986HondaSilver
999685782008VolvoGreen
45afc4491977HondaSilver
dc09fa2f2004FordMaroon
fcd0e2cc1990AudiBlue
8e2076dd2001FiatBlack
19f343b51975VolkswagenBlue
49a0560b2006HondaSilver
74a4067b1991HondaBlack
2c2e24b11986AudiRed
1a7865562001HondaRed
5d0245e51980HondaWhite
75e5c0891971HondaGreen
43bf5d251984JaguarMaroon
2413d5761997BMWSilver
5345152f1973VolkswagenOrange
a32fb9a31969FiatGreen
42b75c971985VolkswagenOrange
b7dd82eb1999VolkswagenMaroon
cb3a640f1998FiatGreen
2d17fed71969AudiRed
ce86aada1989BMWOrange
cdce3d101975BMWGreen
f95a05fb1994AudiOrange
3b5892041982VolkswagenMaroon
a6f6709b1973HondaBlue
f257271a1980FordBlack
918e16762001HondaBlack
c32239c41987VolkswagenSilver
92f206b21966JaguarWhite
2a68d2271969VolkswagenBlue
143875711994JaguarRed
cff358b91996RenaultRed
2d0b49911972AudiWhite
a3922ad02005FordBlack
298f56ce1992HondaBlack
2217463e1998JaguarBlue
214875931988BMWSilver
4bd8635a1962MercedesBlue
14cb08472007VolvoSilver
5ce2ded81963VolkswagenYellow
bd5a44f71977HondaRed
e71aa53a2002BMWBlue

Frozen Columns

Id
db6af786
62f0730b
5204465b
0ea77d4d
73367b60
c34d5980
71d21f7d
357db2a8
f33d7daa
c81d8340
683f3966
8a071929
51f195ed
3fed1309
ec16731e
34b5c3ea
3cf58a62
89014598
4217180b
36b1ffb1
273a11a7
e3d8165f
00f85e07
6e0f95f6
640de93c
223df263
fb4d2723
8b61c2e8
38dac043
bdea4ba8
053cb35c
0a6e07f2
10b12116
c3ec0a0e
d2364f36
160bfeed
92066e00
162e19f9
354dc268
a309622a
acfaa5a4
7d35a822
b382d3be
e09633dc
801ba3e7
3b07006b
132af1c5
8ca8efde
e83df086
7ee6bc65
YearBrandColor
1973RenaultBlack
1965FordBlack
1968AudiGreen
1961VolkswagenSilver
2007RenaultRed
1979VolkswagenBlue
2007MercedesYellow
1972VolkswagenRed
1992HondaSilver
1961MercedesSilver
1975HondaSilver
1990FordGreen
1965FiatWhite
2008FordBlue
1999BMWBrown
2000FordYellow
1995MercedesBrown
2008VolkswagenOrange
1989MercedesYellow
1975VolvoBlack
1977AudiYellow
1969JaguarRed
1978FordBlack
1968JaguarSilver
1995VolvoGreen
1960VolvoBlue
1985AudiSilver
2001BMWGreen
1960HondaOrange
1987HondaWhite
1963MercedesSilver
1961RenaultMaroon
1999RenaultBlue
1970FiatSilver
1987BMWGreen
2008AudiRed
2009AudiOrange
1989RenaultRed
1993FiatBlack
1992AudiRed
2006AudiBrown
1995RenaultRed
2002FordRed
1982AudiWhite
1961BMWSilver
1974FordMaroon
2007JaguarYellow
1995HondaGreen
1961AudiBrown
1963MercedesRed

On-Demand Data

IdYearBrandColor
0fc70eea1982BMWMaroon
90f5d86d1984MercedesBlack
a63258c71968FordBrown
d21e402b1962VolvoBrown
2d5f68bd1964AudiGreen
6c6572691964AudiYellow
5f4ea3921990AudiBrown
74b951961960HondaRed
3b682d781979VolkswagenWhite
6688141b1960HondaSilver
320f144c2006VolkswagenMaroon
1d0f11151973FiatWhite
e4649b3d1982MercedesOrange
4cace2a81995MercedesBlue
293830db1992RenaultSilver
16fea3912003HondaMaroon
687a8ae71995FordBlue
74f4e32e1982AudiRed
a373d6611997MercedesWhite
6813161f2005AudiRed

Virtual Scrolling - 20000 Rows

IdYearBrandColor
4c6e5bd21973AudiBlack
878dd4661960AudiBlue
678d04c51987HondaOrange
0ec029fe1991VolkswagenWhite
3b2b04821968HondaBlack
ea920b0f1962FiatWhite
3dc942e11974MercedesMaroon
094e2edb1974AudiGreen
cf6bbdc11961FordBlack
0cbdd8011989RenaultRed
4bdaae032006BMWBlack
848b68981961RenaultGreen
92a6df6c1995FordWhite
9cc302af1973JaguarSilver
321ba2e91973VolkswagenGreen
857ba4431982MercedesOrange
1751da061960VolkswagenWhite
2879185e2006MercedesMaroon
d7a0099a1985FiatBrown
5c0906571972RenaultRed
41410caa1994RenaultMaroon
9ed7cec51994VolkswagenBrown
76068eab1989BMWBlack
8cdfabdd1965RenaultYellow
326b4c1b1983BMWYellow
c320aa8d2008BMWYellow
cc6626681962MercedesBrown
007d5dc51974FiatBlue
4fde9b411997HondaGreen
61ce907d1965VolkswagenOrange
efbf0cbc1962RenaultRed
aa879f651981FiatYellow
cfce8fc82003MercedesYellow
5f27e66b1994BMWRed
7468d5c11995HondaGreen
fb825c731960AudiMaroon
5ad18cfb1981AudiBlue
bcdee99a1982VolkswagenSilver
13a8bf762006AudiWhite
1322b4fa1981FiatSilver
<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>