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
Wickens R SlusarskiAustraliaElwin Sharvill NEGOTIATION
Juan O DoeGermanyIoni Bowcher RENEWAL
Ivar W MacleadBrazilIvan Magalhaes RENEWAL
Claire G RoysterGermanyBernardo Dominic PROPOSAL
Julie Q RimArgentinaAsiya Javayant NEW
Arvin O FlosiUnited KingdomIoni Bowcher RENEWAL
Jeanfrancois C VocelkaUnited KingdomBernardo Dominic UNQUALIFIED
Kaitlin I IturbideGermanyIoni Bowcher NEGOTIATION
Nicolas E ShinkoFranceAnna Fali QUALIFIED
Kadeem K DoeUnited KingdomIvan Magalhaes PROPOSAL
Murillo Q DoeGermanyStephen Shaw NEGOTIATION
Wickens H MaletCanadaStephen Shaw UNQUALIFIED
Wickens E WhobreyAustraliaBernardo Dominic UNQUALIFIED
Julie F GauchoGermanyIoni Bowcher PROPOSAL
Mayumi R GlickSpainIoni Bowcher PROPOSAL
Leon D WieserIndiaIoni Bowcher UNQUALIFIED
Alejandro E FlosiItalyStephen Shaw PROPOSAL
Jennifer R MorascaJapanIvan Magalhaes NEW
Jones N DilliardAustraliaElwin Sharvill NEW
Claire Q BologniaIndiaAsiya Javayant NEGOTIATION
Aika K NestleRussiaXuxue Feng NEGOTIATION
Claire J KuskoIndiaAmy Elsner NEW
Wickens F GlickIndiaElwin Sharvill NEW
Francesco A StensethItalyIoni Bowcher NEGOTIATION
David L PoquetteGermanyAsiya Javayant QUALIFIED
Maria Y CampainArgentinaIoni Bowcher QUALIFIED
Stacey C CampainItalyIoni Bowcher QUALIFIED
Adams L SaylorsItalyIoni Bowcher NEW
Rodrigues A GarufiUnited KingdomIvan Magalhaes PROPOSAL
Smith U RutaArgentinaIoni Bowcher RENEWAL
Kaitlin R SergiIndiaAmy Elsner NEGOTIATION
Claire S AmigonGermanyBernardo Dominic QUALIFIED
Julie V ShinkoBrazilBernardo Dominic RENEWAL
Claire M ChuiUnited KingdomOnyama Limba NEGOTIATION
Mujtaba K GauchoBrazilStephen Shaw UNQUALIFIED
Mayumi I VocelkaIndiaAmy Elsner PROPOSAL
Alejandro X SaylorsSpainStephen Shaw RENEWAL
James T RimFranceBernardo Dominic RENEWAL
Emily W RulapaughUnited KingdomAmy Elsner QUALIFIED
Munro A BologniaItalyIoni Bowcher RENEWAL
Jeanfrancois N CaldareraBrazilIoni Bowcher NEW
Salvatore K NestleRussiaBernardo Dominic NEGOTIATION
Salvatore W StensethItalyOnyama Limba RENEWAL
Leja V SlusarskiSpainIoni Bowcher NEGOTIATION
David W RimArgentinaBernardo Dominic NEW
Sinclair V StensethBrazilAnna Fali NEGOTIATION
Johnson Q WhobreyUnited KingdomOnyama Limba QUALIFIED
Alejandro U DilliardAustraliaAnna Fali NEW
Murillo N RulapaughGermanyIoni Bowcher PROPOSAL
Morrow Z SlusarskiBrazilIoni Bowcher PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Greenwood C StockhamAustraliaOnyama Limba QUALIFIED
Silvio E ShinkoCanadaOnyama Limba QUALIFIED
Kadeem U IturbideSpainIvan Magalhaes NEGOTIATION
Isabel L AlbaresCanadaOnyama Limba RENEWAL
Leon G ButtGermanyAsiya Javayant RENEWAL
Aruna W DarakjyCanadaIoni Bowcher QUALIFIED
Sinclair K WhobreyItalyElwin Sharvill UNQUALIFIED
Jefferson D MaletArgentinaAsiya Javayant QUALIFIED
Julie U GarufiSpainAsiya Javayant NEW
Costa V FigeroaBrazilAmy Elsner RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Nicolas E KuskoCanada2025-05-14Feiner Bros PROPOSAL53Asiya Javayant
1001Jones S KolmetzAustralia2025-05-25Chapman, Ross E Esq NEW78Onyama Limba
1002Clifford P CaldareraSpain2025-05-31King, Christopher A Esq RENEWAL31Xuxue Feng
1003Julie A PerinArgentina2025-05-11Rousseaux, Michael Esq RENEWAL74Onyama Limba
1004Emily T StensethSpain2025-05-16Morlong Associates QUALIFIED84Bernardo Dominic
1005Salvatore V KuskoCanada2025-05-03Chapman, Ross E Esq RENEWAL62Elwin Sharvill
1006Leon M KuskoGermany2025-05-30Chemel, James L Cpa NEW28Amy Elsner
1007Darci P VocelkaGermany2025-05-31Rangoni Of Florence PROPOSAL28Ioni Bowcher
1008Chavez Q ShinkoAustralia2025-05-05Benton, John B Jr RENEWAL55Asiya Javayant
1009Misaki L OstroskySpain2025-05-23Chanay, Jeffrey A Esq NEW29Elwin Sharvill
1010Faith O ShinkoGermany2025-05-28Chemel, James L Cpa QUALIFIED39Asiya Javayant
1011Murillo Y GillianJapan2025-05-17Chanay, Jeffrey A Esq PROPOSAL62Stephen Shaw
1012Claire E PaprockiItaly2025-05-13Feiner Bros UNQUALIFIED93Asiya Javayant
1013Sinclair L WaycottJapan2025-05-27Morlong Associates QUALIFIED32Ivan Magalhaes
1014Isabel L MacleadRussia2025-05-09Morlong Associates UNQUALIFIED53Ivan Magalhaes
1015Adams B AmigonItaly2025-05-03Feltz Printing Service RENEWAL99Onyama Limba
1016Ivar F VocelkaGermany2025-05-15Chemel, James L Cpa PROPOSAL65Xuxue Feng
1017Julie U MaletUnited Kingdom2025-05-14King, Christopher A Esq NEW31Asiya Javayant
1018Greenwood U MacleadCanada2025-05-06Commercial Press NEW31Amy Elsner
1019Darci W WaycottFrance2025-05-03Chapman, Ross E Esq NEW10Stephen Shaw
1020Aika Q StockhamCanada2025-05-15Commercial Press NEGOTIATION83Onyama Limba
1021Kaitlin M FollerArgentina2025-05-30Morlong Associates RENEWAL76Bernardo Dominic
1022Claire P ChuiItaly2025-05-06Rangoni Of Florence UNQUALIFIED56Onyama Limba
1023Maisha S KuskoAustralia2025-05-07Commercial Press UNQUALIFIED73Stephen Shaw
1024Stacey F DilliardArgentina2025-05-28Feiner Bros QUALIFIED1Onyama Limba
1025Julie P StockhamSpain2025-05-15Benton, John B Jr UNQUALIFIED61Amy Elsner
1026Antonio F FigeroaFrance2025-05-30Dorl, James J Esq NEGOTIATION95Xuxue Feng
1027Izzy M FlosiArgentina2025-05-19Commercial Press PROPOSAL19Onyama Limba
1028Maria I PaprockiSpain2025-05-17Rangoni Of Florence NEGOTIATION42Ivan Magalhaes
1029Mayumi A CampainCanada2025-05-11Chanay, Jeffrey A Esq NEGOTIATION38Asiya Javayant
1030Ricardo P DilliardAustralia2025-05-28Rangoni Of Florence UNQUALIFIED97Elwin Sharvill
1031Antonio B BriddickFrance2025-05-25Truhlar And Truhlar Attys NEW34Ivan Magalhaes
1032Arvin B MaletJapan2025-05-09Truhlar And Truhlar Attys QUALIFIED91Elwin Sharvill
1033Isabel S SchemmerSpain2025-05-29Chapman, Ross E Esq NEGOTIATION40Elwin Sharvill
1034Tony A MarrierArgentina2025-05-09Feiner Bros QUALIFIED97Onyama Limba
1035Isabel C RutaCanada2025-05-08Truhlar And Truhlar Attys NEW95Ivan Magalhaes
1036Nicolas M CampainCanada2025-05-29Rousseaux, Michael Esq NEW24Ioni Bowcher
1037Izzy P AlbaresRussia2025-05-31King, Christopher A Esq QUALIFIED15Anna Fali
1038Salvatore B BologniaBrazil2025-05-15Dorl, James J Esq NEGOTIATION69Elwin Sharvill
1039Misaki W SlusarskiItaly2025-05-28Truhlar And Truhlar Attys UNQUALIFIED33Xuxue Feng
1040Tony I FlosiRussia2025-05-25Rangoni Of Florence NEW86Ivan Magalhaes
1041Izzy U RoysterItaly2025-05-31Benton, John B Jr PROPOSAL75Ivan Magalhaes
1042Kaitlin E SlusarskiRussia2025-05-04Rangoni Of Florence RENEWAL9Stephen Shaw
1043Kaitlin D RimItaly2025-05-28Feltz Printing Service RENEWAL2Stephen Shaw
1044Mujtaba X SlusarskiFrance2025-05-21Rousseaux, Michael Esq QUALIFIED87Elwin Sharvill
1045Aruna W OldroydArgentina2025-05-27King, Christopher A Esq PROPOSAL8Anna Fali
1046Darci P PerinGermany2025-05-17Rangoni Of Florence PROPOSAL39Ivan Magalhaes
1047Nicolas S MarrierIndia2025-05-28Chapman, Ross E Esq RENEWAL29Onyama Limba
1048Antonio P RoysterAustralia2025-05-15Chapman, Ross E Esq UNQUALIFIED23Anna Fali
1049David C MaletRussia2025-05-25Chapman, Ross E Esq PROPOSAL56Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Johnson G NestleCanadaAmy Elsner NEW
Cody O OldroydCanadaIvan Magalhaes NEGOTIATION
David P DoeAustraliaIvan Magalhaes PROPOSAL
Tony D CampainFranceOnyama Limba UNQUALIFIED
Maria K DilliardGermanyAmy Elsner RENEWAL
Emily W CaldareraSpainIvan Magalhaes PROPOSAL
Octavia I BriddickSpainOnyama Limba QUALIFIED
Maisha M PerinJapanXuxue Feng QUALIFIED
Stacey A WhobreyIndiaAmy Elsner NEW
Misaki O NickaRussiaStephen Shaw PROPOSAL
Leja V VenereBrazilAnna Fali NEGOTIATION
Salvatore K MacleadUnited KingdomBernardo Dominic NEW
Cody S CaudySpainOnyama Limba QUALIFIED
Clifford K StockhamJapanAnna Fali QUALIFIED
Leon N GlickGermanyStephen Shaw UNQUALIFIED
Salvatore C RimUnited KingdomStephen Shaw QUALIFIED
Silvio P WaycottUnited KingdomBernardo Dominic UNQUALIFIED
Ashley H BowleyItalyAnna Fali NEGOTIATION
Costa Z SlusarskiJapanAnna Fali RENEWAL
Cody P MarrierFranceOnyama Limba NEW
Maria E StensethBrazilIoni Bowcher UNQUALIFIED
Jennifer C PerinItalyIvan Magalhaes PROPOSAL
Costa D KolmetzCanadaElwin Sharvill NEGOTIATION
Murillo U DoeRussiaIoni Bowcher NEW
Faith C IturbideFranceOnyama Limba PROPOSAL
Francesco O MaletSpainAsiya Javayant PROPOSAL
Aditya O DilliardRussiaIoni Bowcher PROPOSAL
Tony R PerinJapanAsiya Javayant NEGOTIATION
Aruna B VocelkaJapanOnyama Limba RENEWAL
Stacey V BologniaSpainAsiya Javayant RENEWAL
Julie Z MarrierRussiaIvan Magalhaes NEGOTIATION
Octavia T TollnerAustraliaIoni Bowcher RENEWAL
Claire P WaycottFranceBernardo Dominic UNQUALIFIED
Misaki U StockhamSpainIvan Magalhaes PROPOSAL
Izzy J GlickGermanyElwin Sharvill QUALIFIED
Isabel G SchemmerGermanyOnyama Limba NEGOTIATION
Claire Q FlosiGermanyIvan Magalhaes PROPOSAL
Munro B RoysterFranceStephen Shaw RENEWAL
Ashley W FerenczSpainOnyama Limba NEGOTIATION
Johnson H RimFranceIoni Bowcher NEW
Jeanfrancois T TollnerCanadaAmy Elsner NEW
Alejandro L SlusarskiRussiaAnna Fali NEW
Rodrigues D BowleyAustraliaIoni Bowcher QUALIFIED
Antonio L MorascaBrazilXuxue Feng QUALIFIED
Wickens Z GauchoFranceAmy Elsner NEW
Jones O GillianRussiaIvan Magalhaes NEGOTIATION
Jennifer X ButtArgentinaAmy Elsner QUALIFIED
David F DoeSpainAnna Fali NEGOTIATION
Morrow E ShinkoGermanyIoni Bowcher UNQUALIFIED
Darci Y DilliardJapanElwin Sharvill NEGOTIATION
Frozen Columns
Name
David T Sergi
David H Vocelka
Wickens S Maclead
Arvin Q Darakjy
Alejandro V Doe
Emily U Bowley
Julie C Amigon
Misaki Y Kusko
Sinclair K Kusko
Mayumi R Perin
Misaki F Gillian
Johnson A Kolmetz
Jennifer N Venere
Morrow P Caudy
Tony G Marrier
Silvio Z Glick
Clifford I Royster
Aruna E Albares
Kaitlin G Venere
Adams W Rim
Costa U Maclead
Ivar G Sergi
Silvio O Amigon
Silvio V Sergi
Sinclair O Malet
Alejandro Y Royster
Smith R Gillian
Clifford E Chui
Tony E Venere
Juan K Darakjy
Leon V Albares
Aruna K Saylors
Leon B Butt
Ricardo Q Iturbide
Costa Z Inouye
Francesco Y Paprocki
Leja O Stockham
Rodrigues T Albares
Kaitlin N Foller
Salvatore L Albares
Jennifer T Nicka
Jefferson R Gaucho
Greenwood D Paprocki
Antonio P Nicka
Faith G Glick
Julie V Nicka
Deepesh F Ferencz
Chavez S Morasca
Nicolas F Shinko
Maria V Caudy
IdCountryDate
1000Japan2025-05-19
1001Brazil2025-05-27
1002Brazil2025-05-23
1003France2025-05-19
1004Russia2025-05-20
1005Canada2025-05-28
1006Japan2025-05-07
1007Germany2025-05-08
1008Argentina2025-05-04
1009Italy2025-05-10
1010Italy2025-05-04
1011Brazil2025-05-29
1012India2025-05-15
1013Argentina2025-05-02
1014Canada2025-05-23
1015India2025-05-18
1016Italy2025-05-11
1017Spain2025-05-14
1018Argentina2025-05-05
1019Argentina2025-05-17
1020Brazil2025-05-14
1021Argentina2025-05-08
1022Italy2025-05-17
1023Spain2025-05-07
1024Italy2025-05-14
1025Brazil2025-05-10
1026France2025-05-10
1027France2025-05-16
1028Australia2025-05-26
1029Spain2025-05-26
1030Russia2025-05-20
1031France2025-05-07
1032Spain2025-05-28
1033Italy2025-05-24
1034Russia2025-05-03
1035Spain2025-05-09
1036United Kingdom2025-05-09
1037Argentina2025-05-23
1038Argentina2025-05-13
1039Germany2025-05-22
1040Germany2025-05-31
1041Italy2025-05-30
1042United Kingdom2025-05-29
1043Brazil2025-05-20
1044Brazil2025-05-03
1045Spain2025-05-15
1046France2025-05-08
1047Brazil2025-05-16
1048Russia2025-05-19
1049France2025-05-21

