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
Aditya T RulapaughAustraliaStephen Shaw NEW
Tony J KuskoUnited KingdomAmy Elsner UNQUALIFIED
Johnson L AlbaresSpainIoni Bowcher PROPOSAL
Arvin Q MaletCanadaIoni Bowcher RENEWAL
Jones I FlosiItalyOnyama Limba UNQUALIFIED
Alejandro B PerinCanadaElwin Sharvill UNQUALIFIED
Arvin G CaldareraRussiaAnna Fali UNQUALIFIED
Salvatore A DoeCanadaIoni Bowcher NEW
Mayumi H StockhamItalyXuxue Feng NEW
Leja B ShinkoRussiaElwin Sharvill QUALIFIED
Faith N CaudyArgentinaStephen Shaw PROPOSAL
Chavez J AlbaresGermanyAmy Elsner QUALIFIED
James U FerenczRussiaAmy Elsner NEGOTIATION
Murillo H GarufiGermanyStephen Shaw PROPOSAL
Claire Y GauchoUnited KingdomXuxue Feng UNQUALIFIED
Mujtaba E GauchoItalyIvan Magalhaes UNQUALIFIED
Silvio M RutaJapanAnna Fali RENEWAL
Misaki W RoysterFranceAsiya Javayant RENEWAL
Darci N BowleyAustraliaOnyama Limba RENEWAL
Francesco D RimJapanAsiya Javayant PROPOSAL
Alejandro Y SergiFranceXuxue Feng QUALIFIED
Tony U GlickBrazilStephen Shaw NEGOTIATION
Claire S GillianCanadaBernardo Dominic NEGOTIATION
Isabel A TollnerIndiaXuxue Feng RENEWAL
Maria C RulapaughGermanyStephen Shaw PROPOSAL
Arvin J RulapaughSpainAnna Fali NEGOTIATION
Stacey U VenereItalyAnna Fali NEGOTIATION
Cody U OstroskyUnited KingdomAnna Fali NEGOTIATION
Stacey G DoeJapanXuxue Feng UNQUALIFIED
Costa W FollerIndiaXuxue Feng QUALIFIED
Ashley C KolmetzIndiaIvan Magalhaes RENEWAL
Julie W KuskoArgentinaIoni Bowcher RENEWAL
Mujtaba A KolmetzGermanyIoni Bowcher QUALIFIED
Deepesh D SergiSpainOnyama Limba PROPOSAL
Claire J MaletGermanyStephen Shaw NEW
Ivar P VocelkaSpainBernardo Dominic QUALIFIED
Aika G PerinGermanyOnyama Limba NEW
Julie W BologniaBrazilStephen Shaw NEGOTIATION
Maisha W SergiAustraliaIoni Bowcher UNQUALIFIED
David K FlosiAustraliaBernardo Dominic UNQUALIFIED
Salvatore P GarufiJapanAmy Elsner UNQUALIFIED
Kaitlin W MaletAustraliaIoni Bowcher PROPOSAL
Silvio Q ChuiJapanBernardo Dominic PROPOSAL
Munro U FollerCanadaAsiya Javayant NEW
Mayumi N MaletRussiaElwin Sharvill QUALIFIED
Wickens I PoquetteSpainAsiya Javayant PROPOSAL
Deepesh X PaprockiUnited KingdomElwin Sharvill NEW
Julie M SlusarskiIndiaAnna Fali UNQUALIFIED
Francesco D FlosiItalyIvan Magalhaes QUALIFIED
Adams B BriddickGermanyAnna Fali UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Chavez X ShinkoGermanyElwin Sharvill RENEWAL
Chavez I RimGermanyOnyama Limba NEW
Leon G SchemmerArgentinaAmy Elsner UNQUALIFIED
Adams U TollnerUnited KingdomAsiya Javayant NEGOTIATION
Misaki K BriddickAustraliaXuxue Feng NEW
Costa Q WaycottAustraliaIvan Magalhaes RENEWAL
Mayumi T SaylorsUnited KingdomAsiya Javayant QUALIFIED
Faith G WaycottJapanAmy Elsner NEGOTIATION
Jeanfrancois K ShinkoAustraliaAnna Fali NEGOTIATION
Aika S SlusarskiArgentinaOnyama Limba NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Nicolas Q TollnerIndia2025-04-17Printing Dimensions NEGOTIATION79Ioni Bowcher
1001Salvatore H SaylorsUnited Kingdom2025-04-20Truhlar And Truhlar Attys NEGOTIATION24Stephen Shaw
1002Claire Q GlickFrance2025-04-15Chapman, Ross E Esq QUALIFIED44Ioni Bowcher
1003Maria N TollnerSpain2025-04-17Commercial Press NEW5Anna Fali
1004Silvio I VocelkaBrazil2025-04-16Morlong Associates UNQUALIFIED53Onyama Limba
1005Tony E ShinkoUnited Kingdom2025-04-26Morlong Associates UNQUALIFIED34Stephen Shaw
1006Juan N KuskoItaly2025-04-13Chanay, Jeffrey A Esq UNQUALIFIED11Amy Elsner
1007Misaki F PaprockiSpain2025-04-01Printing Dimensions NEGOTIATION31Stephen Shaw
1008Morrow J VenereFrance2025-04-13Chapman, Ross E Esq QUALIFIED75Asiya Javayant
1009Jennifer C KolmetzAustralia2025-04-01Benton, John B Jr NEW72Xuxue Feng
1010Cody S PoquetteBrazil2025-04-18Buckley Miller Wright QUALIFIED33Onyama Limba
1011Faith S ButtSpain2025-04-27Chanay, Jeffrey A Esq UNQUALIFIED56Bernardo Dominic
1012Juan B WaycottIndia2025-04-30Commercial Press RENEWAL50Onyama Limba
1013James Z WaycottRussia2025-04-17Truhlar And Truhlar Attys PROPOSAL45Ioni Bowcher
1014Leja R BriddickGermany2025-04-05Rangoni Of Florence UNQUALIFIED57Stephen Shaw
1015Emily P FollerCanada2025-04-01Rousseaux, Michael Esq RENEWAL81Bernardo Dominic
1016Mayumi I OldroydAustralia2025-04-08Printing Dimensions RENEWAL40Stephen Shaw
1017Ashley P GlickGermany2025-04-17Rangoni Of Florence QUALIFIED28Anna Fali
1018Aruna M MaletItaly2025-04-07Rousseaux, Michael Esq NEW32Asiya Javayant
1019Maria U ButtJapan2025-04-16Benton, John B Jr UNQUALIFIED74Bernardo Dominic
1020David V CampainFrance2025-04-03Rangoni Of Florence RENEWAL11Xuxue Feng
1021Cody R PerinAustralia2025-04-15Chanay, Jeffrey A Esq NEW16Asiya Javayant
1022Maisha T BologniaCanada2025-04-11Benton, John B Jr PROPOSAL45Onyama Limba
1023Wickens I SlusarskiArgentina2025-04-01Rangoni Of Florence NEGOTIATION22Asiya Javayant
1024Faith V MaletJapan2025-04-27Chemel, James L Cpa NEGOTIATION29Ivan Magalhaes
1025Clifford L ButtFrance2025-04-28Buckley Miller Wright NEW19Anna Fali
1026Rodrigues L MaletRussia2025-04-08Rangoni Of Florence RENEWAL62Xuxue Feng
1027Isabel A GarufiFrance2025-04-02Rousseaux, Michael Esq UNQUALIFIED41Anna Fali
1028Greenwood X FigeroaAustralia2025-04-06Commercial Press RENEWAL44Xuxue Feng
1029Wickens M DarakjyFrance2025-04-14Feiner Bros NEGOTIATION83Ivan Magalhaes
1030David H NestleGermany2025-04-03Printing Dimensions NEW1Amy Elsner
1031Antonio H StensethFrance2025-04-04Buckley Miller Wright PROPOSAL82Asiya Javayant
1032Nicolas D RutaCanada2025-04-02Feltz Printing Service PROPOSAL86Stephen Shaw
1033James F WhobreySpain2025-04-03Feiner Bros NEW76Xuxue Feng
1034Juan P MorascaRussia2025-04-30Truhlar And Truhlar Attys UNQUALIFIED50Onyama Limba
1035Stacey T FerenczIndia2025-04-14Feltz Printing Service QUALIFIED27Xuxue Feng
1036Aruna P ButtIndia2025-04-21Benton, John B Jr NEGOTIATION17Asiya Javayant
1037Leja D StensethItaly2025-04-21Dorl, James J Esq RENEWAL20Ioni Bowcher
1038Morrow Y MarrierBrazil2025-04-05Chemel, James L Cpa NEW14Ivan Magalhaes
1039Greenwood T RimRussia2025-04-10Benton, John B Jr UNQUALIFIED94Ioni Bowcher
1040Morrow A SergiJapan2025-04-10Feltz Printing Service NEGOTIATION82Amy Elsner
1041Johnson Z SchemmerArgentina2025-04-21Chemel, James L Cpa NEGOTIATION23Asiya Javayant
1042Misaki K CaudyRussia2025-04-18Benton, John B Jr NEGOTIATION21Ivan Magalhaes
1043Greenwood Y FlosiIndia2025-04-21King, Christopher A Esq QUALIFIED59Stephen Shaw
1044Chavez P BologniaRussia2025-04-17Truhlar And Truhlar Attys RENEWAL15Ioni Bowcher
1045Munro G PerinJapan2025-04-24Dorl, James J Esq NEW60Onyama Limba
1046Morrow K WaycottUnited Kingdom2025-04-13Feltz Printing Service PROPOSAL49Onyama Limba
1047Arvin O PerinArgentina2025-04-26Rangoni Of Florence NEW76Ioni Bowcher
1048Francesco N CaldareraItaly2025-04-23Rangoni Of Florence RENEWAL38Asiya Javayant
1049Aika M PerinRussia2025-04-13Rangoni Of Florence PROPOSAL37Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Aditya P WieserSpainOnyama Limba UNQUALIFIED
Cody I VenereBrazilOnyama Limba RENEWAL
Clifford H MacleadUnited KingdomXuxue Feng PROPOSAL
Faith A MacleadIndiaIoni Bowcher UNQUALIFIED
Mujtaba D SchemmerAustraliaStephen Shaw NEW
Johnson Z PerinBrazilBernardo Dominic PROPOSAL
Leja Y FollerJapanStephen Shaw QUALIFIED
Maisha E BologniaJapanAsiya Javayant UNQUALIFIED
Jefferson Q MaletAustraliaAnna Fali PROPOSAL
Misaki H ChuiCanadaIvan Magalhaes UNQUALIFIED
Chavez Z StensethUnited KingdomAmy Elsner NEGOTIATION
Salvatore J GillianArgentinaElwin Sharvill UNQUALIFIED
Claire K PoquetteUnited KingdomAnna Fali PROPOSAL
Antonio Y FerenczIndiaIoni Bowcher QUALIFIED
Mujtaba O WhobreyCanadaBernardo Dominic PROPOSAL
Faith U BowleyIndiaXuxue Feng UNQUALIFIED
Jones N AlbaresFranceIvan Magalhaes NEW
Aika I SergiBrazilAmy Elsner PROPOSAL
Darci O MarrierSpainStephen Shaw NEW
Emily D WhobreyRussiaAmy Elsner QUALIFIED
Octavia C RoysterArgentinaAmy Elsner RENEWAL
Leon U GauchoUnited KingdomBernardo Dominic PROPOSAL
Ashley D DoeIndiaOnyama Limba UNQUALIFIED
Julie W FigeroaAustraliaAmy Elsner QUALIFIED
Jones X CampainGermanyElwin Sharvill NEW
Isabel X FollerIndiaAnna Fali NEW
Greenwood H SlusarskiSpainAnna Fali QUALIFIED
Jeanfrancois T VenereAustraliaAsiya Javayant NEGOTIATION
Leon H NickaFranceAmy Elsner PROPOSAL
Isabel I RoysterAustraliaIoni Bowcher QUALIFIED
Jennifer I DoeSpainOnyama Limba PROPOSAL
James W IturbideSpainAmy Elsner NEGOTIATION
Tony F StensethRussiaAnna Fali NEW
Silvio U CaldareraCanadaBernardo Dominic UNQUALIFIED
Emily M RutaUnited KingdomXuxue Feng NEGOTIATION
Arvin W BowleyBrazilAnna Fali NEW
Izzy N AmigonCanadaAmy Elsner NEGOTIATION
Sinclair V AmigonFranceStephen Shaw UNQUALIFIED
Alejandro S ChuiGermanyAsiya Javayant QUALIFIED
James T GlickUnited KingdomStephen Shaw NEGOTIATION
Arvin I KuskoSpainOnyama Limba PROPOSAL
Ashley M DilliardItalyBernardo Dominic PROPOSAL
Claire Q TollnerSpainOnyama Limba NEW
Maisha G StockhamUnited KingdomOnyama Limba QUALIFIED
Greenwood Q WaycottJapanStephen Shaw UNQUALIFIED
Isabel W RutaIndiaElwin Sharvill NEW
Ivar D MaletFranceElwin Sharvill UNQUALIFIED
Arvin E NickaAustraliaXuxue Feng RENEWAL
Francesco J StensethIndiaXuxue Feng NEW
Maisha L CaldareraUnited KingdomXuxue Feng QUALIFIED
Frozen Columns
Name
Rodrigues N Doe
Mayumi R Perin
Stacey I Campain
Adams E Stockham
Greenwood T Waycott
Francesco S Slusarski
Jefferson J Flosi
Tony D Rulapaugh
Adams M Slusarski
Chavez H Oldroyd
Claire S Oldroyd
Alejandro Q Malet
David S Ostrosky
Cody O Morasca
Nicolas G Nestle
Julie W Bolognia
Ashley H Saylors
Ashley Y Paprocki
Ashley C Vocelka
James A Ruta
Munro U Iturbide
Nicolas X Kusko
Alejandro A Briddick
Nicolas U Tollner
Aika X Rulapaugh
Johnson Y Tollner
Silvio O Stockham
Chavez P Poquette
Jeanfrancois M Stenseth
Jennifer S Amigon
Deepesh J Campain
James Y Iturbide
Izzy Q Bowley
Murillo I Schemmer
Smith C Slusarski
Cody S Inouye
Chavez P Garufi
Tony J Nicka
Sinclair O Morasca
Kaitlin G Ostrosky
Antonio T Waycott
Isabel H Malet
Cody G Rim
Julie W Caldarera
Silvio Q Kolmetz
Mayumi N Bowley
Octavia A Iturbide
Chavez Y Rulapaugh
Aika Z Foller
Stacey L Malet
IdCountryDate
1000Argentina2025-04-06
1001Spain2025-04-26
1002France2025-04-22
1003Germany2025-04-14
1004France2025-04-22
1005India2025-04-14
1006Australia2025-04-20
1007Japan2025-04-29
1008Argentina2025-04-16
1009Brazil2025-04-30
1010Russia2025-04-02
1011India2025-04-09
1012Brazil2025-04-23
1013France2025-04-09
1014Germany2025-04-05
1015Italy2025-04-02
1016Canada2025-04-20
1017Germany2025-04-12
1018United Kingdom2025-04-02
1019France2025-04-30
1020Canada2025-04-02
1021Russia2025-04-16
1022France2025-04-19
1023Russia2025-04-08
1024France2025-04-26
1025Japan2025-04-25
1026Brazil2025-04-23
1027Spain2025-04-04
1028United Kingdom2025-04-15
1029France2025-04-14
1030Japan2025-04-22
1031Japan2025-04-12
1032United Kingdom2025-04-20
1033Brazil2025-04-07
1034Australia2025-04-27
1035France2025-04-12
1036Germany2025-04-03
1037Spain2025-04-06
1038Japan2025-04-29
1039France2025-04-26
1040Canada2025-04-04
1041Germany2025-04-04
1042Japan2025-04-10
1043Australia2025-04-22
1044Spain2025-04-02
1045Japan2025-04-30
1046Argentina2025-04-19
1047France2025-04-15
1048Italy2025-04-15
1049Russia2025-04-29

