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
Leon A NickaCanadaXuxue Feng NEW
Maisha T SergiFranceAnna Fali RENEWAL
Julie I FigeroaItalyBernardo Dominic RENEWAL
Jefferson T AlbaresBrazilBernardo Dominic RENEWAL
Nicolas J StockhamFranceAnna Fali UNQUALIFIED
Isabel N OldroydIndiaIvan Magalhaes NEGOTIATION
Leon F CaldareraGermanyIvan Magalhaes NEW
Tony E MacleadCanadaAsiya Javayant PROPOSAL
Leon D CampainRussiaAmy Elsner NEGOTIATION
Jones I RutaJapanBernardo Dominic RENEWAL
Kadeem F BriddickJapanBernardo Dominic RENEWAL
Aika I NestleCanadaStephen Shaw UNQUALIFIED
Wickens O MorascaRussiaIvan Magalhaes PROPOSAL
Francesco P VenereIndiaXuxue Feng NEGOTIATION
Kaitlin B StensethJapanIvan Magalhaes PROPOSAL
Misaki B AmigonAustraliaElwin Sharvill PROPOSAL
Silvio A GarufiGermanyAsiya Javayant PROPOSAL
Johnson R SchemmerRussiaAnna Fali NEGOTIATION
Jefferson K OstroskyAustraliaXuxue Feng PROPOSAL
Chavez H WhobreyRussiaBernardo Dominic NEW
Aditya V CampainAustraliaOnyama Limba NEGOTIATION
Kaitlin P PerinFranceAmy Elsner UNQUALIFIED
Misaki W MaletAustraliaAmy Elsner NEW
Greenwood T StensethSpainIvan Magalhaes NEW
Mayumi C MaletIndiaAsiya Javayant PROPOSAL
Leon W ChuiSpainAsiya Javayant NEW
Aruna Y FlosiCanadaAmy Elsner QUALIFIED
Claire P MacleadFranceXuxue Feng UNQUALIFIED
Francesco X VenereArgentinaBernardo Dominic NEGOTIATION
Aditya O RoysterCanadaAmy Elsner NEGOTIATION
Mujtaba C AlbaresGermanyOnyama Limba NEW
Arvin U PaprockiArgentinaAsiya Javayant UNQUALIFIED
Octavia C RutaJapanAmy Elsner NEGOTIATION
Jefferson J RoysterItalyIoni Bowcher UNQUALIFIED
Sinclair T SchemmerBrazilAsiya Javayant PROPOSAL
Mayumi U BriddickBrazilStephen Shaw UNQUALIFIED
Jefferson O RimBrazilElwin Sharvill NEGOTIATION
Jones G GlickSpainStephen Shaw PROPOSAL
Murillo S ChuiFranceStephen Shaw NEW
Morrow Q CaldareraSpainOnyama Limba NEW
Izzy I SaylorsBrazilAmy Elsner NEGOTIATION
David X RutaIndiaElwin Sharvill UNQUALIFIED
Aditya Q RimSpainAnna Fali NEW
Salvatore W KolmetzSpainElwin Sharvill PROPOSAL
Aika Y ButtSpainAnna Fali NEGOTIATION
Rodrigues M BologniaUnited KingdomIvan Magalhaes QUALIFIED
Maisha X DilliardArgentinaIvan Magalhaes UNQUALIFIED
Mayumi X SergiIndiaAnna Fali UNQUALIFIED
Smith K CaudyJapanIoni Bowcher PROPOSAL
Octavia I MaletCanadaAmy Elsner NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Tony B PaprockiUnited KingdomElwin Sharvill PROPOSAL
Aruna F InouyeBrazilStephen Shaw NEGOTIATION
Rodrigues T CampainItalyElwin Sharvill NEW
Salvatore B FollerFranceBernardo Dominic UNQUALIFIED
Jeanfrancois P IturbideFranceAmy Elsner UNQUALIFIED
Silvio Z KolmetzAustraliaOnyama Limba PROPOSAL
Darci M PerinIndiaElwin Sharvill RENEWAL
Ricardo W InouyeRussiaIvan Magalhaes NEGOTIATION
Salvatore I OstroskySpainAmy Elsner RENEWAL
Adams H AmigonJapanElwin Sharvill UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kaitlin J SlusarskiJapan2025-05-27Benton, John B Jr PROPOSAL74Xuxue Feng
1001Chavez N AmigonRussia2025-05-29Benton, John B Jr QUALIFIED83Anna Fali
1002Murillo Z BologniaBrazil2025-06-12Chemel, James L Cpa RENEWAL72Xuxue Feng
1003Jeanfrancois D RutaCanada2025-06-14Morlong Associates UNQUALIFIED27Bernardo Dominic
1004Francesco G MarrierArgentina2025-06-04Chanay, Jeffrey A Esq RENEWAL77Amy Elsner
1005Leja Y AmigonJapan2025-06-04Feiner Bros QUALIFIED79Ioni Bowcher
1006Johnson N FerenczSpain2025-05-19Commercial Press NEW20Xuxue Feng
1007Julie X VocelkaItaly2025-05-18Chapman, Ross E Esq UNQUALIFIED90Ioni Bowcher
1008Ivar D WhobreyCanada2025-06-06Chapman, Ross E Esq QUALIFIED28Bernardo Dominic
1009Kadeem W OstroskyUnited Kingdom2025-05-16Rangoni Of Florence NEGOTIATION4Amy Elsner
1010Morrow S MacleadIndia2025-06-09Commercial Press NEGOTIATION73Asiya Javayant
1011James Q ButtCanada2025-06-11Rousseaux, Michael Esq QUALIFIED52Elwin Sharvill
1012Greenwood A AlbaresAustralia2025-05-31Chapman, Ross E Esq UNQUALIFIED75Stephen Shaw
1013Ivar U CaudySpain2025-06-12Chemel, James L Cpa NEW98Ivan Magalhaes
1014Deepesh Y InouyeUnited Kingdom2025-05-17Chapman, Ross E Esq UNQUALIFIED98Ioni Bowcher
1015David P InouyeSpain2025-06-05Rangoni Of Florence PROPOSAL92Anna Fali
1016Jennifer N OstroskyUnited Kingdom2025-06-11Feltz Printing Service UNQUALIFIED44Ioni Bowcher
1017Jennifer N SlusarskiJapan2025-05-16Rousseaux, Michael Esq UNQUALIFIED55Ioni Bowcher
1018Cody R GillianArgentina2025-05-16Dorl, James J Esq NEW5Elwin Sharvill
1019Leja H ChuiAustralia2025-05-31Truhlar And Truhlar Attys NEW12Amy Elsner
1020Faith W GauchoBrazil2025-05-28Truhlar And Truhlar Attys QUALIFIED33Onyama Limba
1021Silvio Y PoquetteJapan2025-05-23Truhlar And Truhlar Attys RENEWAL79Ioni Bowcher
1022Smith L FollerArgentina2025-05-27Feltz Printing Service RENEWAL4Ioni Bowcher
1023Sinclair T RutaAustralia2025-05-28Morlong Associates NEW81Asiya Javayant
1024Cody Z DoeUnited Kingdom2025-06-12Chemel, James L Cpa RENEWAL82Onyama Limba
1025Jennifer Y CaudyCanada2025-05-22Morlong Associates PROPOSAL69Onyama Limba
1026Wickens N FlosiUnited Kingdom2025-06-11Morlong Associates PROPOSAL44Ivan Magalhaes
1027Isabel J MaletUnited Kingdom2025-05-23King, Christopher A Esq UNQUALIFIED99Ioni Bowcher
1028Julie E KuskoBrazil2025-05-24Chemel, James L Cpa QUALIFIED59Stephen Shaw
1029David H TollnerBrazil2025-06-10Benton, John B Jr NEGOTIATION12Anna Fali
1030Darci J FollerItaly2025-06-08Morlong Associates RENEWAL10Ivan Magalhaes
1031Aditya I DarakjyArgentina2025-06-14Buckley Miller Wright QUALIFIED21Bernardo Dominic
1032Octavia Q PoquetteIndia2025-05-31Rangoni Of Florence QUALIFIED95Bernardo Dominic
1033Aika Q DilliardGermany2025-05-31Dorl, James J Esq UNQUALIFIED40Elwin Sharvill
1034Deepesh Q WieserBrazil2025-05-30Chemel, James L Cpa NEGOTIATION2Bernardo Dominic
1035Izzy Z AmigonFrance2025-06-05Benton, John B Jr NEW88Onyama Limba
1036Clifford K StensethCanada2025-05-20Commercial Press PROPOSAL12Ioni Bowcher
1037Izzy Q DoeArgentina2025-05-16Truhlar And Truhlar Attys PROPOSAL82Anna Fali
1038Nicolas W SergiItaly2025-06-12Feiner Bros RENEWAL73Ivan Magalhaes
1039Jones W SergiBrazil2025-05-16Truhlar And Truhlar Attys RENEWAL32Ioni Bowcher
1040Chavez Q WhobreyRussia2025-06-09Feltz Printing Service NEGOTIATION40Ivan Magalhaes
1041Greenwood F MaletUnited Kingdom2025-05-22Morlong Associates NEGOTIATION4Ivan Magalhaes
1042Nicolas T FigeroaItaly2025-05-16Chanay, Jeffrey A Esq QUALIFIED68Ioni Bowcher
1043Leon H BowleyAustralia2025-06-10Feiner Bros NEGOTIATION10Xuxue Feng
1044Faith U RutaRussia2025-06-08Benton, John B Jr NEGOTIATION86Elwin Sharvill
1045Ivar M NestleAustralia2025-06-10Chemel, James L Cpa UNQUALIFIED33Elwin Sharvill
1046Juan X ChuiItaly2025-05-23Chapman, Ross E Esq QUALIFIED75Elwin Sharvill
1047Claire U DilliardAustralia2025-06-03Truhlar And Truhlar Attys NEW44Xuxue Feng
1048Wickens X MarrierJapan2025-05-27Rangoni Of Florence UNQUALIFIED84Ioni Bowcher
1049Munro B RulapaughItaly2025-05-31Benton, John B Jr PROPOSAL79Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Morrow C MaletUnited KingdomOnyama Limba NEW
Misaki W NestleArgentinaAnna Fali PROPOSAL
Alejandro H RoysterUnited KingdomBernardo Dominic PROPOSAL
Chavez E ChuiUnited KingdomIvan Magalhaes RENEWAL
Jennifer J PaprockiFranceOnyama Limba NEGOTIATION
Deepesh L MarrierItalyAsiya Javayant RENEWAL
Smith F InouyeIndiaAsiya Javayant RENEWAL
Aruna C ChuiRussiaIvan Magalhaes NEW
Darci M MaletCanadaOnyama Limba NEGOTIATION
Francesco W PerinFranceElwin Sharvill QUALIFIED
Jennifer Y RimJapanIvan Magalhaes RENEWAL
Octavia A MaletGermanyStephen Shaw UNQUALIFIED
Wickens N MaletFranceAmy Elsner PROPOSAL
Costa K CaudyUnited KingdomAsiya Javayant NEGOTIATION
Rodrigues A DoeJapanAmy Elsner NEGOTIATION
Maria D RimBrazilIoni Bowcher PROPOSAL
Nicolas V KolmetzItalyBernardo Dominic PROPOSAL
David D WieserCanadaIvan Magalhaes QUALIFIED
James S CampainItalyAmy Elsner RENEWAL
Arvin Y DoeRussiaIoni Bowcher NEW
Tony D ButtUnited KingdomAsiya Javayant NEGOTIATION
Octavia B SergiJapanAmy Elsner QUALIFIED
Julie R RutaGermanyBernardo Dominic UNQUALIFIED
David U TollnerAustraliaStephen Shaw NEGOTIATION
Antonio P NestleBrazilStephen Shaw RENEWAL
Alejandro F RulapaughGermanyIvan Magalhaes NEW
Chavez X RimFranceAnna Fali NEW
Clifford X ButtRussiaAmy Elsner RENEWAL
Ivar X WhobreyArgentinaIvan Magalhaes QUALIFIED
Leja E VenereItalyIoni Bowcher RENEWAL
Jeanfrancois I GarufiItalyStephen Shaw NEW
Morrow V DilliardAustraliaXuxue Feng NEGOTIATION
Maria N MaletUnited KingdomOnyama Limba QUALIFIED
Greenwood S OstroskyAustraliaOnyama Limba UNQUALIFIED
Aditya A GauchoUnited KingdomIoni Bowcher NEW
Mayumi P PaprockiCanadaXuxue Feng NEGOTIATION
Izzy H RoysterCanadaBernardo Dominic PROPOSAL
David E RimAustraliaIoni Bowcher UNQUALIFIED
Antonio L ShinkoIndiaAsiya Javayant PROPOSAL
Kadeem M GauchoIndiaOnyama Limba RENEWAL
Kaitlin Z ShinkoFranceStephen Shaw QUALIFIED
Octavia P OstroskyAustraliaIoni Bowcher NEW
Jones O OldroydJapanAnna Fali NEGOTIATION
Izzy Y WieserArgentinaElwin Sharvill RENEWAL
Izzy U TollnerIndiaIvan Magalhaes QUALIFIED
Murillo E InouyeUnited KingdomAnna Fali QUALIFIED
Salvatore T RimItalyAmy Elsner NEW
Stacey Z RutaGermanyAnna Fali PROPOSAL
Misaki K SlusarskiArgentinaOnyama Limba RENEWAL
Arvin J FlosiUnited KingdomAsiya Javayant NEW
Frozen Columns
Name
Costa U Bolognia
Adams Q Chui
Claire U Whobrey
Sinclair J Flosi
Emily Y Rim
Isabel W Nicka
Aruna G Flosi
Murillo N Poquette
Antonio Q Amigon
Ricardo N Iturbide
Tony W Perin
Antonio W Malet
Rodrigues M Butt
Greenwood T Briddick
Kadeem Y Ferencz
Clifford G Oldroyd
Salvatore Q Schemmer
Izzy Z Ruta
Kaitlin R Foller
Ivar J Malet
Ricardo G Garufi
Adams Y Bolognia
Silvio W Slusarski
Faith M Tollner
Adams U Briddick
Munro S Wieser
Maisha X Ferencz
Ricardo G Gillian
Jeanfrancois S Rulapaugh
Costa N Rulapaugh
Smith F Paprocki
Arvin O Flosi
Julie B Paprocki
Jeanfrancois Y Rim
Tony A Waycott
James P Gaucho
Munro M Vocelka
Wickens S Briddick
Arvin J Shinko
Ivar Q Sergi
Greenwood U Dilliard
Arvin U Figeroa
Cody F Saylors
Wickens D Royster
Jeanfrancois S Bowley
Johnson S Schemmer
Mujtaba S Nestle
Kaitlin D Chui
Aruna D Poquette
Jones W Stenseth
IdCountryDate
1000India2025-06-14
1001Germany2025-06-06
1002Brazil2025-06-04
1003Argentina2025-06-11
1004Russia2025-06-08
1005Argentina2025-05-27
1006Argentina2025-05-17
1007Brazil2025-05-27
1008France2025-05-20
1009Italy2025-06-06
1010Argentina2025-05-24
1011Russia2025-06-09
1012Canada2025-05-30
1013Spain2025-05-26
1014India2025-06-10
1015Germany2025-06-07
1016Spain2025-05-31
1017Russia2025-06-02
1018Canada2025-06-14
1019Argentina2025-06-04
1020Russia2025-05-26
1021Italy2025-05-26
1022Italy2025-05-25
1023Argentina2025-05-26
1024Spain2025-06-05
1025Spain2025-06-02
1026United Kingdom2025-05-28
1027France2025-06-13
1028Italy2025-06-10
1029Japan2025-05-24
1030Brazil2025-05-22
1031Germany2025-05-18
1032Japan2025-06-05
1033Australia2025-06-12
1034Italy2025-06-05
1035Spain2025-06-08
1036India2025-06-12
1037India2025-05-26
1038India2025-05-16
1039India2025-05-22
1040Russia2025-06-14
1041United Kingdom2025-05-26
1042Russia2025-06-11
1043Australia2025-06-07
1044India2025-05-23
1045India2025-06-03
1046India2025-05-21
1047Russia2025-05-20
1048Spain2025-05-30
1049France2025-05-22

