Mirage LIVE PREVIEW

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
185c69c01968VolkswagenGreen
05fb837b1987VolkswagenBlue
9ba964ef1995BMWSilver
7bc8b7d21978FiatRed
0ce8c4571963HondaGreen
4066ae822007VolvoYellow
8f070d191971VolkswagenOrange
393c024d2009FordOrange
2e5a17db1973VolvoGreen
4b5e5fd61992FiatSilver
df03a3ee1963VolvoOrange
4fa1af031977JaguarBrown
96cfb7721968JaguarGreen
ed65dc542007VolkswagenBlack
8995e3721962AudiBlack
9365c9791971JaguarYellow
7035003d1962JaguarBrown
6949a7551966RenaultBlue
b2d01aa21960RenaultRed
05f24a141991VolvoBrown
9cbde7961981RenaultWhite
40b24c581992AudiSilver
f0adc4842005MercedesMaroon
138171d81973FiatYellow
1dfd26a81964FordGreen
83a548de1994JaguarYellow
81717ec11987BMWOrange
be18fa1a1989AudiWhite
b5b0b9bf1963JaguarRed
3ba660fd2008BMWRed
5d0ec05a1983JaguarRed
a1d8fbd12004MercedesSilver
ab76483b2002JaguarMaroon
65df740a2009MercedesSilver
1d9262112004MercedesWhite
8362940e1976MercedesBrown
30db303a2005MercedesRed
a346efde1982AudiGreen
fdc37dce1995AudiGreen
e341b5bd1965AudiMaroon
89cd8fa31964RenaultBrown
e23361a81984FordMaroon
d926245f1974BMWOrange
8f571d181990FordYellow
7a726be72002HondaOrange
34e445d01968JaguarBrown
21fffea71969HondaOrange
14b6f0251970VolvoRed
3226742c1999AudiMaroon
4d2773201972FiatBrown

Horizontal

