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
Mujtaba H MorascaJapanIvan Magalhaes UNQUALIFIED
David L AlbaresFranceXuxue Feng NEW
Francesco S PoquetteUnited KingdomBernardo Dominic QUALIFIED
Maria B AmigonItalyOnyama Limba PROPOSAL
Clifford Z RulapaughFranceStephen Shaw RENEWAL
Arvin N WaycottItalyStephen Shaw RENEWAL
James P GauchoCanadaXuxue Feng NEW
Salvatore X VocelkaArgentinaXuxue Feng PROPOSAL
Stacey G FlosiJapanElwin Sharvill QUALIFIED
Juan X BowleyIndiaBernardo Dominic NEGOTIATION
Aika L CampainFranceIoni Bowcher PROPOSAL
Isabel S OstroskyIndiaIoni Bowcher UNQUALIFIED
Maisha P FerenczItalyOnyama Limba PROPOSAL
Maria G TollnerIndiaAsiya Javayant NEGOTIATION
Faith N DoeIndiaElwin Sharvill QUALIFIED
James X RulapaughArgentinaAmy Elsner NEGOTIATION
Chavez I ChuiBrazilIvan Magalhaes UNQUALIFIED
Morrow R StockhamAustraliaStephen Shaw QUALIFIED
Izzy D WhobreySpainOnyama Limba QUALIFIED
Morrow M FollerArgentinaElwin Sharvill NEGOTIATION
Izzy G MarrierSpainIoni Bowcher NEGOTIATION
Aruna I NestleItalyAnna Fali QUALIFIED
Octavia W MaletItalyBernardo Dominic PROPOSAL
Claire U RimRussiaIvan Magalhaes NEGOTIATION
David C BowleyIndiaBernardo Dominic PROPOSAL
Sinclair E PerinIndiaIvan Magalhaes QUALIFIED
Leja A PaprockiFranceStephen Shaw PROPOSAL
Jones Y CampainJapanElwin Sharvill QUALIFIED
Emily N BowleyItalyXuxue Feng QUALIFIED
Silvio W PerinAustraliaAmy Elsner QUALIFIED
Maria P SergiGermanyBernardo Dominic NEW
Munro A StockhamSpainStephen Shaw UNQUALIFIED
Jeanfrancois P ShinkoRussiaStephen Shaw QUALIFIED
James X NestleFranceXuxue Feng RENEWAL
Tony X InouyeBrazilIvan Magalhaes NEGOTIATION
Ashley C GarufiItalyAnna Fali RENEWAL
Johnson S ChuiCanadaIvan Magalhaes PROPOSAL
Deepesh E RimSpainBernardo Dominic RENEWAL
Munro Y ShinkoSpainAmy Elsner PROPOSAL
Aika P SlusarskiArgentinaAnna Fali NEGOTIATION
Nicolas N FigeroaBrazilElwin Sharvill NEGOTIATION
Claire E ChuiBrazilAsiya Javayant QUALIFIED
Salvatore L OstroskyArgentinaAmy Elsner UNQUALIFIED
Darci V StensethSpainAmy Elsner PROPOSAL
Jeanfrancois S PerinSpainAmy Elsner QUALIFIED
Darci K CampainBrazilAnna Fali NEGOTIATION
Ricardo Q KuskoAustraliaIvan Magalhaes PROPOSAL
Mujtaba U RoysterFranceElwin Sharvill PROPOSAL
Ricardo T ButtCanadaOnyama Limba PROPOSAL
Costa M PoquetteFranceElwin Sharvill RENEWAL
Horizontal
NameCountryRepresentativeStatus
Kadeem T GauchoJapanIvan Magalhaes NEW
Juan F VenereRussiaStephen Shaw QUALIFIED
Jeanfrancois G PaprockiUnited KingdomAsiya Javayant QUALIFIED
Wickens F PaprockiItalyAsiya Javayant QUALIFIED
Jefferson Z WhobreyItalyBernardo Dominic NEGOTIATION
Salvatore P SergiJapanAmy Elsner RENEWAL
Jefferson R WaycottUnited KingdomIoni Bowcher NEW
Jefferson M KuskoGermanyAsiya Javayant RENEWAL
Murillo L OstroskyItalyIoni Bowcher UNQUALIFIED
Ashley V ChuiArgentinaOnyama Limba RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jennifer R NickaSpain2025-04-18Feltz Printing Service RENEWAL43Elwin Sharvill
1001Arvin F OstroskyGermany2025-04-16King, Christopher A Esq QUALIFIED39Anna Fali
1002Izzy M StensethUnited Kingdom2025-04-09Chapman, Ross E Esq PROPOSAL51Xuxue Feng
1003Julie V RoysterAustralia2025-04-09Rousseaux, Michael Esq QUALIFIED45Elwin Sharvill
1004Kaitlin Q WieserIndia2025-04-03Rousseaux, Michael Esq NEGOTIATION89Elwin Sharvill
1005Darci R RutaArgentina2025-04-06Feiner Bros UNQUALIFIED10Asiya Javayant
1006Arvin I OldroydJapan2025-04-28Feltz Printing Service RENEWAL42Xuxue Feng
1007Maria C FlosiCanada2025-04-11King, Christopher A Esq NEW4Stephen Shaw
1008Adams O GarufiUnited Kingdom2025-04-16Rousseaux, Michael Esq PROPOSAL79Bernardo Dominic
1009Jones V WaycottArgentina2025-04-22Truhlar And Truhlar Attys UNQUALIFIED3Bernardo Dominic
1010Mayumi S BriddickItaly2025-04-03Chapman, Ross E Esq NEGOTIATION89Ioni Bowcher
1011James A MaletGermany2025-04-03Rousseaux, Michael Esq PROPOSAL5Asiya Javayant
1012Kaitlin A KolmetzJapan2025-04-30Rousseaux, Michael Esq UNQUALIFIED85Amy Elsner
1013Arvin B FerenczUnited Kingdom2025-04-21Dorl, James J Esq QUALIFIED53Elwin Sharvill
1014Clifford P RoysterJapan2025-04-18Buckley Miller Wright PROPOSAL49Xuxue Feng
1015Maisha D VocelkaAustralia2025-04-05Feiner Bros PROPOSAL97Ivan Magalhaes
1016Smith J AlbaresFrance2025-04-25Printing Dimensions PROPOSAL83Elwin Sharvill
1017Julie P DilliardCanada2025-04-17Rangoni Of Florence RENEWAL15Amy Elsner
1018Izzy H DoeRussia2025-04-16Buckley Miller Wright QUALIFIED70Amy Elsner
1019Claire M VenereArgentina2025-04-03Rangoni Of Florence NEW40Xuxue Feng
1020Tony C SergiItaly2025-04-30Chanay, Jeffrey A Esq PROPOSAL51Amy Elsner
1021Nicolas M OstroskyUnited Kingdom2025-04-13Rangoni Of Florence PROPOSAL84Amy Elsner
1022Sinclair L FerenczJapan2025-04-11Feltz Printing Service RENEWAL66Amy Elsner
1023Arvin W PerinFrance2025-04-20King, Christopher A Esq RENEWAL23Stephen Shaw
1024Chavez R NickaUnited Kingdom2025-04-27Buckley Miller Wright RENEWAL36Anna Fali
1025Cody X ShinkoBrazil2025-04-07Chanay, Jeffrey A Esq NEGOTIATION94Xuxue Feng
1026Octavia Y OstroskyGermany2025-04-17Dorl, James J Esq UNQUALIFIED65Bernardo Dominic
1027Greenwood D RimCanada2025-04-10Buckley Miller Wright NEW18Anna Fali
1028Emily B CaldareraSpain2025-04-21Rangoni Of Florence NEGOTIATION71Bernardo Dominic
1029Chavez S BologniaRussia2025-04-24Morlong Associates RENEWAL31Xuxue Feng
1030Claire Q AlbaresRussia2025-04-14Morlong Associates PROPOSAL43Ivan Magalhaes
1031Adams K AlbaresAustralia2025-04-27Truhlar And Truhlar Attys UNQUALIFIED82Onyama Limba
1032Clifford X PoquetteCanada2025-04-02Benton, John B Jr RENEWAL74Xuxue Feng
1033Emily P PerinItaly2025-04-15Commercial Press NEW0Ivan Magalhaes
1034Wickens X RoysterFrance2025-04-17Chanay, Jeffrey A Esq NEGOTIATION48Bernardo Dominic
1035Jennifer V IturbideSpain2025-04-05Chemel, James L Cpa RENEWAL7Ivan Magalhaes
1036Jones I WieserItaly2025-04-05Morlong Associates QUALIFIED10Stephen Shaw
1037Ivar C WhobreyFrance2025-04-29Chanay, Jeffrey A Esq NEW14Ivan Magalhaes
1038Kaitlin H CaudyGermany2025-04-16Rangoni Of Florence UNQUALIFIED29Amy Elsner
1039Aika S VocelkaFrance2025-04-09Chanay, Jeffrey A Esq RENEWAL1Elwin Sharvill
1040Mayumi Q NestleGermany2025-04-24Chanay, Jeffrey A Esq NEGOTIATION9Amy Elsner
1041Leja Z GlickBrazil2025-04-12Feiner Bros UNQUALIFIED20Bernardo Dominic
1042Stacey Q DilliardArgentina2025-04-08King, Christopher A Esq PROPOSAL36Ioni Bowcher
1043Aruna G CaudyJapan2025-04-18Chapman, Ross E Esq NEGOTIATION82Anna Fali
1044Jennifer Y RulapaughIndia2025-04-07Feiner Bros RENEWAL41Ivan Magalhaes
1045Julie Q PoquetteJapan2025-04-21Buckley Miller Wright NEGOTIATION90Stephen Shaw
1046Claire U StensethAustralia2025-04-20Rangoni Of Florence RENEWAL90Ivan Magalhaes
1047Izzy G MaletUnited Kingdom2025-05-01Buckley Miller Wright RENEWAL41Anna Fali
1048Clifford Z AlbaresCanada2025-04-15Chemel, James L Cpa RENEWAL37Ioni Bowcher
1049Izzy V MaletJapan2025-04-10Chemel, James L Cpa PROPOSAL56Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Francesco H PaprockiArgentinaAmy Elsner PROPOSAL
Munro R SchemmerIndiaXuxue Feng QUALIFIED
Kadeem L FigeroaIndiaIvan Magalhaes RENEWAL
Murillo T RutaGermanyOnyama Limba NEGOTIATION
Chavez Z PaprockiCanadaElwin Sharvill PROPOSAL
Tony G FollerUnited KingdomAsiya Javayant NEW
Nicolas N DoeSpainAnna Fali UNQUALIFIED
Juan I MacleadUnited KingdomOnyama Limba NEW
Deepesh U BowleyJapanOnyama Limba PROPOSAL
Morrow R ButtSpainOnyama Limba PROPOSAL
Ricardo J RoysterUnited KingdomStephen Shaw PROPOSAL
Clifford I TollnerJapanAnna Fali NEW
Chavez A ButtSpainIvan Magalhaes QUALIFIED
Wickens W OldroydRussiaIvan Magalhaes NEW
Wickens Z FigeroaUnited KingdomOnyama Limba UNQUALIFIED
Nicolas A CampainAustraliaAsiya Javayant PROPOSAL
Misaki G CampainFranceXuxue Feng PROPOSAL
Francesco M SergiBrazilIvan Magalhaes NEGOTIATION
Jefferson I FlosiArgentinaAsiya Javayant UNQUALIFIED
Jefferson Z ButtRussiaAsiya Javayant PROPOSAL
Silvio H SaylorsIndiaStephen Shaw NEW
Maisha D AlbaresRussiaStephen Shaw PROPOSAL
Leja R AlbaresJapanXuxue Feng RENEWAL
Aruna C CaudyJapanBernardo Dominic NEW
Alejandro L CampainSpainXuxue Feng NEGOTIATION
Darci L RoysterCanadaAsiya Javayant RENEWAL
Claire V NestleRussiaOnyama Limba NEW
Clifford D VenereRussiaElwin Sharvill QUALIFIED
Greenwood Y KolmetzAustraliaAnna Fali UNQUALIFIED
Mayumi U NickaAustraliaStephen Shaw UNQUALIFIED
Adams M CaldareraUnited KingdomIvan Magalhaes QUALIFIED
Aruna O AmigonGermanyOnyama Limba NEGOTIATION
Arvin N BowleyIndiaAnna Fali NEGOTIATION
Costa W MaletAustraliaStephen Shaw QUALIFIED
Cody N BriddickUnited KingdomAsiya Javayant PROPOSAL
Adams D BowleyJapanAmy Elsner RENEWAL
Emily L MaletUnited KingdomAmy Elsner UNQUALIFIED
Tony U DarakjyFranceIoni Bowcher QUALIFIED
Cody M CaudyBrazilElwin Sharvill NEGOTIATION
Leja K DarakjyGermanyIoni Bowcher PROPOSAL
Darci Z FigeroaBrazilAnna Fali UNQUALIFIED
Julie C AlbaresJapanAmy Elsner NEGOTIATION
Misaki G StensethArgentinaOnyama Limba NEW
Mayumi E AlbaresCanadaAsiya Javayant PROPOSAL
Isabel F WieserSpainOnyama Limba QUALIFIED
Ashley F WhobreyRussiaXuxue Feng RENEWAL
Ivar D ButtRussiaStephen Shaw NEGOTIATION
Misaki B AlbaresCanadaIoni Bowcher PROPOSAL
Aditya Y IturbideFranceOnyama Limba RENEWAL
Aditya V SergiArgentinaAsiya Javayant PROPOSAL
Frozen Columns
Name
Sinclair X Campain
Julie I Sergi
Isabel O Caudy
Misaki F Waycott
Aruna X Butt
Costa L Gillian
Izzy E Tollner
Maisha H Oldroyd
Jeanfrancois V Ferencz
Misaki T Foller
Greenwood I Doe
Johnson E Inouye
Cody O Glick
Greenwood S Caudy
Smith B Campain
Cody P Inouye
Smith M Campain
Alejandro H Gaucho
Aika R Bowley
Murillo O Malet
Ashley T Vocelka
Sinclair A Tollner
Octavia B Morasca
Deepesh N Flosi
Greenwood W Ferencz
Costa Y Oldroyd
Aditya K Ruta
Alejandro I Rulapaugh
Nicolas Z Foller
Darci C Schemmer
Nicolas X Dilliard
Salvatore F Schemmer
James V Wieser
Ashley Q Saylors
Aika T Whobrey
Salvatore H Malet
Mayumi K Schemmer
Morrow B Inouye
Aditya A Shinko
Nicolas R Bowley
Clifford D Malet
Darci A Sergi
Leon A Albares
Smith K Nestle
Costa T Paprocki
Morrow E Royster
Deepesh E Slusarski
Aditya W Poquette
Kadeem A Morasca
Johnson U Doe
IdCountryDate
1000Italy2025-04-22
1001Argentina2025-04-16
1002Germany2025-04-02
1003United Kingdom2025-04-18
1004India2025-04-25
1005Canada2025-04-29
1006Russia2025-04-08
1007Japan2025-04-14
1008Argentina2025-04-13
1009Argentina2025-04-05
1010India2025-04-24
1011Brazil2025-04-29
1012Argentina2025-04-24
1013Germany2025-04-08
1014Germany2025-04-25
1015Australia2025-04-02
1016Japan2025-04-24
1017Japan2025-04-02
1018Argentina2025-04-06
1019Italy2025-04-07
1020France2025-04-16
1021United Kingdom2025-04-27
1022Argentina2025-04-24
1023France2025-04-11
1024Brazil2025-04-07
1025India2025-04-09
1026Germany2025-04-02
1027Germany2025-05-01
1028Canada2025-04-08
1029France2025-04-07
1030France2025-04-29
1031Italy2025-04-06
1032Germany2025-04-15
1033Spain2025-04-02
1034Canada2025-04-12
1035France2025-04-26
1036Russia2025-04-10
1037Australia2025-04-12
1038Japan2025-04-29
1039Canada2025-04-08
1040Canada2025-04-28
1041Italy2025-04-15
1042Italy2025-04-06
1043France2025-04-22
1044Canada2025-04-02
1045Russia2025-04-28
1046Italy2025-04-19
1047France2025-04-05
1048France2025-04-10
1049Germany2025-04-30

