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
Antonio F PaprockiArgentinaIoni Bowcher NEW
Ricardo P CaldareraRussiaIvan Magalhaes NEW
Clifford M GarufiCanadaXuxue Feng PROPOSAL
Salvatore T FlosiArgentinaStephen Shaw PROPOSAL
Ashley D RulapaughAustraliaAsiya Javayant NEW
Aruna K OstroskyIndiaAnna Fali QUALIFIED
Jeanfrancois Q CaudyAustraliaAsiya Javayant NEGOTIATION
Sinclair M AmigonRussiaIvan Magalhaes QUALIFIED
Aika V GlickSpainAnna Fali RENEWAL
Silvio G BologniaJapanElwin Sharvill NEW
Izzy K ChuiSpainOnyama Limba UNQUALIFIED
Aika Q ChuiJapanStephen Shaw NEGOTIATION
Julie J FollerArgentinaIvan Magalhaes UNQUALIFIED
Jefferson E MaletJapanElwin Sharvill NEGOTIATION
Aruna C RulapaughBrazilStephen Shaw NEW
Greenwood M DilliardFranceAsiya Javayant NEGOTIATION
James U ChuiAustraliaBernardo Dominic QUALIFIED
Rodrigues H FlosiArgentinaXuxue Feng NEW
Adams B StensethCanadaBernardo Dominic NEGOTIATION
Johnson A FerenczUnited KingdomBernardo Dominic PROPOSAL
Jones X SchemmerGermanyXuxue Feng UNQUALIFIED
Jefferson R GarufiGermanyIoni Bowcher RENEWAL
Kaitlin S VocelkaUnited KingdomStephen Shaw UNQUALIFIED
Aruna H SlusarskiBrazilAsiya Javayant RENEWAL
Antonio D MaletRussiaIvan Magalhaes NEGOTIATION
Adams X IturbideRussiaElwin Sharvill RENEWAL
Wickens O CampainRussiaAnna Fali NEW
Leja O ShinkoBrazilIvan Magalhaes PROPOSAL
Isabel O PoquetteCanadaElwin Sharvill PROPOSAL
Leja I DoeJapanIoni Bowcher RENEWAL
Antonio T WaycottUnited KingdomAsiya Javayant PROPOSAL
Jefferson K VocelkaJapanXuxue Feng NEW
Leja P BologniaCanadaIoni Bowcher RENEWAL
Costa M PerinGermanyOnyama Limba PROPOSAL
Leja D DilliardAustraliaIoni Bowcher NEW
Octavia M MaletJapanElwin Sharvill RENEWAL
Ashley I SlusarskiArgentinaOnyama Limba NEGOTIATION
Ivar X AmigonFranceIoni Bowcher PROPOSAL
Chavez J StensethItalyOnyama Limba NEW
Juan A VocelkaUnited KingdomElwin Sharvill PROPOSAL
Ivar V BologniaGermanyBernardo Dominic UNQUALIFIED
Kaitlin Q DilliardBrazilBernardo Dominic NEW
Johnson Q BowleyUnited KingdomElwin Sharvill PROPOSAL
Maisha B GauchoUnited KingdomXuxue Feng NEW
Salvatore S CaudyIndiaXuxue Feng QUALIFIED
Isabel X StockhamUnited KingdomXuxue Feng QUALIFIED
Adams R RutaUnited KingdomXuxue Feng NEGOTIATION
Jefferson B WaycottArgentinaBernardo Dominic UNQUALIFIED
Isabel D FerenczUnited KingdomBernardo Dominic RENEWAL
Ivar O KolmetzSpainOnyama Limba QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Julie R ChuiGermanyStephen Shaw QUALIFIED
Adams N VenereUnited KingdomStephen Shaw NEW
Cody G FerenczArgentinaAsiya Javayant NEGOTIATION
Smith E NickaFranceOnyama Limba NEGOTIATION
Adams L VenereUnited KingdomElwin Sharvill NEW
Stacey H NestleJapanIvan Magalhaes UNQUALIFIED
Emily Y StensethRussiaElwin Sharvill PROPOSAL
Johnson O WaycottFranceAnna Fali QUALIFIED
Johnson A OstroskySpainXuxue Feng UNQUALIFIED
Maisha U GillianBrazilIoni Bowcher RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Rodrigues T SlusarskiArgentina2025-04-10Rangoni Of Florence PROPOSAL29Elwin Sharvill
1001Maisha J VenereIndia2025-04-27Commercial Press UNQUALIFIED0Anna Fali
1002Mujtaba O RoysterAustralia2025-04-26Morlong Associates PROPOSAL78Asiya Javayant
1003Chavez R RulapaughUnited Kingdom2025-04-21Chanay, Jeffrey A Esq PROPOSAL1Xuxue Feng
1004Mayumi S MarrierFrance2025-04-03Rangoni Of Florence UNQUALIFIED77Asiya Javayant
1005Kadeem K FollerBrazil2025-04-22Rangoni Of Florence UNQUALIFIED20Ivan Magalhaes
1006Alejandro P NickaBrazil2025-04-10Chapman, Ross E Esq QUALIFIED21Amy Elsner
1007Kaitlin I GarufiBrazil2025-04-26Dorl, James J Esq NEW72Elwin Sharvill
1008Francesco J FerenczCanada2025-04-24Dorl, James J Esq UNQUALIFIED80Xuxue Feng
1009Tony Q TollnerBrazil2025-04-09Feiner Bros NEW53Ioni Bowcher
1010Maria H NestleUnited Kingdom2025-04-27Dorl, James J Esq NEW66Asiya Javayant
1011Mujtaba R GarufiUnited Kingdom2025-04-18Benton, John B Jr UNQUALIFIED30Xuxue Feng
1012Silvio Q CaldareraSpain2025-04-15Benton, John B Jr PROPOSAL3Stephen Shaw
1013Jennifer K KuskoSpain2025-04-26Chanay, Jeffrey A Esq NEGOTIATION16Bernardo Dominic
1014Kadeem Z BriddickJapan2025-04-25Rangoni Of Florence RENEWAL21Stephen Shaw
1015Mayumi D RoysterJapan2025-04-30Buckley Miller Wright NEW59Ioni Bowcher
1016Aruna T BriddickSpain2025-04-17Commercial Press PROPOSAL41Xuxue Feng
1017Isabel T CaldareraFrance2025-04-10Chanay, Jeffrey A Esq NEGOTIATION9Xuxue Feng
1018Munro D NestleFrance2025-04-08Feiner Bros PROPOSAL23Asiya Javayant
1019Cody F KuskoBrazil2025-04-13Rangoni Of Florence RENEWAL31Anna Fali
1020Maisha Z CampainRussia2025-04-03Benton, John B Jr QUALIFIED96Onyama Limba
1021Tony Z OldroydSpain2025-04-07Feiner Bros RENEWAL9Ivan Magalhaes
1022Misaki X StockhamSpain2025-04-29Benton, John B Jr PROPOSAL93Stephen Shaw
1023Cody T DoeJapan2025-04-29Printing Dimensions NEW79Anna Fali
1024David U StensethAustralia2025-04-10Chemel, James L Cpa RENEWAL86Onyama Limba
1025Julie L AlbaresFrance2025-04-08King, Christopher A Esq NEW36Xuxue Feng
1026Stacey Y AlbaresCanada2025-04-12Morlong Associates RENEWAL18Ioni Bowcher
1027Sinclair M CampainJapan2025-04-20Chanay, Jeffrey A Esq NEW39Bernardo Dominic
1028James W KuskoIndia2025-04-21Feltz Printing Service PROPOSAL81Stephen Shaw
1029Aditya O AmigonUnited Kingdom2025-04-19Rangoni Of Florence UNQUALIFIED74Stephen Shaw
1030Wickens R GillianAustralia2025-04-14Morlong Associates PROPOSAL85Ioni Bowcher
1031Ivar Y WhobreyFrance2025-04-22Truhlar And Truhlar Attys NEGOTIATION96Elwin Sharvill
1032Izzy L GauchoItaly2025-04-07Rousseaux, Michael Esq RENEWAL24Stephen Shaw
1033Mayumi D NestleUnited Kingdom2025-04-28Benton, John B Jr PROPOSAL52Ioni Bowcher
1034Wickens N AmigonJapan2025-04-11Rangoni Of Florence UNQUALIFIED44Elwin Sharvill
1035Jefferson X PaprockiJapan2025-04-05Chemel, James L Cpa QUALIFIED64Anna Fali
1036Tony F RulapaughBrazil2025-04-12Printing Dimensions UNQUALIFIED49Elwin Sharvill
1037Deepesh F InouyeArgentina2025-04-20Feltz Printing Service PROPOSAL31Ivan Magalhaes
1038Julie E PaprockiAustralia2025-04-21Chanay, Jeffrey A Esq RENEWAL26Amy Elsner
1039Cody J MaletFrance2025-04-25Commercial Press NEGOTIATION28Ivan Magalhaes
1040Wickens F PerinArgentina2025-04-18King, Christopher A Esq NEGOTIATION16Bernardo Dominic
1041Johnson W SlusarskiIndia2025-04-30Benton, John B Jr QUALIFIED56Asiya Javayant
1042Johnson J WieserArgentina2025-04-28King, Christopher A Esq NEW42Amy Elsner
1043Leja V OldroydSpain2025-04-30Truhlar And Truhlar Attys QUALIFIED77Ioni Bowcher
1044David N OstroskySpain2025-04-25Feiner Bros NEW36Bernardo Dominic
1045Murillo N KolmetzBrazil2025-04-23Feltz Printing Service NEGOTIATION36Amy Elsner
1046Jeanfrancois Q MarrierSpain2025-04-29Chanay, Jeffrey A Esq UNQUALIFIED12Asiya Javayant
1047Isabel F StensethFrance2025-04-13Commercial Press UNQUALIFIED19Elwin Sharvill
1048Silvio O FollerSpain2025-04-01King, Christopher A Esq NEGOTIATION77Stephen Shaw
1049Kaitlin U AmigonArgentina2025-04-27King, Christopher A Esq NEW65Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Juan A FigeroaRussiaStephen Shaw NEGOTIATION
Misaki Q PoquetteSpainIvan Magalhaes NEW
Johnson H NestleUnited KingdomAsiya Javayant RENEWAL
Clifford Y BologniaCanadaElwin Sharvill RENEWAL
Leon D PoquetteSpainStephen Shaw NEW
Octavia O IturbideSpainXuxue Feng UNQUALIFIED
Sinclair X GarufiItalyStephen Shaw QUALIFIED
Izzy T BowleyIndiaElwin Sharvill UNQUALIFIED
Claire J AmigonFranceAsiya Javayant NEW
Salvatore L CaudyItalyXuxue Feng UNQUALIFIED
Aditya G InouyeIndiaAmy Elsner NEGOTIATION
Maisha J MaletUnited KingdomStephen Shaw UNQUALIFIED
Deepesh V GillianItalyStephen Shaw RENEWAL
Faith H ChuiFranceOnyama Limba PROPOSAL
Julie C DilliardUnited KingdomXuxue Feng NEW
Rodrigues P MarrierGermanyOnyama Limba UNQUALIFIED
Morrow M NickaIndiaIoni Bowcher PROPOSAL
Nicolas Q SaylorsCanadaIoni Bowcher UNQUALIFIED
Wickens W ButtAustraliaOnyama Limba NEW
Jefferson Z PerinArgentinaIoni Bowcher NEGOTIATION
Kadeem N DarakjyJapanIoni Bowcher PROPOSAL
Johnson M RimIndiaElwin Sharvill UNQUALIFIED
Clifford D DilliardSpainBernardo Dominic NEW
Jeanfrancois U BologniaAustraliaAnna Fali RENEWAL
Chavez W CaudyUnited KingdomXuxue Feng PROPOSAL
Aika P PerinSpainAmy Elsner NEW
Misaki X BologniaRussiaAsiya Javayant NEGOTIATION
Mujtaba Q OstroskyBrazilIvan Magalhaes PROPOSAL
Tony P MaletSpainBernardo Dominic NEW
Deepesh Y RutaBrazilIoni Bowcher NEW
Costa L InouyeRussiaIoni Bowcher QUALIFIED
Aditya W MacleadArgentinaElwin Sharvill NEGOTIATION
Isabel M MarrierItalyAmy Elsner RENEWAL
Julie B GlickFranceAmy Elsner PROPOSAL
Emily Z GarufiCanadaBernardo Dominic UNQUALIFIED
Ivar B GarufiCanadaOnyama Limba PROPOSAL
Nicolas Q NestleArgentinaIoni Bowcher RENEWAL
Stacey V BowleyGermanyOnyama Limba QUALIFIED
Rodrigues B WaycottIndiaIoni Bowcher PROPOSAL
Julie E RoysterItalyIvan Magalhaes NEW
Ivar Z OldroydGermanyIoni Bowcher NEGOTIATION
James L GillianSpainBernardo Dominic RENEWAL
Emily Y MaletGermanyElwin Sharvill RENEWAL
Aruna K MaletSpainIoni Bowcher QUALIFIED
Isabel T VocelkaFranceStephen Shaw NEW
Maisha G BowleyAustraliaAnna Fali PROPOSAL
Maisha X SaylorsSpainAnna Fali PROPOSAL
Sinclair U NestleRussiaAnna Fali PROPOSAL
Kadeem D VenereIndiaAnna Fali NEGOTIATION
Alejandro P DarakjyAustraliaOnyama Limba PROPOSAL
Frozen Columns
Name
Darci T Stenseth
Leja Y Marrier
Octavia K Ostrosky
Kadeem S Poquette
Ivar G Gillian
Isabel Q Schemmer
Adams A Saylors
Adams E Maclead
Rodrigues G Caldarera
James A Gillian
Alejandro K Stenseth
Mayumi E Venere
Silvio S Ruta
Chavez U Slusarski
Leon Z Maclead
Leon U Maclead
Faith N Rim
Jones L Foller
Arvin D Perin
Mayumi S Caudy
Octavia H Dilliard
Francesco R Amigon
Aika N Malet
James R Schemmer
Jeanfrancois Y Sergi
Jefferson H Bolognia
Antonio F Darakjy
Maria R Chui
Sinclair J Ruta
Stacey O Malet
Munro O Venere
Alejandro N Nicka
Francesco E Doe
Aika W Venere
Jefferson O Doe
Faith F Sergi
Jones M Bowley
Jones K Malet
Jeanfrancois E Rulapaugh
Isabel C Poquette
Tony I Morasca
Aruna J Paprocki
Mujtaba J Nicka
Costa G Kolmetz
Julie S Slusarski
Munro D Morasca
David U Figeroa
Aruna U Iturbide
Aika G Stockham
Octavia S Darakjy
IdCountryDate
1000France2025-04-13
1001Brazil2025-04-20
1002Russia2025-04-22
1003Argentina2025-04-28
1004Australia2025-04-15
1005Japan2025-04-10
1006Argentina2025-04-12
1007France2025-04-29
1008Germany2025-04-28
1009Spain2025-04-22
1010Germany2025-04-22
1011Canada2025-04-23
1012France2025-04-22
1013Japan2025-04-04
1014Brazil2025-04-27
1015Canada2025-04-05
1016Canada2025-04-28
1017Argentina2025-04-26
1018Canada2025-04-06
1019India2025-04-14
1020Russia2025-04-08
1021Australia2025-04-17
1022Argentina2025-04-20
1023Japan2025-04-12
1024Argentina2025-04-25
1025Argentina2025-04-03
1026United Kingdom2025-04-01
1027Argentina2025-04-30
1028Germany2025-04-24
1029Spain2025-04-02
1030France2025-04-06
1031Italy2025-04-16
1032Germany2025-04-25
1033Spain2025-04-10
1034France2025-04-27
1035Canada2025-04-09
1036United Kingdom2025-04-18
1037France2025-04-06
1038Russia2025-04-27
1039United Kingdom2025-04-02
1040France2025-04-14
1041Italy2025-04-26
1042Japan2025-04-09
1043Argentina2025-04-12
1044Canada2025-04-15
1045Spain2025-04-28
1046Japan2025-04-14
1047Argentina2025-04-06
1048United Kingdom2025-04-06
1049France2025-04-05

