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
Adams N SaylorsFranceAmy Elsner NEGOTIATION
Murillo X StockhamArgentinaAsiya Javayant NEGOTIATION
Octavia K RoysterItalyStephen Shaw NEGOTIATION
Misaki M GauchoUnited KingdomIoni Bowcher RENEWAL
Aika O NickaCanadaAnna Fali NEW
Jeanfrancois X BowleyJapanOnyama Limba UNQUALIFIED
Ricardo S KuskoBrazilElwin Sharvill RENEWAL
Izzy Z ButtItalyAmy Elsner NEGOTIATION
Ivar R AmigonJapanAmy Elsner PROPOSAL
Claire P MacleadArgentinaOnyama Limba QUALIFIED
Rodrigues O GauchoAustraliaAmy Elsner NEW
Rodrigues O CaudyArgentinaIoni Bowcher RENEWAL
Jones D MacleadArgentinaStephen Shaw PROPOSAL
Aruna U VenereAustraliaIoni Bowcher PROPOSAL
Johnson J SaylorsRussiaAnna Fali NEGOTIATION
Smith X WieserBrazilIvan Magalhaes QUALIFIED
Cody V SergiGermanyIvan Magalhaes RENEWAL
Cody I FerenczJapanAnna Fali NEW
Alejandro L KuskoArgentinaAmy Elsner QUALIFIED
Ivar A ButtArgentinaOnyama Limba RENEWAL
Alejandro O MarrierJapanIvan Magalhaes NEGOTIATION
Alejandro I SlusarskiAustraliaAmy Elsner NEGOTIATION
Kaitlin V CaldareraIndiaAmy Elsner NEW
Adams Z BologniaItalyElwin Sharvill PROPOSAL
Mayumi J RoysterGermanyStephen Shaw UNQUALIFIED
Silvio K RutaUnited KingdomBernardo Dominic UNQUALIFIED
Izzy K ShinkoRussiaIvan Magalhaes RENEWAL
Maria Z InouyeSpainXuxue Feng NEGOTIATION
Stacey G SaylorsAustraliaAnna Fali RENEWAL
Jones I CampainGermanyAmy Elsner QUALIFIED
Deepesh E CaldareraIndiaElwin Sharvill NEGOTIATION
Kadeem Y PerinRussiaIvan Magalhaes NEW
Chavez G NestleFranceElwin Sharvill UNQUALIFIED
Maria R DoeCanadaAmy Elsner RENEWAL
Aika V GarufiItalyAsiya Javayant PROPOSAL
Silvio M IturbideRussiaIvan Magalhaes NEW
Octavia W RulapaughItalyXuxue Feng RENEWAL
Clifford Y MaletItalyIvan Magalhaes PROPOSAL
Salvatore K KolmetzBrazilIvan Magalhaes NEW
Nicolas R RulapaughItalyStephen Shaw NEGOTIATION
Greenwood E PoquetteAustraliaAnna Fali RENEWAL
Aika Q PoquetteAustraliaElwin Sharvill UNQUALIFIED
Octavia O StensethSpainAnna Fali UNQUALIFIED
Sinclair H MorascaUnited KingdomAmy Elsner UNQUALIFIED
Chavez W GlickArgentinaStephen Shaw NEW
Tony W VenereIndiaOnyama Limba NEW
Munro B RoysterUnited KingdomBernardo Dominic PROPOSAL
Leja M RulapaughAustraliaAnna Fali PROPOSAL
Johnson C WaycottFranceAnna Fali UNQUALIFIED
Cody X PaprockiSpainElwin Sharvill NEW
Horizontal
NameCountryRepresentativeStatus
Antonio C WhobreyJapanBernardo Dominic QUALIFIED
Stacey J KolmetzItalyElwin Sharvill NEGOTIATION
Leon D InouyeBrazilStephen Shaw RENEWAL
Wickens U BowleySpainElwin Sharvill UNQUALIFIED
Isabel S PaprockiRussiaBernardo Dominic UNQUALIFIED
Adams B AmigonCanadaOnyama Limba QUALIFIED
Jeanfrancois J MorascaArgentinaAmy Elsner UNQUALIFIED
Murillo K VenereItalyBernardo Dominic UNQUALIFIED
Rodrigues D InouyeGermanyStephen Shaw QUALIFIED
Jefferson U StensethCanadaIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Misaki X FigeroaGermany2025-06-04Rangoni Of Florence UNQUALIFIED40Ioni Bowcher
1001Emily O SaylorsFrance2025-06-07Commercial Press QUALIFIED49Xuxue Feng
1002Leja S DilliardGermany2025-05-19Feltz Printing Service NEW73Ivan Magalhaes
1003Wickens B CaldareraSpain2025-06-02Chanay, Jeffrey A Esq NEGOTIATION99Asiya Javayant
1004Julie K NickaItaly2025-06-13Rangoni Of Florence NEW85Stephen Shaw
1005Jennifer A StensethGermany2025-06-03Chemel, James L Cpa QUALIFIED87Amy Elsner
1006Jennifer R DarakjyRussia2025-05-25Feltz Printing Service NEGOTIATION9Xuxue Feng
1007Ivar R TollnerFrance2025-06-01Chemel, James L Cpa NEW55Ivan Magalhaes
1008Munro R OstroskyFrance2025-06-11Printing Dimensions RENEWAL33Anna Fali
1009Ricardo W ChuiFrance2025-06-10Rangoni Of Florence QUALIFIED31Ioni Bowcher
1010Stacey T CaudyGermany2025-05-18Chapman, Ross E Esq UNQUALIFIED21Ioni Bowcher
1011Julie D CaldareraItaly2025-06-05Rangoni Of Florence UNQUALIFIED59Stephen Shaw
1012Juan C OstroskyFrance2025-05-30Dorl, James J Esq QUALIFIED50Stephen Shaw
1013Ricardo B IturbideCanada2025-05-22Rangoni Of Florence NEW9Bernardo Dominic
1014Arvin C FlosiUnited Kingdom2025-05-18Rangoni Of Florence PROPOSAL40Anna Fali
1015Cody D BowleyItaly2025-06-01Buckley Miller Wright UNQUALIFIED83Ioni Bowcher
1016Rodrigues M CaudyIndia2025-05-27Commercial Press NEW84Onyama Limba
1017Greenwood F GarufiSpain2025-06-05Chapman, Ross E Esq PROPOSAL56Bernardo Dominic
1018Munro G DarakjyGermany2025-05-20Chemel, James L Cpa NEW1Bernardo Dominic
1019Smith R FollerItaly2025-06-08Dorl, James J Esq PROPOSAL48Ioni Bowcher
1020Adams H FigeroaIndia2025-05-26Chapman, Ross E Esq NEGOTIATION13Elwin Sharvill
1021Rodrigues X SaylorsJapan2025-06-12Rangoni Of Florence QUALIFIED70Elwin Sharvill
1022Ricardo P FerenczUnited Kingdom2025-06-13Truhlar And Truhlar Attys PROPOSAL1Bernardo Dominic
1023Stacey M WieserItaly2025-05-31Chapman, Ross E Esq PROPOSAL60Ivan Magalhaes
1024Jefferson N MaletUnited Kingdom2025-05-20Benton, John B Jr QUALIFIED55Xuxue Feng
1025Faith O RulapaughFrance2025-06-15King, Christopher A Esq NEW81Amy Elsner
1026Maria L PoquetteCanada2025-05-25Rangoni Of Florence QUALIFIED25Ioni Bowcher
1027Sinclair R NestleCanada2025-06-06Dorl, James J Esq UNQUALIFIED36Bernardo Dominic
1028Smith M SlusarskiJapan2025-05-25Chapman, Ross E Esq PROPOSAL23Stephen Shaw
1029Adams Q PerinCanada2025-06-05Feiner Bros UNQUALIFIED79Bernardo Dominic
1030Ashley R SaylorsItaly2025-05-29Benton, John B Jr RENEWAL52Xuxue Feng
1031Kadeem G OldroydBrazil2025-05-24Chemel, James L Cpa QUALIFIED89Ivan Magalhaes
1032Adams U RimItaly2025-05-19Dorl, James J Esq RENEWAL21Onyama Limba
1033Kaitlin V RulapaughAustralia2025-05-19Feiner Bros RENEWAL25Xuxue Feng
1034Greenwood G MarrierAustralia2025-05-19Feiner Bros PROPOSAL84Amy Elsner
1035Antonio P DoeFrance2025-06-16Feiner Bros PROPOSAL19Asiya Javayant
1036Jeanfrancois A GauchoAustralia2025-06-10Chapman, Ross E Esq NEW21Asiya Javayant
1037Adams B ChuiIndia2025-06-09Chemel, James L Cpa PROPOSAL85Elwin Sharvill
1038Jefferson K NickaRussia2025-05-22Benton, John B Jr NEGOTIATION71Anna Fali
1039Isabel I FigeroaGermany2025-06-03Buckley Miller Wright PROPOSAL70Ivan Magalhaes
1040Emily H WhobreyJapan2025-06-12King, Christopher A Esq RENEWAL52Elwin Sharvill
1041Julie B StensethUnited Kingdom2025-06-14Chapman, Ross E Esq NEGOTIATION83Onyama Limba
1042Juan R CaldareraFrance2025-06-11Printing Dimensions RENEWAL50Amy Elsner
1043Arvin B AmigonSpain2025-06-14Benton, John B Jr UNQUALIFIED60Ioni Bowcher
1044Mayumi C GillianItaly2025-06-16Chanay, Jeffrey A Esq NEW79Elwin Sharvill
1045Emily P CaldareraGermany2025-05-18Chemel, James L Cpa UNQUALIFIED48Xuxue Feng
1046Francesco G AlbaresJapan2025-05-30King, Christopher A Esq PROPOSAL84Xuxue Feng
1047Chavez O MaletBrazil2025-05-24Printing Dimensions UNQUALIFIED24Elwin Sharvill
1048Misaki M WaycottSpain2025-05-25Benton, John B Jr NEGOTIATION89Ivan Magalhaes
1049Jefferson E GillianSpain2025-06-03Printing Dimensions NEW21Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Nicolas K CampainItalyBernardo Dominic QUALIFIED
Clifford C InouyeGermanyIvan Magalhaes NEGOTIATION
Leon Y IturbideRussiaBernardo Dominic UNQUALIFIED
Murillo H FlosiBrazilAnna Fali RENEWAL
Kaitlin Q ShinkoJapanOnyama Limba NEGOTIATION
Adams Q VocelkaBrazilAmy Elsner QUALIFIED
Nicolas Y GarufiRussiaIoni Bowcher QUALIFIED
Chavez X MaletItalyStephen Shaw NEGOTIATION
Maisha A RoysterFranceOnyama Limba PROPOSAL
Jennifer K MorascaItalyBernardo Dominic PROPOSAL
Aruna E FigeroaCanadaAmy Elsner UNQUALIFIED
Ivar H StensethFranceOnyama Limba NEW
Antonio F NestleJapanOnyama Limba NEGOTIATION
Aruna W InouyeIndiaStephen Shaw UNQUALIFIED
Jeanfrancois Q SlusarskiIndiaIvan Magalhaes NEGOTIATION
Izzy A FlosiGermanyBernardo Dominic UNQUALIFIED
Octavia Q KuskoUnited KingdomBernardo Dominic UNQUALIFIED
Alejandro Z WhobreyRussiaBernardo Dominic RENEWAL
Julie S GillianFranceElwin Sharvill NEW
Salvatore Q IturbideRussiaBernardo Dominic RENEWAL
Isabel H SlusarskiBrazilIoni Bowcher NEGOTIATION
Ricardo A PoquetteIndiaIoni Bowcher RENEWAL
Aruna Z StockhamJapanStephen Shaw QUALIFIED
Tony M PoquetteFranceIoni Bowcher NEGOTIATION
Wickens V MaletRussiaIvan Magalhaes QUALIFIED
Emily P ChuiAustraliaIvan Magalhaes NEGOTIATION
Faith D MaletFranceOnyama Limba UNQUALIFIED
Aika M MaletCanadaIoni Bowcher PROPOSAL
Tony S OldroydCanadaIoni Bowcher RENEWAL
Kaitlin N GarufiUnited KingdomBernardo Dominic RENEWAL
Sinclair J DoeIndiaIoni Bowcher QUALIFIED
Izzy S VocelkaSpainXuxue Feng RENEWAL
Arvin F NickaItalyBernardo Dominic QUALIFIED
Darci F GillianCanadaIvan Magalhaes RENEWAL
Leon R GlickBrazilStephen Shaw PROPOSAL
David T BologniaAustraliaIvan Magalhaes NEGOTIATION
Maria K SchemmerArgentinaStephen Shaw PROPOSAL
Tony M FigeroaSpainStephen Shaw NEW
Murillo L SaylorsItalyBernardo Dominic NEW
Aruna V IturbideGermanyAsiya Javayant NEW
Jennifer R StensethCanadaOnyama Limba QUALIFIED
Leon S KolmetzIndiaXuxue Feng NEGOTIATION
Cody N BologniaFranceXuxue Feng PROPOSAL
Alejandro N PerinUnited KingdomOnyama Limba PROPOSAL
Aika X GauchoArgentinaStephen Shaw RENEWAL
Johnson S MorascaCanadaAnna Fali NEGOTIATION
Munro D PoquetteUnited KingdomOnyama Limba NEGOTIATION
Emily F GarufiItalyIoni Bowcher NEGOTIATION
Smith A IturbideRussiaIvan Magalhaes QUALIFIED
Claire J DarakjyIndiaAsiya Javayant PROPOSAL
Frozen Columns
Name
Mayumi M Chui
Leon N Malet
Julie V Poquette
Ashley W Ferencz
Cody P Perin
Stacey M Flosi
Ricardo S Campain
Chavez U Flosi
Darci S Schemmer
Munro X Ostrosky
Alejandro J Oldroyd
Munro T Albares
David W Nestle
David I Slusarski
Octavia B Saylors
Antonio O Royster
Jefferson W Foller
Jennifer S Malet
Munro R Nestle
Jones X Morasca
Kaitlin N Sergi
Leja V Stockham
Murillo X Glick
Jefferson R Waycott
Aika X Kolmetz
Murillo H Garufi
Arvin A Figeroa
Octavia T Poquette
David Y Amigon
Alejandro V Foller
Munro I Sergi
Aika H Gillian
Leja B Sergi
Alejandro P Morasca
Ashley U Figeroa
Wickens X Kusko
Julie I Darakjy
Ashley I Royster
Maisha I Kolmetz
Cody L Venere
Claire V Albares
Johnson B Whobrey
Leon B Rim
Smith O Oldroyd
David Z Inouye
Murillo R Caudy
Clifford U Ferencz
Ivar R Maclead
Julie U Ostrosky
Cody E Vocelka
IdCountryDate
1000Argentina2025-05-30
1001Germany2025-06-06
1002Argentina2025-05-20
1003Argentina2025-06-15
1004United Kingdom2025-06-15
1005Italy2025-06-10
1006United Kingdom2025-06-06
1007Australia2025-06-03
1008Australia2025-06-06
1009Spain2025-06-06
1010Russia2025-06-13
1011Russia2025-05-26
1012Japan2025-06-09
1013United Kingdom2025-05-31
1014Brazil2025-05-23
1015Canada2025-05-29
1016Spain2025-05-30
1017Russia2025-06-13
1018Argentina2025-06-14
1019Spain2025-05-31
1020Italy2025-06-11
1021Australia2025-06-13
1022Japan2025-06-13
1023Canada2025-05-23
1024Canada2025-06-11
1025United Kingdom2025-06-11
1026Russia2025-06-14
1027India2025-06-12
1028Spain2025-06-06
1029Canada2025-05-22
1030Argentina2025-05-24
1031Japan2025-05-31
1032United Kingdom2025-05-30
1033Canada2025-05-18
1034Canada2025-06-03
1035Canada2025-05-21
1036Japan2025-06-04
1037Australia2025-06-14
1038Spain2025-06-04
1039Argentina2025-05-28
1040Canada2025-06-15
1041Brazil2025-06-16
1042Japan2025-05-20
1043Spain2025-06-07
1044France2025-05-28
1045Australia2025-06-12
1046Brazil2025-05-29
1047Italy2025-06-09
1048Spain2025-05-23
1049France2025-06-09

