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
Costa Q GauchoAustraliaAnna Fali NEGOTIATION
Clifford A AlbaresIndiaXuxue Feng RENEWAL
Smith K WaycottRussiaBernardo Dominic PROPOSAL
Rodrigues P SchemmerArgentinaAsiya Javayant NEW
James Z IturbideSpainXuxue Feng QUALIFIED
Greenwood E FerenczFranceBernardo Dominic UNQUALIFIED
Izzy N FigeroaGermanyIoni Bowcher RENEWAL
Kadeem N ButtArgentinaElwin Sharvill PROPOSAL
Clifford M TollnerItalyElwin Sharvill NEGOTIATION
Leja M SchemmerArgentinaIvan Magalhaes NEGOTIATION
Julie K PerinFranceIoni Bowcher RENEWAL
Darci K RulapaughArgentinaXuxue Feng NEGOTIATION
Rodrigues M AmigonSpainIvan Magalhaes RENEWAL
Alejandro W GlickGermanyStephen Shaw UNQUALIFIED
Aditya V VenereSpainAmy Elsner NEW
Darci Y BowleyGermanyOnyama Limba PROPOSAL
Adams H GarufiBrazilStephen Shaw NEGOTIATION
Ricardo G AlbaresItalyAnna Fali PROPOSAL
Darci N TollnerSpainElwin Sharvill NEGOTIATION
Sinclair Q PerinUnited KingdomIvan Magalhaes PROPOSAL
Leja W BologniaRussiaElwin Sharvill QUALIFIED
Leja N FollerFranceStephen Shaw PROPOSAL
Munro W PaprockiIndiaAsiya Javayant QUALIFIED
Aruna T FlosiArgentinaStephen Shaw NEGOTIATION
Francesco U OldroydUnited KingdomXuxue Feng PROPOSAL
Aditya Z SergiCanadaStephen Shaw UNQUALIFIED
Darci F KolmetzIndiaIoni Bowcher NEW
Juan C FerenczFranceIvan Magalhaes RENEWAL
Aruna W MaletFranceAmy Elsner RENEWAL
Clifford A CampainJapanAsiya Javayant PROPOSAL
Tony H PaprockiFranceBernardo Dominic QUALIFIED
Nicolas R MorascaJapanAmy Elsner QUALIFIED
Julie Q ButtGermanyElwin Sharvill RENEWAL
Emily F VenereSpainIoni Bowcher RENEWAL
Misaki N IturbideFranceStephen Shaw UNQUALIFIED
Kaitlin C VocelkaArgentinaXuxue Feng NEGOTIATION
Kaitlin O GlickFranceXuxue Feng RENEWAL
Maisha X VenereItalyIvan Magalhaes QUALIFIED
Chavez L FigeroaRussiaElwin Sharvill RENEWAL
Juan O StensethArgentinaIoni Bowcher PROPOSAL
Jones Z VenereIndiaOnyama Limba RENEWAL
Munro R KolmetzFranceOnyama Limba QUALIFIED
Mayumi U AmigonItalyXuxue Feng NEGOTIATION
David T MacleadUnited KingdomElwin Sharvill UNQUALIFIED
Wickens L SlusarskiCanadaStephen Shaw NEW
David K PaprockiGermanyIoni Bowcher NEW
Jeanfrancois O CaudyAustraliaAsiya Javayant UNQUALIFIED
Mayumi M ButtBrazilAmy Elsner NEW
Cody L FerenczAustraliaOnyama Limba RENEWAL
Morrow O StensethItalyElwin Sharvill NEW
Horizontal
NameCountryRepresentativeStatus
Ivar T PerinAustraliaOnyama Limba QUALIFIED
Stacey T AlbaresFranceAnna Fali NEW
Sinclair X SlusarskiGermanyIvan Magalhaes UNQUALIFIED
Julie J VocelkaAustraliaAsiya Javayant UNQUALIFIED
Nicolas L MarrierSpainXuxue Feng NEGOTIATION
Darci Z ButtIndiaStephen Shaw RENEWAL
Aruna G RimRussiaElwin Sharvill NEGOTIATION
Costa X NickaJapanAsiya Javayant NEW
Munro N AlbaresCanadaElwin Sharvill NEGOTIATION
Adams U SlusarskiIndiaAnna Fali NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Octavia H SlusarskiBrazil2025-04-21Chanay, Jeffrey A Esq UNQUALIFIED49Stephen Shaw
1001Julie V RulapaughArgentina2025-04-06Rousseaux, Michael Esq UNQUALIFIED91Xuxue Feng
1002Deepesh R GarufiCanada2025-04-09Feltz Printing Service PROPOSAL90Bernardo Dominic
1003Murillo I RulapaughCanada2025-04-30Dorl, James J Esq PROPOSAL36Amy Elsner
1004Rodrigues F TollnerSpain2025-04-19Feiner Bros NEGOTIATION35Stephen Shaw
1005Aditya S ChuiGermany2025-04-23Rangoni Of Florence RENEWAL83Xuxue Feng
1006Mujtaba C CampainIndia2025-04-07Feltz Printing Service UNQUALIFIED99Asiya Javayant
1007Isabel I AlbaresCanada2025-04-09Feltz Printing Service RENEWAL70Onyama Limba
1008Maria C MorascaUnited Kingdom2025-04-24Chemel, James L Cpa NEW71Elwin Sharvill
1009Julie Q FigeroaRussia2025-04-02Rousseaux, Michael Esq NEW92Anna Fali
1010Jones M ButtItaly2025-04-12Rangoni Of Florence QUALIFIED48Xuxue Feng
1011Emily E MorascaUnited Kingdom2025-04-16King, Christopher A Esq RENEWAL25Bernardo Dominic
1012Salvatore U GillianArgentina2025-04-28Rousseaux, Michael Esq PROPOSAL92Ioni Bowcher
1013Clifford F StockhamCanada2025-04-14Morlong Associates NEW97Bernardo Dominic
1014Kaitlin C AlbaresIndia2025-04-22Chapman, Ross E Esq NEW71Ivan Magalhaes
1015Emily V VenereItaly2025-04-23Truhlar And Truhlar Attys NEW30Amy Elsner
1016Salvatore G DarakjyBrazil2025-04-21Buckley Miller Wright NEW96Stephen Shaw
1017Smith V AlbaresItaly2025-04-19Printing Dimensions PROPOSAL52Xuxue Feng
1018Aditya B GauchoAustralia2025-04-28King, Christopher A Esq QUALIFIED84Ioni Bowcher
1019Ashley B MaletJapan2025-04-22Rousseaux, Michael Esq PROPOSAL70Amy Elsner
1020James F SaylorsArgentina2025-04-13Feltz Printing Service NEW54Ioni Bowcher
1021Aruna B FerenczSpain2025-04-22Printing Dimensions PROPOSAL73Onyama Limba
1022David D FlosiSpain2025-04-11Feiner Bros QUALIFIED74Xuxue Feng
1023Stacey W RutaUnited Kingdom2025-04-16Feiner Bros RENEWAL29Onyama Limba
1024Johnson Q BowleyIndia2025-04-13King, Christopher A Esq NEW95Elwin Sharvill
1025Octavia S IturbideItaly2025-04-29Chapman, Ross E Esq NEW6Elwin Sharvill
1026Ricardo G OstroskyBrazil2025-04-07Rousseaux, Michael Esq UNQUALIFIED30Onyama Limba
1027Jefferson S TollnerUnited Kingdom2025-04-14King, Christopher A Esq UNQUALIFIED20Amy Elsner
1028Mayumi E WhobreyArgentina2025-04-04Rangoni Of Florence RENEWAL97Amy Elsner
1029Misaki P GauchoAustralia2025-04-25Chanay, Jeffrey A Esq NEW73Onyama Limba
1030Aika G SchemmerIndia2025-04-12Chemel, James L Cpa QUALIFIED96Onyama Limba
1031Faith X SchemmerIndia2025-04-06Benton, John B Jr NEW32Amy Elsner
1032Salvatore B InouyeGermany2025-04-08Printing Dimensions RENEWAL80Xuxue Feng
1033Darci M VenereRussia2025-04-15Chanay, Jeffrey A Esq PROPOSAL95Ivan Magalhaes
1034Mayumi Y WaycottRussia2025-04-24Chanay, Jeffrey A Esq PROPOSAL37Bernardo Dominic
1035Nicolas N RoysterRussia2025-04-01Chemel, James L Cpa PROPOSAL5Xuxue Feng
1036Emily H OstroskyBrazil2025-04-02Benton, John B Jr PROPOSAL73Amy Elsner
1037Wickens U InouyeItaly2025-04-04Rangoni Of Florence PROPOSAL18Elwin Sharvill
1038Maisha Y BologniaFrance2025-04-11Buckley Miller Wright PROPOSAL39Ioni Bowcher
1039Juan M SchemmerJapan2025-04-15Buckley Miller Wright NEGOTIATION92Bernardo Dominic
1040Francesco D DarakjyBrazil2025-04-26Chapman, Ross E Esq PROPOSAL34Anna Fali
1041Jeanfrancois F ButtIndia2025-04-22Dorl, James J Esq UNQUALIFIED20Elwin Sharvill
1042Smith H RimAustralia2025-04-17Buckley Miller Wright RENEWAL70Ivan Magalhaes
1043Murillo W IturbideSpain2025-04-13Morlong Associates PROPOSAL27Xuxue Feng
1044Antonio Y ButtSpain2025-04-07Buckley Miller Wright PROPOSAL98Onyama Limba
1045Isabel A MarrierFrance2025-04-03Chapman, Ross E Esq PROPOSAL93Ioni Bowcher
1046Sinclair O NickaBrazil2025-04-06Chanay, Jeffrey A Esq NEGOTIATION79Elwin Sharvill
1047Aditya E GauchoIndia2025-04-08Rangoni Of Florence NEW84Elwin Sharvill
1048Murillo T NickaAustralia2025-04-02Morlong Associates NEW38Amy Elsner
1049Alejandro P CampainJapan2025-04-17Printing Dimensions NEGOTIATION59Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Wickens X SergiItalyAmy Elsner NEW
David M BowleyItalyAsiya Javayant PROPOSAL
Chavez R StockhamCanadaOnyama Limba RENEWAL
Arvin F ShinkoRussiaStephen Shaw QUALIFIED
Octavia B CaudySpainAnna Fali NEGOTIATION
Nicolas Q NestleRussiaXuxue Feng QUALIFIED
Leja Q MarrierArgentinaElwin Sharvill QUALIFIED
Kadeem I IturbideRussiaElwin Sharvill PROPOSAL
Ivar V ChuiBrazilAnna Fali NEW
Aditya A BriddickFranceBernardo Dominic RENEWAL
Mujtaba S VenereRussiaStephen Shaw QUALIFIED
Misaki T CaldareraCanadaOnyama Limba RENEWAL
Wickens T SlusarskiArgentinaAmy Elsner UNQUALIFIED
Jones U BologniaSpainBernardo Dominic UNQUALIFIED
Maisha O WhobreyIndiaBernardo Dominic NEW
Aditya C MorascaSpainStephen Shaw UNQUALIFIED
Jones D SaylorsSpainStephen Shaw NEGOTIATION
Costa I ChuiRussiaIvan Magalhaes NEW
Maria S RimRussiaOnyama Limba UNQUALIFIED
Greenwood N GlickJapanOnyama Limba QUALIFIED
Alejandro V ShinkoArgentinaAnna Fali RENEWAL
Mujtaba A PoquetteItalyIoni Bowcher NEGOTIATION
Darci U BriddickItalyElwin Sharvill NEGOTIATION
Isabel V AlbaresIndiaAmy Elsner PROPOSAL
Darci N FerenczRussiaAsiya Javayant NEGOTIATION
Leon I AmigonFranceAmy Elsner PROPOSAL
Jeanfrancois Q ShinkoArgentinaAmy Elsner NEW
Smith A GillianJapanStephen Shaw UNQUALIFIED
Francesco H IturbideIndiaElwin Sharvill NEW
Leon C GarufiArgentinaOnyama Limba QUALIFIED
Silvio Y InouyeGermanyBernardo Dominic RENEWAL
Ashley Y MaletItalyIoni Bowcher QUALIFIED
Salvatore N KolmetzUnited KingdomAmy Elsner QUALIFIED
Murillo X InouyeSpainAmy Elsner RENEWAL
Maisha Q KuskoIndiaElwin Sharvill RENEWAL
Mujtaba P DilliardArgentinaIvan Magalhaes PROPOSAL
Rodrigues G GarufiAustraliaAmy Elsner RENEWAL
Munro C RutaRussiaAnna Fali RENEWAL
Silvio I FollerFranceXuxue Feng PROPOSAL
Maria G WieserGermanyOnyama Limba NEGOTIATION
Leon R InouyeAustraliaAmy Elsner RENEWAL
Mayumi A FigeroaBrazilAmy Elsner UNQUALIFIED
Juan Y WieserGermanyBernardo Dominic NEW
Stacey T KuskoCanadaIvan Magalhaes PROPOSAL
Sinclair S VenereIndiaElwin Sharvill RENEWAL
Juan H DilliardFranceXuxue Feng NEW
Mayumi B PoquetteRussiaIvan Magalhaes RENEWAL
Mujtaba U GillianGermanyAmy Elsner PROPOSAL
Isabel O AmigonBrazilElwin Sharvill UNQUALIFIED
Juan E RoysterItalyAsiya Javayant NEGOTIATION
Frozen Columns
Name
Tony Z Bowley
Morrow Y Caldarera
Johnson J Nicka
Mujtaba C Briddick
Arvin U Darakjy
Leja U Amigon
Greenwood T Bolognia
Ricardo W Malet
Wickens J Kolmetz
Mayumi Y Nicka
Salvatore I Ostrosky
Ivar H Tollner
Maria H Venere
Arvin Q Ferencz
Faith B Figeroa
Greenwood Z Wieser
Emily Q Gillian
Mayumi F Bowley
Aditya M Doe
Julie D Tollner
Aruna B Royster
Alejandro G Waycott
Greenwood Q Ferencz
Nicolas O Foller
Isabel F Maclead
Maria D Gaucho
Francesco N Bowley
Misaki E Vocelka
Mayumi E Kusko
Leja C Caldarera
Misaki A Bolognia
Claire Z Kolmetz
Maria E Rim
Greenwood F Poquette
Clifford Y Tollner
Isabel X Nicka
Leon E Caudy
Ricardo P Shinko
Misaki J Dilliard
Darci U Figeroa
Ivar Q Shinko
Maisha Z Figeroa
Misaki N Flosi
Leja B Darakjy
Johnson B Campain
Francesco S Sergi
Sinclair L Bolognia
Jefferson Y Inouye
Octavia U Vocelka
Juan P Malet
IdCountryDate
1000Germany2025-04-21
1001Italy2025-04-03
1002Italy2025-04-19
1003India2025-04-20
1004United Kingdom2025-04-14
1005Germany2025-04-22
1006Argentina2025-04-09
1007Japan2025-04-05
1008Canada2025-04-18
1009Japan2025-04-30
1010Australia2025-04-09
1011France2025-04-28
1012France2025-04-08
1013Canada2025-04-12
1014Germany2025-04-24
1015Italy2025-04-30
1016Canada2025-04-13
1017Spain2025-04-04
1018Brazil2025-04-28
1019Japan2025-04-22
1020Japan2025-04-17
1021Australia2025-04-17
1022Japan2025-04-05
1023Italy2025-04-11
1024Italy2025-04-07
1025Spain2025-04-10
1026United Kingdom2025-04-28
1027Canada2025-04-14
1028Spain2025-04-29
1029Argentina2025-04-28
1030Australia2025-04-07
1031Australia2025-04-19
1032Australia2025-04-16
1033Canada2025-04-24
1034Argentina2025-04-12
1035Spain2025-04-24
1036Australia2025-04-27
1037Italy2025-04-29
1038Argentina2025-04-18
1039United Kingdom2025-04-19
1040Italy2025-04-30
1041Canada2025-04-22
1042Brazil2025-04-02
1043Brazil2025-04-07
1044France2025-04-08
1045France2025-04-14
1046Australia2025-04-30
1047India2025-04-14
1048Argentina2025-04-22
1049Argentina2025-04-05