On-Demand Data

NameIdCountryDate
Antonio N Foller1000Russia2025-05-09
Morrow Q Ruta1001Canada2025-05-29
Leon Z Gillian1002Canada2025-05-30
Julie L Kolmetz1003Japan2025-05-19
Octavia K Royster1004France2025-05-03
Clifford U Slusarski1005Italy2025-05-22
Izzy V Briddick1006United Kingdom2025-05-17
Kaitlin R Vocelka1007Brazil2025-05-07
Morrow Z Perin1008Argentina2025-05-20
Aruna C Waycott1009Spain2025-05-06
Tony I Caudy1010Italy2025-05-17
Cody O Caldarera1011India2025-05-24
Clifford L Campain1012Russia2025-05-17
Maisha N Bolognia1013Germany2025-05-17
Silvio M Bowley1014India2025-05-21
Nicolas F Campain1015Argentina2025-05-15
Leja C Rim1016Canada2025-05-10
Aika U Amigon1017Germany2025-05-24
Aditya M Marrier1018Argentina2025-05-06
Jennifer I Ferencz1019Australia2025-05-31
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Smith E RulapaughIndiaXuxue Feng QUALIFIED
Clifford K PoquetteUnited KingdomOnyama Limba NEGOTIATION
Claire D RutaSpainIoni Bowcher QUALIFIED
Alejandro R GlickCanadaOnyama Limba NEGOTIATION
David U StensethFranceIvan Magalhaes UNQUALIFIED
Aruna L DarakjyBrazilAnna Fali NEW
James Q OldroydIndiaIoni Bowcher NEGOTIATION
Jeanfrancois S MacleadItalyAmy Elsner QUALIFIED
Arvin R RulapaughArgentinaAnna Fali UNQUALIFIED
Aruna I CaudySpainIoni Bowcher PROPOSAL
Munro B GarufiCanadaOnyama Limba PROPOSAL
Emily S GauchoIndiaAmy Elsner QUALIFIED
Leja F OldroydIndiaAmy Elsner RENEWAL
Jefferson U BowleySpainOnyama Limba NEGOTIATION
Smith D DoeItalyElwin Sharvill NEW
David A MaletFranceAsiya Javayant NEGOTIATION
Jennifer N BriddickSpainAnna Fali NEGOTIATION
Mayumi L PerinJapanAsiya Javayant PROPOSAL
Maisha P MorascaGermanyAsiya Javayant PROPOSAL
Mayumi I BriddickUnited KingdomIoni Bowcher NEGOTIATION
Adams K RutaItalyBernardo Dominic UNQUALIFIED
Ivar J GarufiGermanyXuxue Feng NEGOTIATION
Aditya P RimItalyAsiya Javayant QUALIFIED
Mujtaba F MacleadArgentinaBernardo Dominic RENEWAL
Aditya H RutaAustraliaBernardo Dominic NEGOTIATION
Jones R TollnerFranceIoni Bowcher PROPOSAL
Aditya W PoquetteSpainBernardo Dominic PROPOSAL
Octavia W GlickFranceStephen Shaw NEGOTIATION
Aika I GillianUnited KingdomIoni Bowcher NEW
Kaitlin X GauchoGermanyXuxue Feng PROPOSAL
Deepesh M FlosiItalyAnna Fali NEGOTIATION
Kadeem H RutaBrazilXuxue Feng NEW
Faith K BriddickGermanyAmy Elsner NEW
Kaitlin Y RulapaughUnited KingdomBernardo Dominic UNQUALIFIED
Costa I MaletCanadaBernardo Dominic RENEWAL
Izzy Y VenereArgentinaIoni Bowcher NEGOTIATION
Adams S CampainBrazilAsiya Javayant QUALIFIED
Smith Z PerinItalyIvan Magalhaes NEW
Aruna R OstroskySpainBernardo Dominic PROPOSAL
Rodrigues U MaletJapanAnna Fali 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>