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
Aruna M GillianIndiaStephen Shaw RENEWAL
Kadeem F ChuiSpainAsiya Javayant NEGOTIATION
Stacey H OldroydGermanyBernardo Dominic QUALIFIED
Misaki I MaletFranceAmy Elsner QUALIFIED
Leja W BologniaSpainOnyama Limba NEW
Jones W AlbaresAustraliaIoni Bowcher NEW
Ricardo A RulapaughSpainXuxue Feng PROPOSAL
Silvio Q MorascaUnited KingdomStephen Shaw RENEWAL
Izzy F MarrierAustraliaAnna Fali UNQUALIFIED
Silvio Q StensethRussiaAnna Fali RENEWAL
Greenwood R CampainIndiaXuxue Feng QUALIFIED
Maisha C MacleadBrazilStephen Shaw RENEWAL
Ivar P FerenczFranceIoni Bowcher NEGOTIATION
Kaitlin W VocelkaCanadaOnyama Limba QUALIFIED
Mayumi Q PoquetteSpainOnyama Limba QUALIFIED
Chavez F PaprockiBrazilXuxue Feng PROPOSAL
Isabel B BowleyArgentinaXuxue Feng NEGOTIATION
Misaki Y MarrierItalyAmy Elsner RENEWAL
Octavia V MaletGermanyXuxue Feng PROPOSAL
Claire B ChuiItalyIvan Magalhaes NEGOTIATION
Maria B GarufiItalyIvan Magalhaes NEGOTIATION
Isabel D BologniaCanadaIvan Magalhaes NEW
Octavia H FerenczCanadaIvan Magalhaes RENEWAL
Aika N BriddickBrazilIvan Magalhaes PROPOSAL
Rodrigues N SchemmerUnited KingdomXuxue Feng NEGOTIATION
Julie V NestleCanadaAsiya Javayant UNQUALIFIED
Julie G KolmetzUnited KingdomOnyama Limba NEGOTIATION
Leon R FigeroaRussiaAsiya Javayant NEW
Morrow K SchemmerArgentinaStephen Shaw PROPOSAL
Maisha Q DoeCanadaElwin Sharvill QUALIFIED
Deepesh R DarakjyItalyAnna Fali UNQUALIFIED
Morrow S BriddickUnited KingdomOnyama Limba PROPOSAL
Greenwood Y CaldareraRussiaIvan Magalhaes RENEWAL
Deepesh F AmigonIndiaXuxue Feng PROPOSAL
Juan G DilliardIndiaOnyama Limba NEW
Tony U FlosiArgentinaBernardo Dominic QUALIFIED
Mujtaba X DoeRussiaOnyama Limba NEGOTIATION
Mayumi K MarrierSpainOnyama Limba UNQUALIFIED
Johnson H InouyeAustraliaIvan Magalhaes PROPOSAL
Mujtaba T GillianCanadaBernardo Dominic RENEWAL
Claire Q SlusarskiJapanXuxue Feng PROPOSAL
Costa A WhobreyIndiaIvan Magalhaes NEW
Maisha B BologniaUnited KingdomAnna Fali RENEWAL
Tony D BowleyUnited KingdomElwin Sharvill UNQUALIFIED
Claire S SergiGermanyStephen Shaw QUALIFIED
Greenwood C PaprockiCanadaElwin Sharvill PROPOSAL
Julie O BowleySpainBernardo Dominic PROPOSAL
David S DilliardUnited KingdomOnyama Limba PROPOSAL
Isabel J BowleyArgentinaIvan Magalhaes QUALIFIED
Jones D SchemmerCanadaAsiya Javayant QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Greenwood K ChuiCanadaAnna Fali UNQUALIFIED
Aruna Q CaldareraGermanyBernardo Dominic QUALIFIED
Leon Y StensethIndiaBernardo Dominic NEW
Claire Z TollnerItalyIvan Magalhaes NEGOTIATION
Arvin X SergiCanadaXuxue Feng QUALIFIED
Stacey N CaudyJapanXuxue Feng RENEWAL
Nicolas O WaycottItalyAsiya Javayant NEW
Maisha K MorascaBrazilStephen Shaw NEGOTIATION
Antonio U FigeroaGermanyElwin Sharvill UNQUALIFIED
Chavez N RoysterJapanAmy Elsner NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Isabel D DoeSpain2024-05-24Chapman, Ross E Esq UNQUALIFIED89Stephen Shaw
1001Misaki X StockhamGermany2024-06-09Benton, John B Jr UNQUALIFIED49Xuxue Feng
1002Leja F FerenczJapan2024-06-03Rangoni Of Florence PROPOSAL67Ioni Bowcher
1003Rodrigues D PoquetteRussia2024-05-30Chapman, Ross E Esq NEGOTIATION62Ivan Magalhaes
1004Kadeem T MorascaBrazil2024-06-08King, Christopher A Esq UNQUALIFIED1Onyama Limba
1005Stacey I CaldareraIndia2024-06-14Rousseaux, Michael Esq UNQUALIFIED38Ivan Magalhaes
1006Ivar F FollerArgentina2024-05-28Dorl, James J Esq RENEWAL58Elwin Sharvill
1007Kadeem C ChuiJapan2024-05-22Feltz Printing Service NEGOTIATION51Anna Fali
1008Wickens G PoquetteBrazil2024-06-08Buckley Miller Wright PROPOSAL93Onyama Limba
1009Jones C NickaIndia2024-06-10Dorl, James J Esq NEW78Asiya Javayant
1010Aika X GarufiJapan2024-05-30Printing Dimensions NEW60Xuxue Feng
1011Kaitlin C MarrierAustralia2024-06-03Chanay, Jeffrey A Esq NEGOTIATION25Anna Fali
1012Cody Q DarakjyGermany2024-05-18Morlong Associates UNQUALIFIED40Stephen Shaw
1013Rodrigues P DarakjyBrazil2024-06-04Feiner Bros NEGOTIATION95Xuxue Feng
1014David W NickaCanada2024-05-17Buckley Miller Wright UNQUALIFIED34Xuxue Feng
1015Ashley A MorascaItaly2024-06-02King, Christopher A Esq UNQUALIFIED24Onyama Limba
1016Clifford Z FerenczSpain2024-05-21Chapman, Ross E Esq RENEWAL8Xuxue Feng
1017Rodrigues J NickaIndia2024-06-09Commercial Press QUALIFIED39Asiya Javayant
1018Salvatore O CaldareraGermany2024-06-02Chemel, James L Cpa RENEWAL45Amy Elsner
1019Sinclair I ButtItaly2024-06-08Rousseaux, Michael Esq NEGOTIATION50Asiya Javayant
1020Maria P StockhamRussia2024-05-20Chanay, Jeffrey A Esq UNQUALIFIED97Amy Elsner
1021Costa S RimFrance2024-06-11Rangoni Of Florence NEGOTIATION20Anna Fali
1022Misaki T PerinIndia2024-06-01Dorl, James J Esq NEW70Anna Fali
1023Morrow L SaylorsSpain2024-05-27Morlong Associates PROPOSAL75Bernardo Dominic
1024Ivar K ShinkoCanada2024-06-12Feiner Bros UNQUALIFIED33Anna Fali
1025Wickens F AlbaresRussia2024-05-28Commercial Press RENEWAL7Ioni Bowcher
1026James E MarrierBrazil2024-06-01Morlong Associates QUALIFIED28Asiya Javayant
1027Antonio D ShinkoIndia2024-05-18Truhlar And Truhlar Attys PROPOSAL54Ioni Bowcher
1028David D MorascaFrance2024-06-04Chemel, James L Cpa RENEWAL73Anna Fali
1029Leon A TollnerGermany2024-05-25Chanay, Jeffrey A Esq NEW9Ioni Bowcher
1030Emily G KolmetzBrazil2024-05-29Morlong Associates QUALIFIED46Onyama Limba
1031Antonio H ChuiUnited Kingdom2024-05-28Buckley Miller Wright NEGOTIATION50Onyama Limba
1032Claire B RimGermany2024-05-17Rousseaux, Michael Esq PROPOSAL32Elwin Sharvill
1033Mayumi Z BowleyBrazil2024-05-26Rangoni Of Florence NEW47Asiya Javayant
1034Nicolas K GarufiRussia2024-05-23Rangoni Of Florence QUALIFIED27Asiya Javayant
1035Morrow I OldroydGermany2024-05-18Printing Dimensions PROPOSAL17Amy Elsner
1036Faith W ChuiIndia2024-05-18Chapman, Ross E Esq NEGOTIATION44Stephen Shaw
1037Deepesh V CaldareraItaly2024-05-24Buckley Miller Wright NEW61Ivan Magalhaes
1038Izzy Z RoysterRussia2024-06-04Feiner Bros UNQUALIFIED43Stephen Shaw
1039Rodrigues M WieserFrance2024-05-21King, Christopher A Esq NEW7Anna Fali
1040Aika B SergiBrazil2024-05-31Benton, John B Jr QUALIFIED11Onyama Limba
1041Jefferson L OstroskyArgentina2024-06-02King, Christopher A Esq NEGOTIATION39Stephen Shaw
1042Arvin U PaprockiAustralia2024-05-30Chemel, James L Cpa UNQUALIFIED86Xuxue Feng
1043Octavia K CampainUnited Kingdom2024-05-23Truhlar And Truhlar Attys RENEWAL2Anna Fali
1044David C GauchoBrazil2024-05-28Commercial Press UNQUALIFIED57Stephen Shaw
1045Costa J ShinkoItaly2024-06-12Printing Dimensions QUALIFIED88Ioni Bowcher
1046Jeanfrancois G NickaAustralia2024-05-16Chemel, James L Cpa UNQUALIFIED6Bernardo Dominic
1047Sinclair I InouyeIndia2024-06-04Feltz Printing Service PROPOSAL65Anna Fali
1048Clifford G DilliardArgentina2024-06-07Feltz Printing Service QUALIFIED7Elwin Sharvill
1049Jones P DarakjyCanada2024-06-14Truhlar And Truhlar Attys NEW26Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Izzy E DarakjyGermanyBernardo Dominic NEW
Jeanfrancois S GarufiRussiaXuxue Feng PROPOSAL
Misaki Y OstroskyRussiaXuxue Feng RENEWAL
Mujtaba H KolmetzJapanIvan Magalhaes PROPOSAL
Costa B CampainGermanyAmy Elsner RENEWAL
Maria U GarufiAustraliaStephen Shaw NEGOTIATION
Juan Y VenereFranceOnyama Limba PROPOSAL
Cody H StockhamRussiaStephen Shaw RENEWAL
Silvio D TollnerUnited KingdomIvan Magalhaes RENEWAL
Jeanfrancois G PoquetteJapanBernardo Dominic RENEWAL
Isabel E WieserArgentinaIvan Magalhaes NEW
Jennifer V StensethCanadaIvan Magalhaes UNQUALIFIED
Antonio C InouyeUnited KingdomAmy Elsner NEGOTIATION
Greenwood B NestleJapanXuxue Feng QUALIFIED
David X DilliardFranceStephen Shaw NEW
Claire G InouyeGermanyOnyama Limba PROPOSAL
Stacey D PoquetteUnited KingdomIvan Magalhaes UNQUALIFIED
Rodrigues O WhobreyIndiaAsiya Javayant UNQUALIFIED
Maria A DoeCanadaIoni Bowcher PROPOSAL
Isabel U WaycottAustraliaElwin Sharvill UNQUALIFIED
Morrow E WaycottFranceAmy Elsner QUALIFIED
Tony L RoysterGermanyIvan Magalhaes QUALIFIED
Sinclair X FlosiItalyAmy Elsner QUALIFIED
Costa I WhobreyArgentinaStephen Shaw NEGOTIATION
Emily L DilliardItalyAnna Fali RENEWAL
Stacey J NestleItalyElwin Sharvill RENEWAL
Jones F SchemmerFranceBernardo Dominic PROPOSAL
Sinclair H StensethJapanIvan Magalhaes UNQUALIFIED
Ashley A GarufiAustraliaOnyama Limba UNQUALIFIED
Johnson O FlosiFranceAsiya Javayant NEGOTIATION
Leon C RutaSpainAsiya Javayant UNQUALIFIED
Silvio D DoeFranceXuxue Feng QUALIFIED
Stacey Y KuskoItalyBernardo Dominic NEW
Murillo L MacleadIndiaAmy Elsner RENEWAL
Tony D MacleadRussiaOnyama Limba NEGOTIATION
Leja O OstroskyArgentinaBernardo Dominic NEGOTIATION
Leja P RimBrazilIoni Bowcher NEW
Isabel L RoysterAustraliaXuxue Feng NEW
Jennifer K FigeroaArgentinaIvan Magalhaes RENEWAL
Adams Q ChuiFranceAnna Fali QUALIFIED
Chavez L TollnerCanadaAnna Fali QUALIFIED
Jones N PerinCanadaIvan Magalhaes QUALIFIED
Clifford A FollerCanadaBernardo Dominic QUALIFIED
Leon B FerenczSpainElwin Sharvill NEGOTIATION
Jeanfrancois G ButtCanadaBernardo Dominic RENEWAL
Mujtaba H DilliardItalyAnna Fali UNQUALIFIED
Arvin B GauchoRussiaAmy Elsner RENEWAL
Johnson A MacleadJapanElwin Sharvill NEGOTIATION
Nicolas R SlusarskiFranceAmy Elsner RENEWAL
Jones G StockhamArgentinaIoni Bowcher QUALIFIED
Frozen Columns
Name
Octavia P Gaucho
Greenwood D Shinko
Kaitlin T Bolognia
Wickens Z Tollner
Juan S Perin
Chavez T Wieser
Mujtaba L Dilliard
Silvio N Caudy
Kaitlin V Foller
Johnson R Ruta
Wickens P Briddick
Maria N Rulapaugh
Alejandro A Tollner
Julie M Malet
Greenwood O Flosi
Ricardo A Bowley
Mayumi E Bowley
Juan Q Dilliard
Murillo B Figeroa
David V Royster
Antonio S Gaucho
Mujtaba K Chui
Nicolas N Butt
Murillo A Stockham
Greenwood E Sergi
Misaki O Kolmetz
Juan T Rim
Claire Z Stenseth
Jeanfrancois G Venere
Maisha R Dilliard
Jefferson W Iturbide
Cody W Glick
Kaitlin Q Stenseth
Morrow B Morasca
Cody G Malet
Chavez T Poquette
Izzy N Nestle
Ricardo Z Saylors
Jones Q Slusarski
Leon M Ruta
Julie C Rulapaugh
Juan T Butt
Costa B Royster
Kaitlin D Whobrey
Costa W Inouye
Misaki Y Caldarera
Aditya A Stockham
Clifford D Paprocki
Leja X Ferencz
Silvio K Garufi
IdCountryDate
1000Italy2024-05-28
1001Spain2024-06-09
1002Australia2024-05-28
1003Russia2024-05-19
1004Australia2024-05-31
1005Spain2024-06-03
1006Brazil2024-05-26
1007India2024-05-31
1008Australia2024-05-21
1009Japan2024-06-05
1010India2024-05-29
1011Brazil2024-06-01
1012India2024-05-16
1013Italy2024-05-31
1014Spain2024-05-26
1015Germany2024-05-29
1016Russia2024-06-03
1017Spain2024-06-05
1018Russia2024-05-20
1019Italy2024-05-23
1020Italy2024-05-29
1021India2024-05-24
1022Argentina2024-05-26
1023Brazil2024-06-13
1024Germany2024-06-09
1025Russia2024-06-07
1026Brazil2024-06-03
1027Spain2024-06-08
1028Germany2024-05-31
1029Russia2024-06-02
1030Canada2024-06-01
1031Spain2024-05-27
1032India2024-06-14
1033India2024-06-10
1034United Kingdom2024-05-24
1035India2024-06-13
1036Spain2024-06-14
1037Russia2024-06-09
1038Germany2024-05-17
1039Germany2024-06-10
1040Canada2024-05-22
1041United Kingdom2024-06-13
1042India2024-06-02
1043United Kingdom2024-05-20
1044Germany2024-06-10
1045India2024-06-12
1046Spain2024-05-17
1047Canada2024-05-30
1048Italy2024-06-09
1049Canada2024-05-17