IdYearBrandColor
b82ee3d01973FordOrange
d8d25ebd1976VolkswagenSilver
7ca544511993JaguarMaroon
471451c41961VolvoYellow
d88851471972HondaBlue
8a335f601994RenaultBlue
13cb99e11961JaguarBlack
6b39a26d1977AudiYellow
c54cbf871992RenaultSilver
169705972008FordBlue

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
c3d1ae722009BMWBluec3d1ae722009BMWBluec3d1ae722009BMWBluec3d1ae722009BMWBluec3d1ae722009BMWBlue
b447f9131975BMWMaroonb447f9131975BMWMaroonb447f9131975BMWMaroonb447f9131975BMWMaroonb447f9131975BMWMaroon
718c268a2001BMWSilver718c268a2001BMWSilver718c268a2001BMWSilver718c268a2001BMWSilver718c268a2001BMWSilver
697a4bab1998MercedesOrange697a4bab1998MercedesOrange697a4bab1998MercedesOrange697a4bab1998MercedesOrange697a4bab1998MercedesOrange
bf322ca71979MercedesMaroonbf322ca71979MercedesMaroonbf322ca71979MercedesMaroonbf322ca71979MercedesMaroonbf322ca71979MercedesMaroon
28fedf692008FordBlue28fedf692008FordBlue28fedf692008FordBlue28fedf692008FordBlue28fedf692008FordBlue
5131b2b21977HondaGreen5131b2b21977HondaGreen5131b2b21977HondaGreen5131b2b21977HondaGreen5131b2b21977HondaGreen
ab5933ac1973HondaMaroonab5933ac1973HondaMaroonab5933ac1973HondaMaroonab5933ac1973HondaMaroonab5933ac1973HondaMaroon
87d2a2c11962HondaSilver87d2a2c11962HondaSilver87d2a2c11962HondaSilver87d2a2c11962HondaSilver87d2a2c11962HondaSilver
5a79e2022006JaguarRed5a79e2022006JaguarRed5a79e2022006JaguarRed5a79e2022006JaguarRed5a79e2022006JaguarRed
d8bb9e451968FiatBlued8bb9e451968FiatBlued8bb9e451968FiatBlued8bb9e451968FiatBlued8bb9e451968FiatBlue
2d5a582b2005JaguarGreen2d5a582b2005JaguarGreen2d5a582b2005JaguarGreen2d5a582b2005JaguarGreen2d5a582b2005JaguarGreen
76f3fc021989FiatBlack76f3fc021989FiatBlack76f3fc021989FiatBlack76f3fc021989FiatBlack76f3fc021989FiatBlack
ba15d8f21964BMWBrownba15d8f21964BMWBrownba15d8f21964BMWBrownba15d8f21964BMWBrownba15d8f21964BMWBrown
5010c1aa1974HondaMaroon5010c1aa1974HondaMaroon5010c1aa1974HondaMaroon5010c1aa1974HondaMaroon5010c1aa1974HondaMaroon
1b5bb6552009MercedesBrown1b5bb6552009MercedesBrown1b5bb6552009MercedesBrown1b5bb6552009MercedesBrown1b5bb6552009MercedesBrown
a9446e751972MercedesSilvera9446e751972MercedesSilvera9446e751972MercedesSilvera9446e751972MercedesSilvera9446e751972MercedesSilver
a499cde72004HondaReda499cde72004HondaReda499cde72004HondaReda499cde72004HondaReda499cde72004HondaRed
7755e9bd1980VolkswagenBlue7755e9bd1980VolkswagenBlue7755e9bd1980VolkswagenBlue7755e9bd1980VolkswagenBlue7755e9bd1980VolkswagenBlue
2d1eaaef1970HondaSilver2d1eaaef1970HondaSilver2d1eaaef1970HondaSilver2d1eaaef1970HondaSilver2d1eaaef1970HondaSilver
fcc18a092006MercedesRedfcc18a092006MercedesRedfcc18a092006MercedesRedfcc18a092006MercedesRedfcc18a092006MercedesRed
f59933722000RenaultSilverf59933722000RenaultSilverf59933722000RenaultSilverf59933722000RenaultSilverf59933722000RenaultSilver
2d23c3001991HondaBlue2d23c3001991HondaBlue2d23c3001991HondaBlue2d23c3001991HondaBlue2d23c3001991HondaBlue
6623f7461993FiatRed6623f7461993FiatRed6623f7461993FiatRed6623f7461993FiatRed6623f7461993FiatRed
1fbac8141999AudiBlack1fbac8141999AudiBlack1fbac8141999AudiBlack1fbac8141999AudiBlack1fbac8141999AudiBlack
af3127ad1989HondaMaroonaf3127ad1989HondaMaroonaf3127ad1989HondaMaroonaf3127ad1989HondaMaroonaf3127ad1989HondaMaroon
65b97de92008VolkswagenBlue65b97de92008VolkswagenBlue65b97de92008VolkswagenBlue65b97de92008VolkswagenBlue65b97de92008VolkswagenBlue
d87edd231997VolkswagenYellowd87edd231997VolkswagenYellowd87edd231997VolkswagenYellowd87edd231997VolkswagenYellowd87edd231997VolkswagenYellow
dace916b1980VolkswagenOrangedace916b1980VolkswagenOrangedace916b1980VolkswagenOrangedace916b1980VolkswagenOrangedace916b1980VolkswagenOrange
301335991987MercedesWhite301335991987MercedesWhite301335991987MercedesWhite301335991987MercedesWhite301335991987MercedesWhite
81c1b3421971HondaYellow81c1b3421971HondaYellow81c1b3421971HondaYellow81c1b3421971HondaYellow81c1b3421971HondaYellow
c0ad9f9b2000FiatBlackc0ad9f9b2000FiatBlackc0ad9f9b2000FiatBlackc0ad9f9b2000FiatBlackc0ad9f9b2000FiatBlack
ac9782ad2004AudiBlackac9782ad2004AudiBlackac9782ad2004AudiBlackac9782ad2004AudiBlackac9782ad2004AudiBlack
58a4fbf71975BMWBlack58a4fbf71975BMWBlack58a4fbf71975BMWBlack58a4fbf71975BMWBlack58a4fbf71975BMWBlack
64914fd31975VolkswagenRed64914fd31975VolkswagenRed64914fd31975VolkswagenRed64914fd31975VolkswagenRed64914fd31975VolkswagenRed
ceb4c6fd1975MercedesRedceb4c6fd1975MercedesRedceb4c6fd1975MercedesRedceb4c6fd1975MercedesRedceb4c6fd1975MercedesRed
d5c0fb741986AudiGreend5c0fb741986AudiGreend5c0fb741986AudiGreend5c0fb741986AudiGreend5c0fb741986AudiGreen
c758c4a61978MercedesBluec758c4a61978MercedesBluec758c4a61978MercedesBluec758c4a61978MercedesBluec758c4a61978MercedesBlue
6c875c171969BMWBlue6c875c171969BMWBlue6c875c171969BMWBlue6c875c171969BMWBlue6c875c171969BMWBlue
aa1454291981FiatBlueaa1454291981FiatBlueaa1454291981FiatBlueaa1454291981FiatBlueaa1454291981FiatBlue
c795ef001970VolkswagenSilverc795ef001970VolkswagenSilverc795ef001970VolkswagenSilverc795ef001970VolkswagenSilverc795ef001970VolkswagenSilver
bae496f51999MercedesBluebae496f51999MercedesBluebae496f51999MercedesBluebae496f51999MercedesBluebae496f51999MercedesBlue
14bdeb821971JaguarGreen14bdeb821971JaguarGreen14bdeb821971JaguarGreen14bdeb821971JaguarGreen14bdeb821971JaguarGreen
7364eb6d1961FordSilver7364eb6d1961FordSilver7364eb6d1961FordSilver7364eb6d1961FordSilver7364eb6d1961FordSilver
fd062b631981VolkswagenWhitefd062b631981VolkswagenWhitefd062b631981VolkswagenWhitefd062b631981VolkswagenWhitefd062b631981VolkswagenWhite
bb25a5741987BMWOrangebb25a5741987BMWOrangebb25a5741987BMWOrangebb25a5741987BMWOrangebb25a5741987BMWOrange
6bd8da8d1989HondaYellow6bd8da8d1989HondaYellow6bd8da8d1989HondaYellow6bd8da8d1989HondaYellow6bd8da8d1989HondaYellow
11bf6d9a1984VolkswagenWhite11bf6d9a1984VolkswagenWhite11bf6d9a1984VolkswagenWhite11bf6d9a1984VolkswagenWhite11bf6d9a1984VolkswagenWhite
45049cb82004VolkswagenBlack45049cb82004VolkswagenBlack45049cb82004VolkswagenBlack45049cb82004VolkswagenBlack45049cb82004VolkswagenBlack
716083942003JaguarYellow716083942003JaguarYellow716083942003JaguarYellow716083942003JaguarYellow716083942003JaguarYellow

