Locale

Change the locale of the datepicker, schedule and client side validation messages.

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Czech
Greek
Persian
Finnish
Danish
Hindi
Indonesian
Croatian
Japanese
Hungarian
Hebrew
Georgian
Central Kurdish
Khmer
Kyrgyz
Kazakh
Lithuanian
Latvian
Malay
Norwegian
Polish
Romanian
Russian
Slovak
Slovenian
Serbian
Serbian
Swedish
Thai
Turkish
Ukrainian
Vietnamese
Chinese
Chinese

Input Style

Themes

PrimeOne
Saga Saga
Vela Vela
Arya Arya
Bootstrap
bootstrap4-blue-light Bootstrap Blue
bootstrap4-purple-light Bootstrap Purple
bootstrap4-blue-dark Bootstrap Blue
bootstrap4-purple-dark Bootstrap Purple
Material Design
material-indigo-light Indigo
material-deeppurple-light' Deep Purple
material-indigo-dark Indigo
material-deeppurple-dark' Deep Purple
Material Design Compact
material-indigo-light Indigo
material-deeppurple-light' Deep Purple
material-indigo-dark Indigo
material-deeppurple-dark' Deep Purple

DataTable Scroll

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

Vertical
NameCountryRepresentativeStatus
Octavia M OldroydUnited KingdomBernardo Dominic UNQUALIFIED
Mujtaba X WaycottCanadaElwin Sharvill QUALIFIED
Clifford O MacleadAustraliaOnyama Limba UNQUALIFIED
Leja C CaudyUnited KingdomAmy Elsner PROPOSAL
Mayumi Y StockhamRussiaAsiya Javayant UNQUALIFIED
Darci L PaprockiIndiaAsiya Javayant NEGOTIATION
Nicolas T PaprockiAustraliaXuxue Feng QUALIFIED
Wickens X OstroskyCanadaAmy Elsner RENEWAL
Salvatore M DoeUnited KingdomAmy Elsner NEGOTIATION
Chavez X StockhamAustraliaAsiya Javayant UNQUALIFIED
Silvio T TollnerBrazilAmy Elsner NEW
Salvatore W GarufiJapanIvan Magalhaes UNQUALIFIED
Mayumi P BriddickJapanIoni Bowcher QUALIFIED
Emily K FerenczCanadaElwin Sharvill PROPOSAL
Tony U WieserIndiaXuxue Feng NEW
Jeanfrancois N AmigonGermanyIvan Magalhaes UNQUALIFIED
Aditya B PerinIndiaIoni Bowcher UNQUALIFIED
Chavez A OldroydBrazilStephen Shaw QUALIFIED
Juan E SaylorsBrazilAmy Elsner NEGOTIATION
James U SaylorsBrazilAsiya Javayant NEW
Murillo K CampainIndiaBernardo Dominic PROPOSAL
Maria F BowleyItalyXuxue Feng NEW
Chavez N RulapaughArgentinaAnna Fali NEGOTIATION
Sinclair I CampainFranceBernardo Dominic UNQUALIFIED
Adams O TollnerArgentinaBernardo Dominic NEGOTIATION
Arvin W BriddickSpainOnyama Limba NEGOTIATION
Sinclair N GarufiBrazilXuxue Feng QUALIFIED
Aruna W PaprockiArgentinaIoni Bowcher RENEWAL
Aditya Y SaylorsJapanAnna Fali NEW
Nicolas Q WieserGermanyAnna Fali NEW
Francesco M SaylorsJapanElwin Sharvill NEW
Stacey K ShinkoGermanyOnyama Limba NEGOTIATION
James N WaycottFranceAsiya Javayant UNQUALIFIED
Greenwood U IturbideBrazilElwin Sharvill UNQUALIFIED
Emily E GillianUnited KingdomAnna Fali RENEWAL
Deepesh J PerinArgentinaIoni Bowcher PROPOSAL
Leja Z StockhamRussiaIvan Magalhaes NEGOTIATION
Cody G PoquetteGermanyElwin Sharvill RENEWAL
Salvatore Y ChuiRussiaAnna Fali NEW
Maria I SlusarskiBrazilIvan Magalhaes NEW
Ashley T StensethGermanyOnyama Limba RENEWAL
Aditya Y FerenczAustraliaXuxue Feng PROPOSAL
Julie G DarakjyJapanAnna Fali RENEWAL
James E SaylorsItalyIvan Magalhaes NEW
Ricardo L RulapaughBrazilOnyama Limba NEW
Ricardo J RulapaughFranceStephen Shaw QUALIFIED
Octavia Y GlickRussiaIvan Magalhaes NEW
Aditya R RoysterBrazilIvan Magalhaes RENEWAL
Rodrigues J IturbideIndiaStephen Shaw QUALIFIED
James G CaldareraGermanyStephen Shaw RENEWAL
Horizontal
NameCountryRepresentativeStatus
Stacey B InouyeUnited KingdomAnna Fali QUALIFIED
Greenwood T VenereArgentinaIoni Bowcher QUALIFIED
James P MarrierBrazilOnyama Limba RENEWAL
Arvin R KolmetzItalyStephen Shaw NEW
Aruna S ButtItalyIvan Magalhaes RENEWAL
Salvatore A PerinJapanStephen Shaw NEGOTIATION
Morrow Z TollnerFranceOnyama Limba NEGOTIATION
Munro C CaldareraSpainStephen Shaw NEGOTIATION
Maria W AmigonGermanyIoni Bowcher QUALIFIED
Ashley O FerenczIndiaElwin Sharvill UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000David G SergiSpain2024-09-25Chanay, Jeffrey A Esq PROPOSAL8Xuxue Feng
1001Jeanfrancois T KuskoBrazil2024-09-05Feiner Bros UNQUALIFIED88Asiya Javayant
1002Deepesh M AmigonIndia2024-09-23Printing Dimensions QUALIFIED68Xuxue Feng
1003Isabel D OldroydBrazil2024-09-02Chanay, Jeffrey A Esq RENEWAL6Amy Elsner
1004Aika N BologniaBrazil2024-08-31King, Christopher A Esq QUALIFIED45Ioni Bowcher
1005Murillo U StensethUnited Kingdom2024-09-24Printing Dimensions NEGOTIATION92Ioni Bowcher
1006Octavia L KuskoRussia2024-09-18Rangoni Of Florence UNQUALIFIED21Ioni Bowcher
1007Greenwood A CaldareraGermany2024-09-04Benton, John B Jr NEGOTIATION30Ioni Bowcher
1008Octavia G BowleyIndia2024-09-15Truhlar And Truhlar Attys QUALIFIED3Onyama Limba
1009Leon F NickaJapan2024-09-11Buckley Miller Wright NEGOTIATION16Asiya Javayant
1010Salvatore I GlickIndia2024-09-21Rangoni Of Florence NEGOTIATION63Elwin Sharvill
1011Rodrigues D DarakjyIndia2024-08-30Feltz Printing Service UNQUALIFIED42Xuxue Feng
1012Stacey Q WieserArgentina2024-08-31Feiner Bros NEW62Xuxue Feng
1013Antonio B AmigonJapan2024-09-24Feltz Printing Service NEW71Xuxue Feng
1014Salvatore R DilliardBrazil2024-09-09Truhlar And Truhlar Attys NEW98Ioni Bowcher
1015Ivar A RulapaughUnited Kingdom2024-09-11Buckley Miller Wright NEGOTIATION36Onyama Limba
1016Morrow Q StockhamRussia2024-08-31Benton, John B Jr RENEWAL8Bernardo Dominic
1017Izzy V PerinFrance2024-09-08Morlong Associates RENEWAL58Stephen Shaw
1018Maria G GlickIndia2024-08-30Chanay, Jeffrey A Esq QUALIFIED34Onyama Limba
1019Arvin G GauchoAustralia2024-09-10King, Christopher A Esq PROPOSAL19Onyama Limba
1020Tony T CaldareraBrazil2024-08-30Chemel, James L Cpa QUALIFIED41Anna Fali
1021Aditya W PoquetteCanada2024-09-15Printing Dimensions RENEWAL45Ioni Bowcher
1022Julie O PoquetteGermany2024-08-30Feltz Printing Service QUALIFIED11Xuxue Feng
1023Octavia P SaylorsGermany2024-09-19Dorl, James J Esq UNQUALIFIED86Ioni Bowcher
1024Juan U OldroydAustralia2024-09-09Rangoni Of Florence PROPOSAL7Bernardo Dominic
1025Maria U ButtArgentina2024-09-09Printing Dimensions RENEWAL40Xuxue Feng
1026Deepesh G MarrierCanada2024-08-27Chanay, Jeffrey A Esq UNQUALIFIED45Ioni Bowcher
1027Mujtaba W PaprockiGermany2024-09-02Feiner Bros UNQUALIFIED76Bernardo Dominic
1028Arvin F SergiFrance2024-09-15Buckley Miller Wright QUALIFIED26Xuxue Feng
1029Rodrigues T ShinkoRussia2024-09-11Morlong Associates PROPOSAL63Asiya Javayant
1030Mayumi A WhobreyFrance2024-09-06Commercial Press RENEWAL86Ioni Bowcher
1031Emily Q NestleUnited Kingdom2024-09-09Morlong Associates PROPOSAL33Elwin Sharvill
1032Isabel L GauchoGermany2024-09-02Feltz Printing Service NEGOTIATION59Stephen Shaw
1033Leja X FollerSpain2024-09-02Rousseaux, Michael Esq NEGOTIATION3Anna Fali
1034Chavez A RimIndia2024-09-23Morlong Associates PROPOSAL82Ioni Bowcher
1035Misaki Y CaldareraItaly2024-09-13Buckley Miller Wright NEW25Ivan Magalhaes
1036Silvio C GarufiRussia2024-09-02Truhlar And Truhlar Attys UNQUALIFIED36Anna Fali
1037Alejandro I KolmetzJapan2024-09-25Rangoni Of Florence UNQUALIFIED15Asiya Javayant
1038Salvatore B ChuiArgentina2024-09-06Feltz Printing Service UNQUALIFIED19Anna Fali
1039Ivar L RoysterIndia2024-08-29Chapman, Ross E Esq NEGOTIATION13Bernardo Dominic
1040Maisha P GauchoIndia2024-09-18Dorl, James J Esq PROPOSAL40Ivan Magalhaes
1041Arvin E TollnerItaly2024-08-27Feiner Bros PROPOSAL34Bernardo Dominic
1042Octavia L VenereArgentina2024-09-09Buckley Miller Wright QUALIFIED61Anna Fali
1043Deepesh A DilliardJapan2024-09-12Truhlar And Truhlar Attys QUALIFIED63Anna Fali
1044Sinclair Z GillianSpain2024-09-15Morlong Associates QUALIFIED99Ivan Magalhaes
1045Deepesh D SaylorsJapan2024-09-22Chapman, Ross E Esq QUALIFIED70Stephen Shaw
1046Johnson W FollerArgentina2024-09-16Chapman, Ross E Esq QUALIFIED40Ivan Magalhaes
1047Kadeem B CampainUnited Kingdom2024-09-10Feltz Printing Service QUALIFIED79Bernardo Dominic
1048Ricardo G GarufiFrance2024-09-16Buckley Miller Wright QUALIFIED63Stephen Shaw
1049James M GillianGermany2024-09-24Printing Dimensions UNQUALIFIED82Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Leon Q WhobreyIndiaAnna Fali QUALIFIED
Darci I NickaCanadaAsiya Javayant UNQUALIFIED
Kadeem E SergiBrazilIoni Bowcher NEW
Izzy F SlusarskiBrazilAsiya Javayant UNQUALIFIED
Murillo A RoysterAustraliaIoni Bowcher RENEWAL
Chavez R MacleadArgentinaIoni Bowcher RENEWAL
Julie K SchemmerAustraliaElwin Sharvill RENEWAL
Deepesh D GarufiUnited KingdomAmy Elsner UNQUALIFIED
Julie C FollerCanadaStephen Shaw PROPOSAL
Mayumi F NickaArgentinaElwin Sharvill UNQUALIFIED
Johnson D FerenczIndiaXuxue Feng QUALIFIED
Stacey A ButtBrazilAnna Fali QUALIFIED
Juan Z NickaUnited KingdomIvan Magalhaes PROPOSAL
Jeanfrancois B GarufiCanadaAmy Elsner NEW
Stacey J NickaRussiaAmy Elsner UNQUALIFIED
Mujtaba V AlbaresGermanyStephen Shaw NEGOTIATION
Morrow C VocelkaSpainXuxue Feng QUALIFIED
Stacey T ShinkoAustraliaAsiya Javayant QUALIFIED
Darci T WhobreyFranceOnyama Limba PROPOSAL
Jones R BowleyRussiaElwin Sharvill RENEWAL
Smith D AlbaresArgentinaStephen Shaw PROPOSAL
Ashley C CaldareraCanadaIoni Bowcher NEW
David Z AlbaresUnited KingdomStephen Shaw UNQUALIFIED
Smith L OstroskyIndiaBernardo Dominic PROPOSAL
Ashley V RimJapanAmy Elsner RENEWAL
Emily T FerenczGermanyStephen Shaw NEW
Julie A GarufiSpainElwin Sharvill PROPOSAL
Isabel Q MarrierItalyBernardo Dominic NEGOTIATION
Adams H SlusarskiFranceBernardo Dominic UNQUALIFIED
Morrow T WaycottCanadaElwin Sharvill NEW
Claire W StensethBrazilOnyama Limba QUALIFIED
Costa G GlickUnited KingdomIvan Magalhaes PROPOSAL
Juan Y CampainIndiaIoni Bowcher PROPOSAL
Stacey Z RulapaughGermanyStephen Shaw PROPOSAL
Smith F SchemmerCanadaBernardo Dominic NEW
Leja A DilliardGermanyBernardo Dominic NEGOTIATION
Cody N VenereCanadaStephen Shaw QUALIFIED
Chavez D BologniaCanadaStephen Shaw UNQUALIFIED
Smith A DoeArgentinaElwin Sharvill UNQUALIFIED
Maria T CaudySpainOnyama Limba UNQUALIFIED
Deepesh Q PoquetteSpainStephen Shaw NEW
Johnson E DarakjyIndiaXuxue Feng NEGOTIATION
Emily K GillianSpainIoni Bowcher PROPOSAL
Ashley U RulapaughGermanyOnyama Limba QUALIFIED
Adams F WaycottFranceElwin Sharvill RENEWAL
Maisha W PaprockiRussiaAnna Fali UNQUALIFIED
Silvio J NickaItalyElwin Sharvill QUALIFIED
Ashley F GauchoSpainIvan Magalhaes NEW
Ivar R MarrierItalyAmy Elsner PROPOSAL
Wickens U GlickCanadaIoni Bowcher QUALIFIED
Frozen Columns
Name
Sinclair N Foller
Aika U Slusarski
Maria D Figeroa
Kadeem X Malet
Isabel Y Marrier
Jeanfrancois E Iturbide
Leja W Saylors
Clifford A Ostrosky
Chavez S Rulapaugh
Munro W Waycott
Wickens P Perin
Faith E Poquette
Deepesh M Saylors
Mujtaba X Garufi
Silvio D Gaucho
Izzy Q Nicka
Jennifer P Ferencz
David Y Albares
Mayumi K Stockham
Aika A Whobrey
Aditya N Waycott
Misaki J Saylors
Rodrigues T Iturbide
Emily Z Royster
Munro P Iturbide
Ashley W Ostrosky
Francesco T Bolognia
Deepesh J Morasca
Cody S Iturbide
Misaki G Saylors
Mayumi K Foller
Ricardo U Waycott
Julie T Foller
Aruna N Iturbide
Isabel F Butt
Jones C Stockham
Isabel Q Morasca
Aditya B Morasca
Leon V Slusarski
Aika M Darakjy
Costa Z Caudy
Johnson A Gaucho
Leja P Caudy
Izzy J Caudy
Francesco R Kusko
Maria A Vocelka
Munro P Inouye
Juan V Gaucho
Kaitlin L Shinko
Adams J Malet
IdCountryDate
1000Germany2024-09-08
1001Canada2024-09-12
1002Japan2024-09-25
1003Australia2024-09-25
1004Germany2024-09-20
1005Australia2024-08-29
1006India2024-09-14
1007Spain2024-09-11
1008France2024-09-23
1009Spain2024-09-02
1010United Kingdom2024-09-21
1011Italy2024-09-17
1012Japan2024-09-01
1013India2024-09-02
1014India2024-09-01
1015Brazil2024-08-29
1016Argentina2024-08-31
1017United Kingdom2024-09-19
1018Argentina2024-09-16
1019France2024-08-30
1020Argentina2024-09-09
1021Germany2024-09-18
1022France2024-09-25
1023Germany2024-09-08
1024Japan2024-09-21
1025Argentina2024-09-09
1026Japan2024-09-16
1027Argentina2024-09-15
1028Spain2024-09-08
1029Spain2024-09-10
1030Australia2024-09-23
1031United Kingdom2024-09-12
1032Argentina2024-09-10
1033United Kingdom2024-09-07
1034Russia2024-09-05
1035Germany2024-09-06
1036Spain2024-09-22
1037United Kingdom2024-09-07
1038Japan2024-09-21
1039Spain2024-09-11
1040Italy2024-09-19
1041Canada2024-09-13
1042Argentina2024-09-07
1043Spain2024-09-06
1044Japan2024-09-23
1045Australia2024-09-18
1046Argentina2024-09-11
1047Brazil2024-09-10
1048United Kingdom2024-09-02
1049Japan2024-09-08