On-Demand Data

NameIdCountryDate
Morrow U Flosi1000Japan2025-04-07
Greenwood D Kusko1001Italy2025-04-29
Chavez Q Garufi1002Germany2025-04-06
Jennifer X Oldroyd1003Italy2025-04-16
Kaitlin K Marrier1004Australia2025-04-20
Maria O Tollner1005India2025-04-28
Morrow W Iturbide1006United Kingdom2025-04-18
Aika A Flosi1007Argentina2025-04-22
Francesco Q Ostrosky1008Russia2025-04-05
Ricardo B Nicka1009Canada2025-04-21
Kaitlin I Dilliard1010Japan2025-04-20
Misaki V Foller1011Australia2025-04-20
Jefferson N Slusarski1012India2025-04-06
Johnson J Dilliard1013France2025-04-24
Tony J Vocelka1014France2025-04-03
Aika O Nicka1015France2025-04-10
Claire Q Chui1016Japan2025-04-26
Greenwood F Doe1017Germany2025-04-18
Stacey N Vocelka1018Spain2025-04-14
Leja L Sergi1019India2025-04-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Isabel V StockhamIndiaIoni Bowcher RENEWAL
Emily A FlosiIndiaAmy Elsner UNQUALIFIED
Ivar B ButtGermanyIvan Magalhaes NEGOTIATION
Jefferson K MorascaItalyXuxue Feng NEW
James L AlbaresIndiaAnna Fali RENEWAL
Silvio D CampainUnited KingdomStephen Shaw PROPOSAL
Nicolas F RoysterGermanyXuxue Feng RENEWAL
Octavia A RimGermanyStephen Shaw NEGOTIATION
Jennifer J WhobreyBrazilAsiya Javayant RENEWAL
Rodrigues Y MarrierArgentinaOnyama Limba QUALIFIED
Chavez E PerinAustraliaElwin Sharvill UNQUALIFIED
Adams C VocelkaBrazilXuxue Feng QUALIFIED
Sinclair Q NickaCanadaXuxue Feng UNQUALIFIED
Claire U InouyeGermanyAsiya Javayant NEGOTIATION
Antonio F PerinFranceAmy Elsner UNQUALIFIED
Alejandro K KuskoFranceXuxue Feng QUALIFIED
Adams J OldroydJapanAmy Elsner NEGOTIATION
Aika Z SaylorsSpainXuxue Feng RENEWAL
Adams V DarakjyBrazilXuxue Feng RENEWAL
Leon D CaudyCanadaAsiya Javayant NEW
Morrow L GauchoIndiaIvan Magalhaes NEW
Sinclair V CaldareraAustraliaOnyama Limba RENEWAL
Aika T DarakjyUnited KingdomStephen Shaw NEW
Izzy O InouyeBrazilAnna Fali UNQUALIFIED
Leon N KuskoItalyAmy Elsner PROPOSAL
Chavez H TollnerGermanyAmy Elsner QUALIFIED
James I AlbaresUnited KingdomAnna Fali UNQUALIFIED
Mujtaba Y SchemmerSpainIoni Bowcher NEW
Izzy Y DarakjyItalyStephen Shaw NEW
Aika V BologniaBrazilXuxue Feng PROPOSAL
Murillo O GauchoItalyStephen Shaw PROPOSAL
Munro M StensethGermanyAmy Elsner UNQUALIFIED
Johnson L StensethUnited KingdomXuxue Feng QUALIFIED
Francesco J DoeUnited KingdomXuxue Feng NEW
Costa M TollnerAustraliaAmy Elsner PROPOSAL
Leja N RimItalyIoni Bowcher PROPOSAL
James A MorascaCanadaAnna Fali NEW
Izzy P InouyeUnited KingdomIoni Bowcher PROPOSAL
Juan Z TollnerRussiaAnna Fali PROPOSAL
Smith P FerenczGermanyIvan Magalhaes RENEWAL

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