On-Demand Data

NameIdCountryDate
Aditya P Ostrosky1000Italy2025-04-06
Sinclair G Slusarski1001Brazil2025-04-08
Octavia E Amigon1002Germany2025-04-27
Maria Y Glick1003Germany2025-04-22
Jefferson Q Saylors1004Germany2025-04-19
Kaitlin H Nestle1005Russia2025-04-06
Ricardo P Ostrosky1006Italy2025-04-13
Adams S Royster1007Australia2025-04-04
Morrow A Gillian1008United Kingdom2025-04-29
Emily T Bolognia1009Australia2025-04-11
Emily S Maclead1010Russia2025-04-08
Sinclair H Saylors1011India2025-04-06
Ashley K Venere1012France2025-04-24
Leja Q Saylors1013Brazil2025-04-26
Kaitlin T Campain1014France2025-04-08
Silvio B Figeroa1015Argentina2025-04-29
Darci U Perin1016Brazil2025-04-03
Leon J Saylors1017Italy2025-04-09
Nicolas U Chui1018Brazil2025-04-04
Ricardo F Bolognia1019United Kingdom2025-04-03
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci H SaylorsGermanyAsiya Javayant QUALIFIED
Jeanfrancois A ShinkoCanadaOnyama Limba NEW
Jones V OldroydBrazilBernardo Dominic RENEWAL
Adams G DilliardIndiaAsiya Javayant RENEWAL
Rodrigues U DoeJapanOnyama Limba RENEWAL
Julie Y KolmetzRussiaAmy Elsner UNQUALIFIED
Rodrigues B RimRussiaStephen Shaw PROPOSAL
Murillo V RoysterSpainBernardo Dominic NEGOTIATION
Mujtaba K RulapaughItalyAsiya Javayant RENEWAL
Aika L SlusarskiAustraliaBernardo Dominic NEW
Clifford C BriddickGermanyStephen Shaw UNQUALIFIED
Costa U MacleadIndiaStephen Shaw UNQUALIFIED
Aditya F RutaCanadaAnna Fali UNQUALIFIED
Aruna Q AlbaresJapanXuxue Feng NEW
Nicolas N CaudyJapanElwin Sharvill PROPOSAL
Deepesh F PerinGermanyXuxue Feng RENEWAL
Chavez B ButtIndiaAsiya Javayant QUALIFIED
Salvatore W OldroydSpainAmy Elsner NEGOTIATION
Adams A PerinJapanStephen Shaw QUALIFIED
Stacey Z FigeroaItalyAmy Elsner PROPOSAL
Johnson V CaudyFranceStephen Shaw PROPOSAL
Antonio Q StensethIndiaIoni Bowcher RENEWAL
Juan U SergiCanadaOnyama Limba QUALIFIED
Mayumi H CaudySpainAsiya Javayant PROPOSAL
Claire F ButtItalyOnyama Limba NEW
Aika A MorascaBrazilAmy Elsner QUALIFIED
Isabel T FollerRussiaIoni Bowcher RENEWAL
Jefferson J DilliardIndiaBernardo Dominic RENEWAL
Faith S WaycottUnited KingdomBernardo Dominic QUALIFIED
Costa U ButtUnited KingdomOnyama Limba PROPOSAL
Wickens H MacleadRussiaAnna Fali RENEWAL
Munro B MarrierArgentinaBernardo Dominic NEGOTIATION
Deepesh T KuskoRussiaAsiya Javayant NEW
Octavia D PoquetteIndiaAmy Elsner NEW
Smith U GauchoSpainIoni Bowcher PROPOSAL
Maisha C OstroskyArgentinaIoni Bowcher PROPOSAL
Claire I AmigonBrazilBernardo Dominic PROPOSAL
Jennifer T IturbideBrazilIoni Bowcher NEGOTIATION
Alejandro M CampainJapanXuxue Feng NEW
Stacey U GauchoCanadaOnyama Limba NEGOTIATION

<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>