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
Izzy D OldroydArgentinaElwin Sharvill PROPOSAL
Deepesh T FollerArgentinaAnna Fali RENEWAL
Leon H KolmetzGermanyAmy Elsner RENEWAL
Arvin J RutaRussiaOnyama Limba QUALIFIED
Greenwood F FollerFranceOnyama Limba QUALIFIED
Francesco M BowleyCanadaIoni Bowcher UNQUALIFIED
Smith Z NickaAustraliaXuxue Feng UNQUALIFIED
Aika T CaudyItalyOnyama Limba NEW
Stacey V RoysterFranceElwin Sharvill QUALIFIED
Salvatore P GarufiItalyAnna Fali RENEWAL
Isabel O IturbideArgentinaElwin Sharvill QUALIFIED
Maisha N ButtFranceXuxue Feng NEGOTIATION
Stacey F MaletGermanyAsiya Javayant PROPOSAL
Isabel M ButtSpainAmy Elsner PROPOSAL
Mayumi G SchemmerJapanBernardo Dominic RENEWAL
David B OldroydRussiaOnyama Limba NEGOTIATION
Leja S RoysterBrazilIvan Magalhaes RENEWAL
Salvatore V OldroydRussiaAnna Fali RENEWAL
Chavez R InouyeUnited KingdomElwin Sharvill PROPOSAL
Johnson A RoysterIndiaElwin Sharvill NEW
Rodrigues H SlusarskiRussiaBernardo Dominic NEGOTIATION
Isabel L OstroskyGermanyIoni Bowcher NEW
Darci B BowleyIndiaAsiya Javayant NEW
Claire F PerinGermanyElwin Sharvill NEW
Munro E WhobreyFranceStephen Shaw UNQUALIFIED
Arvin L VenereIndiaOnyama Limba QUALIFIED
Munro B DoeUnited KingdomAsiya Javayant NEW
Silvio I GauchoBrazilAmy Elsner NEGOTIATION
Ricardo S WaycottItalyAmy Elsner PROPOSAL
Aruna K FigeroaArgentinaIoni Bowcher NEGOTIATION
Kaitlin A GlickCanadaAmy Elsner NEW
Ivar D ChuiIndiaBernardo Dominic PROPOSAL
Antonio X VenereUnited KingdomStephen Shaw NEGOTIATION
Jones F CaudyUnited KingdomAmy Elsner PROPOSAL
Silvio K StockhamUnited KingdomXuxue Feng RENEWAL
Isabel A KolmetzSpainOnyama Limba NEGOTIATION
Greenwood F MacleadSpainIoni Bowcher UNQUALIFIED
Wickens K NickaUnited KingdomIvan Magalhaes QUALIFIED
Deepesh T RimIndiaIvan Magalhaes NEGOTIATION
Aika I NestleRussiaAnna Fali UNQUALIFIED
Izzy S MorascaCanadaAmy Elsner RENEWAL
Ashley P RulapaughGermanyStephen Shaw NEW
Darci S GauchoFranceAsiya Javayant UNQUALIFIED
Clifford F GarufiBrazilAmy Elsner NEGOTIATION
Jeanfrancois T VenereFranceAmy Elsner RENEWAL
Rodrigues M SaylorsJapanBernardo Dominic NEGOTIATION
Greenwood Y KolmetzFranceIvan Magalhaes PROPOSAL
Alejandro V StensethFranceElwin Sharvill UNQUALIFIED
Jennifer C KuskoGermanyBernardo Dominic NEW
Francesco Q NickaIndiaXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Rodrigues H RutaArgentinaBernardo Dominic PROPOSAL
Ashley S SergiArgentinaOnyama Limba NEGOTIATION
Maisha I WhobreyRussiaXuxue Feng NEW
Ashley Q RulapaughFranceAmy Elsner QUALIFIED
Jeanfrancois X DoeIndiaXuxue Feng RENEWAL
Julie Z VenereRussiaAnna Fali NEW
Jennifer A MaletArgentinaIvan Magalhaes QUALIFIED
Jennifer K PerinRussiaXuxue Feng RENEWAL
Juan L MarrierAustraliaXuxue Feng PROPOSAL
Juan B StensethGermanyStephen Shaw NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aika V SergiFrance2025-04-26Chemel, James L Cpa PROPOSAL16Onyama Limba
1001David U VenereArgentina2025-04-24Feiner Bros PROPOSAL93Ivan Magalhaes
1002Izzy Q SaylorsAustralia2025-04-18Morlong Associates QUALIFIED22Anna Fali
1003Julie M AmigonJapan2025-04-13King, Christopher A Esq NEGOTIATION73Onyama Limba
1004Costa M DilliardSpain2025-04-22Chanay, Jeffrey A Esq NEGOTIATION23Ivan Magalhaes
1005Sinclair S RutaUnited Kingdom2025-05-08Chapman, Ross E Esq UNQUALIFIED40Ivan Magalhaes
1006Leja N RulapaughItaly2025-04-20Chemel, James L Cpa UNQUALIFIED46Ivan Magalhaes
1007Julie H SaylorsRussia2025-05-11Rangoni Of Florence QUALIFIED3Ioni Bowcher
1008Ivar W MaletIndia2025-04-28Chapman, Ross E Esq NEW9Bernardo Dominic
1009Octavia F NickaCanada2025-04-25Chapman, Ross E Esq PROPOSAL84Elwin Sharvill
1010Izzy P OstroskyAustralia2025-04-18Dorl, James J Esq NEW35Anna Fali
1011Smith L GauchoSpain2025-04-17Truhlar And Truhlar Attys UNQUALIFIED60Anna Fali
1012Chavez G PoquetteRussia2025-04-30Truhlar And Truhlar Attys UNQUALIFIED28Asiya Javayant
1013Aruna E GauchoArgentina2025-04-27Morlong Associates NEGOTIATION15Ivan Magalhaes
1014Francesco Z FerenczRussia2025-04-18Buckley Miller Wright PROPOSAL69Xuxue Feng
1015Claire T RutaSpain2025-05-12Truhlar And Truhlar Attys NEW11Amy Elsner
1016Faith I SchemmerFrance2025-04-16Rousseaux, Michael Esq QUALIFIED73Asiya Javayant
1017Deepesh F AmigonAustralia2025-04-27Chapman, Ross E Esq UNQUALIFIED47Asiya Javayant
1018Adams Z CaudyIndia2025-04-21Rousseaux, Michael Esq PROPOSAL66Stephen Shaw
1019Sinclair V DoeArgentina2025-05-04Truhlar And Truhlar Attys NEGOTIATION92Amy Elsner
1020Mujtaba F GauchoArgentina2025-05-03Chanay, Jeffrey A Esq NEGOTIATION94Elwin Sharvill
1021James V VenereItaly2025-05-02Chemel, James L Cpa UNQUALIFIED87Elwin Sharvill
1022Aditya R StensethBrazil2025-04-20Dorl, James J Esq NEW90Elwin Sharvill
1023Alejandro I DarakjyUnited Kingdom2025-04-22Benton, John B Jr QUALIFIED54Asiya Javayant
1024Maisha M KuskoUnited Kingdom2025-05-02Benton, John B Jr RENEWAL83Asiya Javayant
1025Darci Y OldroydRussia2025-04-28Chapman, Ross E Esq RENEWAL88Anna Fali
1026Salvatore Z CaudyGermany2025-05-04Morlong Associates PROPOSAL79Bernardo Dominic
1027Emily P FigeroaFrance2025-04-17Truhlar And Truhlar Attys QUALIFIED51Onyama Limba
1028Ivar B ButtFrance2025-04-24Benton, John B Jr QUALIFIED98Xuxue Feng
1029Maria U RimBrazil2025-04-15King, Christopher A Esq NEGOTIATION34Asiya Javayant
1030Nicolas V StensethIndia2025-05-04Feiner Bros UNQUALIFIED36Anna Fali
1031Misaki G AmigonRussia2025-04-30Buckley Miller Wright NEW99Amy Elsner
1032Murillo H CaudyUnited Kingdom2025-05-02Rousseaux, Michael Esq UNQUALIFIED52Xuxue Feng
1033Emily W ButtUnited Kingdom2025-04-15Chapman, Ross E Esq QUALIFIED93Asiya Javayant
1034Antonio D VenereArgentina2025-04-15Commercial Press NEW49Elwin Sharvill
1035Izzy F InouyeItaly2025-05-03Chapman, Ross E Esq RENEWAL32Elwin Sharvill
1036Silvio Y FerenczJapan2025-04-13Chapman, Ross E Esq QUALIFIED22Amy Elsner
1037Claire R RulapaughJapan2025-05-03Printing Dimensions RENEWAL7Amy Elsner
1038Misaki M InouyeAustralia2025-04-18Rangoni Of Florence QUALIFIED1Ioni Bowcher
1039Smith C ButtGermany2025-04-16Truhlar And Truhlar Attys QUALIFIED21Asiya Javayant
1040Silvio U VenereFrance2025-05-10Chapman, Ross E Esq QUALIFIED18Elwin Sharvill
1041Greenwood D MaletJapan2025-04-25Feltz Printing Service NEGOTIATION36Amy Elsner
1042Ashley I KuskoCanada2025-05-09Buckley Miller Wright NEW89Xuxue Feng
1043Julie F PerinUnited Kingdom2025-05-07King, Christopher A Esq UNQUALIFIED30Elwin Sharvill
1044Kadeem N CampainItaly2025-04-17Printing Dimensions PROPOSAL37Amy Elsner
1045Aditya E WhobreyIndia2025-05-02Chemel, James L Cpa NEGOTIATION5Amy Elsner
1046Adams P ButtCanada2025-05-01Buckley Miller Wright QUALIFIED94Stephen Shaw
1047Jones W AlbaresSpain2025-04-25Rangoni Of Florence UNQUALIFIED39Elwin Sharvill
1048Jefferson S SchemmerArgentina2025-04-18Chanay, Jeffrey A Esq NEGOTIATION87Stephen Shaw
1049Isabel J DilliardGermany2025-05-08Rangoni Of Florence NEW61Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Aika D NestleCanadaOnyama Limba QUALIFIED
Ricardo L WhobreySpainOnyama Limba PROPOSAL
Adams C VenereGermanyAsiya Javayant UNQUALIFIED
Jeanfrancois Y OldroydSpainIvan Magalhaes UNQUALIFIED
Jefferson Z RoysterJapanElwin Sharvill UNQUALIFIED
Salvatore M WieserCanadaBernardo Dominic RENEWAL
Tony V ChuiCanadaAmy Elsner PROPOSAL
Juan Y TollnerSpainIvan Magalhaes PROPOSAL
Izzy K DarakjyIndiaXuxue Feng QUALIFIED
Tony G MorascaArgentinaElwin Sharvill PROPOSAL
Julie W BowleyAustraliaIoni Bowcher RENEWAL
Misaki X DarakjyRussiaAsiya Javayant UNQUALIFIED
Maisha U VocelkaSpainBernardo Dominic UNQUALIFIED
Jones E FollerGermanyIoni Bowcher NEW
Nicolas N TollnerItalyOnyama Limba NEGOTIATION
Isabel U MaletGermanyBernardo Dominic QUALIFIED
Jeanfrancois P MaletUnited KingdomAnna Fali NEGOTIATION
Claire B NickaIndiaElwin Sharvill NEGOTIATION
Costa E BologniaUnited KingdomAmy Elsner RENEWAL
Deepesh E FollerFranceStephen Shaw RENEWAL
Rodrigues L OldroydCanadaAmy Elsner UNQUALIFIED
Darci F StockhamCanadaAnna Fali QUALIFIED
Francesco C CaudyIndiaOnyama Limba UNQUALIFIED
Claire F NickaArgentinaElwin Sharvill QUALIFIED
James S BowleySpainElwin Sharvill PROPOSAL
Cody D KuskoAustraliaBernardo Dominic UNQUALIFIED
Arvin M CampainUnited KingdomAnna Fali NEGOTIATION
Aruna V KuskoIndiaIoni Bowcher PROPOSAL
Maria Q CaudySpainIvan Magalhaes NEGOTIATION
Costa N BriddickAustraliaIvan Magalhaes PROPOSAL
Jones I DoeJapanOnyama Limba NEW
Darci W RutaArgentinaAmy Elsner UNQUALIFIED
Isabel R KuskoJapanIvan Magalhaes RENEWAL
Clifford M MorascaUnited KingdomAnna Fali NEGOTIATION
Octavia F PaprockiCanadaStephen Shaw RENEWAL
Jeanfrancois I OldroydGermanyAmy Elsner NEGOTIATION
Maria L StockhamBrazilElwin Sharvill NEW
Misaki E InouyeIndiaElwin Sharvill NEW
Cody A WaycottAustraliaAnna Fali UNQUALIFIED
Deepesh F PerinFranceIoni Bowcher UNQUALIFIED
Aruna C FollerSpainIoni Bowcher RENEWAL
Arvin O FlosiFranceAmy Elsner NEGOTIATION
Clifford Z RoysterArgentinaBernardo Dominic UNQUALIFIED
Ivar W RimFranceIoni Bowcher QUALIFIED
Francesco Y BologniaRussiaAmy Elsner NEW
Jeanfrancois I MaletJapanAnna Fali QUALIFIED
Maisha E AmigonRussiaXuxue Feng PROPOSAL
Misaki M ButtFranceOnyama Limba NEW
Morrow T DoeFranceIvan Magalhaes UNQUALIFIED
Aditya T BologniaJapanElwin Sharvill NEW
Frozen Columns
Name
Ivar R Waycott
Adams E Briddick
Wickens D Saylors
Smith E Paprocki
Kadeem T Nestle
Smith N Paprocki
Nicolas Y Maclead
Morrow J Marrier
Arvin W Foller
Nicolas L Albares
Cody C Sergi
Wickens Q Bowley
Murillo D Nicka
Smith H Kusko
Emily A Inouye
Octavia I Poquette
Sinclair H Schemmer
Silvio N Oldroyd
Darci A Whobrey
Morrow N Schemmer
Antonio O Briddick
Salvatore K Perin
Nicolas J Iturbide
Ricardo R Waycott
Octavia U Nestle
Sinclair R Gillian
Sinclair Q Poquette
Francesco U Ostrosky
Kadeem I Dilliard
Deepesh C Dilliard
Wickens B Albares
Clifford O Caudy
Jennifer B Foller
Sinclair W Wieser
Faith L Iturbide
Rodrigues L Kusko
Octavia Z Foller
Leja C Schemmer
Clifford K Rim
Ivar P Nicka
Alejandro R Garufi
Mayumi V Kolmetz
Maisha A Nicka
Morrow B Amigon
Aruna C Morasca
Emily P Caldarera
Aditya X Royster
Silvio G Saylors
Silvio J Poquette
Murillo N Rulapaugh
IdCountryDate
1000Japan2025-04-24
1001Argentina2025-04-29
1002Japan2025-05-06
1003Spain2025-04-26
1004Germany2025-04-29
1005India2025-05-10
1006Canada2025-04-22
1007India2025-05-04
1008United Kingdom2025-04-28
1009United Kingdom2025-05-03
1010United Kingdom2025-05-09
1011India2025-04-25
1012Japan2025-05-03
1013France2025-04-28
1014Brazil2025-05-06
1015Japan2025-05-12
1016Japan2025-04-28
1017Italy2025-05-09
1018Argentina2025-04-20
1019Canada2025-04-27
1020Japan2025-04-24
1021Australia2025-05-06
1022Spain2025-05-02
1023Japan2025-04-15
1024Canada2025-05-07
1025Australia2025-05-02
1026Brazil2025-05-11
1027Spain2025-05-01
1028Russia2025-05-06
1029Russia2025-04-27
1030France2025-05-01
1031Spain2025-05-03
1032Germany2025-05-03
1033Australia2025-05-08
1034Brazil2025-04-14
1035Germany2025-04-21
1036Brazil2025-04-16
1037Russia2025-05-05
1038Germany2025-04-20
1039Japan2025-04-28
1040Canada2025-05-09
1041Japan2025-04-14
1042Spain2025-04-27
1043Australia2025-05-02
1044Canada2025-04-17
1045Canada2025-04-26
1046Japan2025-04-24
1047Australia2025-04-18
1048Spain2025-04-13
1049Japan2025-04-18

