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 Z CaldareraJapanStephen Shaw NEW
Sinclair T StensethSpainAsiya Javayant PROPOSAL
Darci Q PoquetteIndiaAmy Elsner NEW
Rodrigues V WaycottRussiaBernardo Dominic RENEWAL
Murillo R AlbaresCanadaAmy Elsner NEW
Cody E OldroydJapanAsiya Javayant PROPOSAL
Maria Q FigeroaCanadaXuxue Feng NEW
Smith G CampainArgentinaAsiya Javayant NEW
Adams D NestleGermanyIoni Bowcher NEW
Ivar T RimArgentinaStephen Shaw NEGOTIATION
Rodrigues A WieserBrazilIoni Bowcher NEW
Julie Z CaudyRussiaOnyama Limba NEW
Antonio S BologniaRussiaBernardo Dominic PROPOSAL
Isabel S CaudyRussiaAmy Elsner QUALIFIED
Ivar Q VenereGermanyOnyama Limba PROPOSAL
Stacey Y KolmetzBrazilBernardo Dominic PROPOSAL
Isabel M RutaJapanBernardo Dominic NEW
Greenwood R MacleadSpainAmy Elsner QUALIFIED
Ivar M StockhamUnited KingdomIvan Magalhaes NEW
Misaki J BriddickArgentinaBernardo Dominic PROPOSAL
Morrow Q PoquetteSpainElwin Sharvill PROPOSAL
Emily Q MorascaUnited KingdomElwin Sharvill NEGOTIATION
Sinclair J CampainFranceIoni Bowcher PROPOSAL
Jones H FerenczUnited KingdomOnyama Limba PROPOSAL
Sinclair G VenereBrazilBernardo Dominic NEW
Alejandro N PerinAustraliaIoni Bowcher NEGOTIATION
Emily F OstroskyRussiaIvan Magalhaes RENEWAL
Salvatore M BowleyRussiaBernardo Dominic PROPOSAL
Arvin F GauchoArgentinaStephen Shaw NEW
Murillo V FigeroaSpainXuxue Feng PROPOSAL
Ashley C RoysterJapanStephen Shaw PROPOSAL
Aruna S WieserFranceAnna Fali NEGOTIATION
Jeanfrancois M PoquetteIndiaIoni Bowcher NEGOTIATION
Silvio P WieserAustraliaAnna Fali PROPOSAL
Ricardo M ChuiJapanStephen Shaw NEGOTIATION
Jefferson K TollnerSpainOnyama Limba NEW
Jeanfrancois I RutaAustraliaElwin Sharvill RENEWAL
Leja G FlosiIndiaIoni Bowcher NEGOTIATION
Kadeem T FerenczFranceAnna Fali PROPOSAL
Kadeem U InouyeFranceElwin Sharvill UNQUALIFIED
Jones O PoquetteJapanAmy Elsner UNQUALIFIED
Faith F CampainGermanyXuxue Feng RENEWAL
Silvio L DoeBrazilStephen Shaw PROPOSAL
Munro U IturbideFranceAmy Elsner UNQUALIFIED
Cody V GillianJapanXuxue Feng NEW
Costa L MacleadGermanyStephen Shaw NEW
Silvio O StockhamIndiaStephen Shaw RENEWAL
Jeanfrancois Q BologniaArgentinaAnna Fali QUALIFIED
Salvatore X GillianRussiaAsiya Javayant NEW
Leja E GillianCanadaBernardo Dominic NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Tony C FerenczFranceAsiya Javayant UNQUALIFIED
Morrow H MarrierBrazilElwin Sharvill NEGOTIATION
Alejandro C CampainUnited KingdomBernardo Dominic QUALIFIED
Sinclair M NestleSpainIoni Bowcher RENEWAL
Munro E PaprockiJapanAmy Elsner NEW
Smith Q FigeroaGermanyElwin Sharvill NEGOTIATION
Mujtaba F FlosiRussiaBernardo Dominic QUALIFIED
Salvatore Q ButtCanadaElwin Sharvill NEGOTIATION
Tony W RutaFranceStephen Shaw PROPOSAL
Maria U MaletBrazilXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Silvio K DarakjyRussia2025-06-07Benton, John B Jr QUALIFIED89Xuxue Feng
1001Aditya F RimAustralia2025-05-17Buckley Miller Wright NEGOTIATION96Xuxue Feng
1002Mayumi S VocelkaItaly2025-05-24Buckley Miller Wright NEGOTIATION78Stephen Shaw
1003Cody B DarakjyBrazil2025-06-09Buckley Miller Wright UNQUALIFIED96Asiya Javayant
1004James L FollerFrance2025-05-31King, Christopher A Esq NEGOTIATION73Elwin Sharvill
1005Deepesh E AmigonArgentina2025-05-23Rousseaux, Michael Esq NEW69Ivan Magalhaes
1006Tony I PerinJapan2025-05-27Buckley Miller Wright NEGOTIATION95Stephen Shaw
1007Tony R CampainItaly2025-06-02Chemel, James L Cpa UNQUALIFIED47Elwin Sharvill
1008Munro H GauchoItaly2025-05-23Feltz Printing Service PROPOSAL28Ioni Bowcher
1009Kaitlin W FigeroaBrazil2025-06-15Rousseaux, Michael Esq QUALIFIED36Amy Elsner
1010Johnson Z SergiUnited Kingdom2025-06-01Feltz Printing Service NEGOTIATION49Xuxue Feng
1011Kadeem O WaycottRussia2025-06-02Morlong Associates RENEWAL83Bernardo Dominic
1012Julie M StensethFrance2025-06-11Printing Dimensions RENEWAL5Bernardo Dominic
1013Morrow Q DoeJapan2025-06-10King, Christopher A Esq NEW7Asiya Javayant
1014Antonio D RutaFrance2025-06-11Feiner Bros UNQUALIFIED54Asiya Javayant
1015Tony N CaldareraIndia2025-06-12Chemel, James L Cpa PROPOSAL0Bernardo Dominic
1016Stacey Y FerenczUnited Kingdom2025-05-20Chanay, Jeffrey A Esq RENEWAL43Stephen Shaw
1017Adams W BowleyRussia2025-06-04Chapman, Ross E Esq PROPOSAL75Anna Fali
1018Octavia P ShinkoUnited Kingdom2025-06-08Rangoni Of Florence RENEWAL59Anna Fali
1019Chavez R NestleCanada2025-05-18Printing Dimensions QUALIFIED23Ioni Bowcher
1020Izzy Q SaylorsBrazil2025-06-01Morlong Associates RENEWAL49Ioni Bowcher
1021Deepesh I BowleyCanada2025-06-14Rousseaux, Michael Esq NEW17Amy Elsner
1022Johnson N MarrierJapan2025-06-02Truhlar And Truhlar Attys NEW94Asiya Javayant
1023Deepesh J KolmetzJapan2025-05-24Printing Dimensions QUALIFIED97Bernardo Dominic
1024Johnson N FlosiAustralia2025-06-12Printing Dimensions QUALIFIED79Asiya Javayant
1025Murillo V PoquetteJapan2025-05-21Rangoni Of Florence NEGOTIATION82Xuxue Feng
1026Darci K GauchoUnited Kingdom2025-06-04Printing Dimensions NEW88Asiya Javayant
1027James Q FollerGermany2025-06-10Chanay, Jeffrey A Esq QUALIFIED21Ivan Magalhaes
1028Isabel O IturbideItaly2025-05-22Feiner Bros PROPOSAL33Ivan Magalhaes
1029Munro N FlosiGermany2025-05-18Benton, John B Jr NEGOTIATION12Asiya Javayant
1030Claire J AlbaresRussia2025-05-22Rangoni Of Florence NEW19Anna Fali
1031Kaitlin V OldroydIndia2025-05-24Chapman, Ross E Esq RENEWAL45Onyama Limba
1032Ashley F SlusarskiCanada2025-06-12Chanay, Jeffrey A Esq QUALIFIED2Bernardo Dominic
1033Kadeem M CaldareraCanada2025-06-10Printing Dimensions NEW20Ioni Bowcher
1034Arvin H MaletSpain2025-06-07Chanay, Jeffrey A Esq QUALIFIED34Elwin Sharvill
1035Nicolas Q ButtItaly2025-05-21Feltz Printing Service UNQUALIFIED27Bernardo Dominic
1036Antonio M CampainGermany2025-05-23King, Christopher A Esq NEGOTIATION46Amy Elsner
1037Johnson L MacleadIndia2025-06-06Rangoni Of Florence QUALIFIED41Bernardo Dominic
1038Chavez F FigeroaUnited Kingdom2025-06-08Dorl, James J Esq NEGOTIATION83Ivan Magalhaes
1039Munro Q ShinkoGermany2025-05-22Chanay, Jeffrey A Esq NEW13Asiya Javayant
1040Francesco P PerinJapan2025-06-04Truhlar And Truhlar Attys UNQUALIFIED34Bernardo Dominic
1041Maria H ShinkoItaly2025-06-07Printing Dimensions UNQUALIFIED30Anna Fali
1042Costa S ButtUnited Kingdom2025-05-23Benton, John B Jr UNQUALIFIED58Stephen Shaw
1043Maria U ShinkoAustralia2025-05-24Chapman, Ross E Esq NEGOTIATION17Ioni Bowcher
1044Misaki G GauchoFrance2025-05-19Feltz Printing Service PROPOSAL82Onyama Limba
1045Ricardo E MaletUnited Kingdom2025-05-31Rousseaux, Michael Esq PROPOSAL47Asiya Javayant
1046Antonio U RoysterFrance2025-05-17Benton, John B Jr NEGOTIATION35Anna Fali
1047Emily Y ShinkoGermany2025-06-15Buckley Miller Wright RENEWAL11Anna Fali
1048Antonio Y FlosiJapan2025-05-24Chanay, Jeffrey A Esq PROPOSAL3Onyama Limba
1049Mujtaba B KuskoAustralia2025-05-21Buckley Miller Wright UNQUALIFIED47Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Sinclair Q GillianAustraliaOnyama Limba RENEWAL
Ivar W AlbaresCanadaBernardo Dominic NEW
Costa S SaylorsSpainElwin Sharvill RENEWAL
Aruna K CaldareraJapanOnyama Limba NEW
Julie B FollerArgentinaAsiya Javayant UNQUALIFIED
Ivar D InouyeBrazilAnna Fali QUALIFIED
Tony D CaldareraCanadaBernardo Dominic NEW
Claire O OldroydAustraliaAnna Fali NEW
Alejandro B VocelkaIndiaElwin Sharvill RENEWAL
Jones Q CaudyBrazilIoni Bowcher RENEWAL
Silvio S DoeGermanyBernardo Dominic QUALIFIED
Stacey C VenereUnited KingdomAsiya Javayant UNQUALIFIED
Murillo A ButtArgentinaIoni Bowcher UNQUALIFIED
Mujtaba L SchemmerSpainElwin Sharvill PROPOSAL
Clifford N SlusarskiFranceElwin Sharvill RENEWAL
James P MarrierGermanyBernardo Dominic PROPOSAL
Ashley R GauchoArgentinaAmy Elsner NEGOTIATION
Jones W FerenczSpainIoni Bowcher RENEWAL
Clifford B OldroydUnited KingdomIoni Bowcher NEGOTIATION
Aruna K RoysterIndiaBernardo Dominic PROPOSAL
Mujtaba L BriddickCanadaXuxue Feng NEW
David H StensethItalyIoni Bowcher RENEWAL
Mayumi R OldroydIndiaElwin Sharvill NEGOTIATION
Aika W PoquetteFranceAnna Fali UNQUALIFIED
Leon P GauchoIndiaAnna Fali PROPOSAL
Alejandro S OldroydFranceBernardo Dominic PROPOSAL
Salvatore C FigeroaArgentinaIvan Magalhaes NEW
Leja J WieserIndiaIvan Magalhaes QUALIFIED
Mujtaba E BologniaBrazilIvan Magalhaes QUALIFIED
Emily L PoquetteAustraliaStephen Shaw UNQUALIFIED
Murillo L BriddickArgentinaAsiya Javayant PROPOSAL
Aruna N MaletFranceXuxue Feng UNQUALIFIED
Chavez G ShinkoFranceBernardo Dominic NEGOTIATION
Ricardo P MarrierSpainAsiya Javayant NEGOTIATION
Johnson T WaycottIndiaOnyama Limba QUALIFIED
Antonio S WaycottRussiaAsiya Javayant NEGOTIATION
Smith Z WaycottAustraliaStephen Shaw NEW
Antonio F RulapaughJapanOnyama Limba PROPOSAL
Johnson O KuskoFranceAnna Fali NEGOTIATION
Leja G StensethRussiaAsiya Javayant NEGOTIATION
Wickens I PoquetteArgentinaAmy Elsner RENEWAL
Clifford J WhobreyIndiaBernardo Dominic PROPOSAL
James T NickaArgentinaStephen Shaw UNQUALIFIED
Nicolas W PerinRussiaOnyama Limba PROPOSAL
Johnson B RoysterJapanIoni Bowcher PROPOSAL
Jones X VenereSpainIvan Magalhaes PROPOSAL
Claire V ChuiBrazilIvan Magalhaes NEGOTIATION
Murillo W VocelkaJapanStephen Shaw NEW
Clifford H SaylorsBrazilStephen Shaw NEGOTIATION
Maria H WhobreyUnited KingdomIoni Bowcher PROPOSAL
Frozen Columns
Name
Maisha M Iturbide
Stacey D Malet
Mujtaba J Kolmetz
Emily D Kolmetz
Maisha Z Campain
Deepesh O Ruta
Aditya K Paprocki
Leon J Darakjy
Antonio A Darakjy
Costa O Gillian
Johnson M Stenseth
Johnson A Rim
Jeanfrancois O Sergi
Antonio N Dilliard
Jones T Whobrey
Adams E Saylors
David J Malet
Ricardo H Butt
Aika I Albares
Morrow M Dilliard
Francesco A Flosi
Leja Z Saylors
Costa P Tollner
Mujtaba O Chui
Aditya B Iturbide
Arvin W Garufi
Isabel H Figeroa
Adams C Flosi
Mayumi Z Kolmetz
Silvio N Paprocki
Aruna Y Slusarski
Aditya K Stenseth
Nicolas Q Malet
Wickens K Saylors
Faith K Schemmer
David L Shinko
Jones D Gaucho
Silvio T Albares
Ivar D Kusko
Deepesh P Bolognia
Murillo Y Poquette
Aditya R Malet
Juan E Slusarski
Munro L Briddick
David F Tollner
Costa Q Bolognia
Stacey L Doe
Cody T Dilliard
Kadeem Q Paprocki
Silvio H Kusko
IdCountryDate
1000Argentina2025-06-13
1001France2025-06-06
1002Italy2025-05-30
1003France2025-06-10
1004Australia2025-06-08
1005United Kingdom2025-06-05
1006Germany2025-06-09
1007India2025-06-06
1008France2025-06-03
1009Japan2025-05-17
1010Germany2025-05-24
1011United Kingdom2025-05-23
1012Argentina2025-05-20
1013France2025-06-13
1014Germany2025-06-13
1015Germany2025-06-06
1016Russia2025-05-24
1017United Kingdom2025-05-28
1018Spain2025-06-04
1019Spain2025-06-10
1020United Kingdom2025-05-31
1021Spain2025-05-20
1022India2025-05-28
1023United Kingdom2025-05-27
1024Australia2025-05-28
1025United Kingdom2025-06-01
1026Spain2025-06-03
1027Canada2025-06-02
1028Brazil2025-05-30
1029Canada2025-05-17
1030Italy2025-05-20
1031Brazil2025-06-13
1032Russia2025-05-31
1033Argentina2025-05-29
1034Argentina2025-06-02
1035Argentina2025-06-06
1036India2025-06-14
1037Canada2025-06-14
1038Australia2025-05-17
1039Canada2025-05-28
1040Spain2025-06-04
1041Canada2025-06-11
1042Russia2025-05-19
1043Russia2025-06-07
1044France2025-05-31
1045Italy2025-06-06
1046France2025-05-31
1047Australia2025-05-26
1048Australia2025-06-09
1049United Kingdom2025-06-01