On-Demand Data

NameIdCountryDate
Julie W Saylors1000Canada2024-05-31
Darci D Glick1001France2024-06-03
Ivar P Bolognia1002Russia2024-05-24
Munro E Chui1003Canada2024-06-13
Alejandro S Saylors1004Brazil2024-06-05
Stacey I Campain1005France2024-05-29
Tony C Malet1006Spain2024-05-27
Tony O Campain1007Japan2024-05-21
Aika U Venere1008Germany2024-05-29
Johnson I Briddick1009India2024-06-11
Costa W Venere1010Japan2024-06-08
Aruna E Marrier1011Germany2024-05-25
Leja N Kusko1012India2024-05-24
Deepesh D Gillian1013Canada2024-06-05
Nicolas V Caudy1014Argentina2024-06-03
Claire U Bowley1015India2024-05-21
Munro X Shinko1016Argentina2024-06-13
Izzy J Poquette1017Germany2024-05-19
Jeanfrancois Y Doe1018Brazil2024-05-23
James G Dilliard1019Canada2024-06-06
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Salvatore D RimArgentinaAnna Fali NEW
Johnson S GillianArgentinaAnna Fali NEW
Leon Z KolmetzBrazilAsiya Javayant UNQUALIFIED
Cody G AmigonCanadaAmy Elsner RENEWAL
Emily K GillianItalyIvan Magalhaes NEW
Maisha H VocelkaArgentinaBernardo Dominic NEGOTIATION
Jefferson N CampainUnited KingdomBernardo Dominic RENEWAL
Jones N KuskoRussiaAnna Fali PROPOSAL
Jeanfrancois B CaudyArgentinaAsiya Javayant QUALIFIED
Munro E FlosiItalyElwin Sharvill NEW
Kadeem G VenereAustraliaIvan Magalhaes RENEWAL
Leja Y RoysterUnited KingdomStephen Shaw NEW
Isabel C FigeroaRussiaStephen Shaw NEGOTIATION
Juan Z PaprockiUnited KingdomIoni Bowcher NEGOTIATION
Aruna B StensethIndiaAnna Fali PROPOSAL
Jeanfrancois F GillianArgentinaElwin Sharvill NEW
Julie O InouyeUnited KingdomBernardo Dominic QUALIFIED
Munro J StockhamItalyIoni Bowcher QUALIFIED
Morrow Z WaycottBrazilElwin Sharvill NEW
Leon P CaudyJapanAsiya Javayant PROPOSAL
Darci F FigeroaRussiaStephen Shaw PROPOSAL
Darci W RulapaughArgentinaOnyama Limba NEW
Rodrigues M CampainIndiaXuxue Feng RENEWAL
Jeanfrancois W AmigonItalyAsiya Javayant NEW
Jeanfrancois H WieserIndiaStephen Shaw RENEWAL
Clifford I KuskoItalyOnyama Limba QUALIFIED
Kadeem T SaylorsIndiaIvan Magalhaes QUALIFIED
Antonio A BriddickBrazilElwin Sharvill RENEWAL
Silvio E IturbideRussiaIvan Magalhaes QUALIFIED
Octavia U NestleArgentinaBernardo Dominic UNQUALIFIED
Juan B MarrierFranceBernardo Dominic NEW
Mayumi K MaletArgentinaAmy Elsner NEGOTIATION
Aika C KuskoIndiaElwin Sharvill NEW
Maisha N KuskoSpainXuxue Feng QUALIFIED
Francesco X OldroydItalyAsiya Javayant PROPOSAL
Sinclair P WhobreyGermanyOnyama Limba QUALIFIED
Misaki C PaprockiBrazilBernardo Dominic NEW
Maria V OldroydItalyElwin Sharvill PROPOSAL
Julie Z GlickRussiaBernardo Dominic PROPOSAL
Alejandro V ChuiItalyAsiya Javayant 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>