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
Leon T CaldareraIndiaAmy Elsner RENEWAL
Kadeem A MaletRussiaOnyama Limba NEGOTIATION
Jones U NestleArgentinaAmy Elsner NEGOTIATION
James R KuskoJapanAsiya Javayant NEGOTIATION
Faith U DarakjyFranceAnna Fali NEGOTIATION
Kaitlin M MorascaIndiaAsiya Javayant NEW
Mujtaba J DilliardItalyBernardo Dominic UNQUALIFIED
David Q MaletCanadaXuxue Feng PROPOSAL
Faith N RoysterFranceXuxue Feng QUALIFIED
Aditya N DoeBrazilXuxue Feng RENEWAL
Antonio M FigeroaCanadaAsiya Javayant NEW
Smith E StockhamItalyAnna Fali NEW
David A RulapaughFranceBernardo Dominic NEW
Smith N RutaGermanyBernardo Dominic NEW
Munro M CaldareraFranceAnna Fali NEGOTIATION
Claire Q RimGermanyAmy Elsner NEGOTIATION
Aditya E RimBrazilIoni Bowcher UNQUALIFIED
Rodrigues Z ButtRussiaBernardo Dominic RENEWAL
Misaki O WieserRussiaIoni Bowcher UNQUALIFIED
Ricardo B FigeroaSpainAnna Fali NEW
Kaitlin H RulapaughSpainAnna Fali NEW
Adams N MaletArgentinaIvan Magalhaes RENEWAL
Faith A GillianFranceAsiya Javayant NEW
Francesco E CaudyFranceAsiya Javayant PROPOSAL
Mujtaba C MaletIndiaIvan Magalhaes UNQUALIFIED
Alejandro Q WaycottAustraliaAnna Fali UNQUALIFIED
Murillo Q OstroskyAustraliaAnna Fali NEGOTIATION
Arvin E NestleArgentinaBernardo Dominic NEW
Ivar Q BowleyFranceIoni Bowcher PROPOSAL
Jones N MacleadFranceAnna Fali QUALIFIED
Jefferson Y SlusarskiIndiaXuxue Feng NEGOTIATION
Leon R CaldareraRussiaIoni Bowcher RENEWAL
Costa O DilliardGermanyIvan Magalhaes NEW
Mayumi C ShinkoItalyOnyama Limba UNQUALIFIED
Murillo I SaylorsIndiaIoni Bowcher PROPOSAL
Sinclair C GillianArgentinaAsiya Javayant UNQUALIFIED
Julie F OstroskyGermanyIvan Magalhaes NEGOTIATION
Darci S MarrierUnited KingdomAsiya Javayant QUALIFIED
Rodrigues C VenereAustraliaIoni Bowcher UNQUALIFIED
Costa S VenereArgentinaXuxue Feng NEGOTIATION
Greenwood K PoquetteIndiaStephen Shaw QUALIFIED
Aika Q MaletArgentinaIvan Magalhaes RENEWAL
Stacey F ButtGermanyOnyama Limba UNQUALIFIED
Chavez K StockhamJapanXuxue Feng QUALIFIED
Aika G NestleIndiaXuxue Feng UNQUALIFIED
Clifford F IturbideBrazilIoni Bowcher QUALIFIED
Emily V NestleGermanyElwin Sharvill QUALIFIED
Jefferson N GlickItalyAnna Fali NEW
Arvin M MaletRussiaOnyama Limba UNQUALIFIED
Octavia T CaldareraIndiaIoni Bowcher PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Kadeem D ShinkoCanadaStephen Shaw NEGOTIATION
Julie S ShinkoUnited KingdomAsiya Javayant PROPOSAL
Darci V FlosiIndiaStephen Shaw UNQUALIFIED
Chavez U MarrierRussiaAsiya Javayant UNQUALIFIED
Greenwood H RutaAustraliaAnna Fali RENEWAL
Nicolas U MaletGermanyStephen Shaw RENEWAL
Jones J GillianIndiaIvan Magalhaes RENEWAL
Greenwood S NestleCanadaStephen Shaw NEW
Alejandro F CaldareraRussiaIvan Magalhaes RENEWAL
Salvatore L GauchoBrazilElwin Sharvill PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aruna Y WaycottUnited Kingdom2024-09-06Commercial Press PROPOSAL81Asiya Javayant
1001Jennifer B NickaItaly2024-09-20Chanay, Jeffrey A Esq PROPOSAL49Asiya Javayant
1002Kadeem K PerinFrance2024-09-18Rangoni Of Florence RENEWAL52Elwin Sharvill
1003Misaki F GillianGermany2024-09-03Benton, John B Jr UNQUALIFIED68Elwin Sharvill
1004Nicolas Z IturbideJapan2024-09-08King, Christopher A Esq QUALIFIED48Amy Elsner
1005Izzy H PoquetteAustralia2024-09-09Morlong Associates NEW53Bernardo Dominic
1006Ashley V DilliardJapan2024-08-30Morlong Associates UNQUALIFIED74Elwin Sharvill
1007Cody H RulapaughSpain2024-09-02Rousseaux, Michael Esq QUALIFIED86Amy Elsner
1008Izzy E VocelkaCanada2024-08-24Rousseaux, Michael Esq PROPOSAL43Asiya Javayant
1009Cody J KuskoCanada2024-08-27Buckley Miller Wright QUALIFIED3Amy Elsner
1010Kadeem M KolmetzArgentina2024-09-10Rousseaux, Michael Esq NEW10Asiya Javayant
1011Jennifer M SlusarskiArgentina2024-09-22Chemel, James L Cpa RENEWAL73Stephen Shaw
1012Greenwood Q FigeroaJapan2024-09-04Benton, John B Jr RENEWAL23Xuxue Feng
1013Adams N MaletSpain2024-09-02Chapman, Ross E Esq NEW75Onyama Limba
1014Costa Y SergiFrance2024-09-09Buckley Miller Wright UNQUALIFIED6Asiya Javayant
1015Juan T CampainUnited Kingdom2024-09-19Feltz Printing Service RENEWAL16Ioni Bowcher
1016Jefferson H DarakjyGermany2024-08-31Truhlar And Truhlar Attys NEGOTIATION50Bernardo Dominic
1017Jones R VocelkaArgentina2024-09-12Truhlar And Truhlar Attys NEGOTIATION53Amy Elsner
1018Antonio S AlbaresJapan2024-09-08Buckley Miller Wright QUALIFIED59Asiya Javayant
1019Greenwood O DilliardGermany2024-09-13Chanay, Jeffrey A Esq QUALIFIED91Elwin Sharvill
1020Arvin E RutaJapan2024-09-21Chanay, Jeffrey A Esq NEGOTIATION20Ioni Bowcher
1021Arvin Y MarrierBrazil2024-08-31Truhlar And Truhlar Attys NEW69Elwin Sharvill
1022Maisha R SlusarskiArgentina2024-09-07Feiner Bros RENEWAL18Amy Elsner
1023Darci I DarakjyUnited Kingdom2024-08-24Dorl, James J Esq RENEWAL92Stephen Shaw
1024Maria B AmigonFrance2024-09-12Chemel, James L Cpa QUALIFIED75Onyama Limba
1025Mujtaba X TollnerItaly2024-09-17Chemel, James L Cpa NEW62Anna Fali
1026Octavia D SergiRussia2024-09-18King, Christopher A Esq QUALIFIED60Amy Elsner
1027Salvatore Q MaletGermany2024-09-20Feiner Bros NEW26Anna Fali
1028Jones X BriddickCanada2024-09-17Chanay, Jeffrey A Esq QUALIFIED69Anna Fali
1029Rodrigues F MaletJapan2024-09-18Printing Dimensions RENEWAL6Ivan Magalhaes
1030Arvin P OstroskyAustralia2024-09-02Feiner Bros PROPOSAL21Bernardo Dominic
1031Wickens G AmigonAustralia2024-09-15Chapman, Ross E Esq PROPOSAL15Bernardo Dominic
1032Greenwood V KuskoJapan2024-09-07Morlong Associates PROPOSAL59Anna Fali
1033Arvin S ButtArgentina2024-09-08Rangoni Of Florence UNQUALIFIED75Onyama Limba
1034Sinclair C MaletGermany2024-09-14Feltz Printing Service UNQUALIFIED11Stephen Shaw
1035Ivar L GlickBrazil2024-09-19Morlong Associates QUALIFIED89Ivan Magalhaes
1036Francesco F WaycottAustralia2024-09-07Morlong Associates NEGOTIATION37Onyama Limba
1037Octavia A ChuiUnited Kingdom2024-08-26Chanay, Jeffrey A Esq NEGOTIATION94Anna Fali
1038Sinclair J OldroydIndia2024-09-03Benton, John B Jr RENEWAL24Elwin Sharvill
1039Mujtaba K SaylorsCanada2024-09-08Chapman, Ross E Esq NEW71Ioni Bowcher
1040James L OldroydCanada2024-09-03Dorl, James J Esq UNQUALIFIED2Anna Fali
1041Aruna Q MarrierJapan2024-09-03Commercial Press NEW53Anna Fali
1042Wickens E OldroydRussia2024-09-15Feltz Printing Service QUALIFIED7Xuxue Feng
1043Stacey N MarrierSpain2024-09-08Morlong Associates NEW91Ioni Bowcher
1044Alejandro L CaudyItaly2024-09-11Chemel, James L Cpa RENEWAL47Ioni Bowcher
1045Morrow P FigeroaItaly2024-09-18Commercial Press NEW81Stephen Shaw
1046Clifford S FollerAustralia2024-08-29Feltz Printing Service UNQUALIFIED21Ioni Bowcher
1047Ivar O MorascaRussia2024-08-29Chapman, Ross E Esq UNQUALIFIED89Ioni Bowcher
1048Ashley E MarrierItaly2024-08-26Benton, John B Jr UNQUALIFIED1Onyama Limba
1049Silvio L RimBrazil2024-09-11Chemel, James L Cpa UNQUALIFIED89Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Aruna B GarufiJapanStephen Shaw QUALIFIED
Murillo X BowleyGermanyXuxue Feng UNQUALIFIED
Silvio Z CampainRussiaBernardo Dominic NEW
Maria Z InouyeArgentinaOnyama Limba NEW
Ashley D PerinUnited KingdomAnna Fali NEW
Murillo V GauchoRussiaOnyama Limba RENEWAL
Arvin A WaycottSpainBernardo Dominic PROPOSAL
Faith Q SlusarskiGermanyIoni Bowcher QUALIFIED
Claire N PoquetteRussiaIvan Magalhaes NEW
Chavez X PerinArgentinaIvan Magalhaes RENEWAL
Isabel I BowleyIndiaIvan Magalhaes UNQUALIFIED
Rodrigues D FigeroaRussiaBernardo Dominic QUALIFIED
Clifford K VenereJapanOnyama Limba RENEWAL
Aruna K SlusarskiGermanyIoni Bowcher QUALIFIED
Izzy J VenereRussiaIvan Magalhaes PROPOSAL
Jefferson T NestleGermanyAmy Elsner RENEWAL
Chavez O KuskoGermanyIoni Bowcher NEW
Adams X MaletGermanyIoni Bowcher UNQUALIFIED
Morrow H FigeroaGermanyXuxue Feng QUALIFIED
Silvio X ShinkoAustraliaAmy Elsner RENEWAL
Smith V FlosiSpainAmy Elsner NEW
Isabel T RoysterItalyIvan Magalhaes QUALIFIED
Misaki Q RoysterRussiaBernardo Dominic NEGOTIATION
Aditya E WieserFranceAmy Elsner UNQUALIFIED
Kadeem U SlusarskiItalyAmy Elsner NEGOTIATION
Jones I CaldareraJapanBernardo Dominic RENEWAL
Arvin J PoquetteBrazilBernardo Dominic NEW
Costa M InouyeGermanyBernardo Dominic NEGOTIATION
Munro K WaycottFranceIoni Bowcher RENEWAL
Stacey L FigeroaBrazilElwin Sharvill RENEWAL
Morrow E SaylorsAustraliaAmy Elsner NEW
Nicolas B CaldareraJapanAmy Elsner RENEWAL
Izzy V CampainSpainIoni Bowcher RENEWAL
David M PaprockiRussiaAmy Elsner NEGOTIATION
Aika I SlusarskiSpainIoni Bowcher QUALIFIED
Maisha R BologniaRussiaBernardo Dominic PROPOSAL
Faith P SaylorsAustraliaOnyama Limba UNQUALIFIED
Nicolas N OstroskyFranceXuxue Feng NEGOTIATION
Ivar G InouyeItalyStephen Shaw NEGOTIATION
Jeanfrancois L ShinkoCanadaElwin Sharvill RENEWAL
Octavia Z NestleAustraliaBernardo Dominic NEW
Jefferson Q CampainGermanyAmy Elsner NEGOTIATION
Faith T VocelkaIndiaOnyama Limba NEGOTIATION
Deepesh S MorascaItalyXuxue Feng RENEWAL
Stacey M MacleadIndiaAmy Elsner NEW
Faith V FigeroaUnited KingdomOnyama Limba RENEWAL
Costa E DilliardRussiaOnyama Limba PROPOSAL
Mayumi Y GlickGermanyElwin Sharvill NEGOTIATION
Stacey G OldroydUnited KingdomIvan Magalhaes RENEWAL
Silvio L ChuiIndiaStephen Shaw NEGOTIATION
Frozen Columns
Name
Smith E Slusarski
Faith Z Saylors
Misaki C Sergi
Aruna E Bolognia
Deepesh F Waycott
Salvatore P Poquette
Silvio Z Kusko
Jennifer F Wieser
Emily C Vocelka
Costa X Nestle
Smith O Vocelka
Deepesh F Flosi
Morrow H Stockham
Smith H Stockham
Mayumi B Royster
Emily I Sergi
Izzy P Flosi
Misaki A Rulapaugh
Isabel H Slusarski
Johnson H Gillian
Jones Q Bowley
Octavia N Bolognia
Aditya I Saylors
Clifford S Poquette
Morrow U Wieser
Leja Z Ferencz
Jeanfrancois S Figeroa
Aruna O Garufi
Jones Y Saylors
Mayumi Y Ruta
Jefferson Z Oldroyd
Greenwood Q Dilliard
Maisha L Chui
Ivar H Stockham
Chavez L Slusarski
Maria A Morasca
Cody W Campain
Ivar L Nestle
Jones K Albares
Jones S Inouye
Claire E Gillian
Clifford V Amigon
Leon S Sergi
Julie T Inouye
Rodrigues Z Foller
Faith P Foller
David L Briddick
Izzy Y Albares
Emily V Saylors
Faith U Bowley
IdCountryDate
1000India2024-09-07
1001United Kingdom2024-09-06
1002Spain2024-08-31
1003Argentina2024-09-12
1004France2024-08-26
1005Brazil2024-08-24
1006France2024-08-24
1007Spain2024-09-20
1008Brazil2024-08-26
1009Germany2024-09-19
1010Italy2024-09-01
1011United Kingdom2024-09-04
1012Russia2024-08-31
1013India2024-09-21
1014Argentina2024-09-06
1015Russia2024-09-21
1016Spain2024-09-20
1017Japan2024-09-19
1018France2024-09-05
1019United Kingdom2024-09-07
1020France2024-09-19
1021Spain2024-09-15
1022Russia2024-09-10
1023France2024-09-09
1024Brazil2024-08-28
1025Italy2024-08-29
1026Germany2024-09-08
1027India2024-08-26
1028Spain2024-09-05
1029United Kingdom2024-08-26
1030Italy2024-09-14
1031Canada2024-09-15
1032Russia2024-09-08
1033Japan2024-08-29
1034Russia2024-08-31
1035Russia2024-08-30
1036Italy2024-09-01
1037Canada2024-08-24
1038Brazil2024-08-29
1039Spain2024-08-25
1040India2024-09-09
1041Argentina2024-09-16
1042Canada2024-09-15
1043Germany2024-08-31
1044India2024-09-03
1045France2024-09-14
1046Russia2024-08-25
1047Argentina2024-08-24
1048Italy2024-08-30
1049Australia2024-09-16

