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
Alejandro Y FigeroaFranceAmy Elsner QUALIFIED
Maisha P IturbideUnited KingdomAnna Fali NEW
Chavez K AmigonCanadaXuxue Feng NEGOTIATION
Aditya H MorascaFranceAnna Fali NEGOTIATION
Izzy D WieserUnited KingdomStephen Shaw UNQUALIFIED
Isabel L StockhamJapanXuxue Feng PROPOSAL
Rodrigues O WieserAustraliaIoni Bowcher QUALIFIED
Ashley F SchemmerGermanyBernardo Dominic QUALIFIED
Rodrigues M RutaArgentinaIoni Bowcher PROPOSAL
Kaitlin A NestleGermanyIoni Bowcher QUALIFIED
Leon E GlickFranceStephen Shaw NEGOTIATION
Johnson M DoeSpainIvan Magalhaes NEGOTIATION
Leja P BowleyArgentinaOnyama Limba QUALIFIED
Leja X RimCanadaElwin Sharvill NEGOTIATION
Clifford M BriddickItalyElwin Sharvill RENEWAL
Aika D PaprockiBrazilIoni Bowcher UNQUALIFIED
Misaki K MaletRussiaStephen Shaw RENEWAL
Ashley T MarrierIndiaIvan Magalhaes QUALIFIED
Tony S GillianRussiaXuxue Feng PROPOSAL
Salvatore B CampainAustraliaAnna Fali PROPOSAL
Mayumi D ShinkoBrazilIvan Magalhaes PROPOSAL
Ivar E VenereIndiaElwin Sharvill NEGOTIATION
Ricardo G VenereAustraliaBernardo Dominic NEGOTIATION
Ricardo N ShinkoArgentinaAmy Elsner QUALIFIED
Alejandro A VenereRussiaOnyama Limba NEW
Deepesh G WhobreyRussiaElwin Sharvill RENEWAL
Tony G SchemmerUnited KingdomElwin Sharvill NEGOTIATION
Mujtaba E RulapaughFranceIoni Bowcher PROPOSAL
Greenwood X PerinItalyAmy Elsner RENEWAL
Wickens D AlbaresJapanIoni Bowcher NEGOTIATION
Arvin Z GlickJapanAnna Fali PROPOSAL
Juan X RulapaughIndiaAnna Fali PROPOSAL
Nicolas U WaycottGermanyIoni Bowcher RENEWAL
Greenwood B FlosiBrazilStephen Shaw PROPOSAL
Mayumi D StensethFranceIoni Bowcher RENEWAL
Faith H PoquetteBrazilElwin Sharvill QUALIFIED
Johnson H WieserItalyXuxue Feng NEW
Kadeem P DoeJapanStephen Shaw UNQUALIFIED
Jones Z GillianItalyStephen Shaw NEGOTIATION
Izzy F DarakjyAustraliaOnyama Limba NEW
Aruna I StockhamSpainAsiya Javayant NEW
Cody H SaylorsCanadaBernardo Dominic NEW
Kadeem M OldroydItalyStephen Shaw QUALIFIED
Rodrigues R OstroskyItalyAsiya Javayant RENEWAL
Tony F FigeroaCanadaXuxue Feng UNQUALIFIED
Adams Q FlosiAustraliaOnyama Limba NEGOTIATION
Ivar L PerinGermanyXuxue Feng QUALIFIED
Stacey W PerinJapanAmy Elsner PROPOSAL
Stacey Z SchemmerIndiaIvan Magalhaes RENEWAL
Nicolas E IturbideJapanElwin Sharvill NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Francesco X GarufiItalyIvan Magalhaes RENEWAL
Misaki Z KolmetzGermanyAsiya Javayant NEGOTIATION
Clifford B CampainArgentinaAnna Fali QUALIFIED
Ivar V BriddickItalyStephen Shaw PROPOSAL
Francesco E ShinkoIndiaAsiya Javayant NEGOTIATION
Munro C PoquetteItalyAsiya Javayant UNQUALIFIED
Claire H MorascaUnited KingdomAmy Elsner NEGOTIATION
Octavia S FlosiIndiaAnna Fali NEW
Greenwood Y BowleyItalyAnna Fali PROPOSAL
Clifford Z MorascaGermanyBernardo Dominic NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Antonio A BriddickSpain2025-05-25Truhlar And Truhlar Attys RENEWAL64Ioni Bowcher
1001Nicolas T InouyeFrance2025-05-31Rangoni Of Florence PROPOSAL34Amy Elsner
1002Francesco M PerinGermany2025-05-22Feiner Bros QUALIFIED90Bernardo Dominic
1003Izzy G TollnerJapan2025-06-05Rangoni Of Florence NEW64Amy Elsner
1004Alejandro Y ShinkoBrazil2025-05-26Rousseaux, Michael Esq PROPOSAL7Xuxue Feng
1005Ricardo U MaletUnited Kingdom2025-05-30Benton, John B Jr UNQUALIFIED11Amy Elsner
1006Izzy L DilliardUnited Kingdom2025-06-11Printing Dimensions NEGOTIATION72Ivan Magalhaes
1007Clifford N DarakjyFrance2025-06-16Chemel, James L Cpa RENEWAL95Elwin Sharvill
1008Chavez K SchemmerBrazil2025-05-31Truhlar And Truhlar Attys NEGOTIATION46Bernardo Dominic
1009Jefferson K FigeroaGermany2025-06-14Chemel, James L Cpa RENEWAL53Amy Elsner
1010Leon X ButtJapan2025-05-23Benton, John B Jr UNQUALIFIED74Anna Fali
1011Jennifer R FerenczBrazil2025-06-14Commercial Press NEGOTIATION44Anna Fali
1012Kadeem H MaletRussia2025-06-06Rangoni Of Florence NEGOTIATION92Amy Elsner
1013Aika T MaletItaly2025-06-06Feltz Printing Service PROPOSAL83Bernardo Dominic
1014Sinclair T FerenczSpain2025-06-14Morlong Associates NEW10Ivan Magalhaes
1015Clifford F CaldareraUnited Kingdom2025-06-14Rousseaux, Michael Esq QUALIFIED22Asiya Javayant
1016Jones G FollerSpain2025-05-25Rousseaux, Michael Esq RENEWAL0Stephen Shaw
1017Murillo Q BriddickBrazil2025-05-18Buckley Miller Wright NEW65Anna Fali
1018Adams U CampainUnited Kingdom2025-06-07Morlong Associates RENEWAL57Onyama Limba
1019Alejandro M KuskoUnited Kingdom2025-06-12Feiner Bros NEGOTIATION82Ioni Bowcher
1020Misaki B DarakjyBrazil2025-06-03Commercial Press UNQUALIFIED22Ivan Magalhaes
1021Greenwood E IturbideJapan2025-05-27Buckley Miller Wright NEW85Ioni Bowcher
1022Ricardo O MaletCanada2025-05-25Morlong Associates RENEWAL87Onyama Limba
1023Isabel S AmigonArgentina2025-05-19Benton, John B Jr RENEWAL98Bernardo Dominic
1024Greenwood Y AmigonFrance2025-05-19Truhlar And Truhlar Attys PROPOSAL81Xuxue Feng
1025Deepesh M AmigonGermany2025-06-06Buckley Miller Wright NEGOTIATION21Onyama Limba
1026Ricardo I KolmetzRussia2025-06-01Rousseaux, Michael Esq NEGOTIATION72Ivan Magalhaes
1027David G KuskoUnited Kingdom2025-06-12King, Christopher A Esq RENEWAL26Elwin Sharvill
1028Greenwood X DarakjySpain2025-06-12Truhlar And Truhlar Attys QUALIFIED7Stephen Shaw
1029Francesco Z SaylorsRussia2025-05-28Feltz Printing Service PROPOSAL23Amy Elsner
1030Smith R FigeroaArgentina2025-06-01Chapman, Ross E Esq NEW43Ioni Bowcher
1031Octavia Z MaletCanada2025-05-30Chemel, James L Cpa QUALIFIED62Xuxue Feng
1032Jennifer Y PaprockiSpain2025-06-12Buckley Miller Wright UNQUALIFIED58Stephen Shaw
1033Mayumi M MorascaJapan2025-05-19King, Christopher A Esq UNQUALIFIED4Xuxue Feng
1034Alejandro T NestleSpain2025-05-18Morlong Associates PROPOSAL7Anna Fali
1035Salvatore R InouyeGermany2025-06-16Rousseaux, Michael Esq NEGOTIATION38Xuxue Feng
1036Jones R InouyeFrance2025-05-20Chemel, James L Cpa NEW43Onyama Limba
1037Rodrigues T GillianJapan2025-06-11Feltz Printing Service PROPOSAL30Ioni Bowcher
1038Leon J AmigonRussia2025-06-10Feltz Printing Service PROPOSAL6Amy Elsner
1039Stacey Q GarufiAustralia2025-06-14Truhlar And Truhlar Attys QUALIFIED31Bernardo Dominic
1040Arvin Z StockhamCanada2025-06-01Truhlar And Truhlar Attys QUALIFIED8Asiya Javayant
1041Aika T FerenczItaly2025-06-05Rousseaux, Michael Esq PROPOSAL81Asiya Javayant
1042Clifford B FlosiArgentina2025-05-18Feiner Bros RENEWAL71Onyama Limba
1043Juan X RutaCanada2025-05-31Buckley Miller Wright QUALIFIED88Onyama Limba
1044James Y MarrierGermany2025-06-03Morlong Associates UNQUALIFIED83Xuxue Feng
1045Deepesh D FigeroaArgentina2025-06-14Morlong Associates UNQUALIFIED10Ivan Magalhaes
1046Emily E PerinFrance2025-05-27King, Christopher A Esq NEGOTIATION53Amy Elsner
1047Ivar H TollnerUnited Kingdom2025-06-05Chanay, Jeffrey A Esq PROPOSAL39Onyama Limba
1048Sinclair B KuskoBrazil2025-06-10King, Christopher A Esq UNQUALIFIED21Onyama Limba
1049Ivar V KuskoArgentina2025-06-05Truhlar And Truhlar Attys QUALIFIED26Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
David A WaycottSpainXuxue Feng RENEWAL
Tony Q FollerAustraliaOnyama Limba NEGOTIATION
Murillo X FlosiCanadaAnna Fali NEGOTIATION
Arvin T MorascaIndiaXuxue Feng NEW
Wickens T CaudyArgentinaElwin Sharvill PROPOSAL
Morrow L GauchoGermanyOnyama Limba PROPOSAL
Izzy F SergiIndiaOnyama Limba QUALIFIED
Aika P DarakjyGermanyOnyama Limba PROPOSAL
Jones K KolmetzFranceStephen Shaw NEW
Jefferson I CaudySpainIvan Magalhaes RENEWAL
Costa V RoysterIndiaElwin Sharvill UNQUALIFIED
Jones B GillianJapanIvan Magalhaes RENEWAL
Faith M WieserIndiaElwin Sharvill QUALIFIED
Alejandro O MacleadSpainAnna Fali PROPOSAL
Isabel D OstroskyGermanyAmy Elsner NEGOTIATION
Murillo E VocelkaIndiaAmy Elsner PROPOSAL
Mayumi E DilliardArgentinaElwin Sharvill NEGOTIATION
Francesco L NickaFranceIoni Bowcher UNQUALIFIED
Alejandro R WaycottItalyAmy Elsner RENEWAL
Clifford M ShinkoBrazilStephen Shaw RENEWAL
Octavia L VocelkaCanadaElwin Sharvill PROPOSAL
Aditya L ChuiAustraliaAmy Elsner QUALIFIED
Costa Y FerenczSpainBernardo Dominic UNQUALIFIED
Darci N PoquetteArgentinaStephen Shaw NEW
Antonio Q IturbideRussiaXuxue Feng RENEWAL
Leja R MorascaItalyAmy Elsner PROPOSAL
Cody L StockhamUnited KingdomIoni Bowcher NEW
Jeanfrancois B AlbaresCanadaAnna Fali UNQUALIFIED
Costa Z IturbideArgentinaAsiya Javayant QUALIFIED
Mayumi R SergiItalyAmy Elsner UNQUALIFIED
Misaki F StensethFranceAsiya Javayant UNQUALIFIED
Wickens R SaylorsIndiaXuxue Feng PROPOSAL
Kadeem W AlbaresBrazilBernardo Dominic QUALIFIED
Faith N BologniaCanadaIvan Magalhaes RENEWAL
Jeanfrancois T OstroskySpainOnyama Limba NEGOTIATION
Jefferson N WaycottItalyIvan Magalhaes NEW
James P RutaFranceOnyama Limba QUALIFIED
Adams H RoysterJapanOnyama Limba NEW
Johnson K BowleyGermanyAnna Fali NEW
Jones Z ShinkoFranceIoni Bowcher RENEWAL
Aruna K ChuiGermanyBernardo Dominic NEW
Leja Y KuskoJapanAnna Fali UNQUALIFIED
Octavia J InouyeUnited KingdomIvan Magalhaes NEGOTIATION
Cody L VenereCanadaIoni Bowcher NEW
Mayumi A FerenczGermanyElwin Sharvill QUALIFIED
Stacey P SaylorsBrazilIoni Bowcher NEW
Misaki U PoquetteItalyAsiya Javayant RENEWAL
Greenwood D FigeroaSpainAnna Fali NEGOTIATION
Arvin R ShinkoCanadaStephen Shaw NEW
Sinclair M WaycottIndiaAmy Elsner RENEWAL
Frozen Columns
Name
Greenwood R Nicka
Morrow Q Garufi
Octavia L Wieser
Ashley N Royster
Ashley R Iturbide
David L Kusko
Silvio G Morasca
Salvatore I Butt
Claire O Figeroa
Emily G Campain
Mujtaba C Malet
Munro L Slusarski
Aruna X Morasca
Smith C Schemmer
Antonio N Sergi
Smith O Figeroa
Greenwood M Nestle
Tony V Chui
Ricardo H Flosi
Costa M Glick
Murillo J Stenseth
Aruna U Kolmetz
Chavez O Garufi
Smith V Maclead
Francesco M Tollner
Kadeem O Gaucho
Aruna X Amigon
Ashley Z Oldroyd
Faith X Figeroa
Jeanfrancois H Bolognia
Morrow M Schemmer
Johnson P Saylors
David Q Malet
Misaki P Ruta
Francesco Z Royster
Nicolas Y Royster
Tony C Nicka
Sinclair A Kusko
Claire I Tollner
Antonio W Figeroa
Maisha I Doe
Costa Q Foller
Julie H Glick
Juan N Rim
Emily M Briddick
Johnson A Vocelka
Chavez X Figeroa
Adams E Stockham
Deepesh F Malet
Deepesh F Chui
IdCountryDate
1000United Kingdom2025-06-07
1001Canada2025-05-30
1002Japan2025-05-25
1003Canada2025-05-29
1004Germany2025-05-18
1005Italy2025-05-22
1006India2025-06-01
1007United Kingdom2025-06-03
1008Spain2025-05-24
1009Japan2025-06-11
1010India2025-05-31
1011France2025-06-05
1012Japan2025-05-20
1013Australia2025-06-12
1014France2025-06-09
1015France2025-06-11
1016India2025-05-23
1017Argentina2025-06-07
1018India2025-05-24
1019Russia2025-06-12
1020France2025-05-27
1021France2025-05-21
1022India2025-05-29
1023Germany2025-06-11
1024Brazil2025-06-02
1025Australia2025-05-19
1026India2025-06-12
1027Russia2025-06-08
1028Brazil2025-06-10
1029Russia2025-06-11
1030Canada2025-06-09
1031Brazil2025-05-20
1032Argentina2025-06-06
1033France2025-05-29
1034Japan2025-06-11
1035Canada2025-05-26
1036United Kingdom2025-05-26
1037United Kingdom2025-05-25
1038Japan2025-06-02
1039Australia2025-05-31
1040France2025-05-31
1041Russia2025-06-15
1042Italy2025-06-10
1043Brazil2025-06-04
1044France2025-06-09
1045Spain2025-05-21
1046Canada2025-05-30
1047India2025-06-15
1048Japan2025-06-01
1049Russia2025-06-05