On-Demand Data

NameIdCountryDate
Mujtaba C Slusarski1000India2025-06-10
Aruna A Butt1001Russia2025-05-19
Chavez W Paprocki1002Brazil2025-06-03
Wickens N Darakjy1003Argentina2025-06-10
Stacey K Perin1004Argentina2025-06-03
Aika U Stockham1005Argentina2025-06-16
Jones O Caldarera1006Canada2025-05-28
Alejandro T Malet1007France2025-06-10
Stacey E Nicka1008France2025-06-11
Mayumi U Vocelka1009Spain2025-05-31
Aruna H Saylors1010Italy2025-06-12
Tony M Sergi1011Spain2025-06-15
Alejandro W Morasca1012Russia2025-06-15
Adams Y Wieser1013France2025-05-28
Smith F Stenseth1014Germany2025-05-24
Juan M Figeroa1015Spain2025-05-30
Jeanfrancois X Slusarski1016United Kingdom2025-06-09
Silvio P Campain1017India2025-06-11
Mayumi F Rulapaugh1018India2025-06-10
Costa O Marrier1019Canada2025-05-20
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Stacey F IturbideGermanyAnna Fali NEW
Francesco B BowleyBrazilElwin Sharvill NEGOTIATION
Stacey V NickaSpainIoni Bowcher NEW
Darci N MacleadAustraliaBernardo Dominic QUALIFIED
Antonio P OstroskyBrazilAsiya Javayant PROPOSAL
Mayumi B SaylorsAustraliaXuxue Feng UNQUALIFIED
Clifford M DoeGermanyIoni Bowcher PROPOSAL
Morrow E MaletArgentinaIvan Magalhaes PROPOSAL
Rodrigues R MorascaBrazilStephen Shaw QUALIFIED
Murillo M VocelkaArgentinaXuxue Feng NEGOTIATION
Claire F CaudySpainAnna Fali NEW
Arvin L ShinkoUnited KingdomAsiya Javayant NEGOTIATION
Tony K ButtJapanIvan Magalhaes NEW
Aruna H InouyeGermanyAnna Fali UNQUALIFIED
Nicolas Q FollerUnited KingdomAmy Elsner PROPOSAL
Izzy V StockhamFranceXuxue Feng RENEWAL
Francesco U ShinkoJapanAnna Fali NEGOTIATION
Cody T VocelkaFranceXuxue Feng PROPOSAL
Izzy P SaylorsIndiaIoni Bowcher NEGOTIATION
Aika J SergiFranceXuxue Feng QUALIFIED
Octavia S NestleJapanIvan Magalhaes PROPOSAL
Maisha N GarufiIndiaIoni Bowcher UNQUALIFIED
Murillo H ChuiItalyAsiya Javayant QUALIFIED
Antonio R WaycottArgentinaIvan Magalhaes NEGOTIATION
Rodrigues N TollnerFranceStephen Shaw QUALIFIED
Deepesh W RimItalyBernardo Dominic UNQUALIFIED
Kadeem T OldroydBrazilElwin Sharvill UNQUALIFIED
Darci A GarufiGermanyBernardo Dominic UNQUALIFIED
Francesco Q DoeSpainBernardo Dominic PROPOSAL
Alejandro D RutaJapanBernardo Dominic PROPOSAL
Jefferson H SaylorsUnited KingdomIoni Bowcher NEW
Aika A NestleSpainAmy Elsner UNQUALIFIED
Isabel R OldroydJapanIvan Magalhaes PROPOSAL
Chavez B FlosiFranceBernardo Dominic RENEWAL
Maria T WaycottSpainAsiya Javayant QUALIFIED
Julie J RoysterBrazilStephen Shaw NEGOTIATION
Mujtaba X RutaItalyOnyama Limba UNQUALIFIED
Aika K OldroydItalyIoni Bowcher PROPOSAL
Maisha Q SergiBrazilIvan Magalhaes PROPOSAL
Leja G VenereArgentinaXuxue Feng UNQUALIFIED

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