On-Demand Data

NameIdCountryDate
Ivar U Foller1000Brazil2024-09-08
Arvin Q Bowley1001Italy2024-08-26
Nicolas B Bowley1002Japan2024-09-02
Mayumi K Campain1003India2024-08-28
Leon Y Stockham1004Australia2024-09-11
Ashley S Poquette1005Canada2024-09-16
Salvatore U Darakjy1006Russia2024-09-21
Maria X Waycott1007Spain2024-09-18
Antonio G Malet1008Australia2024-08-31
Greenwood M Venere1009India2024-09-06
Rodrigues D Inouye1010Brazil2024-09-06
Misaki V Wieser1011United Kingdom2024-09-15
Morrow G Nicka1012Japan2024-09-21
Leon C Vocelka1013France2024-09-13
Silvio J Maclead1014India2024-09-21
Maria B Doe1015Italy2024-09-18
Arvin M Stenseth1016Russia2024-09-22
Costa G Chui1017France2024-09-04
Aditya M Waycott1018United Kingdom2024-08-30
Darci X Campain1019Brazil2024-09-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Clifford D ShinkoRussiaStephen Shaw UNQUALIFIED
Jefferson E DoeFranceAnna Fali PROPOSAL
Leon Q PoquetteRussiaElwin Sharvill NEGOTIATION
Leon N BriddickJapanOnyama Limba NEGOTIATION
Smith W PaprockiUnited KingdomElwin Sharvill RENEWAL
Chavez U MorascaSpainAsiya Javayant QUALIFIED
Smith E VocelkaIndiaIoni Bowcher QUALIFIED
Isabel Q GauchoGermanyBernardo Dominic PROPOSAL
Jones M DoeRussiaXuxue Feng NEGOTIATION
Aditya S MorascaRussiaAmy Elsner PROPOSAL
Mayumi H CaldareraIndiaXuxue Feng RENEWAL
Greenwood F GlickJapanIoni Bowcher NEGOTIATION
Greenwood V BowleyJapanBernardo Dominic NEGOTIATION
Murillo B KuskoRussiaAnna Fali NEW
Julie O WhobreyBrazilAsiya Javayant PROPOSAL
Claire Z PoquetteAustraliaXuxue Feng QUALIFIED
Greenwood V RoysterGermanyStephen Shaw UNQUALIFIED
Izzy O FlosiFranceXuxue Feng QUALIFIED
Kaitlin T RutaFranceIoni Bowcher NEGOTIATION
Izzy M ButtGermanyXuxue Feng NEW
Kadeem H SaylorsArgentinaIoni Bowcher UNQUALIFIED
Ivar L BriddickArgentinaIoni Bowcher UNQUALIFIED
Ricardo V SergiUnited KingdomElwin Sharvill RENEWAL
Smith J NestleIndiaAmy Elsner NEW
Cody I GarufiIndiaIvan Magalhaes NEW
Maisha Z ButtBrazilAsiya Javayant NEW
Jefferson K DoeBrazilOnyama Limba QUALIFIED
Jennifer S ShinkoItalyElwin Sharvill QUALIFIED
Stacey T WhobreySpainXuxue Feng UNQUALIFIED
Leja Z PaprockiSpainAmy Elsner QUALIFIED
Leon Y NickaArgentinaIvan Magalhaes NEGOTIATION
Kaitlin I StensethFranceXuxue Feng PROPOSAL
Leon F PaprockiArgentinaElwin Sharvill QUALIFIED
Jeanfrancois M CaudyArgentinaXuxue Feng RENEWAL
Jeanfrancois U SaylorsBrazilStephen Shaw NEGOTIATION
Misaki L FigeroaFranceAnna Fali NEW
Deepesh U SergiUnited KingdomIoni Bowcher NEW
Maisha K DilliardArgentinaAnna Fali NEGOTIATION
Ashley T SlusarskiAustraliaBernardo Dominic UNQUALIFIED
Jennifer L CampainUnited KingdomIvan Magalhaes 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>