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
Rodrigues G FollerGermanyElwin Sharvill PROPOSAL
Ashley T BowleyCanadaXuxue Feng NEW
Ricardo F BriddickBrazilOnyama Limba NEGOTIATION
James E KolmetzUnited KingdomIoni Bowcher UNQUALIFIED
Isabel I SergiGermanyBernardo Dominic NEGOTIATION
David G MarrierArgentinaElwin Sharvill RENEWAL
Aditya X SaylorsBrazilXuxue Feng PROPOSAL
Jones D CaldareraGermanyOnyama Limba NEW
Morrow P SchemmerUnited KingdomIvan Magalhaes QUALIFIED
Ivar A MorascaGermanyIoni Bowcher NEGOTIATION
Costa K AlbaresBrazilBernardo Dominic NEGOTIATION
Francesco Y NickaUnited KingdomStephen Shaw QUALIFIED
Arvin R FollerIndiaXuxue Feng QUALIFIED
Chavez E RimFranceAsiya Javayant QUALIFIED
Aika L NickaRussiaBernardo Dominic PROPOSAL
Jefferson L MaletFranceAmy Elsner UNQUALIFIED
Deepesh E KolmetzCanadaElwin Sharvill NEW
Izzy H PaprockiItalyBernardo Dominic RENEWAL
Salvatore O OldroydJapanBernardo Dominic NEW
Leja V VocelkaFranceIoni Bowcher RENEWAL
Ashley C CampainUnited KingdomStephen Shaw QUALIFIED
Murillo B ChuiUnited KingdomAsiya Javayant UNQUALIFIED
Jones O WhobreyAustraliaAsiya Javayant RENEWAL
Cody Y SlusarskiJapanBernardo Dominic NEW
Sinclair Q BriddickItalyStephen Shaw PROPOSAL
Deepesh Y NestleCanadaIoni Bowcher RENEWAL
Ricardo P GarufiItalyOnyama Limba PROPOSAL
Julie R WaycottItalyIoni Bowcher NEGOTIATION
Octavia O MacleadGermanyXuxue Feng PROPOSAL
Kaitlin N GauchoSpainAmy Elsner NEGOTIATION
Izzy D DoeRussiaOnyama Limba PROPOSAL
Nicolas G VocelkaSpainAsiya Javayant RENEWAL
Cody X PoquetteIndiaIvan Magalhaes NEW
Ashley P VenereAustraliaIoni Bowcher NEW
Alejandro L CampainBrazilIoni Bowcher PROPOSAL
Jones A ShinkoAustraliaAmy Elsner UNQUALIFIED
Murillo W OldroydFranceIvan Magalhaes PROPOSAL
Smith Y OstroskyFranceIvan Magalhaes QUALIFIED
Ashley P WhobreyUnited KingdomIvan Magalhaes PROPOSAL
Stacey G MarrierFranceIvan Magalhaes PROPOSAL
Morrow Z OstroskyRussiaStephen Shaw RENEWAL
David T GlickGermanyAnna Fali NEGOTIATION
Izzy R RoysterSpainXuxue Feng NEGOTIATION
Izzy J MaletGermanyAnna Fali QUALIFIED
Greenwood J StockhamFranceAnna Fali PROPOSAL
Antonio D SergiRussiaAnna Fali QUALIFIED
David Y FollerSpainXuxue Feng NEGOTIATION
Deepesh I CaudyGermanyElwin Sharvill PROPOSAL
Francesco L FlosiArgentinaAnna Fali NEW
Clifford T GillianJapanOnyama Limba PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Greenwood K StockhamAustraliaAsiya Javayant RENEWAL
Jeanfrancois V IturbideCanadaStephen Shaw NEW
Murillo H BologniaRussiaAmy Elsner PROPOSAL
Maisha I TollnerFranceAnna Fali NEW
Deepesh P GillianFranceStephen Shaw NEW
Stacey F MaletSpainOnyama Limba PROPOSAL
Nicolas B RoysterAustraliaStephen Shaw PROPOSAL
Maisha Q BowleyArgentinaIvan Magalhaes QUALIFIED
Alejandro S GlickBrazilIoni Bowcher RENEWAL
Ricardo O ShinkoAustraliaBernardo Dominic UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Rodrigues R StensethGermany2025-06-10Benton, John B Jr PROPOSAL97Onyama Limba
1001Salvatore N OstroskyAustralia2025-05-18Benton, John B Jr PROPOSAL76Asiya Javayant
1002Morrow H FigeroaAustralia2025-05-21Benton, John B Jr NEGOTIATION80Asiya Javayant
1003Cody X DarakjyAustralia2025-06-13Rousseaux, Michael Esq UNQUALIFIED8Asiya Javayant
1004Kaitlin D MaletGermany2025-05-18Chapman, Ross E Esq PROPOSAL77Ivan Magalhaes
1005Costa T MaletSpain2025-06-07Feltz Printing Service RENEWAL21Bernardo Dominic
1006Faith G WhobreyGermany2025-06-02Rangoni Of Florence NEGOTIATION27Ioni Bowcher
1007Juan U RoysterIndia2025-06-12Morlong Associates RENEWAL91Stephen Shaw
1008Alejandro J FerenczFrance2025-05-22Chapman, Ross E Esq QUALIFIED76Ioni Bowcher
1009Juan N CampainAustralia2025-05-20Feiner Bros RENEWAL40Ivan Magalhaes
1010Rodrigues R MaletAustralia2025-06-15Buckley Miller Wright NEW19Ioni Bowcher
1011Kadeem L PaprockiRussia2025-05-19Rousseaux, Michael Esq QUALIFIED54Elwin Sharvill
1012Claire R StensethBrazil2025-05-27King, Christopher A Esq NEGOTIATION39Amy Elsner
1013Mayumi M KuskoIndia2025-06-08Chemel, James L Cpa NEW61Amy Elsner
1014Tony F KuskoUnited Kingdom2025-06-08Truhlar And Truhlar Attys QUALIFIED60Xuxue Feng
1015Sinclair E RoysterCanada2025-05-24Printing Dimensions PROPOSAL2Elwin Sharvill
1016Antonio S OstroskyRussia2025-05-30Buckley Miller Wright RENEWAL97Ivan Magalhaes
1017Murillo L TollnerUnited Kingdom2025-05-29Buckley Miller Wright QUALIFIED95Amy Elsner
1018Sinclair D VenereAustralia2025-05-29Commercial Press PROPOSAL20Onyama Limba
1019Murillo H KuskoGermany2025-06-08Dorl, James J Esq RENEWAL57Asiya Javayant
1020Chavez U PoquetteCanada2025-06-05Printing Dimensions RENEWAL82Stephen Shaw
1021Mujtaba F ShinkoAustralia2025-06-06Feiner Bros NEGOTIATION32Anna Fali
1022Sinclair L WieserIndia2025-05-23Dorl, James J Esq NEW21Stephen Shaw
1023Silvio U MaletItaly2025-05-18Printing Dimensions QUALIFIED87Amy Elsner
1024Kadeem V VenereSpain2025-06-08Commercial Press UNQUALIFIED59Ivan Magalhaes
1025Stacey Z GauchoItaly2025-06-07Dorl, James J Esq NEW51Bernardo Dominic
1026Misaki Q WhobreyAustralia2025-06-08Morlong Associates UNQUALIFIED96Ivan Magalhaes
1027Ricardo D AmigonIndia2025-05-18Feltz Printing Service UNQUALIFIED90Amy Elsner
1028Darci D PerinRussia2025-05-21King, Christopher A Esq PROPOSAL82Elwin Sharvill
1029Rodrigues S DarakjyUnited Kingdom2025-05-24Chemel, James L Cpa UNQUALIFIED7Elwin Sharvill
1030Ivar F NestleFrance2025-06-08Truhlar And Truhlar Attys UNQUALIFIED36Anna Fali
1031Jefferson Y CaldareraSpain2025-06-08Dorl, James J Esq PROPOSAL46Elwin Sharvill
1032Morrow O AmigonAustralia2025-06-14Printing Dimensions NEW7Onyama Limba
1033Cody F ChuiJapan2025-05-19Truhlar And Truhlar Attys NEW81Ivan Magalhaes
1034Nicolas K ButtAustralia2025-06-04Dorl, James J Esq NEGOTIATION98Onyama Limba
1035Greenwood M VenereGermany2025-05-27Rangoni Of Florence QUALIFIED87Bernardo Dominic
1036Mayumi K StockhamAustralia2025-05-25Chapman, Ross E Esq UNQUALIFIED12Amy Elsner
1037Kaitlin G RulapaughItaly2025-06-01Truhlar And Truhlar Attys UNQUALIFIED18Onyama Limba
1038Salvatore H FlosiJapan2025-06-15Rousseaux, Michael Esq RENEWAL11Amy Elsner
1039Deepesh I DilliardArgentina2025-05-21Morlong Associates NEGOTIATION34Stephen Shaw
1040Adams O GauchoCanada2025-06-15Chemel, James L Cpa QUALIFIED61Stephen Shaw
1041Mayumi Z WhobreyUnited Kingdom2025-05-30Buckley Miller Wright UNQUALIFIED58Stephen Shaw
1042Greenwood A PerinArgentina2025-05-26Morlong Associates UNQUALIFIED19Anna Fali
1043Cody I CaldareraBrazil2025-05-26Commercial Press PROPOSAL58Stephen Shaw
1044Murillo Y WaycottUnited Kingdom2025-06-11Feltz Printing Service QUALIFIED19Stephen Shaw
1045Mujtaba M AlbaresFrance2025-05-21Buckley Miller Wright UNQUALIFIED1Anna Fali
1046Antonio K TollnerCanada2025-06-10Rousseaux, Michael Esq NEW6Amy Elsner
1047Ashley Y VenereCanada2025-06-13Printing Dimensions UNQUALIFIED7Onyama Limba
1048David D AlbaresRussia2025-06-04Benton, John B Jr NEGOTIATION1Asiya Javayant
1049Mujtaba V GillianJapan2025-05-20Dorl, James J Esq NEW32Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Greenwood Y StensethUnited KingdomBernardo Dominic NEW
Darci E WieserGermanyStephen Shaw NEW
Jones O RimGermanyBernardo Dominic RENEWAL
Mayumi U VocelkaFranceIoni Bowcher PROPOSAL
Rodrigues E RoysterArgentinaAnna Fali PROPOSAL
Tony C DoeFranceIoni Bowcher PROPOSAL
Jones S PaprockiFranceIvan Magalhaes NEW
Jeanfrancois Z RutaArgentinaAnna Fali QUALIFIED
Aruna B CampainBrazilXuxue Feng RENEWAL
Stacey O SaylorsItalyAnna Fali NEGOTIATION
Wickens E WaycottJapanIoni Bowcher PROPOSAL
Emily F MarrierIndiaStephen Shaw UNQUALIFIED
Greenwood C FlosiRussiaAsiya Javayant RENEWAL
Sinclair G PoquetteIndiaIvan Magalhaes NEGOTIATION
Maisha I BriddickFranceBernardo Dominic NEW
Chavez Z InouyeIndiaIoni Bowcher UNQUALIFIED
Emily I FollerRussiaStephen Shaw UNQUALIFIED
Antonio J GlickAustraliaOnyama Limba NEW
Sinclair S ButtGermanyAsiya Javayant NEGOTIATION
Costa B VenereRussiaAmy Elsner RENEWAL
Clifford B FigeroaGermanyAnna Fali NEGOTIATION
Nicolas I NickaRussiaIvan Magalhaes NEW
Jefferson R PerinArgentinaOnyama Limba RENEWAL
Aditya L VenereAustraliaAnna Fali QUALIFIED
Kaitlin D GauchoUnited KingdomAsiya Javayant NEW
Leon H RoysterItalyXuxue Feng UNQUALIFIED
Leon P GauchoBrazilBernardo Dominic UNQUALIFIED
Greenwood C SergiJapanXuxue Feng QUALIFIED
Kadeem T PaprockiGermanyAsiya Javayant UNQUALIFIED
Salvatore P IturbideGermanyAnna Fali NEW
Aditya W SchemmerItalyAmy Elsner PROPOSAL
Octavia S OldroydUnited KingdomStephen Shaw RENEWAL
Francesco X BowleyRussiaIoni Bowcher UNQUALIFIED
Francesco Y WhobreyGermanyIoni Bowcher NEW
Deepesh F RutaJapanBernardo Dominic UNQUALIFIED
Leon W NestleArgentinaBernardo Dominic QUALIFIED
Antonio O GlickArgentinaAmy Elsner RENEWAL
Misaki Z FlosiIndiaElwin Sharvill PROPOSAL
Jeanfrancois L CaudyUnited KingdomElwin Sharvill NEGOTIATION
Wickens K AlbaresArgentinaXuxue Feng NEW
Maisha H SergiAustraliaIvan Magalhaes NEGOTIATION
Octavia Y StensethItalyIoni Bowcher QUALIFIED
Mayumi B BriddickRussiaStephen Shaw NEW
Emily T WaycottItalyAsiya Javayant NEGOTIATION
Emily K StensethAustraliaElwin Sharvill RENEWAL
Adams K MaletIndiaXuxue Feng PROPOSAL
Leon X NestleItalyIvan Magalhaes RENEWAL
Francesco D TollnerGermanyAmy Elsner PROPOSAL
Chavez W BriddickUnited KingdomOnyama Limba UNQUALIFIED
Munro T PerinBrazilBernardo Dominic RENEWAL
Frozen Columns
Name
Jeanfrancois Z Briddick
Leon H Oldroyd
Jefferson I Schemmer
Kaitlin K Vocelka
Mayumi M Foller
Aruna A Morasca
Johnson C Ostrosky
Morrow U Shinko
Aruna V Sergi
Ivar E Caldarera
David N Royster
Leja F Sergi
Costa X Paprocki
Ricardo F Flosi
Faith X Schemmer
Stacey V Doe
Morrow Y Marrier
David T Ruta
Antonio B Kusko
Salvatore T Doe
James M Garufi
Nicolas S Chui
Salvatore J Poquette
Kaitlin G Darakjy
Jones A Marrier
Misaki Q Nestle
Munro N Tollner
Nicolas U Chui
Maisha F Whobrey
Salvatore I Kolmetz
Claire S Venere
Sinclair W Figeroa
Deepesh U Wieser
Smith H Briddick
Faith P Iturbide
Alejandro K Bolognia
Leja Y Sergi
Juan L Waycott
Jennifer Q Kusko
Maria F Paprocki
Maisha U Chui
Mujtaba R Rim
Ivar U Venere
Nicolas E Chui
Costa F Slusarski
Darci D Bolognia
Maria Y Slusarski
Faith F Slusarski
Tony Q Stenseth
Stacey G Gillian
IdCountryDate
1000Canada2025-05-28
1001Brazil2025-05-23
1002Argentina2025-05-28
1003France2025-06-15
1004Japan2025-05-18
1005Brazil2025-05-27
1006India2025-06-16
1007Russia2025-05-21
1008Canada2025-06-08
1009United Kingdom2025-05-21
1010United Kingdom2025-05-24
1011Russia2025-06-06
1012Spain2025-05-18
1013United Kingdom2025-06-09
1014Australia2025-06-13
1015Argentina2025-06-16
1016France2025-06-03
1017Argentina2025-06-05
1018Spain2025-06-01
1019Brazil2025-05-21
1020Italy2025-06-09
1021Argentina2025-06-11
1022India2025-06-14
1023India2025-06-13
1024Russia2025-05-28
1025Spain2025-06-01
1026Russia2025-06-04
1027Canada2025-05-29
1028Germany2025-06-08
1029Brazil2025-06-08
1030Australia2025-05-22
1031Brazil2025-05-31
1032Germany2025-05-29
1033Japan2025-06-13
1034Australia2025-05-28
1035Spain2025-06-10
1036Russia2025-05-24
1037India2025-05-22
1038France2025-06-13
1039Germany2025-06-09
1040Japan2025-06-03
1041India2025-05-31
1042Japan2025-05-21
1043Canada2025-06-12
1044Spain2025-06-07
1045India2025-06-02
1046France2025-05-29
1047Russia2025-06-13
1048Spain2025-06-13
1049Italy2025-06-15