On-Demand Data

NameIdCountryDate
Aditya D Paprocki1000Spain2025-04-05
Ivar V Marrier1001Canada2025-04-23
Jeanfrancois D Rulapaugh1002Russia2025-04-12
Rodrigues M Chui1003Australia2025-04-25
Ivar C Dilliard1004Australia2025-05-01
Costa N Paprocki1005Australia2025-04-28
Jefferson C Malet1006Australia2025-04-18
Juan Q Malet1007United Kingdom2025-04-16
Francesco B Iturbide1008Canada2025-04-02
Aruna Y Darakjy1009Spain2025-04-22
Silvio P Flosi1010France2025-04-04
Jeanfrancois H Malet1011Russia2025-04-12
Francesco C Gillian1012France2025-04-16
Chavez D Paprocki1013Argentina2025-04-29
Leon C Gaucho1014France2025-04-03
James P Royster1015Spain2025-04-05
Murillo M Shinko1016Italy2025-04-25
Johnson I Ostrosky1017Argentina2025-04-19
Claire Z Bolognia1018Brazil2025-04-06
Sinclair H Foller1019Australia2025-04-22
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Mujtaba M MaletCanadaIoni Bowcher NEW
Sinclair H ChuiFranceIvan Magalhaes NEW
Ashley Y WhobreyRussiaAnna Fali NEGOTIATION
Cody N BowleyIndiaAnna Fali RENEWAL
Francesco B ChuiIndiaAsiya Javayant UNQUALIFIED
Ashley R BowleyRussiaIvan Magalhaes NEW
Clifford Y RulapaughCanadaXuxue Feng NEGOTIATION
Izzy O DilliardCanadaXuxue Feng PROPOSAL
Octavia Y RoysterJapanIvan Magalhaes NEW
Misaki K RimSpainStephen Shaw NEGOTIATION
Silvio E PoquetteAustraliaIoni Bowcher NEW
Juan N PerinUnited KingdomAsiya Javayant UNQUALIFIED
Aruna Q BriddickGermanyXuxue Feng QUALIFIED
Chavez T WaycottBrazilIvan Magalhaes NEW
Rodrigues A WieserUnited KingdomAmy Elsner QUALIFIED
Costa D StensethCanadaOnyama Limba PROPOSAL
Claire O VenereAustraliaXuxue Feng RENEWAL
Smith C DilliardGermanyAsiya Javayant NEGOTIATION
Leja T OstroskyJapanIoni Bowcher NEW
Sinclair I VocelkaArgentinaAmy Elsner RENEWAL
Ivar I GlickRussiaAnna Fali NEGOTIATION
Jones D MarrierGermanyOnyama Limba PROPOSAL
Aditya F RulapaughArgentinaAsiya Javayant QUALIFIED
Darci U MaletIndiaStephen Shaw NEGOTIATION
Murillo W GlickSpainStephen Shaw UNQUALIFIED
Kaitlin A ShinkoSpainAmy Elsner PROPOSAL
Octavia J NestleArgentinaElwin Sharvill RENEWAL
Adams D CaldareraIndiaStephen Shaw NEGOTIATION
Jennifer Z OstroskyIndiaIvan Magalhaes PROPOSAL
Faith F CaldareraSpainXuxue Feng PROPOSAL
Maisha S MarrierItalyXuxue Feng QUALIFIED
Rodrigues D VocelkaIndiaIvan Magalhaes NEGOTIATION
Ivar R WhobreyIndiaStephen Shaw RENEWAL
Darci U PaprockiGermanyStephen Shaw UNQUALIFIED
Aruna G CaldareraItalyXuxue Feng NEW
Johnson S MaletRussiaIvan Magalhaes PROPOSAL
Izzy Z GlickSpainElwin Sharvill NEGOTIATION
Deepesh M StensethRussiaStephen Shaw UNQUALIFIED
Claire L GillianUnited KingdomIvan Magalhaes QUALIFIED
Darci B SaylorsItalyAsiya Javayant NEW

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