Locale

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Bangla
Bosnian
Czech
Greek
Estonian
Persian
Finnish
Danish
Hindi
Indonesian
Icelandic
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
Uzbek
Vietnamese
Chinese
Chinese

Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

DataTable Scroll

Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.

Vertical
NameCountryRepresentativeStatus
Kaitlin OstroskyUnited KingdomAnna Fali UNQUALIFIED
Leon OldroydJapanOnyama Limba RENEWAL
Jones VocelkaRussiaElwin Sharvill UNQUALIFIED
Jennifer AmigonGermanyXuxue Feng RENEWAL
Jeanfrancois VenereBrazilIvan Magalhaes PROPOSAL
Sinclair WaycottCanadaBernardo Dominic RENEWAL
Johnson SergiCanadaAmy Elsner NEGOTIATION
Kaitlin OstroskyBrazilStephen Shaw PROPOSAL
David DarakjyBrazilXuxue Feng QUALIFIED
Francesco ShinkoArgentinaStephen Shaw NEGOTIATION
Johnson SergiGermanyBernardo Dominic RENEWAL
Adams MorascaBrazilXuxue Feng UNQUALIFIED
Francesco ShinkoRussiaAnna Fali NEGOTIATION
Rodrigues CampainAustraliaAnna Fali RENEWAL
David DarakjyCanadaAmy Elsner NEW
Murillo MaletIndiaStephen Shaw NEW
Ivar PaprockiItalyElwin Sharvill RENEWAL
Munro FerenczFranceAsiya Javayant PROPOSAL
Rodrigues CampainGermanyElwin Sharvill PROPOSAL
Darci PoquetteUnited KingdomAmy Elsner NEW
Greenwood BologniaRussiaElwin Sharvill UNQUALIFIED
Tony FollerGermanyAsiya Javayant RENEWAL
Leon OldroydUnited KingdomAnna Fali NEW
Nicolas IturbideBrazilAsiya Javayant NEGOTIATION
Aditya KuskoFranceAmy Elsner QUALIFIED
Faith GillianFranceAmy Elsner UNQUALIFIED
Adams MorascaBrazilAmy Elsner UNQUALIFIED
Jones VocelkaJapanAnna Fali NEW
Morrow RutaSpainElwin Sharvill NEW
Aika InouyeUnited KingdomElwin Sharvill UNQUALIFIED
Kaitlin OstroskyIndiaElwin Sharvill RENEWAL
Deepesh ChuiArgentinaOnyama Limba UNQUALIFIED
Ricardo GauchoJapanOnyama Limba RENEWAL
Faith GillianBrazilBernardo Dominic RENEWAL
Misaki RoysterSpainAmy Elsner UNQUALIFIED
Julie StensethAustraliaAmy Elsner RENEWAL
Mayumi KolmetzSpainOnyama Limba RENEWAL
Mayumi KolmetzUnited KingdomElwin Sharvill NEW
Clifford RimGermanyBernardo Dominic UNQUALIFIED
Tony FollerGermanyOnyama Limba UNQUALIFIED
Greenwood BologniaFranceBernardo Dominic UNQUALIFIED
Maria MarrierGermanyAnna Fali QUALIFIED
Cody SaylorsItalyAnna Fali RENEWAL
Nicolas IturbideArgentinaAnna Fali RENEWAL
Leja CaldareraFranceStephen Shaw QUALIFIED
Greenwood BologniaJapanStephen Shaw PROPOSAL
Adams MorascaGermanyElwin Sharvill QUALIFIED
Misaki RoysterJapanAnna Fali UNQUALIFIED
Emily WhobreyCanadaElwin Sharvill NEGOTIATION
Jeanfrancois VenereArgentinaAmy Elsner NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Claire TollnerFranceXuxue Feng PROPOSAL
Nicolas IturbideRussiaAsiya Javayant UNQUALIFIED
Kadeem FlosiGermanyIoni Bowcher UNQUALIFIED
Mayumi KolmetzItalyIoni Bowcher RENEWAL
Ashley DoeItalyElwin Sharvill QUALIFIED
Maria MarrierJapanElwin Sharvill QUALIFIED
Alejandro PerinSpainElwin Sharvill PROPOSAL
Ricardo GauchoSpainOnyama Limba RENEWAL
Jennifer AmigonUnited KingdomAmy Elsner UNQUALIFIED
Rodrigues CampainSpainXuxue Feng NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Greenwood BologniaFrance2025-10-04Feiner Bros NEGOTIATION5Ivan Magalhaes
1001Salvatore StockhamItaly2025-10-01Chapman, Ross E Esq RENEWAL66Anna Fali
1002Jefferson SchemmerUnited Kingdom2025-09-27Chapman, Ross E Esq NEW67Anna Fali
1003Antonio CaudyItaly2025-09-19Morlong Associates RENEWAL16Ivan Magalhaes
1004Cody SaylorsJapan2025-09-18Feiner Bros UNQUALIFIED33Amy Elsner
1005Sinclair WaycottJapan2025-10-14Rousseaux, Michael Esq NEGOTIATION93Asiya Javayant
1006Arvin AlbaresItaly2025-10-16Morlong Associates PROPOSAL48Amy Elsner
1007Antonio CaudyCanada2025-09-21Chemel, James L Cpa QUALIFIED44Ivan Magalhaes
1008Jefferson SchemmerBrazil2025-10-13Chanay, Jeffrey A Esq UNQUALIFIED57Asiya Javayant
1009Cody SaylorsUnited Kingdom2025-09-21Buckley Miller Wright RENEWAL98Asiya Javayant
1010Kadeem FlosiArgentina2025-09-24Rousseaux, Michael Esq NEW41Onyama Limba
1011Claire TollnerSpain2025-10-14Chemel, James L Cpa NEW10Ivan Magalhaes
1012Murillo MaletAustralia2025-09-29Chemel, James L Cpa RENEWAL19Bernardo Dominic
1013Misaki RoysterAustralia2025-09-20Dorl, James J Esq NEW42Stephen Shaw
1014Leon OldroydGermany2025-10-06Feltz Printing Service UNQUALIFIED92Bernardo Dominic
1015Arvin AlbaresBrazil2025-10-03Morlong Associates NEW26Bernardo Dominic
1016Silvio SlusarskiSpain2025-09-23Morlong Associates UNQUALIFIED87Bernardo Dominic
1017Misaki RoysterFrance2025-10-01Feltz Printing Service PROPOSAL7Amy Elsner
1018Morrow RutaGermany2025-10-08Rousseaux, Michael Esq QUALIFIED31Ioni Bowcher
1019Salvatore StockhamJapan2025-10-16Benton, John B Jr UNQUALIFIED8Ioni Bowcher
1020Tony FollerJapan2025-10-09Feiner Bros NEGOTIATION38Amy Elsner
1021Arvin AlbaresGermany2025-10-16Morlong Associates UNQUALIFIED18Amy Elsner
1022Silvio SlusarskiBrazil2025-10-06Rousseaux, Michael Esq RENEWAL75Stephen Shaw
1023Nicolas IturbideBrazil2025-09-30Dorl, James J Esq NEGOTIATION48Ivan Magalhaes
1024Octavia MaletGermany2025-09-19Chapman, Ross E Esq NEGOTIATION66Anna Fali
1025David DarakjyJapan2025-09-18Benton, John B Jr NEGOTIATION68Onyama Limba
1026Clifford RimIndia2025-10-12Commercial Press UNQUALIFIED87Anna Fali
1027Julie StensethJapan2025-09-29Rousseaux, Michael Esq UNQUALIFIED90Ivan Magalhaes
1028Darci PoquetteAustralia2025-09-30Rousseaux, Michael Esq QUALIFIED99Xuxue Feng
1029Murillo MaletFrance2025-10-15Buckley Miller Wright PROPOSAL17Ivan Magalhaes
1030Aditya KuskoBrazil2025-10-04Feltz Printing Service RENEWAL49Anna Fali
1031Juan WieserItaly2025-10-12Benton, John B Jr UNQUALIFIED52Xuxue Feng
1032Alejandro PerinIndia2025-10-17Chapman, Ross E Esq RENEWAL98Stephen Shaw
1033Jennifer AmigonItaly2025-10-08Commercial Press UNQUALIFIED24Xuxue Feng
1034Clifford RimIndia2025-09-18Chemel, James L Cpa PROPOSAL60Ioni Bowcher
1035Isabel BowleyGermany2025-10-14Printing Dimensions QUALIFIED74Xuxue Feng
1036Jeanfrancois VenereCanada2025-09-19Feiner Bros QUALIFIED45Asiya Javayant
1037Jeanfrancois VenereFrance2025-10-10Truhlar And Truhlar Attys NEGOTIATION57Asiya Javayant
1038Izzy GarufiBrazil2025-10-15Rousseaux, Michael Esq PROPOSAL80Bernardo Dominic
1039James ButtUnited Kingdom2025-10-04Chanay, Jeffrey A Esq RENEWAL34Ioni Bowcher
1040Jefferson SchemmerRussia2025-10-09Benton, John B Jr NEGOTIATION30Ivan Magalhaes
1041Jefferson SchemmerRussia2025-10-07Benton, John B Jr QUALIFIED64Onyama Limba
1042Kaitlin OstroskyJapan2025-10-02King, Christopher A Esq NEGOTIATION90Amy Elsner
1043Isabel BowleyIndia2025-10-13Chanay, Jeffrey A Esq NEGOTIATION4Ioni Bowcher
1044Jeanfrancois VenereGermany2025-09-28Rousseaux, Michael Esq QUALIFIED7Ivan Magalhaes
1045Julie StensethUnited Kingdom2025-10-04Commercial Press NEGOTIATION36Ivan Magalhaes
1046Kaitlin OstroskyGermany2025-10-12Chemel, James L Cpa NEGOTIATION83Asiya Javayant
1047Izzy GarufiBrazil2025-09-18Printing Dimensions RENEWAL34Xuxue Feng
1048Ricardo GauchoSpain2025-10-10Dorl, James J Esq UNQUALIFIED84Stephen Shaw
1049Cody SaylorsIndia2025-09-26Morlong Associates RENEWAL88Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Johnson SergiArgentinaAnna Fali NEW
Julie StensethGermanyOnyama Limba PROPOSAL
Faith GillianItalyIoni Bowcher PROPOSAL
Murillo MaletSpainIoni Bowcher NEW
Leja CaldareraSpainAmy Elsner RENEWAL
Aika InouyeSpainAmy Elsner PROPOSAL
Aruna FigeroaIndiaIvan Magalhaes PROPOSAL
Mujtaba NickaFranceIoni Bowcher QUALIFIED
Claire TollnerSpainStephen Shaw QUALIFIED
Johnson SergiJapanIvan Magalhaes NEW
Mayumi KolmetzUnited KingdomOnyama Limba NEGOTIATION
James ButtCanadaXuxue Feng NEW
Antonio CaudyUnited KingdomIvan Magalhaes QUALIFIED
Morrow RutaBrazilXuxue Feng NEGOTIATION
Adams MorascaCanadaElwin Sharvill NEW
Leja CaldareraGermanyElwin Sharvill NEGOTIATION
Cody SaylorsArgentinaXuxue Feng PROPOSAL
Maria MarrierFranceOnyama Limba NEW
Mayumi KolmetzAustraliaIvan Magalhaes RENEWAL
David DarakjyBrazilElwin Sharvill RENEWAL
Chavez BriddickRussiaIoni Bowcher PROPOSAL
Ashley DoeFranceAnna Fali NEW
Wickens NestleCanadaBernardo Dominic RENEWAL
Francesco ShinkoSpainElwin Sharvill RENEWAL
Chavez BriddickItalyOnyama Limba NEGOTIATION
Juan WieserIndiaIvan Magalhaes PROPOSAL
Jefferson SchemmerItalyBernardo Dominic RENEWAL
Ivar PaprockiFranceAsiya Javayant PROPOSAL
Clifford RimAustraliaXuxue Feng UNQUALIFIED
Faith GillianSpainStephen Shaw RENEWAL
Aditya KuskoRussiaIvan Magalhaes NEW
Deepesh ChuiJapanIvan Magalhaes PROPOSAL
Munro FerenczJapanIoni Bowcher QUALIFIED
James ButtGermanyIoni Bowcher NEW
Maisha RulapaughUnited KingdomIoni Bowcher RENEWAL
Leon OldroydAustraliaStephen Shaw PROPOSAL
Nicolas IturbideRussiaStephen Shaw NEW
Isabel BowleyJapanOnyama Limba PROPOSAL
Kadeem FlosiSpainAsiya Javayant NEW
Sinclair WaycottFranceStephen Shaw QUALIFIED
Izzy GarufiUnited KingdomIvan Magalhaes RENEWAL
Kadeem FlosiSpainAsiya Javayant NEW
David DarakjyFranceAnna Fali QUALIFIED
Aruna FigeroaAustraliaAmy Elsner PROPOSAL
Julie StensethItalyBernardo Dominic RENEWAL
Wickens NestleUnited KingdomAmy Elsner UNQUALIFIED
Chavez BriddickFranceIoni Bowcher RENEWAL
Faith GillianRussiaStephen Shaw UNQUALIFIED
Claire TollnerItalyBernardo Dominic RENEWAL
Smith GlickUnited KingdomXuxue Feng PROPOSAL
Frozen Columns
Name
David Darakjy
James Butt
Greenwood Bolognia
Stacey Maclead
Johnson Sergi
Francesco Shinko
Silvio Slusarski
Leja Caldarera
Jeanfrancois Venere
Wickens Nestle
Maisha Rulapaugh
Jefferson Schemmer
Sinclair Waycott
Mujtaba Nicka
Clifford Rim
Arvin Albares
Octavia Malet
Cody Saylors
Nicolas Iturbide
Johnson Sergi
Adams Morasca
Juan Wieser
Silvio Slusarski
Salvatore Stockham
Chavez Briddick
Maria Marrier
Stacey Maclead
Murillo Malet
Francesco Shinko
Faith Gillian
Isabel Bowley
Kaitlin Ostrosky
Ricardo Gaucho
Darci Poquette
Ricardo Gaucho
Antonio Caudy
Octavia Malet
Francesco Shinko
Kaitlin Ostrosky
Maria Marrier
Maisha Rulapaugh
Jones Vocelka
Aruna Figeroa
Cody Saylors
Deepesh Chui
Jefferson Schemmer
Faith Gillian
Ricardo Gaucho
Tony Foller
Isabel Bowley
IdCountryDate
1000Italy2025-10-10
1001United Kingdom2025-09-18
1002India2025-10-12
1003Canada2025-09-22
1004India2025-09-29
1005Brazil2025-10-12
1006Japan2025-10-15
1007Germany2025-10-01
1008Russia2025-10-15
1009France2025-10-17
1010France2025-10-17
1011Canada2025-09-30
1012Canada2025-10-10
1013Germany2025-10-04
1014Japan2025-09-19
1015Brazil2025-10-08
1016France2025-09-20
1017Italy2025-10-14
1018India2025-10-09
1019Russia2025-10-05
1020United Kingdom2025-10-03
1021Australia2025-09-30
1022Japan2025-10-01
1023Russia2025-09-30
1024Japan2025-10-12
1025Brazil2025-10-10
1026India2025-10-05
1027India2025-09-18
1028Spain2025-10-08
1029Japan2025-10-01
1030Brazil2025-10-11
1031Spain2025-09-20
1032United Kingdom2025-09-22
1033France2025-10-11
1034Russia2025-10-16
1035Spain2025-09-30
1036Brazil2025-10-07
1037Italy2025-10-13
1038United Kingdom2025-10-17
1039Italy2025-10-12
1040Germany2025-10-12
1041India2025-10-10
1042India2025-10-09
1043Australia2025-10-15
1044Argentina2025-10-16
1045Argentina2025-10-04
1046India2025-10-12
1047Germany2025-10-03
1048Italy2025-10-03
1049Canada2025-10-08