On-Demand Data

NameIdCountryDate
Isabel K Flosi1000Japan2025-04-06
Smith D Tollner1001United Kingdom2025-04-23
Clifford V Malet1002Argentina2025-04-29
Maria G Stenseth1003Russia2025-04-08
Leon G Nicka1004Argentina2025-04-04
Smith R Inouye1005Spain2025-04-15
Tony N Flosi1006Germany2025-04-24
Nicolas K Vocelka1007Brazil2025-04-10
Mujtaba H Caldarera1008India2025-04-04
Sinclair I Kusko1009Brazil2025-04-09
Francesco P Flosi1010Japan2025-04-05
Deepesh O Nestle1011Italy2025-04-27
Silvio Z Amigon1012Brazil2025-04-08
Jeanfrancois F Caldarera1013Russia2025-04-28
Arvin Z Wieser1014Germany2025-04-21
Maria K Nestle1015Spain2025-04-17
Smith U Oldroyd1016United Kingdom2025-04-28
Ivar I Gillian1017India2025-04-15
Francesco O Stockham1018Australia2025-04-08
Izzy Z Stockham1019United Kingdom2025-04-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Chavez D OstroskyItalyBernardo Dominic NEGOTIATION
Kaitlin F FerenczRussiaOnyama Limba QUALIFIED
Emily O FigeroaSpainAsiya Javayant NEW
Ashley P BriddickItalyAsiya Javayant NEW
Rodrigues X CaudyAustraliaElwin Sharvill NEW
Silvio H GarufiGermanyAmy Elsner UNQUALIFIED
Emily E MacleadJapanXuxue Feng NEGOTIATION
Jennifer T BologniaGermanyAsiya Javayant PROPOSAL
Silvio J PaprockiIndiaElwin Sharvill NEW
Jefferson V DarakjyFranceOnyama Limba NEW
Maisha S RimSpainAmy Elsner QUALIFIED
Jeanfrancois L RimBrazilBernardo Dominic PROPOSAL
Faith M SaylorsIndiaAnna Fali QUALIFIED
Deepesh O OstroskySpainAsiya Javayant UNQUALIFIED
Adams H PoquetteItalyIoni Bowcher RENEWAL
Arvin I AlbaresRussiaOnyama Limba QUALIFIED
Misaki Y FigeroaJapanXuxue Feng NEW
Aika R FerenczBrazilIvan Magalhaes RENEWAL
Izzy A DilliardArgentinaAmy Elsner NEGOTIATION
Claire L ButtFranceIoni Bowcher NEGOTIATION
Arvin L RimBrazilBernardo Dominic RENEWAL
Smith L MacleadItalyIoni Bowcher NEGOTIATION
Clifford F SaylorsGermanyAsiya Javayant RENEWAL
Adams V GlickItalyAsiya Javayant NEW
Claire G OstroskyFranceIvan Magalhaes NEGOTIATION
Deepesh X NickaJapanXuxue Feng UNQUALIFIED
Smith R DarakjyRussiaElwin Sharvill NEW
Murillo J NickaSpainIoni Bowcher PROPOSAL
James B CampainBrazilAnna Fali QUALIFIED
Jennifer H InouyeFranceXuxue Feng NEGOTIATION
Leja F IturbideAustraliaElwin Sharvill NEW
Tony F SlusarskiAustraliaOnyama Limba NEGOTIATION
Silvio C IturbideJapanElwin Sharvill QUALIFIED
Jones U WieserBrazilAmy Elsner PROPOSAL
Maria F DilliardFranceOnyama Limba RENEWAL
Clifford A SchemmerUnited KingdomXuxue Feng QUALIFIED
Smith F WhobreyGermanyBernardo Dominic RENEWAL
Leja L SlusarskiJapanXuxue Feng NEW
Leja F FollerItalyBernardo Dominic RENEWAL
Johnson A InouyeFranceXuxue Feng 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>