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
Isabel C VenereIndiaXuxue Feng NEW
Mujtaba R StensethJapanStephen Shaw PROPOSAL
Alejandro B IturbideJapanIvan Magalhaes UNQUALIFIED
Francesco Y GarufiGermanyElwin Sharvill RENEWAL
Smith J PaprockiArgentinaAmy Elsner PROPOSAL
Antonio N AlbaresFranceAsiya Javayant NEW
Jennifer N DilliardGermanyXuxue Feng QUALIFIED
Rodrigues S SlusarskiAustraliaAsiya Javayant QUALIFIED
Izzy E DarakjyArgentinaBernardo Dominic PROPOSAL
Jefferson R MarrierAustraliaIoni Bowcher NEW
Chavez H FigeroaJapanAnna Fali PROPOSAL
Leon Y GillianSpainAmy Elsner QUALIFIED
Leja C CaudyItalyIoni Bowcher UNQUALIFIED
Salvatore Z VocelkaUnited KingdomAmy Elsner PROPOSAL
Darci T VenereIndiaOnyama Limba UNQUALIFIED
Alejandro P ChuiIndiaBernardo Dominic NEW
Nicolas Q ChuiUnited KingdomAsiya Javayant PROPOSAL
Wickens W WaycottArgentinaIoni Bowcher NEW
Isabel F SergiRussiaAsiya Javayant UNQUALIFIED
Stacey W WieserRussiaBernardo Dominic NEGOTIATION
Emily W DoeRussiaAmy Elsner PROPOSAL
Ivar H KolmetzBrazilIvan Magalhaes PROPOSAL
Nicolas Z ButtBrazilIoni Bowcher QUALIFIED
Darci G NickaJapanElwin Sharvill QUALIFIED
Silvio O WhobreyBrazilAmy Elsner UNQUALIFIED
James W IturbideAustraliaXuxue Feng PROPOSAL
Stacey J AmigonUnited KingdomIoni Bowcher PROPOSAL
Jones H DilliardArgentinaAnna Fali NEW
Arvin T DoeRussiaIvan Magalhaes NEW
Adams S GarufiRussiaIvan Magalhaes QUALIFIED
Jones D MaletUnited KingdomElwin Sharvill NEGOTIATION
Chavez A BowleyJapanAmy Elsner PROPOSAL
Salvatore R SergiUnited KingdomAmy Elsner RENEWAL
Smith E InouyeItalyAsiya Javayant NEW
Aditya V OldroydBrazilAmy Elsner NEW
Rodrigues Z FlosiBrazilBernardo Dominic NEW
Juan X OldroydCanadaStephen Shaw RENEWAL
Tony A VocelkaRussiaStephen Shaw PROPOSAL
Wickens G MaletBrazilAnna Fali NEGOTIATION
Antonio G GauchoGermanyAmy Elsner NEGOTIATION
Emily E StensethIndiaElwin Sharvill NEGOTIATION
Salvatore M DilliardItalyStephen Shaw PROPOSAL
Greenwood K CaldareraBrazilStephen Shaw QUALIFIED
Adams M DilliardFranceElwin Sharvill NEW
Isabel X FigeroaRussiaXuxue Feng NEW
Mujtaba N GauchoBrazilBernardo Dominic PROPOSAL
Ashley Z OldroydAustraliaAnna Fali QUALIFIED
Kadeem H MorascaIndiaXuxue Feng NEW
Rodrigues Q PerinBrazilXuxue Feng PROPOSAL
Jones E SchemmerUnited KingdomIvan Magalhaes RENEWAL
Horizontal
NameCountryRepresentativeStatus
Emily B RulapaughArgentinaBernardo Dominic RENEWAL
Stacey B KolmetzJapanIoni Bowcher NEW
Misaki S VocelkaArgentinaBernardo Dominic UNQUALIFIED
Mayumi B WieserRussiaStephen Shaw PROPOSAL
Jones W MarrierCanadaOnyama Limba NEGOTIATION
Kaitlin W RoysterIndiaAsiya Javayant NEGOTIATION
Tony G PaprockiJapanAnna Fali RENEWAL
Chavez N MacleadBrazilBernardo Dominic UNQUALIFIED
Rodrigues V KuskoRussiaBernardo Dominic NEW
Wickens C IturbideFranceIvan Magalhaes NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Silvio B RoysterFrance2025-05-19Rousseaux, Michael Esq NEGOTIATION2Amy Elsner
1001Jefferson W StensethFrance2025-06-06Feltz Printing Service UNQUALIFIED68Asiya Javayant
1002Cody E SchemmerBrazil2025-05-21Benton, John B Jr QUALIFIED26Asiya Javayant
1003Munro J BowleyFrance2025-05-18Feltz Printing Service PROPOSAL39Anna Fali
1004Alejandro N SaylorsItaly2025-05-23Feiner Bros NEGOTIATION12Ioni Bowcher
1005Aika F DilliardArgentina2025-06-14Buckley Miller Wright RENEWAL87Onyama Limba
1006Kaitlin Y FerenczRussia2025-05-17Buckley Miller Wright QUALIFIED38Elwin Sharvill
1007Francesco P CaldareraIndia2025-06-02Dorl, James J Esq PROPOSAL38Xuxue Feng
1008Alejandro D NestleFrance2025-05-23Rangoni Of Florence NEW21Stephen Shaw
1009Rodrigues R StockhamBrazil2025-05-19Feltz Printing Service QUALIFIED84Asiya Javayant
1010Misaki H AmigonBrazil2025-05-23Chemel, James L Cpa RENEWAL12Stephen Shaw
1011Ivar I NickaCanada2025-05-24Dorl, James J Esq UNQUALIFIED0Amy Elsner
1012Darci E ShinkoItaly2025-06-10Chapman, Ross E Esq UNQUALIFIED59Bernardo Dominic
1013Jones Q InouyeIndia2025-06-05Morlong Associates NEW66Bernardo Dominic
1014Leja F GarufiSpain2025-05-19Chapman, Ross E Esq PROPOSAL60Xuxue Feng
1015Salvatore I DoeItaly2025-05-26Printing Dimensions UNQUALIFIED82Asiya Javayant
1016Ricardo R RulapaughRussia2025-06-09King, Christopher A Esq NEW2Amy Elsner
1017Kadeem B OldroydBrazil2025-05-24King, Christopher A Esq RENEWAL93Amy Elsner
1018Darci V NickaItaly2025-05-20Benton, John B Jr NEW37Asiya Javayant
1019Tony F RimItaly2025-05-25Rangoni Of Florence NEW45Onyama Limba
1020Mujtaba K BriddickUnited Kingdom2025-05-22Rousseaux, Michael Esq PROPOSAL88Stephen Shaw
1021Cody H MarrierSpain2025-06-03King, Christopher A Esq PROPOSAL15Amy Elsner
1022Misaki D StockhamBrazil2025-06-07King, Christopher A Esq QUALIFIED28Anna Fali
1023Tony L InouyeFrance2025-06-04Chemel, James L Cpa RENEWAL91Onyama Limba
1024Julie C IturbideCanada2025-05-24Morlong Associates QUALIFIED62Xuxue Feng
1025Claire M SchemmerArgentina2025-06-02Chemel, James L Cpa UNQUALIFIED18Amy Elsner
1026Ivar U SergiItaly2025-06-02Morlong Associates NEGOTIATION60Anna Fali
1027Julie V GauchoCanada2025-05-27Feiner Bros QUALIFIED7Stephen Shaw
1028Faith E FollerIndia2025-06-09Buckley Miller Wright NEW41Anna Fali
1029Claire L GillianSpain2025-05-26Feltz Printing Service NEGOTIATION71Xuxue Feng
1030Ashley H BologniaSpain2025-06-06Chemel, James L Cpa NEGOTIATION57Amy Elsner
1031Morrow R FlosiBrazil2025-05-24King, Christopher A Esq PROPOSAL70Anna Fali
1032Darci M WieserJapan2025-05-18Rangoni Of Florence UNQUALIFIED12Bernardo Dominic
1033Deepesh Z MorascaBrazil2025-06-03Chanay, Jeffrey A Esq UNQUALIFIED81Ivan Magalhaes
1034Ashley X DilliardUnited Kingdom2025-06-03Chapman, Ross E Esq PROPOSAL80Ivan Magalhaes
1035Darci Y PoquetteGermany2025-06-09Dorl, James J Esq QUALIFIED44Ivan Magalhaes
1036Greenwood A BowleyAustralia2025-06-06Feltz Printing Service NEW84Anna Fali
1037Chavez Q SergiArgentina2025-06-12King, Christopher A Esq QUALIFIED25Elwin Sharvill
1038Leja V ShinkoGermany2025-05-22Dorl, James J Esq NEGOTIATION32Ioni Bowcher
1039Greenwood D VenereRussia2025-06-12Rangoni Of Florence RENEWAL69Stephen Shaw
1040Cody K OldroydJapan2025-05-23Chemel, James L Cpa NEW62Amy Elsner
1041Faith M TollnerAustralia2025-06-02Feiner Bros NEGOTIATION24Elwin Sharvill
1042Salvatore R OstroskySpain2025-05-24Feiner Bros PROPOSAL79Xuxue Feng
1043Stacey O MorascaIndia2025-06-15Dorl, James J Esq NEW36Stephen Shaw
1044Adams H OldroydArgentina2025-05-19Buckley Miller Wright NEW2Amy Elsner
1045Sinclair N PerinArgentina2025-05-17Benton, John B Jr RENEWAL31Bernardo Dominic
1046Nicolas O GillianArgentina2025-06-15Benton, John B Jr NEW40Amy Elsner
1047Rodrigues J TollnerUnited Kingdom2025-05-27Rangoni Of Florence NEGOTIATION93Stephen Shaw
1048Rodrigues H AlbaresFrance2025-05-17Dorl, James J Esq RENEWAL20Bernardo Dominic
1049Tony A IturbideFrance2025-05-25King, Christopher A Esq NEGOTIATION77Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Ricardo T OstroskyItalyIvan Magalhaes UNQUALIFIED
Clifford Q SlusarskiRussiaAnna Fali UNQUALIFIED
Ivar Y PerinRussiaIoni Bowcher QUALIFIED
Mayumi P GlickBrazilAmy Elsner RENEWAL
Ashley A FigeroaBrazilXuxue Feng NEW
Morrow P MaletIndiaAsiya Javayant UNQUALIFIED
Jeanfrancois U MorascaJapanIoni Bowcher NEW
Adams A GlickUnited KingdomBernardo Dominic UNQUALIFIED
Silvio S ChuiAustraliaIoni Bowcher UNQUALIFIED
Munro K NestleGermanyXuxue Feng NEW
Izzy F AmigonArgentinaOnyama Limba NEGOTIATION
Kaitlin A KolmetzJapanOnyama Limba RENEWAL
Ricardo E MaletSpainIoni Bowcher RENEWAL
Silvio P FerenczAustraliaIvan Magalhaes UNQUALIFIED
Adams O ButtIndiaAsiya Javayant QUALIFIED
Murillo D ButtBrazilAnna Fali PROPOSAL
Greenwood S PerinAustraliaOnyama Limba QUALIFIED
Deepesh S OldroydUnited KingdomIvan Magalhaes NEGOTIATION
Kadeem S SchemmerGermanyXuxue Feng RENEWAL
Costa Y RimBrazilAsiya Javayant UNQUALIFIED
Juan V CaudyUnited KingdomBernardo Dominic UNQUALIFIED
Francesco M SergiCanadaIvan Magalhaes UNQUALIFIED
Juan D InouyeJapanAsiya Javayant UNQUALIFIED
Smith X NestleRussiaXuxue Feng UNQUALIFIED
Jefferson O VocelkaUnited KingdomXuxue Feng PROPOSAL
Smith W SaylorsFranceIvan Magalhaes QUALIFIED
Aruna C OldroydItalyXuxue Feng UNQUALIFIED
Ashley D SchemmerRussiaAmy Elsner RENEWAL
Johnson E GauchoRussiaStephen Shaw PROPOSAL
Adams J GlickItalyAmy Elsner NEW
Octavia U AmigonCanadaStephen Shaw NEW
Misaki C NestleArgentinaAsiya Javayant NEGOTIATION
Mujtaba P RoysterArgentinaOnyama Limba NEW
Jones W BowleyArgentinaStephen Shaw NEW
Mayumi W FigeroaGermanyAsiya Javayant PROPOSAL
Kadeem T BriddickCanadaElwin Sharvill NEW
Costa D MorascaIndiaElwin Sharvill QUALIFIED
Jones F SergiIndiaXuxue Feng RENEWAL
Arvin A RoysterBrazilStephen Shaw RENEWAL
Johnson B CaudyAustraliaBernardo Dominic QUALIFIED
Kaitlin T NestleIndiaAmy Elsner NEW
Isabel K FigeroaCanadaElwin Sharvill PROPOSAL
Jefferson K NickaJapanOnyama Limba PROPOSAL
Izzy Y SergiBrazilIvan Magalhaes NEW
Leja B VenereRussiaAnna Fali PROPOSAL
Costa T AmigonCanadaElwin Sharvill NEW
Munro X FlosiArgentinaBernardo Dominic PROPOSAL
Deepesh J MacleadRussiaOnyama Limba QUALIFIED
Aditya A BriddickRussiaBernardo Dominic QUALIFIED
Izzy R BriddickRussiaElwin Sharvill NEGOTIATION
Frozen Columns
Name
Leon G Figeroa
Cody P Doe
Adams R Oldroyd
Arvin H Figeroa
Aruna E Gillian
Clifford W Albares
Mujtaba P Rim
Ricardo T Poquette
Aika L Dilliard
Maisha R Perin
Antonio F Tollner
Adams W Foller
Sinclair G Schemmer
Claire H Albares
Francesco P Doe
Rodrigues X Flosi
Stacey A Shinko
Deepesh U Figeroa
Leja U Shinko
Ivar G Stenseth
Misaki G Tollner
Claire N Stenseth
Mayumi B Tollner
Aika L Rulapaugh
Antonio Y Chui
Deepesh V Kusko
Tony R Ruta
Aditya D Wieser
Sinclair J Bowley
Kadeem A Tollner
Kadeem X Vocelka
Jones P Poquette
Wickens C Rim
Ricardo R Bolognia
Chavez T Morasca
Antonio B Iturbide
Kadeem D Ferencz
Mayumi M Foller
Kaitlin S Tollner
Maria Q Darakjy
Murillo W Maclead
Morrow K Gaucho
Deepesh X Gillian
Johnson D Darakjy
Kaitlin M Malet
Ricardo D Slusarski
Johnson F Bowley
Tony U Morasca
Kaitlin K Sergi
Ashley D Ferencz
IdCountryDate
1000France2025-05-28
1001Italy2025-05-17
1002Japan2025-05-28
1003Australia2025-06-02
1004Italy2025-05-19
1005Spain2025-05-27
1006Russia2025-05-17
1007Australia2025-06-13
1008Canada2025-05-20
1009Germany2025-06-10
1010United Kingdom2025-06-15
1011India2025-05-25
1012Brazil2025-05-25
1013India2025-06-08
1014Japan2025-06-14
1015India2025-05-29
1016India2025-05-18
1017United Kingdom2025-05-29
1018Italy2025-05-17
1019Russia2025-06-10
1020United Kingdom2025-06-11
1021United Kingdom2025-05-20
1022Spain2025-06-15
1023Canada2025-05-20
1024India2025-06-13
1025Japan2025-06-09
1026Russia2025-05-31
1027Japan2025-05-26
1028France2025-05-24
1029Australia2025-06-07
1030United Kingdom2025-06-09
1031Canada2025-06-06
1032Russia2025-05-20
1033Italy2025-06-08
1034United Kingdom2025-06-01
1035Brazil2025-05-18
1036Germany2025-05-23
1037Brazil2025-05-28
1038Spain2025-05-27
1039Russia2025-05-24
1040Australia2025-06-10
1041India2025-05-25
1042Spain2025-05-28
1043Japan2025-06-09
1044Russia2025-06-02
1045Canada2025-05-27
1046Germany2025-06-15
1047Canada2025-06-06
1048Argentina2025-05-29
1049France2025-05-22

