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
Ivar G NestleAustraliaIvan Magalhaes NEGOTIATION
Kaitlin E SergiFranceOnyama Limba PROPOSAL
Silvio F CampainJapanBernardo Dominic NEGOTIATION
Chavez C IturbideCanadaAsiya Javayant NEGOTIATION
Smith X OldroydJapanAnna Fali PROPOSAL
Faith M BowleyIndiaIvan Magalhaes RENEWAL
Leja R PaprockiRussiaIoni Bowcher RENEWAL
Ricardo C GauchoSpainAmy Elsner NEGOTIATION
Claire Q IturbideIndiaXuxue Feng QUALIFIED
Misaki O NestleSpainAsiya Javayant NEW
Aditya S DoeCanadaAnna Fali RENEWAL
Julie U StensethAustraliaOnyama Limba UNQUALIFIED
Leon F WhobreyItalyStephen Shaw RENEWAL
Jones K MorascaAustraliaOnyama Limba QUALIFIED
Clifford N ShinkoJapanBernardo Dominic RENEWAL
Ivar J NestleJapanElwin Sharvill NEGOTIATION
Mujtaba J RutaBrazilBernardo Dominic NEGOTIATION
Sinclair R FollerSpainAmy Elsner RENEWAL
Aditya C GillianAustraliaXuxue Feng NEW
Salvatore G ShinkoRussiaIoni Bowcher NEW
Darci R DilliardGermanyBernardo Dominic QUALIFIED
Mujtaba R MaletIndiaIoni Bowcher NEW
Stacey J GillianCanadaIvan Magalhaes NEW
Greenwood D RimUnited KingdomAmy Elsner QUALIFIED
Claire N SlusarskiFranceAsiya Javayant PROPOSAL
Alejandro O SlusarskiCanadaAmy Elsner NEW
Morrow S GarufiIndiaBernardo Dominic RENEWAL
Greenwood P KolmetzBrazilXuxue Feng NEGOTIATION
Sinclair U GarufiGermanyIvan Magalhaes RENEWAL
Johnson T ChuiBrazilAnna Fali QUALIFIED
Octavia C KolmetzFranceElwin Sharvill NEW
Octavia D AlbaresRussiaStephen Shaw PROPOSAL
Maisha T AlbaresSpainBernardo Dominic NEGOTIATION
Costa H IturbideArgentinaAsiya Javayant NEGOTIATION
Kaitlin G FollerAustraliaAnna Fali RENEWAL
Faith L AlbaresArgentinaIvan Magalhaes RENEWAL
Jeanfrancois R DilliardItalyElwin Sharvill NEW
Tony A PerinGermanyOnyama Limba UNQUALIFIED
Murillo P AlbaresCanadaXuxue Feng NEW
Munro O RulapaughUnited KingdomIvan Magalhaes QUALIFIED
Mayumi Z GarufiIndiaXuxue Feng RENEWAL
Maisha F VenereAustraliaIoni Bowcher PROPOSAL
Jeanfrancois M PerinItalyAnna Fali RENEWAL
David R KolmetzAustraliaAmy Elsner PROPOSAL
Tony G OstroskySpainAmy Elsner UNQUALIFIED
Deepesh D NickaRussiaStephen Shaw QUALIFIED
Ivar S SergiCanadaStephen Shaw QUALIFIED
Julie U OstroskySpainAmy Elsner QUALIFIED
Cody O RimBrazilAmy Elsner QUALIFIED
Smith T PerinSpainBernardo Dominic NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Julie P RulapaughIndiaElwin Sharvill UNQUALIFIED
Kaitlin N CaudyGermanyElwin Sharvill NEW
Costa E RulapaughSpainAsiya Javayant QUALIFIED
Adams P RoysterItalyElwin Sharvill NEGOTIATION
Isabel G RutaItalyAmy Elsner QUALIFIED
Julie H VenereBrazilIvan Magalhaes RENEWAL
Ivar N GauchoAustraliaOnyama Limba UNQUALIFIED
Alejandro Y GillianJapanBernardo Dominic RENEWAL
Maria N FerenczUnited KingdomBernardo Dominic UNQUALIFIED
Juan D StensethItalyIoni Bowcher QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kadeem C MacleadItaly2025-06-10Morlong Associates NEGOTIATION80Ioni Bowcher
1001Aruna R MarrierJapan2025-05-18Chemel, James L Cpa PROPOSAL34Ivan Magalhaes
1002Misaki N StensethBrazil2025-05-26Dorl, James J Esq QUALIFIED37Onyama Limba
1003Isabel V BowleyArgentina2025-05-28Feiner Bros QUALIFIED81Asiya Javayant
1004Tony R StensethFrance2025-05-29Printing Dimensions PROPOSAL90Asiya Javayant
1005Alejandro O GauchoBrazil2025-06-16Printing Dimensions PROPOSAL12Asiya Javayant
1006Munro V DarakjyUnited Kingdom2025-06-10Rousseaux, Michael Esq RENEWAL32Bernardo Dominic
1007Morrow N FigeroaSpain2025-06-02Feltz Printing Service QUALIFIED93Amy Elsner
1008Adams J RutaUnited Kingdom2025-05-19Chapman, Ross E Esq NEW18Elwin Sharvill
1009Maisha B CaldareraRussia2025-06-05Chanay, Jeffrey A Esq PROPOSAL19Stephen Shaw
1010Smith Q OldroydCanada2025-06-05Commercial Press RENEWAL87Elwin Sharvill
1011Deepesh O OstroskyItaly2025-06-10Printing Dimensions PROPOSAL46Ioni Bowcher
1012Tony Q MaletItaly2025-06-02King, Christopher A Esq RENEWAL85Ioni Bowcher
1013Darci X GillianRussia2025-06-15Benton, John B Jr QUALIFIED34Elwin Sharvill
1014Antonio L CampainIndia2025-06-15Dorl, James J Esq UNQUALIFIED52Bernardo Dominic
1015Ricardo X OldroydArgentina2025-05-24Feiner Bros NEW85Onyama Limba
1016Jennifer J KolmetzIndia2025-05-26Benton, John B Jr RENEWAL6Amy Elsner
1017Mayumi N StockhamFrance2025-05-24Chapman, Ross E Esq RENEWAL6Ivan Magalhaes
1018Darci D MarrierCanada2025-05-25King, Christopher A Esq NEGOTIATION90Asiya Javayant
1019Ivar Q MarrierRussia2025-06-05Morlong Associates NEW3Anna Fali
1020Faith Z FerenczFrance2025-05-19King, Christopher A Esq QUALIFIED30Asiya Javayant
1021Mayumi Z KuskoCanada2025-06-16Dorl, James J Esq NEGOTIATION16Onyama Limba
1022Salvatore O RoysterFrance2025-05-19Rousseaux, Michael Esq RENEWAL84Bernardo Dominic
1023Morrow U GillianFrance2025-06-03Commercial Press PROPOSAL95Elwin Sharvill
1024Aditya O BologniaJapan2025-05-30Printing Dimensions PROPOSAL14Ivan Magalhaes
1025Leja D WaycottGermany2025-05-24Printing Dimensions NEW52Ioni Bowcher
1026Ivar D ShinkoAustralia2025-06-12Dorl, James J Esq PROPOSAL0Ivan Magalhaes
1027Octavia B IturbideRussia2025-06-16Feltz Printing Service RENEWAL55Ioni Bowcher
1028Isabel W CampainIndia2025-06-07Feltz Printing Service QUALIFIED7Stephen Shaw
1029Tony Y StockhamGermany2025-06-11Benton, John B Jr NEGOTIATION5Stephen Shaw
1030Greenwood U ButtUnited Kingdom2025-05-18Rangoni Of Florence NEGOTIATION95Onyama Limba
1031Sinclair M StensethIndia2025-05-18Chapman, Ross E Esq NEW13Elwin Sharvill
1032Clifford I WaycottJapan2025-05-28Feltz Printing Service PROPOSAL78Stephen Shaw
1033Leja Y ButtGermany2025-06-01Rousseaux, Michael Esq NEW75Bernardo Dominic
1034Salvatore D RutaItaly2025-05-19Dorl, James J Esq QUALIFIED17Elwin Sharvill
1035Aditya S SaylorsJapan2025-05-24Chanay, Jeffrey A Esq NEGOTIATION26Ioni Bowcher
1036Sinclair V DarakjyUnited Kingdom2025-06-12Rousseaux, Michael Esq QUALIFIED93Bernardo Dominic
1037Kaitlin V GauchoCanada2025-06-02Truhlar And Truhlar Attys PROPOSAL11Stephen Shaw
1038Jefferson W StockhamBrazil2025-06-07King, Christopher A Esq NEGOTIATION28Elwin Sharvill
1039Alejandro U WieserSpain2025-06-15Truhlar And Truhlar Attys QUALIFIED46Xuxue Feng
1040Ricardo C StockhamItaly2025-06-08Feltz Printing Service RENEWAL53Stephen Shaw
1041Smith B RulapaughGermany2025-05-28Dorl, James J Esq NEGOTIATION13Ioni Bowcher
1042Aditya P RimGermany2025-06-10Morlong Associates NEW81Onyama Limba
1043Costa C MaletUnited Kingdom2025-06-12Rousseaux, Michael Esq NEGOTIATION67Bernardo Dominic
1044Maisha F GlickAustralia2025-05-29Benton, John B Jr QUALIFIED8Ivan Magalhaes
1045Jefferson Z FerenczItaly2025-06-16Chemel, James L Cpa RENEWAL9Asiya Javayant
1046Wickens J NestleCanada2025-06-14Printing Dimensions PROPOSAL92Amy Elsner
1047Aika C MaletItaly2025-05-30Chanay, Jeffrey A Esq PROPOSAL54Stephen Shaw
1048Deepesh W ButtFrance2025-06-05Morlong Associates QUALIFIED85Asiya Javayant
1049Ivar C StockhamRussia2025-06-06Rousseaux, Michael Esq UNQUALIFIED50Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Aika Q GarufiBrazilOnyama Limba PROPOSAL
Mayumi G WaycottItalyXuxue Feng QUALIFIED
Kaitlin U VocelkaCanadaStephen Shaw NEGOTIATION
Darci W RimSpainStephen Shaw PROPOSAL
Munro I CaudyRussiaAsiya Javayant NEW
Izzy K AmigonRussiaElwin Sharvill NEGOTIATION
Nicolas J GillianCanadaAmy Elsner UNQUALIFIED
Misaki A CampainAustraliaAsiya Javayant PROPOSAL
Kadeem F ShinkoFranceElwin Sharvill PROPOSAL
Maisha W SergiGermanyBernardo Dominic RENEWAL
Sinclair B MaletItalyAnna Fali UNQUALIFIED
Clifford Z StockhamArgentinaAnna Fali QUALIFIED
Stacey J RoysterGermanyAnna Fali RENEWAL
Faith W WhobreyBrazilAnna Fali UNQUALIFIED
Tony I WieserArgentinaXuxue Feng NEGOTIATION
Kadeem O SchemmerUnited KingdomIoni Bowcher NEW
Antonio R CampainBrazilXuxue Feng NEGOTIATION
Stacey I GillianIndiaAsiya Javayant RENEWAL
Faith F MacleadAustraliaBernardo Dominic NEGOTIATION
Ashley W MacleadSpainAnna Fali PROPOSAL
Murillo P FigeroaFranceAsiya Javayant RENEWAL
Aditya B WieserItalyIvan Magalhaes NEW
Ricardo D DoeIndiaAmy Elsner RENEWAL
Faith I AmigonSpainAsiya Javayant PROPOSAL
Julie O CaldareraCanadaElwin Sharvill NEGOTIATION
Johnson P FlosiUnited KingdomAsiya Javayant NEGOTIATION
Kadeem P CaudyGermanyIoni Bowcher NEGOTIATION
Alejandro W InouyeJapanOnyama Limba NEW
Wickens A ChuiIndiaIoni Bowcher NEW
Smith C DilliardSpainAmy Elsner PROPOSAL
Maisha W BowleySpainStephen Shaw NEW
Antonio K StockhamJapanOnyama Limba NEGOTIATION
Cody Y MaletSpainAsiya Javayant UNQUALIFIED
Isabel W GlickRussiaIoni Bowcher RENEWAL
Tony L IturbideItalyIvan Magalhaes QUALIFIED
Emily I FlosiItalyStephen Shaw RENEWAL
Ivar D FigeroaCanadaIvan Magalhaes RENEWAL
Antonio P BowleyCanadaStephen Shaw UNQUALIFIED
Kaitlin A IturbideSpainStephen Shaw NEGOTIATION
Antonio G VenereBrazilStephen Shaw UNQUALIFIED
Francesco L FigeroaFranceAnna Fali RENEWAL
Ricardo O RulapaughUnited KingdomXuxue Feng NEW
Izzy H StockhamJapanIoni Bowcher UNQUALIFIED
Faith Q FlosiArgentinaOnyama Limba UNQUALIFIED
Clifford G GarufiAustraliaOnyama Limba NEW
Wickens L InouyeIndiaIoni Bowcher NEGOTIATION
Francesco N StockhamIndiaElwin Sharvill UNQUALIFIED
Morrow C GillianJapanXuxue Feng RENEWAL
Deepesh R MorascaRussiaIoni Bowcher QUALIFIED
Mayumi R FerenczJapanAsiya Javayant UNQUALIFIED
Frozen Columns
Name
Ivar I Foller
Maisha G Rim
Arvin E Waycott
Greenwood I Campain
Kaitlin Q Shinko
David I Waycott
Aditya O Bowley
Mayumi W Royster
Maisha K Gillian
Nicolas N Campain
Jeanfrancois C Nestle
Morrow N Ruta
Leon E Paprocki
Leon F Bowley
Claire S Inouye
Sinclair U Caldarera
Antonio P Garufi
Juan F Bowley
Johnson O Slusarski
Izzy D Doe
Julie U Venere
David V Schemmer
Isabel F Saylors
Johnson R Butt
Juan O Ruta
Aika J Malet
Murillo X Paprocki
Darci E Maclead
Ashley Z Maclead
Arvin V Paprocki
Morrow B Ostrosky
Nicolas R Iturbide
Jeanfrancois N Garufi
Greenwood E Butt
Silvio O Inouye
Ivar P Gaucho
Murillo E Wieser
Munro X Saylors
Jefferson F Marrier
Costa I Flosi
Chavez I Foller
Maisha V Wieser
Deepesh T Malet
Ashley C Whobrey
Sinclair H Garufi
Emily H Chui
Francesco O Venere
Kadeem C Marrier
Smith Z Doe
Stacey T Venere
IdCountryDate
1000Japan2025-06-09
1001Italy2025-05-25
1002Canada2025-06-04
1003Japan2025-06-07
1004India2025-05-22
1005France2025-05-18
1006Canada2025-06-05
1007United Kingdom2025-06-11
1008Russia2025-05-25
1009Germany2025-06-09
1010United Kingdom2025-06-14
1011India2025-05-22
1012Brazil2025-05-25
1013Canada2025-05-20
1014Italy2025-05-19
1015Russia2025-05-31
1016Japan2025-05-24
1017France2025-06-13
1018Russia2025-05-22
1019United Kingdom2025-06-13
1020Argentina2025-05-19
1021Australia2025-06-04
1022Japan2025-06-16
1023United Kingdom2025-06-12
1024India2025-06-09
1025France2025-05-28
1026Spain2025-05-22
1027Spain2025-05-23
1028India2025-06-13
1029Spain2025-06-07
1030India2025-06-06
1031Canada2025-06-16
1032France2025-05-19
1033Italy2025-05-19
1034Italy2025-06-06
1035Canada2025-06-06
1036France2025-06-06
1037Italy2025-06-02
1038Italy2025-06-16
1039Brazil2025-06-07
1040Brazil2025-05-29
1041France2025-06-02
1042France2025-06-09
1043Australia2025-06-16
1044United Kingdom2025-05-31
1045Australia2025-05-28
1046Russia2025-06-07
1047Brazil2025-05-23
1048Spain2025-06-13
1049France2025-06-10

