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
Maria O StensethRussiaIvan Magalhaes PROPOSAL
Emily L AlbaresJapanIoni Bowcher RENEWAL
Greenwood K InouyeFranceAsiya Javayant PROPOSAL
Isabel V OstroskyIndiaElwin Sharvill PROPOSAL
Morrow Y MaletGermanyBernardo Dominic QUALIFIED
Leja J ShinkoSpainXuxue Feng QUALIFIED
Nicolas Z InouyeAustraliaIvan Magalhaes QUALIFIED
Cody A OstroskyGermanyElwin Sharvill UNQUALIFIED
Aika M VocelkaRussiaXuxue Feng RENEWAL
Chavez O BriddickArgentinaAnna Fali UNQUALIFIED
Smith R ButtGermanyElwin Sharvill UNQUALIFIED
Morrow K NickaUnited KingdomAmy Elsner QUALIFIED
Ashley O FigeroaSpainBernardo Dominic PROPOSAL
Faith N AmigonBrazilAsiya Javayant PROPOSAL
Leja C VenereIndiaAsiya Javayant UNQUALIFIED
Wickens E PaprockiSpainAnna Fali PROPOSAL
Johnson J FigeroaBrazilIvan Magalhaes NEGOTIATION
Izzy O TollnerItalyOnyama Limba UNQUALIFIED
Kadeem Y RimJapanAsiya Javayant QUALIFIED
Mayumi Q OldroydCanadaAmy Elsner UNQUALIFIED
Mayumi U SergiFranceBernardo Dominic UNQUALIFIED
Juan A CampainArgentinaAnna Fali PROPOSAL
Francesco Q GarufiIndiaAmy Elsner PROPOSAL
Sinclair V MaletItalyAmy Elsner NEGOTIATION
Leon K PaprockiUnited KingdomBernardo Dominic NEGOTIATION
Costa Z OstroskyRussiaAmy Elsner QUALIFIED
Misaki J ShinkoSpainAmy Elsner NEW
Chavez Y BologniaJapanElwin Sharvill PROPOSAL
Johnson H FigeroaUnited KingdomOnyama Limba QUALIFIED
Chavez M DoeJapanBernardo Dominic NEW
Clifford Z FlosiRussiaBernardo Dominic NEGOTIATION
Ricardo Z WhobreyJapanXuxue Feng QUALIFIED
Kadeem I CaldareraUnited KingdomAsiya Javayant QUALIFIED
Munro L BowleyArgentinaAmy Elsner RENEWAL
Wickens C DoeIndiaIvan Magalhaes UNQUALIFIED
Jones J SergiJapanOnyama Limba NEGOTIATION
Maisha P OldroydAustraliaAnna Fali RENEWAL
Salvatore J WieserRussiaAnna Fali RENEWAL
Greenwood H GillianUnited KingdomXuxue Feng NEGOTIATION
Leja N DilliardSpainXuxue Feng NEGOTIATION
Stacey H KuskoCanadaXuxue Feng UNQUALIFIED
Alejandro L OstroskyRussiaIvan Magalhaes NEGOTIATION
Arvin K FlosiJapanIoni Bowcher NEGOTIATION
Sinclair X MarrierRussiaIvan Magalhaes NEGOTIATION
Jennifer V DilliardSpainIvan Magalhaes NEW
Rodrigues Q SchemmerItalyOnyama Limba UNQUALIFIED
Aruna C KolmetzIndiaXuxue Feng RENEWAL
Munro G TollnerFranceAmy Elsner QUALIFIED
Rodrigues P MorascaUnited KingdomXuxue Feng PROPOSAL
Octavia Q DarakjyGermanyStephen Shaw PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Ivar U NickaBrazilStephen Shaw UNQUALIFIED
Mujtaba J PoquetteRussiaBernardo Dominic PROPOSAL
Leja Q ButtItalyOnyama Limba NEGOTIATION
Silvio C GlickRussiaOnyama Limba UNQUALIFIED
Misaki Z KolmetzFranceBernardo Dominic PROPOSAL
Johnson X CampainAustraliaAsiya Javayant PROPOSAL
Francesco U SergiBrazilBernardo Dominic RENEWAL
Cody E DarakjyArgentinaIoni Bowcher UNQUALIFIED
Costa P MaletSpainAsiya Javayant NEGOTIATION
Stacey C DilliardCanadaStephen Shaw RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Adams Z WhobreyArgentina2025-05-22Feiner Bros PROPOSAL14Amy Elsner
1001Nicolas J CampainGermany2025-05-14Truhlar And Truhlar Attys UNQUALIFIED34Ioni Bowcher
1002Jefferson B MarrierIndia2025-05-29King, Christopher A Esq UNQUALIFIED81Asiya Javayant
1003Smith R KuskoIndia2025-06-04Printing Dimensions QUALIFIED21Amy Elsner
1004Salvatore J SchemmerCanada2025-05-23Morlong Associates QUALIFIED53Bernardo Dominic
1005Smith O VocelkaArgentina2025-05-21Commercial Press QUALIFIED51Asiya Javayant
1006Jeanfrancois H PerinUnited Kingdom2025-06-02Printing Dimensions NEGOTIATION72Ioni Bowcher
1007Faith S WieserBrazil2025-05-31Printing Dimensions UNQUALIFIED82Xuxue Feng
1008Arvin N SaylorsJapan2025-05-20Morlong Associates NEGOTIATION39Asiya Javayant
1009Aditya D IturbideGermany2025-06-01Chemel, James L Cpa RENEWAL35Xuxue Feng
1010Faith F NestleItaly2025-06-11Rousseaux, Michael Esq NEGOTIATION18Ivan Magalhaes
1011Kaitlin L RulapaughBrazil2025-05-20Rangoni Of Florence PROPOSAL20Xuxue Feng
1012Greenwood C VenereJapan2025-06-01Truhlar And Truhlar Attys UNQUALIFIED11Amy Elsner
1013Leja E CaldareraJapan2025-05-18Chapman, Ross E Esq UNQUALIFIED35Elwin Sharvill
1014Cody O MorascaArgentina2025-05-27Commercial Press NEW34Stephen Shaw
1015Silvio H TollnerAustralia2025-06-11King, Christopher A Esq NEW87Elwin Sharvill
1016Deepesh P RimGermany2025-06-01Rousseaux, Michael Esq UNQUALIFIED14Anna Fali
1017Leja D GillianBrazil2025-05-16King, Christopher A Esq NEW71Onyama Limba
1018Mayumi Y PoquetteGermany2025-06-11Benton, John B Jr NEW49Stephen Shaw
1019Rodrigues I WieserFrance2025-06-12Chemel, James L Cpa NEGOTIATION80Elwin Sharvill
1020Misaki I MacleadUnited Kingdom2025-06-03Chanay, Jeffrey A Esq NEGOTIATION37Anna Fali
1021James B StockhamUnited Kingdom2025-06-01Rousseaux, Michael Esq RENEWAL90Amy Elsner
1022Octavia T PerinItaly2025-05-16Morlong Associates QUALIFIED66Xuxue Feng
1023Aika G FollerArgentina2025-06-06Rangoni Of Florence NEW60Onyama Limba
1024Greenwood C PoquetteCanada2025-05-30King, Christopher A Esq UNQUALIFIED82Xuxue Feng
1025Smith B StockhamGermany2025-06-10Commercial Press QUALIFIED44Stephen Shaw
1026Aditya A TollnerCanada2025-06-02Buckley Miller Wright RENEWAL85Xuxue Feng
1027Sinclair J CampainAustralia2025-06-03Benton, John B Jr QUALIFIED74Ivan Magalhaes
1028Arvin V NestleAustralia2025-05-29Rousseaux, Michael Esq UNQUALIFIED97Elwin Sharvill
1029Octavia R BowleyAustralia2025-05-31Feltz Printing Service NEW13Elwin Sharvill
1030Ashley Z DarakjyGermany2025-06-01Truhlar And Truhlar Attys NEGOTIATION59Ivan Magalhaes
1031Ashley U VenereSpain2025-05-27Rangoni Of Florence UNQUALIFIED7Ivan Magalhaes
1032Sinclair B BriddickSpain2025-05-19Truhlar And Truhlar Attys QUALIFIED65Ioni Bowcher
1033Leon Q GauchoUnited Kingdom2025-05-29Chapman, Ross E Esq QUALIFIED12Amy Elsner
1034Smith F WaycottRussia2025-05-18Chapman, Ross E Esq NEGOTIATION48Amy Elsner
1035Kadeem P GlickSpain2025-05-30Benton, John B Jr PROPOSAL39Amy Elsner
1036Jennifer B CampainArgentina2025-05-19King, Christopher A Esq UNQUALIFIED17Onyama Limba
1037Leja Z DilliardFrance2025-06-04Rangoni Of Florence PROPOSAL26Bernardo Dominic
1038Maisha H CaudySpain2025-05-15Chapman, Ross E Esq RENEWAL52Elwin Sharvill
1039Mayumi O RoysterBrazil2025-05-21Rousseaux, Michael Esq NEGOTIATION22Stephen Shaw
1040Maisha H RimBrazil2025-06-05Commercial Press PROPOSAL36Ivan Magalhaes
1041Alejandro H RoysterUnited Kingdom2025-06-08Commercial Press PROPOSAL9Stephen Shaw
1042Aruna N MarrierJapan2025-06-08Rangoni Of Florence PROPOSAL4Ioni Bowcher
1043Jennifer H PoquetteGermany2025-06-12Feltz Printing Service QUALIFIED38Ioni Bowcher
1044Izzy Z WaycottGermany2025-05-31Truhlar And Truhlar Attys UNQUALIFIED36Xuxue Feng
1045Ivar X GarufiGermany2025-05-30King, Christopher A Esq RENEWAL79Xuxue Feng
1046Alejandro H NickaRussia2025-05-24Truhlar And Truhlar Attys PROPOSAL7Ivan Magalhaes
1047Leja F VocelkaCanada2025-05-27Truhlar And Truhlar Attys QUALIFIED75Ioni Bowcher
1048Clifford S ShinkoIndia2025-06-07Truhlar And Truhlar Attys UNQUALIFIED34Amy Elsner
1049Faith M PaprockiItaly2025-05-22Dorl, James J Esq RENEWAL75Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Greenwood M KuskoSpainAmy Elsner NEGOTIATION
Smith J CampainBrazilAnna Fali RENEWAL
Leja M ButtUnited KingdomXuxue Feng PROPOSAL
Francesco I RoysterFranceElwin Sharvill RENEWAL
Kaitlin F RutaItalyIoni Bowcher UNQUALIFIED
Ricardo L GlickRussiaOnyama Limba UNQUALIFIED
Sinclair X SaylorsUnited KingdomBernardo Dominic NEGOTIATION
Emily T ChuiBrazilXuxue Feng RENEWAL
Aditya Y VenereItalyAmy Elsner NEGOTIATION
Aika G FerenczFranceOnyama Limba NEW
Leja D DarakjyIndiaBernardo Dominic UNQUALIFIED
Mujtaba I IturbideFranceIoni Bowcher NEGOTIATION
Kaitlin O NickaBrazilAsiya Javayant RENEWAL
Adams G CaldareraItalyOnyama Limba NEGOTIATION
James U RulapaughArgentinaAsiya Javayant RENEWAL
Salvatore O StockhamCanadaIvan Magalhaes QUALIFIED
Johnson D AlbaresJapanAnna Fali NEGOTIATION
David Z PoquetteBrazilIoni Bowcher UNQUALIFIED
Kadeem X VenereSpainIvan Magalhaes UNQUALIFIED
Nicolas L PerinItalyXuxue Feng QUALIFIED
Jennifer D CampainBrazilStephen Shaw RENEWAL
Sinclair M DarakjyFranceAmy Elsner NEGOTIATION
Antonio A MorascaJapanStephen Shaw UNQUALIFIED
Smith M DilliardSpainOnyama Limba UNQUALIFIED
Costa C WaycottJapanXuxue Feng PROPOSAL
Stacey E BriddickJapanAnna Fali NEGOTIATION
Octavia W AlbaresJapanAnna Fali PROPOSAL
Leon K OstroskySpainStephen Shaw NEW
Leja Q CaldareraUnited KingdomElwin Sharvill UNQUALIFIED
Johnson P StockhamBrazilIvan Magalhaes QUALIFIED
Costa C WaycottRussiaBernardo Dominic QUALIFIED
Arvin S GauchoItalyIvan Magalhaes PROPOSAL
Tony D KolmetzRussiaStephen Shaw PROPOSAL
Juan P MorascaArgentinaIoni Bowcher NEW
Jennifer O FerenczItalyIoni Bowcher UNQUALIFIED
Mujtaba G MaletJapanIvan Magalhaes RENEWAL
David Z KolmetzArgentinaStephen Shaw NEGOTIATION
Aika Q FerenczArgentinaIvan Magalhaes RENEWAL
Juan A ShinkoJapanIoni Bowcher QUALIFIED
Jefferson G MaletIndiaIvan Magalhaes RENEWAL
Murillo W FlosiSpainAnna Fali NEGOTIATION
Jones B FerenczUnited KingdomAmy Elsner NEW
Emily Y TollnerUnited KingdomBernardo Dominic NEGOTIATION
Deepesh L AmigonJapanIoni Bowcher NEGOTIATION
Jennifer K MarrierArgentinaOnyama Limba NEGOTIATION
Misaki A ChuiFranceAnna Fali QUALIFIED
Johnson W BologniaRussiaStephen Shaw UNQUALIFIED
Greenwood N GauchoSpainAsiya Javayant PROPOSAL
Francesco E CaldareraJapanOnyama Limba QUALIFIED
Cody P NestleArgentinaBernardo Dominic UNQUALIFIED
Frozen Columns
Name
Misaki L Figeroa
Stacey F Stenseth
Deepesh T Nestle
Wickens I Nicka
Jefferson C Darakjy
Misaki O Garufi
Maria I Figeroa
Kadeem Q Poquette
Aruna Q Maclead
Ricardo W Darakjy
Stacey B Paprocki
Cody K Bolognia
Chavez H Stenseth
Francesco X Stenseth
Julie C Inouye
Leja I Sergi
Aika O Gaucho
Chavez U Morasca
Isabel D Venere
Jeanfrancois H Doe
Morrow Q Tollner
Greenwood P Shinko
Kaitlin F Schemmer
Octavia I Venere
Maisha M Darakjy
Munro Q Campain
Chavez T Slusarski
Jeanfrancois X Gillian
Wickens F Amigon
Smith R Malet
Ricardo W Nestle
Mujtaba N Butt
Tony Z Maclead
Maisha A Foller
Juan M Nicka
Aruna S Maclead
Kadeem V Briddick
Clifford U Vocelka
Munro M Garufi
Greenwood Y Gillian
Mujtaba L Oldroyd
Ashley X Darakjy
Emily A Bowley
Leja O Garufi
Aika Y Doe
Salvatore F Oldroyd
Aika C Doe
Wickens O Malet
Claire C Dilliard
Aditya D Campain
IdCountryDate
1000Brazil2025-06-02
1001Australia2025-05-17
1002Canada2025-05-16
1003Italy2025-05-15
1004United Kingdom2025-06-04
1005Italy2025-05-30
1006Argentina2025-05-20
1007Canada2025-05-31
1008United Kingdom2025-06-04
1009Italy2025-06-02
1010Australia2025-06-11
1011Australia2025-06-10
1012Russia2025-06-02
1013Japan2025-05-16
1014Canada2025-05-21
1015Australia2025-05-21
1016Argentina2025-06-03
1017Spain2025-05-17
1018India2025-05-26
1019Italy2025-05-17
1020Japan2025-05-28
1021India2025-05-22
1022Italy2025-06-12
1023Russia2025-05-14
1024Argentina2025-06-12
1025Germany2025-05-17
1026Germany2025-06-04
1027Argentina2025-06-03
1028Spain2025-06-09
1029Germany2025-05-25
1030France2025-05-16
1031Brazil2025-06-09
1032Italy2025-05-14
1033Italy2025-06-08
1034Germany2025-05-30
1035Italy2025-06-08
1036Brazil2025-06-12
1037Russia2025-05-29
1038France2025-06-07
1039Russia2025-06-05
1040Spain2025-06-03
1041Italy2025-05-26
1042Italy2025-06-09
1043Germany2025-05-27
1044Japan2025-05-19
1045Australia2025-05-29
1046Australia2025-05-23
1047Argentina2025-06-02
1048Brazil2025-05-23
1049Australia2025-05-19