On-Demand Data

NameIdCountryDate
Smith H Figeroa1000Canada2024-09-25
Adams Q Malet1001India2024-09-15
James A Gillian1002Argentina2024-09-25
Jeanfrancois M Albares1003Italy2024-09-08
Stacey E Foller1004Canada2024-09-20
Faith L Marrier1005Argentina2024-09-06
Mujtaba N Nestle1006Canada2024-09-07
Maisha I Oldroyd1007Spain2024-09-08
Aditya M Dilliard1008United Kingdom2024-08-30
Murillo O Malet1009Brazil2024-09-09
Deepesh R Bowley1010United Kingdom2024-09-08
Jefferson Q Doe1011Japan2024-09-22
Isabel U Poquette1012Japan2024-09-24
Claire H Sergi1013Japan2024-09-17
Arvin Q Doe1014Spain2024-09-09
Darci L Ostrosky1015India2024-09-02
Misaki T Briddick1016Brazil2024-09-21
Murillo T Campain1017United Kingdom2024-09-18
Isabel T Ferencz1018France2024-09-21
Izzy L Stockham1019Spain2024-09-09
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Cody P DilliardFranceBernardo Dominic UNQUALIFIED
Jefferson N BowleyJapanElwin Sharvill NEGOTIATION
Jeanfrancois L WaycottSpainElwin Sharvill PROPOSAL
Rodrigues B DarakjySpainIvan Magalhaes RENEWAL
Sinclair W VocelkaIndiaXuxue Feng NEW
Deepesh H DoeItalyAsiya Javayant UNQUALIFIED
Leon O SergiArgentinaBernardo Dominic NEGOTIATION
Alejandro J InouyeCanadaAmy Elsner NEW
Silvio W WhobreyIndiaBernardo Dominic UNQUALIFIED
Nicolas M KolmetzUnited KingdomIoni Bowcher QUALIFIED
Kaitlin O GillianUnited KingdomIvan Magalhaes NEW
Tony M MorascaGermanyAsiya Javayant NEW
Mujtaba H OldroydSpainBernardo Dominic UNQUALIFIED
Sinclair O SaylorsBrazilAmy Elsner PROPOSAL
Antonio I IturbideCanadaElwin Sharvill PROPOSAL
Tony F TollnerCanadaBernardo Dominic RENEWAL
Arvin W GauchoUnited KingdomStephen Shaw UNQUALIFIED
Clifford H GauchoSpainAsiya Javayant RENEWAL
Mayumi Z WhobreyAustraliaAsiya Javayant QUALIFIED
Julie D MaletRussiaStephen Shaw RENEWAL
Clifford Q DoeSpainAnna Fali UNQUALIFIED
Maria F SchemmerJapanIvan Magalhaes RENEWAL
Arvin B MaletJapanAsiya Javayant RENEWAL
Kadeem L BriddickCanadaXuxue Feng QUALIFIED
Costa H TollnerBrazilBernardo Dominic NEW
Ricardo Y KolmetzGermanyStephen Shaw UNQUALIFIED
Nicolas Z VocelkaArgentinaBernardo Dominic RENEWAL
Maisha W PaprockiUnited KingdomIoni Bowcher NEW
Clifford V NestleJapanElwin Sharvill UNQUALIFIED
Murillo G WaycottIndiaAmy Elsner RENEWAL
Kaitlin L OstroskyBrazilAnna Fali PROPOSAL
Claire U FlosiIndiaAmy Elsner QUALIFIED
Smith E GauchoFranceOnyama Limba NEGOTIATION
Isabel G GauchoUnited KingdomIvan Magalhaes NEW
Ricardo M AlbaresRussiaAnna Fali UNQUALIFIED
Faith M RutaIndiaIoni Bowcher UNQUALIFIED
Mujtaba V ChuiFranceAsiya Javayant NEW
Jeanfrancois H BriddickArgentinaIoni Bowcher UNQUALIFIED
Faith Q FollerBrazilOnyama Limba RENEWAL
Smith M NickaJapanIoni Bowcher PROPOSAL

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

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


<h:form>
    <div class="card">
        <h5 style="margin-top:0">Vertical</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers1}" scrollable="true" scrollHeight="250">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Horizontal</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers2}" scrollable="true" scrollWidth="600">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Horizontal and Vertical</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers3}" scrollable="true" scrollWidth="50%" scrollHeight="250">
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
            <p:column headerText="Company" footerText="Company">
                <h:outputText value="#{customer.company}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
            <p:column headerText="Activity" footerText="Activity">
                <h:outputText value="#{customer.activity}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Frozen Rows</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers4}" scrollable="true" scrollHeight="250"
                     frozenRows="2">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Frozen Columns</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers5}" scrollable="true" scrollHeight="250"
                     scrollWidth="300" frozenColumns="1">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h3>On-Demand Data</h3>
        <p:dataTable var="customer" value="#{dtScrollView.customers6}" scrollRows="20" scrollable="true" liveScroll="true" scrollHeight="150">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Virtual Scrolling - 20000 Rows</h5>
        <p:dataTable var="customer" value="#{dtScrollView.lazyModel}" scrollRows="20" scrollable="true"
                     virtualScroll="true" scrollHeight="200" rows="40" style="margin-bottom:0">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

</h:form>