Frozen Rows

IdYearBrandColor
eb2933fd2009MercedesYellow
83d957841998MercedesRed
58a0d7fc1990AudiMaroon
b7c006901976BMWSilver
9729d4f12006RenaultGreen
22665bdc1978JaguarBrown
f6ebde4e1996FiatBlack
c7c3c5401979VolvoWhite
6c1378692001RenaultOrange
3d56765a1981FordYellow
7d9596141986FiatWhite
51d84f861981HondaSilver
5823c6fb1970JaguarMaroon
0e9e69081969VolvoMaroon
741ce34c2007FiatBrown
b725902b1966BMWGreen
ab14d4e71996MercedesSilver
22b854891982FiatMaroon
4b5c354a2005FiatSilver
4db5d20d2009VolkswagenYellow
dee876d62008JaguarBlue
9201101a1971MercedesBrown
563634741976AudiOrange
20747f061975VolvoMaroon
ed7599eb1985AudiBlack
30a22a231965VolkswagenOrange
079c6cbf1973BMWWhite
3f8339a61999JaguarSilver
bdb7654c1968RenaultBlue
bc0cfd081964JaguarMaroon
69b9cc3e1986FordWhite
ca9d9cb02005FiatOrange
101d7d2e1975FordMaroon
dec8b47a1984BMWBrown
99cf3b601966AudiBlack
2a83d1b22001BMWSilver
e8ddb10f2007VolvoGreen
1bc644521996FordSilver
ccdc09191976VolkswagenMaroon
750d94092002FiatOrange
70ef22b11989AudiBrown
9a67d8311976BMWGreen
aeb5bdc71969MercedesBlack
ba4f75ad2003FiatBlue
a0e8b9fe1963FordRed
2f589b531988FordBlack
0a98e3a11986RenaultBlue
12f1fef92000HondaRed
7d276a161995FiatRed
02dcba601997FordYellow

Frozen Columns