On-Demand Data

NameIdCountryDate
Isabel X Venere1000Canada2025-06-01
Jefferson M Nicka1001Germany2025-06-01
Jennifer C Wieser1002Japan2025-05-30
Clifford H Kolmetz1003United Kingdom2025-06-02
Munro K Vocelka1004India2025-05-15
Tony D Bowley1005Germany2025-05-18
Francesco S Ostrosky1006Germany2025-05-22
Kadeem B Campain1007Australia2025-06-08
Ricardo K Paprocki1008India2025-06-04
Murillo F Dilliard1009Brazil2025-06-03
Antonio Z Shinko1010Argentina2025-06-03
Mujtaba B Butt1011Australia2025-05-31
Izzy Z Kolmetz1012Australia2025-05-17
Kadeem Y Perin1013Italy2025-05-20
Clifford U Vocelka1014Argentina2025-05-25
Silvio G Flosi1015Russia2025-05-18
Jeanfrancois P Gaucho1016Russia2025-06-11
Misaki V Flosi1017Russia2025-05-29
Mujtaba G Bowley1018India2025-05-28
Faith Y Schemmer1019United Kingdom2025-05-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Johnson Q SergiIndiaXuxue Feng RENEWAL
Aika T MacleadAustraliaIoni Bowcher PROPOSAL
Ivar Y MarrierSpainAsiya Javayant NEW
Juan S AlbaresRussiaAsiya Javayant QUALIFIED
Juan M RoysterRussiaElwin Sharvill QUALIFIED
Jones U InouyeGermanyXuxue Feng RENEWAL
Ricardo G KuskoJapanElwin Sharvill PROPOSAL
Maria J MarrierRussiaStephen Shaw PROPOSAL
Costa L DoeArgentinaAsiya Javayant NEGOTIATION
Francesco D SchemmerUnited KingdomXuxue Feng RENEWAL
Leon A WieserItalyElwin Sharvill NEW
Jefferson W KolmetzIndiaIvan Magalhaes RENEWAL
Darci C WieserArgentinaIvan Magalhaes QUALIFIED
Wickens C PerinCanadaAsiya Javayant RENEWAL
Morrow I WhobreyAustraliaIoni Bowcher NEGOTIATION
Aditya R GarufiCanadaAsiya Javayant RENEWAL
Clifford Y SaylorsArgentinaOnyama Limba UNQUALIFIED
Silvio Z TollnerFranceStephen Shaw NEGOTIATION
Ashley S StockhamUnited KingdomAsiya Javayant NEW
David O DarakjyRussiaBernardo Dominic NEGOTIATION
Darci B InouyeSpainElwin Sharvill QUALIFIED
Aika T GlickRussiaStephen Shaw PROPOSAL
Aruna W DilliardUnited KingdomIoni Bowcher RENEWAL
Leja S VocelkaAustraliaElwin Sharvill PROPOSAL
Francesco O GarufiArgentinaAnna Fali NEW
Johnson X VenereIndiaAmy Elsner PROPOSAL
Sinclair U FlosiGermanyElwin Sharvill NEGOTIATION
Francesco D MaletRussiaAmy Elsner PROPOSAL
Jefferson H AlbaresArgentinaElwin Sharvill UNQUALIFIED
Emily B KolmetzGermanyXuxue Feng NEW
Ivar D FigeroaJapanStephen Shaw QUALIFIED
Misaki A StensethArgentinaElwin Sharvill NEGOTIATION
Nicolas M ShinkoFranceAnna Fali QUALIFIED
Faith H InouyeCanadaAnna Fali PROPOSAL
James X MarrierIndiaElwin Sharvill PROPOSAL
Silvio C VenereSpainElwin Sharvill NEW
Maria S PoquetteSpainAsiya Javayant NEGOTIATION
James C FlosiItalyOnyama Limba PROPOSAL
David Z SlusarskiFranceIoni Bowcher PROPOSAL
Kaitlin V MacleadSpainIoni Bowcher 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>