On-Demand Data

NameIdCountryDate
Izzy G Maclead1000Russia2025-05-09
Kaitlin C Bowley1001Argentina2025-04-22
Ashley M Whobrey1002Russia2025-05-10
Munro L Garufi1003Germany2025-04-30
Isabel I Venere1004United Kingdom2025-04-23
Tony C Nestle1005Russia2025-05-11
Alejandro M Ostrosky1006Brazil2025-05-11
Jeanfrancois Y Campain1007United Kingdom2025-05-09
Jefferson X Darakjy1008France2025-04-14
Isabel J Tollner1009Japan2025-04-24
Isabel T Iturbide1010Australia2025-04-27
Isabel W Schemmer1011India2025-04-25
Mayumi E Flosi1012Japan2025-04-18
Salvatore Z Chui1013India2025-05-11
Munro B Butt1014United Kingdom2025-05-10
Arvin D Tollner1015Brazil2025-05-09
Chavez F Saylors1016Japan2025-04-23
Maria S Malet1017Italy2025-05-07
Arvin X Briddick1018Japan2025-04-14
Johnson J Garufi1019Japan2025-04-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jennifer V NestleIndiaXuxue Feng NEW
Adams N PaprockiUnited KingdomAnna Fali NEGOTIATION
Costa O GlickGermanyStephen Shaw NEGOTIATION
Maria D KolmetzArgentinaOnyama Limba RENEWAL
Emily I MorascaFranceIvan Magalhaes NEGOTIATION
Emily D CaldareraJapanAnna Fali PROPOSAL
Costa Y CaldareraGermanyAsiya Javayant QUALIFIED
Jones M SchemmerUnited KingdomAmy Elsner UNQUALIFIED
Jeanfrancois M RutaSpainOnyama Limba NEW
Isabel X PoquetteCanadaAsiya Javayant QUALIFIED
Leon H ShinkoGermanyBernardo Dominic PROPOSAL
Maria R WhobreyIndiaOnyama Limba QUALIFIED
Julie K StensethIndiaAnna Fali RENEWAL
Antonio S SchemmerBrazilAnna Fali RENEWAL
Ricardo H WieserRussiaStephen Shaw NEW
Rodrigues X MarrierItalyXuxue Feng UNQUALIFIED
Kadeem E GarufiSpainAnna Fali UNQUALIFIED
Jefferson X OldroydFranceBernardo Dominic PROPOSAL
Isabel C GauchoUnited KingdomAnna Fali RENEWAL
Munro J StensethSpainOnyama Limba NEW
Francesco P MarrierGermanyIoni Bowcher NEW
Johnson Y CaudyFranceBernardo Dominic RENEWAL
Ricardo T PerinCanadaOnyama Limba NEGOTIATION
Maisha B DoeJapanStephen Shaw NEW
Maria C FlosiSpainAsiya Javayant NEW
Clifford L CaldareraSpainIvan Magalhaes QUALIFIED
Stacey C StensethJapanElwin Sharvill NEGOTIATION
Aika O ChuiJapanIoni Bowcher RENEWAL
Emily G MorascaCanadaStephen Shaw UNQUALIFIED
Mujtaba O WhobreySpainOnyama Limba NEW
Nicolas S WhobreyAustraliaElwin Sharvill NEW
Claire J BowleyAustraliaAnna Fali RENEWAL
Claire K IturbideFranceXuxue Feng UNQUALIFIED
Ivar M SergiArgentinaStephen Shaw UNQUALIFIED
Francesco I TollnerAustraliaAmy Elsner PROPOSAL
Rodrigues C RutaGermanyElwin Sharvill NEGOTIATION
Mayumi T PoquetteGermanyStephen Shaw PROPOSAL
Wickens X DarakjyJapanAmy Elsner PROPOSAL
Antonio J GillianIndiaIvan Magalhaes UNQUALIFIED
Aika D MaletCanadaElwin Sharvill 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>