On-Demand Data

NameIdCountryDate
Stacey C Stockham1000France2025-06-13
Adams O Wieser1001Argentina2025-05-16
Murillo Q Schemmer1002Brazil2025-06-07
Leja U Glick1003United Kingdom2025-05-20
Maria R Ostrosky1004Spain2025-06-05
Stacey K Darakjy1005Italy2025-06-11
Tony W Figeroa1006Australia2025-06-09
Mayumi V Rulapaugh1007Russia2025-05-22
Chavez F Malet1008Australia2025-06-06
Alejandro M Dilliard1009Italy2025-05-21
Morrow N Waycott1010Argentina2025-06-09
Mayumi R Gaucho1011Australia2025-05-24
Octavia X Poquette1012Australia2025-05-24
Sinclair X Tollner1013Brazil2025-05-30
Darci J Shinko1014India2025-05-21
Kaitlin F Rim1015Argentina2025-06-07
Alejandro U Stockham1016United Kingdom2025-06-08
Alejandro S Schemmer1017France2025-05-20
Jennifer A Dilliard1018Canada2025-05-27
Maria C Malet1019Russia2025-05-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Sinclair E SchemmerItalyIvan Magalhaes UNQUALIFIED
Cody Y GauchoUnited KingdomOnyama Limba QUALIFIED
Kaitlin P NestleRussiaAmy Elsner PROPOSAL
Deepesh K BologniaRussiaAnna Fali UNQUALIFIED
Tony U NestleSpainStephen Shaw RENEWAL
Munro U WaycottCanadaIoni Bowcher RENEWAL
Aditya B MarrierBrazilIoni Bowcher PROPOSAL
Mujtaba G AlbaresSpainElwin Sharvill UNQUALIFIED
Clifford K FollerJapanXuxue Feng QUALIFIED
Julie B ChuiJapanXuxue Feng QUALIFIED
Jennifer D WieserCanadaStephen Shaw NEGOTIATION
Stacey F GauchoFranceOnyama Limba QUALIFIED
Aruna M FerenczRussiaElwin Sharvill QUALIFIED
Juan I GillianUnited KingdomElwin Sharvill QUALIFIED
Salvatore N GlickSpainIvan Magalhaes RENEWAL
Izzy I PaprockiBrazilStephen Shaw QUALIFIED
Morrow I ShinkoAustraliaAnna Fali UNQUALIFIED
Morrow B GarufiAustraliaAnna Fali PROPOSAL
Jefferson E GlickIndiaAnna Fali PROPOSAL
Arvin L VocelkaAustraliaAsiya Javayant QUALIFIED
Kadeem M VocelkaBrazilIoni Bowcher NEW
Murillo W WhobreyGermanyXuxue Feng NEGOTIATION
Izzy M CaldareraBrazilElwin Sharvill NEGOTIATION
Misaki D BologniaBrazilElwin Sharvill RENEWAL
Silvio M RoysterArgentinaBernardo Dominic QUALIFIED
Alejandro K MaletArgentinaOnyama Limba PROPOSAL
Ricardo T RutaRussiaXuxue Feng NEW
Arvin B RutaSpainIoni Bowcher QUALIFIED
Sinclair O DarakjyFranceAmy Elsner NEGOTIATION
Alejandro M MacleadGermanyOnyama Limba PROPOSAL
David O StensethItalyBernardo Dominic PROPOSAL
Jeanfrancois I BowleyItalyAmy Elsner UNQUALIFIED
Johnson T BologniaRussiaIvan Magalhaes NEGOTIATION
Deepesh U PerinSpainBernardo Dominic NEW
Jennifer A WhobreyRussiaIoni Bowcher UNQUALIFIED
Nicolas J RimCanadaAsiya Javayant QUALIFIED
Aruna W NestleSpainAnna Fali NEGOTIATION
Smith Q IturbideItalyElwin Sharvill PROPOSAL
Arvin C FigeroaIndiaStephen Shaw UNQUALIFIED
Mujtaba B BologniaIndiaIvan Magalhaes NEGOTIATION

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