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
Jeanfrancois Y OldroydGermanyXuxue Feng PROPOSAL
Francesco K RulapaughGermanyOnyama Limba PROPOSAL
Murillo H KolmetzJapanXuxue Feng NEGOTIATION
Emily S PerinJapanStephen Shaw PROPOSAL
Aika N DilliardJapanIvan Magalhaes RENEWAL
Costa H RutaBrazilStephen Shaw NEW
Greenwood Z PerinIndiaAsiya Javayant PROPOSAL
Aruna X MacleadArgentinaIvan Magalhaes RENEWAL
Adams L SchemmerAustraliaStephen Shaw NEGOTIATION
Deepesh G PerinItalyAnna Fali UNQUALIFIED
Ivar A NickaRussiaAnna Fali NEGOTIATION
Tony U DilliardIndiaElwin Sharvill RENEWAL
Aditya I GarufiJapanAnna Fali QUALIFIED
Antonio T KuskoItalyAmy Elsner PROPOSAL
Kaitlin G OstroskyRussiaElwin Sharvill NEW
Munro J RutaIndiaAsiya Javayant NEW
Antonio R RimArgentinaXuxue Feng PROPOSAL
Ricardo Q NestleCanadaAsiya Javayant UNQUALIFIED
Darci I OldroydIndiaIoni Bowcher PROPOSAL
Munro E PaprockiSpainAsiya Javayant NEGOTIATION
Jeanfrancois S AmigonBrazilAmy Elsner UNQUALIFIED
Emily X DoeFranceAsiya Javayant PROPOSAL
Darci E WhobreyCanadaBernardo Dominic UNQUALIFIED
Faith R FollerFranceStephen Shaw UNQUALIFIED
Clifford T CaudyCanadaIvan Magalhaes PROPOSAL
Jefferson E GillianArgentinaAnna Fali RENEWAL
Greenwood Q SergiArgentinaOnyama Limba PROPOSAL
Juan K CampainJapanIoni Bowcher NEW
Izzy P RimBrazilIvan Magalhaes UNQUALIFIED
Francesco F WaycottSpainAnna Fali RENEWAL
Chavez M DilliardIndiaIoni Bowcher NEGOTIATION
Kadeem S FollerItalyAmy Elsner NEGOTIATION
Emily L MacleadSpainAnna Fali NEW
Deepesh P TollnerGermanyIoni Bowcher RENEWAL
Mujtaba C GauchoCanadaAmy Elsner QUALIFIED
Mayumi W PerinBrazilAmy Elsner NEGOTIATION
Jefferson D StockhamIndiaIvan Magalhaes UNQUALIFIED
Ricardo F WaycottBrazilXuxue Feng QUALIFIED
Wickens E OstroskySpainStephen Shaw NEGOTIATION
Ivar T ButtCanadaAmy Elsner NEGOTIATION
Octavia P WieserArgentinaAmy Elsner NEW
Aika S BologniaBrazilAmy Elsner NEW
Arvin O DilliardAustraliaStephen Shaw QUALIFIED
Smith C CaldareraRussiaAsiya Javayant PROPOSAL
Mayumi Y PerinBrazilIvan Magalhaes NEW
Mujtaba B CaldareraIndiaAsiya Javayant NEGOTIATION
Mayumi T ShinkoBrazilAnna Fali NEW
Wickens G KuskoFranceXuxue Feng UNQUALIFIED
Faith D MorascaSpainBernardo Dominic NEW
Murillo Z VenereUnited KingdomIoni Bowcher UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Julie R DilliardJapanXuxue Feng PROPOSAL
Johnson H BowleyCanadaElwin Sharvill RENEWAL
Ricardo Y FlosiSpainBernardo Dominic PROPOSAL
Izzy V PaprockiAustraliaAnna Fali UNQUALIFIED
James S PoquetteBrazilBernardo Dominic NEGOTIATION
Isabel V RimIndiaIoni Bowcher PROPOSAL
Deepesh T InouyeRussiaAnna Fali NEW
Costa B GlickGermanyOnyama Limba UNQUALIFIED
Sinclair B StockhamCanadaOnyama Limba UNQUALIFIED
Jeanfrancois G DarakjyRussiaAnna Fali PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ivar X AmigonArgentina2025-05-29Dorl, James J Esq UNQUALIFIED62Anna Fali
1001Francesco M VenereAustralia2025-06-03Chapman, Ross E Esq UNQUALIFIED60Asiya Javayant
1002Ivar Q InouyeGermany2025-05-29Morlong Associates NEGOTIATION47Xuxue Feng
1003Clifford A PerinArgentina2025-06-01Feiner Bros NEGOTIATION68Elwin Sharvill
1004Ivar B WieserBrazil2025-05-17Rangoni Of Florence NEGOTIATION94Xuxue Feng
1005Alejandro J RutaSpain2025-06-07Benton, John B Jr NEW74Asiya Javayant
1006Sinclair N BriddickJapan2025-06-15Rousseaux, Michael Esq NEGOTIATION29Onyama Limba
1007Ricardo U PerinIndia2025-05-18Commercial Press UNQUALIFIED70Ivan Magalhaes
1008Salvatore U DilliardIndia2025-06-13Truhlar And Truhlar Attys NEW24Asiya Javayant
1009Nicolas I AmigonJapan2025-05-29Truhlar And Truhlar Attys PROPOSAL57Bernardo Dominic
1010Emily O KolmetzItaly2025-05-30Truhlar And Truhlar Attys UNQUALIFIED61Ivan Magalhaes
1011Claire I CaudySpain2025-06-14Rangoni Of Florence UNQUALIFIED65Amy Elsner
1012Arvin F DilliardAustralia2025-05-18Feiner Bros PROPOSAL60Anna Fali
1013Faith Y DilliardIndia2025-05-20Rousseaux, Michael Esq RENEWAL28Onyama Limba
1014Emily Y MacleadItaly2025-05-25King, Christopher A Esq QUALIFIED54Elwin Sharvill
1015Munro J OldroydUnited Kingdom2025-05-25Chanay, Jeffrey A Esq UNQUALIFIED58Onyama Limba
1016Jennifer B KuskoItaly2025-06-01Feltz Printing Service NEW43Ivan Magalhaes
1017Rodrigues E SlusarskiRussia2025-06-05Feltz Printing Service QUALIFIED10Asiya Javayant
1018Salvatore K IturbideJapan2025-05-20Commercial Press UNQUALIFIED30Elwin Sharvill
1019Claire O SlusarskiIndia2025-06-09Rousseaux, Michael Esq PROPOSAL59Asiya Javayant
1020Maria F MaletSpain2025-05-30Rousseaux, Michael Esq UNQUALIFIED70Asiya Javayant
1021Mayumi C TollnerItaly2025-05-17Truhlar And Truhlar Attys PROPOSAL85Ivan Magalhaes
1022Silvio I AlbaresCanada2025-05-24Rangoni Of Florence PROPOSAL77Anna Fali
1023Ashley I GauchoUnited Kingdom2025-05-27Chanay, Jeffrey A Esq UNQUALIFIED77Anna Fali
1024Deepesh P KolmetzBrazil2025-06-08Buckley Miller Wright RENEWAL27Elwin Sharvill
1025Nicolas Y GlickBrazil2025-05-26Commercial Press QUALIFIED11Ivan Magalhaes
1026Claire I ButtSpain2025-05-29Printing Dimensions NEW77Anna Fali
1027Rodrigues A SaylorsBrazil2025-06-12Chapman, Ross E Esq PROPOSAL29Onyama Limba
1028Munro O InouyeGermany2025-05-17Feiner Bros RENEWAL7Amy Elsner
1029Antonio W InouyeUnited Kingdom2025-05-25Feiner Bros RENEWAL23Onyama Limba
1030Leon H FlosiJapan2025-06-06Chanay, Jeffrey A Esq PROPOSAL73Anna Fali
1031Morrow S BowleyBrazil2025-05-18Chapman, Ross E Esq NEW21Stephen Shaw
1032Jennifer I GauchoGermany2025-05-20Printing Dimensions RENEWAL47Asiya Javayant
1033Jennifer G SaylorsFrance2025-06-07Chemel, James L Cpa NEGOTIATION92Ioni Bowcher
1034Costa B AmigonUnited Kingdom2025-05-30Benton, John B Jr UNQUALIFIED8Bernardo Dominic
1035Aruna U ChuiIndia2025-05-27Printing Dimensions NEGOTIATION22Bernardo Dominic
1036Faith U VocelkaUnited Kingdom2025-05-18Chapman, Ross E Esq RENEWAL82Ivan Magalhaes
1037Izzy K CaldareraAustralia2025-06-11Rangoni Of Florence RENEWAL69Ivan Magalhaes
1038Ashley J RimArgentina2025-05-19Dorl, James J Esq PROPOSAL31Asiya Javayant
1039Smith H BriddickIndia2025-05-23Chanay, Jeffrey A Esq NEGOTIATION66Bernardo Dominic
1040Chavez F FigeroaFrance2025-06-14Rousseaux, Michael Esq RENEWAL73Asiya Javayant
1041Emily L GillianIndia2025-06-13Benton, John B Jr UNQUALIFIED61Xuxue Feng
1042Smith B InouyeFrance2025-06-08King, Christopher A Esq NEGOTIATION90Ivan Magalhaes
1043Ivar F CaldareraIndia2025-05-19Rousseaux, Michael Esq NEW3Ioni Bowcher
1044Jones V SaylorsBrazil2025-05-21Chapman, Ross E Esq PROPOSAL28Amy Elsner
1045James D WaycottCanada2025-06-06Chanay, Jeffrey A Esq NEW29Xuxue Feng
1046Jones L FigeroaIndia2025-06-09Commercial Press QUALIFIED70Stephen Shaw
1047Jeanfrancois F FerenczJapan2025-06-15Chemel, James L Cpa UNQUALIFIED90Asiya Javayant
1048Darci M CampainFrance2025-06-01Feltz Printing Service NEGOTIATION86Elwin Sharvill
1049Silvio V WaycottArgentina2025-06-12Chanay, Jeffrey A Esq NEGOTIATION83Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Greenwood J IturbideGermanyIoni Bowcher NEGOTIATION
Munro N AmigonCanadaElwin Sharvill PROPOSAL
Francesco I MarrierGermanyIvan Magalhaes RENEWAL
Morrow F BologniaAustraliaElwin Sharvill RENEWAL
Leja P CaldareraIndiaIoni Bowcher NEW
Ivar N NickaItalyXuxue Feng QUALIFIED
Arvin M VocelkaJapanBernardo Dominic QUALIFIED
Nicolas R FlosiBrazilAnna Fali RENEWAL
Tony P ShinkoRussiaStephen Shaw NEGOTIATION
Tony Q MorascaGermanyAsiya Javayant NEW
Costa M CaudyFranceAmy Elsner UNQUALIFIED
Munro P SaylorsItalyIoni Bowcher QUALIFIED
Maisha O AmigonIndiaAmy Elsner UNQUALIFIED
Rodrigues K MarrierJapanIoni Bowcher RENEWAL
Jefferson Q RulapaughGermanyIvan Magalhaes RENEWAL
Alejandro X FollerCanadaBernardo Dominic PROPOSAL
Tony I CaldareraUnited KingdomAsiya Javayant UNQUALIFIED
Kaitlin S BowleyIndiaIoni Bowcher NEW
Mujtaba H FollerUnited KingdomXuxue Feng NEW
Leon G TollnerAustraliaAsiya Javayant UNQUALIFIED
Kaitlin L GauchoBrazilOnyama Limba NEGOTIATION
Jennifer U FollerRussiaIvan Magalhaes PROPOSAL
Jefferson N PoquetteIndiaStephen Shaw NEW
Antonio N SchemmerRussiaAsiya Javayant PROPOSAL
Alejandro I BriddickRussiaAmy Elsner PROPOSAL
Juan J PoquetteItalyAsiya Javayant NEGOTIATION
Ivar A CampainSpainAsiya Javayant RENEWAL
Darci I MacleadCanadaXuxue Feng NEW
Clifford G NickaItalyAmy Elsner QUALIFIED
Octavia O TollnerJapanStephen Shaw PROPOSAL
Adams M SergiJapanStephen Shaw RENEWAL
Adams S CaldareraSpainAmy Elsner UNQUALIFIED
Faith N ButtJapanStephen Shaw PROPOSAL
Chavez P GarufiUnited KingdomAmy Elsner PROPOSAL
Ivar V CampainFranceAmy Elsner QUALIFIED
Adams T PaprockiUnited KingdomAsiya Javayant NEW
Leja C MaletRussiaElwin Sharvill QUALIFIED
Alejandro C IturbideIndiaAnna Fali RENEWAL
Morrow H AlbaresAustraliaStephen Shaw UNQUALIFIED
Clifford L OldroydSpainBernardo Dominic RENEWAL
Misaki W SchemmerBrazilAsiya Javayant NEGOTIATION
Claire Y PerinFranceElwin Sharvill NEGOTIATION
Francesco W WhobreyAustraliaAsiya Javayant QUALIFIED
Jeanfrancois L ChuiBrazilElwin Sharvill RENEWAL
Ricardo Q PerinUnited KingdomBernardo Dominic RENEWAL
Jeanfrancois U StensethFranceAsiya Javayant NEW
Mayumi R PerinIndiaIvan Magalhaes RENEWAL
Antonio K SaylorsItalyElwin Sharvill NEGOTIATION
Antonio U TollnerIndiaOnyama Limba PROPOSAL
Francesco G StensethFranceIvan Magalhaes NEGOTIATION
Frozen Columns
Name
Munro H Marrier
James Y Malet
Antonio O Gillian
Francesco X Darakjy
Izzy L Perin
Smith R Ruta
Johnson B Kusko
Jennifer F Stockham
Nicolas D Rim
Costa T Bolognia
Johnson L Stenseth
Costa F Ruta
Stacey C Inouye
Smith R Ruta
Tony H Gaucho
Mujtaba G Whobrey
Ashley X Inouye
Faith S Ostrosky
Leon B Kolmetz
Arvin T Morasca
Darci G Paprocki
Francesco D Nicka
Ricardo N Amigon
Izzy G Waycott
Kadeem S Kusko
Jefferson A Chui
Leon M Foller
Mujtaba B Perin
Misaki Z Amigon
Sinclair Y Stenseth
Wickens W Paprocki
Wickens U Stenseth
Alejandro B Perin
Cody N Maclead
Antonio T Wieser
Silvio F Garufi
Leja N Nicka
Antonio N Doe
Munro K Venere
Deepesh I Maclead
Leja O Stenseth
Arvin G Bolognia
Alejandro B Malet
Jones R Venere
James J Butt
Murillo K Rim
Octavia Y Inouye
Greenwood C Tollner
James C Stenseth
Maisha I Chui
IdCountryDate
1000Italy2025-06-04
1001Brazil2025-06-11
1002Japan2025-05-26
1003Spain2025-05-30
1004Spain2025-05-30
1005Spain2025-05-31
1006India2025-06-11
1007Argentina2025-05-18
1008Spain2025-05-29
1009Australia2025-06-09
1010Brazil2025-05-21
1011Spain2025-06-07
1012Japan2025-06-06
1013Russia2025-05-31
1014Argentina2025-06-15
1015Russia2025-05-20
1016India2025-06-02
1017Spain2025-05-30
1018Italy2025-06-08
1019Australia2025-05-24
1020Italy2025-06-05
1021Argentina2025-05-23
1022Germany2025-05-28
1023Australia2025-06-15
1024Canada2025-05-31
1025Germany2025-05-28
1026Canada2025-06-09
1027Japan2025-05-27
1028Japan2025-05-26
1029France2025-06-10
1030United Kingdom2025-06-12
1031Germany2025-06-07
1032Italy2025-05-27
1033Argentina2025-06-05
1034France2025-06-06
1035Canada2025-06-10
1036Argentina2025-06-07
1037Russia2025-05-24
1038Brazil2025-06-03
1039Japan2025-05-23
1040United Kingdom2025-06-13
1041France2025-05-22
1042France2025-05-22
1043Argentina2025-05-23
1044Canada2025-06-07
1045Japan2025-05-29
1046France2025-05-30
1047Italy2025-06-15
1048Australia2025-05-29
1049Spain2025-05-17

