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
Greenwood S RimJapanIoni Bowcher NEW
Sinclair E BriddickFranceStephen Shaw RENEWAL
Costa E StensethFranceAmy Elsner PROPOSAL
Darci K PerinIndiaIoni Bowcher RENEWAL
Jeanfrancois O RulapaughIndiaAmy Elsner NEGOTIATION
Antonio E StockhamSpainElwin Sharvill NEGOTIATION
Arvin K BologniaRussiaBernardo Dominic QUALIFIED
Clifford Z MaletCanadaOnyama Limba NEGOTIATION
Maria O WaycottAustraliaIvan Magalhaes NEGOTIATION
Kadeem T RutaAustraliaAnna Fali UNQUALIFIED
Smith O SergiUnited KingdomElwin Sharvill UNQUALIFIED
Francesco H OldroydCanadaElwin Sharvill UNQUALIFIED
Claire B GarufiBrazilIoni Bowcher UNQUALIFIED
Jones Q MorascaRussiaXuxue Feng RENEWAL
Ricardo L ShinkoCanadaElwin Sharvill QUALIFIED
Morrow U MarrierBrazilAsiya Javayant RENEWAL
Deepesh S MarrierCanadaIvan Magalhaes RENEWAL
Ricardo A BologniaSpainIoni Bowcher NEGOTIATION
Aruna F StockhamJapanAmy Elsner UNQUALIFIED
Leon F VenereBrazilStephen Shaw NEW
Deepesh I MaletIndiaAsiya Javayant QUALIFIED
Aditya C MarrierFranceElwin Sharvill UNQUALIFIED
Adams P WhobreyRussiaIoni Bowcher NEW
Aika P DoeAustraliaAnna Fali PROPOSAL
Alejandro S BowleyRussiaIvan Magalhaes RENEWAL
Rodrigues S BriddickItalyBernardo Dominic NEGOTIATION
Jefferson Y RulapaughGermanyXuxue Feng PROPOSAL
Arvin L RoysterGermanyAmy Elsner QUALIFIED
Cody C RimSpainStephen Shaw QUALIFIED
Claire J FlosiJapanElwin Sharvill QUALIFIED
Alejandro I MorascaArgentinaAnna Fali UNQUALIFIED
Adams F StensethBrazilAnna Fali NEGOTIATION
Leja K MorascaIndiaAnna Fali NEGOTIATION
Wickens C StockhamBrazilStephen Shaw RENEWAL
Ivar M WieserGermanyStephen Shaw UNQUALIFIED
Aruna D WieserArgentinaBernardo Dominic NEW
Cody A RoysterItalyBernardo Dominic QUALIFIED
Sinclair A DarakjyFranceIvan Magalhaes UNQUALIFIED
Jennifer D AmigonAustraliaAsiya Javayant NEW
Jennifer I NestleItalyStephen Shaw RENEWAL
Wickens Z ShinkoItalyOnyama Limba NEGOTIATION
Misaki B ButtJapanOnyama Limba RENEWAL
Arvin V KuskoItalyElwin Sharvill PROPOSAL
Aruna V RoysterFranceElwin Sharvill QUALIFIED
Claire M StensethSpainXuxue Feng NEW
Jeanfrancois V SlusarskiRussiaIvan Magalhaes RENEWAL
Antonio L CampainSpainBernardo Dominic PROPOSAL
Darci Z ShinkoFranceAmy Elsner QUALIFIED
Munro P StockhamRussiaIoni Bowcher PROPOSAL
Maria R VenereFranceIvan Magalhaes NEW
Horizontal
NameCountryRepresentativeStatus
Tony O FollerGermanyIvan Magalhaes NEGOTIATION
Darci X GlickRussiaAmy Elsner PROPOSAL
Maria W SlusarskiItalyBernardo Dominic QUALIFIED
Salvatore P SlusarskiCanadaStephen Shaw UNQUALIFIED
Maisha H GarufiSpainIoni Bowcher RENEWAL
Silvio Y BriddickGermanyIvan Magalhaes QUALIFIED
Cody X FerenczCanadaAnna Fali NEGOTIATION
Smith Q WieserJapanStephen Shaw PROPOSAL
Tony B OstroskyJapanXuxue Feng UNQUALIFIED
Juan M SlusarskiArgentinaIvan Magalhaes PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Greenwood H InouyeGermany2025-05-29Buckley Miller Wright RENEWAL21Stephen Shaw
1001Darci B ShinkoGermany2025-05-21Benton, John B Jr QUALIFIED41Bernardo Dominic
1002Aika I CaldareraSpain2025-05-18Commercial Press NEGOTIATION77Anna Fali
1003Juan T IturbideCanada2025-05-24Rangoni Of Florence NEGOTIATION4Onyama Limba
1004Mayumi N RutaUnited Kingdom2025-06-08Printing Dimensions NEW62Onyama Limba
1005Costa J KuskoAustralia2025-05-29Feiner Bros NEW35Ioni Bowcher
1006Alejandro P ButtGermany2025-06-04Printing Dimensions PROPOSAL93Xuxue Feng
1007Aditya F GlickJapan2025-06-03Benton, John B Jr NEGOTIATION56Asiya Javayant
1008Johnson F MacleadJapan2025-06-02Truhlar And Truhlar Attys NEW13Asiya Javayant
1009Arvin Z KolmetzBrazil2025-06-10Truhlar And Truhlar Attys NEGOTIATION45Ivan Magalhaes
1010Murillo D NestleGermany2025-05-19Feltz Printing Service UNQUALIFIED47Elwin Sharvill
1011Kadeem K DoeItaly2025-05-23Commercial Press PROPOSAL54Bernardo Dominic
1012Alejandro E WhobreyRussia2025-06-12Chemel, James L Cpa NEW27Elwin Sharvill
1013David C FollerItaly2025-06-03Morlong Associates PROPOSAL32Ioni Bowcher
1014Kaitlin C IturbideSpain2025-05-24Chanay, Jeffrey A Esq UNQUALIFIED13Anna Fali
1015Leja A ChuiJapan2025-05-28King, Christopher A Esq QUALIFIED56Ivan Magalhaes
1016Juan P CampainAustralia2025-06-13King, Christopher A Esq PROPOSAL8Amy Elsner
1017Juan B IturbideJapan2025-05-28Benton, John B Jr PROPOSAL0Anna Fali
1018Salvatore C DilliardCanada2025-05-31Feiner Bros UNQUALIFIED45Amy Elsner
1019Ricardo O MorascaAustralia2025-05-27Buckley Miller Wright QUALIFIED2Anna Fali
1020Darci O StensethJapan2025-05-24Morlong Associates UNQUALIFIED20Anna Fali
1021Deepesh P ChuiJapan2025-06-09Feltz Printing Service PROPOSAL36Xuxue Feng
1022Maisha E NestleRussia2025-06-10King, Christopher A Esq NEGOTIATION4Stephen Shaw
1023Maria J GlickBrazil2025-06-01Truhlar And Truhlar Attys QUALIFIED43Bernardo Dominic
1024Mayumi L ButtItaly2025-05-23Buckley Miller Wright NEGOTIATION55Anna Fali
1025Rodrigues T MacleadGermany2025-05-31Dorl, James J Esq RENEWAL73Xuxue Feng
1026Tony Q StensethCanada2025-05-20Chemel, James L Cpa PROPOSAL51Xuxue Feng
1027Greenwood H KolmetzCanada2025-05-25Chemel, James L Cpa NEGOTIATION67Bernardo Dominic
1028Emily L RimAustralia2025-05-22Buckley Miller Wright UNQUALIFIED3Stephen Shaw
1029Cody L StensethUnited Kingdom2025-05-28Rangoni Of Florence UNQUALIFIED63Bernardo Dominic
1030Antonio U FlosiCanada2025-05-28Feltz Printing Service NEW6Stephen Shaw
1031Isabel O KolmetzAustralia2025-05-30Feiner Bros NEGOTIATION64Ivan Magalhaes
1032Greenwood S StensethSpain2025-06-13Printing Dimensions QUALIFIED85Stephen Shaw
1033Rodrigues M PoquetteSpain2025-05-27Morlong Associates PROPOSAL82Bernardo Dominic
1034Jefferson Y RulapaughUnited Kingdom2025-05-31Chemel, James L Cpa PROPOSAL93Amy Elsner
1035Arvin V BowleyRussia2025-06-09Truhlar And Truhlar Attys UNQUALIFIED5Ioni Bowcher
1036Kaitlin X FollerAustralia2025-06-05Feiner Bros UNQUALIFIED71Anna Fali
1037Aruna O ChuiItaly2025-06-14Chemel, James L Cpa PROPOSAL24Ioni Bowcher
1038Murillo T MaletArgentina2025-05-19Morlong Associates NEW35Xuxue Feng
1039James V GarufiSpain2025-06-04Morlong Associates QUALIFIED84Ivan Magalhaes
1040Jennifer G KuskoFrance2025-06-16Rangoni Of Florence PROPOSAL89Stephen Shaw
1041Isabel U MacleadItaly2025-06-03Benton, John B Jr NEGOTIATION50Stephen Shaw
1042Adams H AlbaresArgentina2025-06-08Morlong Associates RENEWAL69Amy Elsner
1043Kadeem A PerinUnited Kingdom2025-05-25Feiner Bros UNQUALIFIED8Stephen Shaw
1044Darci T ShinkoArgentina2025-05-21King, Christopher A Esq NEW40Stephen Shaw
1045Kaitlin S FollerBrazil2025-06-09Chanay, Jeffrey A Esq QUALIFIED32Amy Elsner
1046Kaitlin P MorascaCanada2025-06-15Truhlar And Truhlar Attys NEW81Stephen Shaw
1047Maisha G GillianGermany2025-05-28Rousseaux, Michael Esq PROPOSAL3Xuxue Feng
1048Rodrigues B NestleBrazil2025-05-27Buckley Miller Wright NEGOTIATION71Stephen Shaw
1049Kadeem A WieserRussia2025-05-30Rangoni Of Florence PROPOSAL81Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Alejandro L BologniaUnited KingdomBernardo Dominic PROPOSAL
Darci G WaycottIndiaOnyama Limba NEGOTIATION
Francesco E BologniaGermanyAmy Elsner NEGOTIATION
Isabel X AlbaresUnited KingdomXuxue Feng QUALIFIED
Ashley M KuskoUnited KingdomElwin Sharvill QUALIFIED
Kadeem G OstroskyCanadaStephen Shaw RENEWAL
Antonio Z DoeFranceStephen Shaw PROPOSAL
Smith W PaprockiSpainAmy Elsner PROPOSAL
Tony P GillianBrazilOnyama Limba RENEWAL
Faith T AmigonCanadaIoni Bowcher QUALIFIED
Nicolas E WhobreyArgentinaAmy Elsner UNQUALIFIED
Munro N BologniaJapanAnna Fali PROPOSAL
Leja A CaudyArgentinaAsiya Javayant NEGOTIATION
Leja W PerinBrazilAsiya Javayant UNQUALIFIED
Murillo S KuskoArgentinaIvan Magalhaes QUALIFIED
Silvio A StockhamFranceXuxue Feng UNQUALIFIED
Murillo V IturbideGermanyBernardo Dominic QUALIFIED
Claire D NestleCanadaElwin Sharvill NEGOTIATION
Ricardo W KuskoSpainAmy Elsner RENEWAL
Francesco Y MarrierArgentinaIvan Magalhaes QUALIFIED
Alejandro I StockhamArgentinaXuxue Feng RENEWAL
Leon V FollerSpainOnyama Limba UNQUALIFIED
Julie R SaylorsUnited KingdomAsiya Javayant RENEWAL
Misaki D TollnerArgentinaXuxue Feng PROPOSAL
Wickens U StensethItalyBernardo Dominic RENEWAL
Misaki I WaycottFranceOnyama Limba QUALIFIED
Jefferson O GillianSpainAnna Fali NEW
Clifford E MorascaBrazilIvan Magalhaes RENEWAL
Aika L MorascaAustraliaIoni Bowcher NEGOTIATION
Johnson W BowleyArgentinaIvan Magalhaes QUALIFIED
Jeanfrancois Z ButtGermanyIoni Bowcher NEGOTIATION
Ivar U WaycottIndiaAnna Fali NEW
Mayumi H FerenczAustraliaIvan Magalhaes NEGOTIATION
Aruna Q GlickCanadaXuxue Feng QUALIFIED
Tony I OldroydArgentinaBernardo Dominic QUALIFIED
Izzy U DoeFranceOnyama Limba NEW
Leon L FigeroaAustraliaIoni Bowcher NEW
Antonio R SlusarskiUnited KingdomOnyama Limba NEGOTIATION
Emily T MaletGermanyBernardo Dominic UNQUALIFIED
Chavez S GillianArgentinaIvan Magalhaes RENEWAL
Mayumi T RimIndiaAmy Elsner NEGOTIATION
Jennifer N StensethIndiaElwin Sharvill RENEWAL
Darci O IturbideBrazilAmy Elsner NEGOTIATION
Morrow F FlosiUnited KingdomIvan Magalhaes NEW
Julie H PaprockiAustraliaAmy Elsner RENEWAL
Jennifer E BowleyFranceAsiya Javayant UNQUALIFIED
Mayumi B AmigonItalyBernardo Dominic UNQUALIFIED
Arvin Z InouyeBrazilStephen Shaw PROPOSAL
Izzy P NestleIndiaXuxue Feng NEGOTIATION
Nicolas I MarrierCanadaAnna Fali QUALIFIED
Frozen Columns
Name
Arvin K Albares
James C Ostrosky
Rodrigues Q Nicka
Nicolas N Morasca
David Y Ostrosky
Mayumi A Foller
Maria J Iturbide
Izzy B Saylors
Maisha X Ruta
Mujtaba S Ferencz
Mayumi G Rim
Johnson X Bowley
Emily K Amigon
Clifford F Wieser
David N Sergi
Greenwood R Sergi
Ricardo E Chui
Stacey J Caldarera
Rodrigues B Figeroa
Smith Z Glick
Ashley A Glick
Jefferson I Albares
Johnson N Kolmetz
Silvio W Albares
Alejandro V Poquette
Mujtaba F Bowley
Mujtaba G Garufi
Maisha M Oldroyd
Cody H Ruta
Izzy E Kusko
Tony H Saylors
Francesco A Chui
David G Figeroa
Johnson L Nestle
Aika N Figeroa
Jefferson M Flosi
Chavez Q Gaucho
Antonio B Kolmetz
Jefferson H Garufi
Salvatore U Perin
Maria W Maclead
Misaki S Morasca
Aruna N Dilliard
Wickens M Iturbide
Mujtaba Y Venere
Munro J Marrier
Octavia F Saylors
Octavia N Oldroyd
Smith L Bolognia
Murillo H Nicka
IdCountryDate
1000Germany2025-06-10
1001Argentina2025-06-15
1002United Kingdom2025-05-26
1003India2025-05-18
1004India2025-06-15
1005Japan2025-05-20
1006Japan2025-06-16
1007Spain2025-05-31
1008Australia2025-06-15
1009Germany2025-05-22
1010Argentina2025-06-06
1011Russia2025-05-27
1012Australia2025-06-01
1013Canada2025-06-13
1014Spain2025-05-20
1015Argentina2025-05-25
1016Germany2025-05-31
1017Italy2025-05-26
1018India2025-06-14
1019Australia2025-05-26
1020India2025-05-22
1021United Kingdom2025-06-16
1022Brazil2025-06-14
1023Australia2025-06-12
1024Spain2025-06-12
1025France2025-06-16
1026France2025-06-05
1027France2025-05-28
1028Canada2025-05-29
1029Japan2025-06-01
1030United Kingdom2025-05-19
1031France2025-06-09
1032Brazil2025-05-31
1033Japan2025-05-18
1034Argentina2025-06-06
1035Japan2025-05-29
1036Spain2025-06-07
1037Japan2025-06-08
1038United Kingdom2025-05-28
1039United Kingdom2025-05-22
1040Spain2025-06-16
1041Italy2025-06-07
1042Germany2025-05-30
1043France2025-06-04
1044Australia2025-06-12
1045France2025-05-30
1046Italy2025-06-01
1047Russia2025-06-15
1048Brazil2025-05-18
1049Spain2025-06-07