On-Demand Data

NameIdCountryDate
Ivar Paprocki1000Argentina2025-09-23
Izzy Garufi1001Italy2025-10-16
Cody Saylors1002Italy2025-10-17
Isabel Bowley1003Italy2025-09-25
Claire Tollner1004Spain2025-10-08
Murillo Malet1005Australia2025-10-16
Johnson Sergi1006France2025-10-07
David Darakjy1007Italy2025-09-27
Misaki Royster1008Brazil2025-09-20
Arvin Albares1009Germany2025-10-08
Rodrigues Campain1010United Kingdom2025-10-02
Chavez Briddick1011Australia2025-10-02
Arvin Albares1012Canada2025-09-26
Johnson Sergi1013Japan2025-10-10
Jones Vocelka1014Canada2025-10-12
Jennifer Amigon1015Argentina2025-09-18
Kaitlin Ostrosky1016France2025-10-16
Mayumi Kolmetz1017Germany2025-10-02
Juan Wieser1018Brazil2025-09-26
Johnson Sergi1019Spain2025-10-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
David DarakjyAustraliaAnna Fali QUALIFIED
Claire TollnerUnited KingdomOnyama Limba RENEWAL
Leon OldroydAustraliaBernardo Dominic NEGOTIATION
Alejandro PerinFranceXuxue Feng NEGOTIATION
Aika InouyeAustraliaElwin Sharvill UNQUALIFIED
Adams MorascaRussiaXuxue Feng NEGOTIATION
Julie StensethIndiaXuxue Feng QUALIFIED
Jennifer AmigonAustraliaOnyama Limba NEGOTIATION
Jeanfrancois VenereAustraliaAsiya Javayant RENEWAL
Francesco ShinkoUnited KingdomIoni Bowcher NEW
Sinclair WaycottJapanElwin Sharvill PROPOSAL
Clifford RimBrazilElwin Sharvill NEGOTIATION
Aditya KuskoIndiaElwin Sharvill RENEWAL
Smith GlickItalyIvan Magalhaes UNQUALIFIED
Cody SaylorsCanadaIoni Bowcher UNQUALIFIED
Izzy GarufiRussiaStephen Shaw NEW
Leon OldroydCanadaStephen Shaw NEW
Ashley DoeItalyXuxue Feng NEGOTIATION
Jeanfrancois VenereIndiaIvan Magalhaes RENEWAL
Faith GillianIndiaXuxue Feng NEGOTIATION
Isabel BowleyFranceIoni Bowcher PROPOSAL
Chavez BriddickBrazilBernardo Dominic UNQUALIFIED
Maria MarrierCanadaXuxue Feng NEGOTIATION
Murillo MaletArgentinaXuxue Feng RENEWAL
Silvio SlusarskiArgentinaIoni Bowcher PROPOSAL
James ButtItalyBernardo Dominic QUALIFIED
Alejandro PerinBrazilIoni Bowcher UNQUALIFIED
Aditya KuskoArgentinaXuxue Feng NEW
Arvin AlbaresJapanAnna Fali PROPOSAL
Sinclair WaycottAustraliaAsiya Javayant NEGOTIATION
Deepesh ChuiBrazilAmy Elsner UNQUALIFIED
Morrow RutaBrazilXuxue Feng QUALIFIED
Kaitlin OstroskyBrazilAmy Elsner QUALIFIED
Munro FerenczCanadaIoni Bowcher NEGOTIATION
Juan WieserGermanyAnna Fali PROPOSAL
Silvio SlusarskiAustraliaOnyama Limba RENEWAL
Ricardo GauchoSpainElwin Sharvill PROPOSAL
Isabel BowleyRussiaIoni Bowcher QUALIFIED
Smith GlickJapanAmy Elsner RENEWAL
Morrow RutaBrazilAsiya Javayant 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.statusName}">#{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.statusName}">#{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.statusName}">#{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.statusName}">#{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.statusName}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

</h:form>