On-Demand Data

NameIdCountryDate
Juan T Nestle1000Italy2025-06-04
Clifford K Nestle1001Australia2025-06-10
Murillo O Stenseth1002Canada2025-06-01
Chavez J Nicka1003Italy2025-06-14
Smith W Nicka1004Australia2025-05-20
Alejandro T Caldarera1005Australia2025-05-17
Francesco N Gillian1006India2025-06-04
Sinclair T Inouye1007Argentina2025-05-27
Izzy S Kolmetz1008Russia2025-06-03
Jennifer O Gaucho1009Russia2025-06-03
Arvin O Whobrey1010Russia2025-06-07
Munro Y Whobrey1011India2025-05-28
Mayumi L Briddick1012Japan2025-06-12
Aruna I Garufi1013United Kingdom2025-05-24
Alejandro X Saylors1014Canada2025-05-17
Greenwood I Oldroyd1015India2025-05-24
Alejandro L Inouye1016India2025-05-27
Murillo I Gillian1017Canada2025-05-18
Nicolas D Doe1018Russia2025-05-25
Antonio M Gillian1019Australia2025-05-31
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jones T SaylorsBrazilXuxue Feng UNQUALIFIED
James K BowleyAustraliaStephen Shaw RENEWAL
Aika L BriddickUnited KingdomElwin Sharvill NEGOTIATION
Isabel M WieserArgentinaIvan Magalhaes NEW
Julie F MaletSpainIoni Bowcher NEW
Jones R OstroskyCanadaIoni Bowcher NEW
Tony R ShinkoJapanBernardo Dominic RENEWAL
James N WaycottJapanAmy Elsner RENEWAL
Kadeem O MarrierArgentinaXuxue Feng PROPOSAL
Emily T VenereUnited KingdomOnyama Limba QUALIFIED
Greenwood W VocelkaCanadaBernardo Dominic RENEWAL
Cody O DarakjyGermanyStephen Shaw UNQUALIFIED
Emily B StockhamArgentinaXuxue Feng RENEWAL
Johnson A AmigonCanadaElwin Sharvill UNQUALIFIED
Octavia F KuskoRussiaAmy Elsner NEW
Faith R RulapaughBrazilIvan Magalhaes NEW
Wickens R StensethItalyIvan Magalhaes PROPOSAL
Silvio K AmigonAustraliaElwin Sharvill UNQUALIFIED
Stacey S InouyeGermanyAnna Fali PROPOSAL
Leon E SlusarskiArgentinaOnyama Limba UNQUALIFIED
Chavez K RoysterIndiaElwin Sharvill QUALIFIED
Mujtaba G BologniaArgentinaStephen Shaw RENEWAL
Emily F KuskoItalyIoni Bowcher PROPOSAL
Costa J KolmetzAustraliaAmy Elsner QUALIFIED
Jones B InouyeJapanElwin Sharvill PROPOSAL
Deepesh Z SchemmerCanadaAsiya Javayant QUALIFIED
Aditya H StockhamCanadaOnyama Limba NEW
Stacey K OstroskyBrazilElwin Sharvill PROPOSAL
Jennifer T AmigonUnited KingdomIoni Bowcher NEW
Johnson C FerenczGermanyStephen Shaw PROPOSAL
Sinclair L AlbaresRussiaBernardo Dominic NEW
Greenwood M WaycottIndiaIoni Bowcher NEGOTIATION
Darci Y StensethJapanAnna Fali QUALIFIED
Leja C SlusarskiUnited KingdomBernardo Dominic QUALIFIED
Emily H AlbaresIndiaAnna Fali QUALIFIED
Cody M WieserCanadaElwin Sharvill QUALIFIED
Greenwood Q SlusarskiFranceOnyama Limba NEGOTIATION
Julie Z DilliardGermanyAnna Fali NEGOTIATION
James K ChuiUnited KingdomOnyama Limba RENEWAL
Smith R AlbaresSpainElwin Sharvill 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>