On-Demand Data

NameIdCountryDate
James G Caldarera1000France2025-06-12
Juan D Royster1001India2025-05-23
Sinclair V Campain1002Russia2025-06-16
Morrow X Malet1003United Kingdom2025-06-15
Leon C Iturbide1004Russia2025-06-11
Costa Z Gaucho1005Russia2025-05-19
James T Garufi1006Brazil2025-05-24
Sinclair R Shinko1007India2025-05-31
Aika B Kolmetz1008Japan2025-05-29
Claire Z Bowley1009Italy2025-05-29
Smith L Rim1010Germany2025-05-30
Maisha U Shinko1011United Kingdom2025-05-31
Misaki U Malet1012Spain2025-05-24
Alejandro Q Nestle1013Argentina2025-06-05
Adams Q Shinko1014Japan2025-05-25
David Q Amigon1015Australia2025-06-06
Salvatore K Caldarera1016Italy2025-06-14
Mujtaba X Caldarera1017Japan2025-06-13
Murillo D Garufi1018United Kingdom2025-06-16
Jeanfrancois M Oldroyd1019Germany2025-06-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ashley L ChuiIndiaAsiya Javayant RENEWAL
Francesco K StensethArgentinaStephen Shaw PROPOSAL
Deepesh W NickaSpainAsiya Javayant NEW
Isabel J PaprockiFranceXuxue Feng NEGOTIATION
Darci Q BowleySpainElwin Sharvill RENEWAL
Sinclair E KolmetzBrazilBernardo Dominic QUALIFIED
Jones V MacleadIndiaBernardo Dominic NEGOTIATION
Faith U WhobreyItalyStephen Shaw UNQUALIFIED
Leja K ButtIndiaAnna Fali UNQUALIFIED
Jefferson M NestleAustraliaAsiya Javayant NEW
Ashley W InouyeFranceOnyama Limba NEGOTIATION
Mayumi G GauchoGermanyAsiya Javayant RENEWAL
Misaki L GarufiBrazilAmy Elsner NEGOTIATION
Antonio X RoysterBrazilStephen Shaw NEW
Kaitlin I KuskoAustraliaOnyama Limba NEGOTIATION
Alejandro T BologniaUnited KingdomAmy Elsner PROPOSAL
Silvio X ShinkoRussiaIoni Bowcher NEGOTIATION
Faith L StensethCanadaAmy Elsner PROPOSAL
Octavia W SergiIndiaOnyama Limba NEW
Silvio R ChuiSpainIoni Bowcher RENEWAL
Jones H ShinkoSpainXuxue Feng PROPOSAL
Smith L TollnerGermanyElwin Sharvill RENEWAL
Juan K TollnerRussiaAsiya Javayant QUALIFIED
Juan W IturbideGermanyAnna Fali UNQUALIFIED
Munro P FerenczUnited KingdomBernardo Dominic UNQUALIFIED
Tony O CampainIndiaAmy Elsner NEW
Adams G MorascaIndiaBernardo Dominic QUALIFIED
Kaitlin O GlickBrazilStephen Shaw RENEWAL
Tony F StensethUnited KingdomElwin Sharvill PROPOSAL
Ashley P KolmetzJapanAnna Fali NEGOTIATION
Juan U MacleadCanadaAmy Elsner NEW
Jeanfrancois U BowleyArgentinaIoni Bowcher NEW
Greenwood J ChuiRussiaStephen Shaw NEW
Tony H GlickCanadaIoni Bowcher PROPOSAL
Ashley Z TollnerSpainStephen Shaw PROPOSAL
Deepesh S FigeroaIndiaAmy Elsner PROPOSAL
Juan I BologniaGermanyStephen Shaw PROPOSAL
Emily F GlickUnited KingdomXuxue Feng QUALIFIED
Stacey H VocelkaFranceOnyama Limba PROPOSAL
Stacey P MacleadSpainAsiya Javayant 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>