On-Demand Data

NameIdCountryDate
Deepesh Y Campain1000Argentina2025-05-29
Clifford H Kolmetz1001Argentina2025-06-04
Aruna Z Malet1002United Kingdom2025-06-09
Aruna E Schemmer1003Australia2025-06-14
Johnson X Schemmer1004Brazil2025-06-09
Murillo U Poquette1005Germany2025-05-17
Izzy K Garufi1006Brazil2025-05-19
Leja R Figeroa1007Russia2025-05-31
Jeanfrancois Y Morasca1008Argentina2025-06-02
Johnson S Wieser1009United Kingdom2025-06-09
Arvin X Doe1010Japan2025-06-03
Leja P Flosi1011Japan2025-05-20
Maria U Poquette1012Germany2025-06-14
Johnson I Nestle1013Russia2025-06-04
Arvin I Marrier1014Japan2025-05-21
Adams Y Doe1015United Kingdom2025-06-03
Alejandro M Chui1016Russia2025-06-13
Aika N Shinko1017India2025-05-29
Claire I Gaucho1018Russia2025-06-09
Faith R Campain1019Australia2025-06-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jefferson E AmigonBrazilIoni Bowcher UNQUALIFIED
Juan R CaldareraItalyAmy Elsner NEW
Jefferson P FigeroaItalyAnna Fali NEGOTIATION
James P WhobreyArgentinaXuxue Feng NEGOTIATION
Ashley F DilliardBrazilIoni Bowcher UNQUALIFIED
Tony L GlickFranceAnna Fali UNQUALIFIED
Aditya P AmigonUnited KingdomElwin Sharvill NEGOTIATION
Maria W GarufiCanadaBernardo Dominic PROPOSAL
Kaitlin N StockhamBrazilXuxue Feng QUALIFIED
Ricardo E FerenczFranceAnna Fali NEW
Mayumi U GauchoRussiaAsiya Javayant UNQUALIFIED
Salvatore M OstroskyArgentinaIoni Bowcher NEW
Johnson K GillianArgentinaOnyama Limba NEW
Maisha B StockhamUnited KingdomIoni Bowcher PROPOSAL
Aika A FollerItalyElwin Sharvill QUALIFIED
David I StockhamFranceOnyama Limba RENEWAL
Ashley K GauchoItalyIoni Bowcher PROPOSAL
Chavez B PaprockiJapanXuxue Feng RENEWAL
Stacey A MaletBrazilIvan Magalhaes QUALIFIED
Maria O MarrierJapanOnyama Limba PROPOSAL
Chavez L WieserUnited KingdomStephen Shaw QUALIFIED
Smith J GarufiBrazilOnyama Limba NEGOTIATION
Leja K MorascaIndiaXuxue Feng QUALIFIED
Kaitlin H FlosiIndiaXuxue Feng RENEWAL
Smith V AlbaresRussiaAsiya Javayant RENEWAL
Silvio O NickaRussiaIoni Bowcher PROPOSAL
Aruna J FigeroaArgentinaBernardo Dominic NEW
Cody N SergiJapanElwin Sharvill UNQUALIFIED
Alejandro U KuskoArgentinaXuxue Feng PROPOSAL
Maisha R AlbaresFranceBernardo Dominic UNQUALIFIED
Tony V MarrierBrazilIoni Bowcher PROPOSAL
Ashley T OldroydArgentinaXuxue Feng QUALIFIED
Maria O ChuiSpainXuxue Feng PROPOSAL
Jones G PerinUnited KingdomAnna Fali RENEWAL
Cody K SaylorsJapanXuxue Feng QUALIFIED
Kaitlin K GarufiRussiaXuxue Feng QUALIFIED
Octavia P ChuiRussiaAmy Elsner RENEWAL
Clifford H SchemmerArgentinaXuxue Feng RENEWAL
Arvin I BowleyJapanAnna Fali RENEWAL
Costa S RulapaughItalyOnyama Limba 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>