On-Demand Data

NameIdCountryDate
Octavia Y Garufi1000United Kingdom2025-06-15
Francesco I Oldroyd1001Japan2025-05-27
Kadeem U Amigon1002Italy2025-06-12
James Y Tollner1003Japan2025-05-22
Arvin E Royster1004Japan2025-05-26
Alejandro E Ruta1005Spain2025-05-27
Nicolas X Garufi1006Italy2025-06-08
Adams H Stenseth1007Spain2025-05-19
Faith O Nicka1008Australia2025-05-19
Mayumi H Caudy1009Brazil2025-06-10
Stacey T Royster1010India2025-05-30
Deepesh I Butt1011Canada2025-06-11
Alejandro E Bolognia1012Russia2025-06-02
Alejandro L Caudy1013Spain2025-05-22
Stacey I Iturbide1014Brazil2025-05-25
Octavia G Gaucho1015Argentina2025-06-13
Darci A Bowley1016India2025-05-28
Deepesh B Ostrosky1017Italy2025-06-13
Deepesh Q Inouye1018Russia2025-06-03
Emily G Figeroa1019United Kingdom2025-05-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Izzy X CaldareraArgentinaIvan Magalhaes PROPOSAL
Munro H SlusarskiFranceElwin Sharvill PROPOSAL
Costa D RimUnited KingdomOnyama Limba PROPOSAL
Misaki M DilliardGermanyOnyama Limba PROPOSAL
Alejandro Y MaletUnited KingdomStephen Shaw NEW
Murillo B FlosiBrazilAnna Fali NEW
Octavia O KolmetzItalyElwin Sharvill NEGOTIATION
Stacey L FollerCanadaIoni Bowcher QUALIFIED
Chavez H CaldareraArgentinaOnyama Limba QUALIFIED
Silvio V MaletSpainOnyama Limba PROPOSAL
Alejandro R GauchoJapanOnyama Limba QUALIFIED
Julie R RoysterJapanIvan Magalhaes UNQUALIFIED
Antonio S PoquetteAustraliaStephen Shaw NEW
Ashley F GauchoAustraliaAmy Elsner UNQUALIFIED
Silvio A PerinFranceStephen Shaw QUALIFIED
Tony G OldroydSpainOnyama Limba NEGOTIATION
Aditya Y MacleadAustraliaElwin Sharvill UNQUALIFIED
James C AmigonCanadaAmy Elsner PROPOSAL
Misaki Z FollerUnited KingdomIoni Bowcher UNQUALIFIED
Mayumi J WaycottCanadaIvan Magalhaes QUALIFIED
Adams F MorascaRussiaAsiya Javayant NEGOTIATION
Aika B KolmetzFranceOnyama Limba QUALIFIED
Deepesh O OldroydUnited KingdomElwin Sharvill NEGOTIATION
Tony L CaudySpainIvan Magalhaes QUALIFIED
Stacey C IturbideBrazilStephen Shaw NEW
Francesco H ShinkoFranceIvan Magalhaes RENEWAL
Octavia K PoquetteSpainIvan Magalhaes QUALIFIED
Stacey B StockhamUnited KingdomXuxue Feng QUALIFIED
Sinclair N RimJapanIvan Magalhaes QUALIFIED
Jennifer H SchemmerArgentinaAmy Elsner NEW
Misaki C MarrierBrazilElwin Sharvill RENEWAL
Wickens R WhobreyBrazilStephen Shaw NEGOTIATION
Jefferson L GillianRussiaStephen Shaw PROPOSAL
Jennifer A AlbaresBrazilElwin Sharvill NEGOTIATION
Aika X CampainUnited KingdomElwin Sharvill NEGOTIATION
Smith V GauchoGermanyOnyama Limba PROPOSAL
Jones G GillianItalyIvan Magalhaes QUALIFIED
Wickens I OldroydJapanXuxue Feng UNQUALIFIED
Jefferson L TollnerRussiaAsiya Javayant UNQUALIFIED
Greenwood M DoeAustraliaStephen Shaw 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>