Id
b9757fe7
859bba87
08df3968
c9d505c5
5c8860ed
a11bb7ec
7b082efb
18dce6b4
254fa114
a6cd77d6
9ab80c22
e5e9de68
c948f18d
e9b76e8b
6ecc97c9
7b04030f
530f69d9
0384c4d7
f1186087
e4a60d56
ba8f0aad
5b557727
5a28106b
a4adee47
922b66c9
490418f0
3e7e57a5
1a46f945
cc7b4e6c
1e3db9e6
64077974
d6f95745
d22c0b02
d884db90
445aebed
6ba78f04
716840a7
4df551bd
97e272a5
71346cab
c0cc4325
f19ef2b6
afe3814c
c5b610df
e025b1af
3286a07b
f3b16f82
18970a0c
10517bdf
5108608c
YearBrandColor
2008HondaBrown
1980VolkswagenMaroon
2001AudiBlue
2008MercedesOrange
1968MercedesGreen
1978FiatYellow
2008RenaultGreen
2004MercedesBlue
1961VolvoGreen
1971AudiWhite
1963RenaultGreen
1967FordRed
1969AudiBlack
1978VolvoMaroon
1989RenaultRed
1961JaguarSilver
1992BMWMaroon
1974HondaBlack
1968FordOrange
1960HondaRed
1986FordBlue
1964FiatWhite
1965BMWBrown
1980BMWSilver
1989BMWWhite
2002BMWYellow
1962FiatBlue
1994VolkswagenGreen
1989VolvoOrange
1986RenaultBrown
2009FordBrown
2005RenaultWhite
1971FordSilver
1968HondaSilver
1965FiatGreen
1998FiatBlack
1975FordGreen
1985JaguarBlack
1988FiatBlue
1986MercedesBlack
1985VolkswagenGreen
1998VolvoSilver
1968VolkswagenWhite
1971HondaYellow
1976FordBlue
1960AudiWhite
1995FordBlack
1967FiatRed
1961FiatMaroon
1975FiatBrown

On-Demand Data

IdYearBrandColor
2bf4e0fa2006FordRed
12a6854d2008VolkswagenBlue
c6899cf81963VolvoBlack
0d5b41171992RenaultSilver
065933611982HondaSilver
a79d4f882006RenaultBlue
e06d311d1989AudiGreen
e1ee0ef72007JaguarMaroon
429e2ad31993JaguarBlack
f37a698d1967HondaMaroon
13115ca41996JaguarBrown
bc23a2a92005JaguarBlue
c8a7b7c92007BMWRed
97f422c11990AudiOrange
396dd33d2006FordRed
66549fdc2009BMWGreen
bfcc3fa71960BMWYellow
4674d81c1993RenaultSilver
935ca7511975BMWSilver
bd2e08691967RenaultBlue

Virtual Scrolling - 20000 Rows

IdYearBrandColor
5de3efa21969AudiGreen
b47e8b852006HondaBlue
559b70f92005FordRed
b585ef5b1978VolkswagenWhite
bfe833371960MercedesOrange
776100e72001VolkswagenYellow
8a9aba512009VolvoGreen
27c7bba51967JaguarSilver
c8706d912000MercedesSilver
b25fd4e91997VolvoBrown
c46761e21974VolvoBlue
1dd9ea731991BMWMaroon
aff4749d1964HondaBlue
549407161995HondaWhite
830797ad1973AudiBlue
b0aa3e701982RenaultMaroon
15d645f12007FiatYellow
564a3f421972BMWOrange
43f950231986VolkswagenOrange
27abbe151974BMWYellow
c7bcb3682004AudiMaroon
edcaafd01969RenaultBlack
94c1df9e1970VolkswagenRed
800c43351975JaguarSilver
61ca5ce91969VolvoYellow
4da737a31980VolvoMaroon
e5035b5b1981MercedesRed
e47e49381995JaguarOrange
399446a61999VolkswagenSilver
c71af5752009VolvoRed
18ab23c51998HondaOrange
673e274b1970BMWYellow
e83a5c261968MercedesGreen
cecd1ec31987HondaOrange
59ac7dfe1963FordBrown
354826bf2007HondaYellow
267766221988AudiYellow
c00c8f7b1999FordGreen
b7272b7a1979AudiYellow
e27b9c101963BMWBlue
<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>