On-Demand Data

NameIdCountryDate
Leon R Nestle1000United Kingdom2025-06-15
Clifford L Foller1001Germany2025-06-03
Salvatore I Rulapaugh1002Argentina2025-05-21
Adams N Nicka1003Argentina2025-05-27
Munro C Bowley1004Russia2025-05-26
Leon R Kusko1005France2025-06-09
Chavez P Stockham1006Italy2025-06-06
James I Foller1007India2025-06-07
Alejandro Q Chui1008Australia2025-05-31
Emily T Amigon1009Australia2025-06-08
Rodrigues S Glick1010India2025-05-21
Mujtaba U Iturbide1011France2025-05-25
Murillo X Sergi1012Japan2025-06-10
Munro E Sergi1013United Kingdom2025-06-08
Clifford K Slusarski1014Italy2025-06-14
Adams I Bowley1015Italy2025-05-22
Mujtaba T Inouye1016United Kingdom2025-05-31
Silvio Q Saylors1017Brazil2025-05-19
Julie B Ferencz1018Germany2025-05-20
Leja T Nestle1019France2025-05-30
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Costa W PaprockiBrazilIoni Bowcher RENEWAL
Nicolas Q DilliardArgentinaOnyama Limba QUALIFIED
Murillo L SchemmerAustraliaIoni Bowcher NEW
Jeanfrancois J FollerSpainAnna Fali PROPOSAL
Izzy G AlbaresGermanyAmy Elsner QUALIFIED
Munro U RulapaughArgentinaIvan Magalhaes UNQUALIFIED
Morrow I GauchoIndiaStephen Shaw NEW
Aditya P MaletItalyIvan Magalhaes PROPOSAL
Aika F VenereGermanyOnyama Limba PROPOSAL
Leja G FollerCanadaIvan Magalhaes RENEWAL
Jeanfrancois J PaprockiSpainBernardo Dominic RENEWAL
David F OldroydIndiaElwin Sharvill PROPOSAL
Aruna U VocelkaFranceAsiya Javayant QUALIFIED
Deepesh C BriddickIndiaElwin Sharvill RENEWAL
Izzy M KolmetzAustraliaStephen Shaw PROPOSAL
Leja E TollnerRussiaBernardo Dominic PROPOSAL
Greenwood C FlosiCanadaAmy Elsner NEW
Smith U IturbideBrazilBernardo Dominic QUALIFIED
Darci G WieserItalyXuxue Feng RENEWAL
Rodrigues P TollnerGermanyXuxue Feng UNQUALIFIED
Nicolas W ChuiFranceXuxue Feng NEW
Kadeem I CaudyArgentinaAsiya Javayant UNQUALIFIED
Costa P BowleyGermanyAmy Elsner NEGOTIATION
Octavia K ButtFranceBernardo Dominic RENEWAL
Munro P MorascaBrazilBernardo Dominic PROPOSAL
Aruna I MaletJapanAmy Elsner NEGOTIATION
Jennifer W FigeroaUnited KingdomAmy Elsner NEW
Maisha B ShinkoUnited KingdomElwin Sharvill RENEWAL
Jefferson I CaudyIndiaIoni Bowcher PROPOSAL
Faith K SergiFranceElwin Sharvill PROPOSAL
Kadeem C DilliardRussiaAnna Fali QUALIFIED
Jennifer U TollnerAustraliaIvan Magalhaes NEW
Leon O RoysterJapanAmy Elsner PROPOSAL
Jennifer T MorascaRussiaAsiya Javayant NEW
Jefferson W SchemmerJapanAmy Elsner QUALIFIED
Maria R MaletIndiaElwin Sharvill QUALIFIED
Rodrigues S KuskoRussiaAnna Fali NEGOTIATION
Chavez S WhobreyIndiaOnyama Limba NEGOTIATION
Octavia K StensethIndiaXuxue Feng NEGOTIATION
Costa Q WhobreyJapanAsiya Javayant NEW

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