On-Demand Data

NameIdCountryDate
Silvio O Butt1000Argentina2025-05-26
Mayumi L Caudy1001Argentina2025-06-09
Murillo Y Wieser1002Brazil2025-05-19
Smith M Marrier1003Italy2025-06-13
Leja A Whobrey1004Germany2025-05-26
Emily H Chui1005Germany2025-05-31
Adams W Chui1006Brazil2025-06-13
Silvio S Kusko1007Japan2025-06-03
Wickens J Oldroyd1008Japan2025-06-02
Leja X Marrier1009Argentina2025-05-23
Isabel P Poquette1010Canada2025-05-25
David R Wieser1011Argentina2025-06-01
Francesco N Darakjy1012France2025-05-23
Octavia N Wieser1013Brazil2025-05-21
Claire N Poquette1014Brazil2025-06-04
Silvio L Campain1015Germany2025-06-08
Alejandro K Garufi1016Australia2025-05-28
Salvatore K Ruta1017Canada2025-05-25
Izzy X Briddick1018Spain2025-06-13
Johnson W Ostrosky1019France2025-05-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
James G RimArgentinaAnna Fali UNQUALIFIED
Johnson Z RutaRussiaAsiya Javayant QUALIFIED
Jeanfrancois W VenereAustraliaIvan Magalhaes NEGOTIATION
Mayumi J BowleyItalyAmy Elsner PROPOSAL
Murillo J BowleyItalyIoni Bowcher NEGOTIATION
Juan U WhobreyFranceAmy Elsner NEGOTIATION
Ricardo H BriddickIndiaAsiya Javayant QUALIFIED
Arvin D SchemmerJapanElwin Sharvill RENEWAL
Jefferson Q IturbideAustraliaBernardo Dominic NEW
Munro Q GillianItalyAmy Elsner UNQUALIFIED
Faith O BowleyRussiaAsiya Javayant NEW
Tony N GarufiItalyAmy Elsner QUALIFIED
Wickens T OstroskyAustraliaStephen Shaw QUALIFIED
Francesco N NestleCanadaOnyama Limba NEW
Faith H GillianArgentinaIoni Bowcher UNQUALIFIED
Adams G AmigonBrazilIvan Magalhaes NEW
Jones J StockhamBrazilIoni Bowcher UNQUALIFIED
Greenwood A FollerCanadaXuxue Feng QUALIFIED
Arvin G MarrierSpainBernardo Dominic UNQUALIFIED
Murillo R SaylorsFranceAmy Elsner QUALIFIED
Emily H BologniaArgentinaOnyama Limba NEGOTIATION
Jones H FigeroaBrazilAnna Fali NEW
Clifford T MaletIndiaAmy Elsner UNQUALIFIED
Julie I PaprockiSpainIoni Bowcher NEW
Jefferson G WieserIndiaStephen Shaw PROPOSAL
Mayumi Z GlickSpainIvan Magalhaes NEGOTIATION
Claire U WieserItalyIvan Magalhaes QUALIFIED
Nicolas K CaldareraJapanElwin Sharvill QUALIFIED
Maria F GlickArgentinaStephen Shaw NEW
Munro U NestleSpainBernardo Dominic NEGOTIATION
Faith R SergiItalyBernardo Dominic PROPOSAL
Aditya L OstroskyIndiaElwin Sharvill UNQUALIFIED
Julie H PaprockiUnited KingdomAsiya Javayant NEGOTIATION
Jones V GauchoGermanyBernardo Dominic RENEWAL
Aika Q WhobreyAustraliaElwin Sharvill QUALIFIED
Jefferson H OstroskyIndiaBernardo Dominic NEW
Aruna B FlosiArgentinaAsiya Javayant NEW
Jennifer Z PoquetteGermanyXuxue Feng UNQUALIFIED
Mayumi I FollerBrazilIoni Bowcher UNQUALIFIED
Julie D WaycottCanadaIvan 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>