On-Demand Data

NameIdCountryDate
Mayumi A Oldroyd1000Japan2025-06-10
Aruna B Slusarski1001Russia2025-06-14
Jones X Bolognia1002Australia2025-05-19
Smith O Schemmer1003Canada2025-05-19
Jeanfrancois X Sergi1004Germany2025-06-14
Munro U Morasca1005Brazil2025-05-20
Munro N Schemmer1006Brazil2025-06-07
Aditya W Amigon1007Italy2025-06-01
Nicolas M Briddick1008France2025-05-26
Munro V Saylors1009Russia2025-06-11
Emily C Wieser1010Argentina2025-05-31
Jones X Shinko1011Canada2025-06-14
Adams M Gaucho1012Brazil2025-06-05
Emily K Inouye1013Germany2025-05-18
Sinclair E Ostrosky1014Russia2025-06-01
Isabel W Ruta1015Brazil2025-06-13
Aruna P Flosi1016Brazil2025-05-31
Alejandro U Morasca1017Russia2025-06-12
Antonio Q Dilliard1018Italy2025-06-10
Izzy J Perin1019Argentina2025-06-06
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Maisha I ShinkoRussiaOnyama Limba PROPOSAL
Isabel J ButtFranceIvan Magalhaes UNQUALIFIED
Murillo F CaudyRussiaAnna Fali UNQUALIFIED
Stacey G BriddickSpainBernardo Dominic QUALIFIED
Nicolas F VocelkaSpainOnyama Limba NEGOTIATION
Sinclair Z NickaFranceAsiya Javayant NEW
Ricardo O RulapaughRussiaIoni Bowcher UNQUALIFIED
Aditya T FigeroaItalyAsiya Javayant RENEWAL
Sinclair U BowleySpainAsiya Javayant QUALIFIED
Salvatore Z StensethFranceAsiya Javayant PROPOSAL
Deepesh U OldroydJapanIoni Bowcher RENEWAL
Johnson X MaletItalyOnyama Limba NEGOTIATION
Sinclair L InouyeUnited KingdomXuxue Feng NEGOTIATION
Darci Y DoeJapanAsiya Javayant UNQUALIFIED
Silvio M PaprockiIndiaIoni Bowcher PROPOSAL
Alejandro V MarrierSpainAnna Fali NEGOTIATION
Nicolas M PerinRussiaAnna Fali PROPOSAL
Aditya O PoquetteCanadaXuxue Feng NEGOTIATION
Salvatore J ButtUnited KingdomXuxue Feng PROPOSAL
Claire I MarrierItalyOnyama Limba UNQUALIFIED
Kaitlin L BriddickUnited KingdomIvan Magalhaes RENEWAL
Cody T StensethSpainIoni Bowcher NEGOTIATION
Leon U FlosiJapanStephen Shaw QUALIFIED
Silvio Z RoysterIndiaAmy Elsner PROPOSAL
Francesco S SchemmerArgentinaAmy Elsner QUALIFIED
Mujtaba M KolmetzArgentinaElwin Sharvill UNQUALIFIED
Morrow O TollnerUnited KingdomIvan Magalhaes NEGOTIATION
Ivar F SergiIndiaIvan Magalhaes QUALIFIED
Jones Y BriddickGermanyIvan Magalhaes QUALIFIED
Wickens N GlickBrazilOnyama Limba NEW
Juan S MaletUnited KingdomAnna Fali NEGOTIATION
Isabel U PerinAustraliaIvan Magalhaes UNQUALIFIED
Wickens G MaletCanadaIoni Bowcher NEGOTIATION
Arvin I VocelkaCanadaIvan Magalhaes RENEWAL
Murillo R MaletAustraliaElwin Sharvill PROPOSAL
Maria A WhobreyFranceAsiya Javayant QUALIFIED
Cody H FerenczSpainElwin Sharvill NEW
James U FollerIndiaOnyama Limba QUALIFIED
Deepesh V FollerSpainElwin Sharvill UNQUALIFIED
Johnson J WaycottArgentinaStephen Shaw 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>