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
Alejandro PerinIndiaIvan Magalhaes NEGOTIATION
Rodrigues CampainJapanStephen Shaw NEGOTIATION
Costa DilliardCanadaBernardo Dominic RENEWAL
Ricardo GauchoGermanyIoni Bowcher QUALIFIED
Jennifer AmigonRussiaAsiya Javayant PROPOSAL
Salvatore StockhamUnited KingdomStephen Shaw UNQUALIFIED
Stacey MacleadItalyBernardo Dominic UNQUALIFIED
Aika InouyeAustraliaOnyama Limba QUALIFIED
Darci PoquetteUnited KingdomStephen Shaw PROPOSAL
Kadeem FlosiCanadaIoni Bowcher UNQUALIFIED
Sinclair WaycottCanadaAnna Fali UNQUALIFIED
Silvio SlusarskiIndiaXuxue Feng UNQUALIFIED
Murillo MaletArgentinaElwin Sharvill PROPOSAL
Leja CaldareraGermanyIoni Bowcher RENEWAL
Aruna FigeroaGermanyOnyama Limba RENEWAL
Leja CaldareraBrazilAmy Elsner NEW
David DarakjyGermanyIoni Bowcher PROPOSAL
Ashley DoeAustraliaOnyama Limba RENEWAL
Salvatore StockhamGermanyIoni Bowcher UNQUALIFIED
Mujtaba NickaRussiaStephen Shaw RENEWAL
Arvin AlbaresFranceAmy Elsner NEGOTIATION
Wickens NestleGermanyAsiya Javayant QUALIFIED
Mayumi KolmetzCanadaIvan Magalhaes UNQUALIFIED
Leja CaldareraJapanElwin Sharvill NEW
Smith GlickArgentinaIvan Magalhaes PROPOSAL
Ivar PaprockiItalyIoni Bowcher NEGOTIATION
Rodrigues CampainFranceStephen Shaw RENEWAL
Octavia MaletBrazilIvan Magalhaes RENEWAL
Murillo MaletBrazilStephen Shaw QUALIFIED
Aika InouyeIndiaBernardo Dominic NEGOTIATION
Leja CaldareraAustraliaAnna Fali QUALIFIED
Aruna FigeroaUnited KingdomIvan Magalhaes RENEWAL
Maria MarrierItalyXuxue Feng QUALIFIED
Ashley DoeSpainAsiya Javayant NEGOTIATION
Jefferson SchemmerJapanIoni Bowcher QUALIFIED
Sinclair WaycottUnited KingdomElwin Sharvill QUALIFIED
Clifford RimBrazilAnna Fali QUALIFIED
Maisha RulapaughJapanAsiya Javayant NEGOTIATION
Emily WhobreyArgentinaAnna Fali NEGOTIATION
Francesco ShinkoIndiaAsiya Javayant PROPOSAL
Ashley DoeJapanAmy Elsner PROPOSAL
James ButtItalyBernardo Dominic PROPOSAL
Ivar PaprockiSpainStephen Shaw NEGOTIATION
Leja CaldareraBrazilIoni Bowcher PROPOSAL
Wickens NestleAustraliaElwin Sharvill NEGOTIATION
Faith GillianArgentinaOnyama Limba UNQUALIFIED
Misaki RoysterBrazilOnyama Limba QUALIFIED
Aika InouyeCanadaIvan Magalhaes PROPOSAL
Deepesh ChuiSpainAmy Elsner QUALIFIED
Nicolas IturbideSpainElwin Sharvill PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Juan WieserRussiaBernardo Dominic NEW
Claire TollnerUnited KingdomIoni Bowcher UNQUALIFIED
Adams MorascaCanadaStephen Shaw UNQUALIFIED
Munro FerenczIndiaStephen Shaw UNQUALIFIED
Adams MorascaAustraliaStephen Shaw RENEWAL
Stacey MacleadJapanBernardo Dominic QUALIFIED
David DarakjyUnited KingdomXuxue Feng NEGOTIATION
Costa DilliardGermanyIvan Magalhaes NEW
Misaki RoysterItalyBernardo Dominic NEW
Julie StensethItalyXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jennifer AmigonBrazil2025-08-15Chemel, James L Cpa QUALIFIED15Ivan Magalhaes
1001Kadeem FlosiJapan2025-08-21Feltz Printing Service UNQUALIFIED97Ioni Bowcher
1002Juan WieserItaly2025-08-28Truhlar And Truhlar Attys QUALIFIED84Stephen Shaw
1003Deepesh ChuiArgentina2025-08-16Feltz Printing Service UNQUALIFIED34Ivan Magalhaes
1004Munro FerenczFrance2025-08-30Printing Dimensions UNQUALIFIED69Anna Fali
1005Nicolas IturbideBrazil2025-08-24Chanay, Jeffrey A Esq UNQUALIFIED79Stephen Shaw
1006Kadeem FlosiIndia2025-08-11Feiner Bros NEGOTIATION63Amy Elsner
1007Jennifer AmigonItaly2025-08-11Chemel, James L Cpa PROPOSAL45Xuxue Feng
1008Ricardo GauchoCanada2025-08-17Printing Dimensions NEGOTIATION48Xuxue Feng
1009Maisha RulapaughAustralia2025-08-14Feiner Bros NEGOTIATION91Elwin Sharvill
1010Silvio SlusarskiCanada2025-08-29Buckley Miller Wright PROPOSAL48Onyama Limba
1011Antonio CaudyGermany2025-09-02Benton, John B Jr NEW97Onyama Limba
1012James ButtRussia2025-08-14Chapman, Ross E Esq QUALIFIED17Bernardo Dominic
1013Darci PoquetteFrance2025-09-03Rangoni Of Florence UNQUALIFIED80Elwin Sharvill
1014Mayumi KolmetzBrazil2025-08-16Rousseaux, Michael Esq QUALIFIED0Elwin Sharvill
1015Misaki RoysterUnited Kingdom2025-08-17Dorl, James J Esq RENEWAL65Asiya Javayant
1016Misaki RoysterUnited Kingdom2025-09-01Dorl, James J Esq RENEWAL83Xuxue Feng
1017James ButtSpain2025-09-02Commercial Press RENEWAL38Xuxue Feng
1018Clifford RimAustralia2025-09-06Truhlar And Truhlar Attys QUALIFIED82Amy Elsner
1019Octavia MaletSpain2025-08-19Feltz Printing Service QUALIFIED9Onyama Limba
1020Misaki RoysterItaly2025-09-02Benton, John B Jr UNQUALIFIED39Ivan Magalhaes
1021Adams MorascaSpain2025-08-30Truhlar And Truhlar Attys PROPOSAL88Asiya Javayant
1022Johnson SergiAustralia2025-09-07Chapman, Ross E Esq NEW24Stephen Shaw
1023Adams MorascaAustralia2025-08-14Feltz Printing Service NEGOTIATION18Bernardo Dominic
1024Darci PoquetteFrance2025-09-02Printing Dimensions NEW1Bernardo Dominic
1025Sinclair WaycottJapan2025-08-12Printing Dimensions RENEWAL38Ioni Bowcher
1026Arvin AlbaresSpain2025-08-31Morlong Associates UNQUALIFIED74Ioni Bowcher
1027Rodrigues CampainRussia2025-08-19Rousseaux, Michael Esq QUALIFIED11Elwin Sharvill
1028Wickens NestleRussia2025-08-13Printing Dimensions NEGOTIATION68Amy Elsner
1029Murillo MaletJapan2025-09-08Rousseaux, Michael Esq RENEWAL75Bernardo Dominic
1030Arvin AlbaresItaly2025-08-18Feltz Printing Service RENEWAL20Asiya Javayant
1031Kaitlin OstroskyCanada2025-09-04Truhlar And Truhlar Attys QUALIFIED80Ivan Magalhaes
1032Maria MarrierBrazil2025-09-09Feiner Bros NEW32Bernardo Dominic
1033Misaki RoysterSpain2025-08-15Rousseaux, Michael Esq NEW99Bernardo Dominic
1034Faith GillianJapan2025-08-14Chanay, Jeffrey A Esq NEGOTIATION57Asiya Javayant
1035Kadeem FlosiJapan2025-09-06Chapman, Ross E Esq PROPOSAL67Amy Elsner
1036Arvin AlbaresBrazil2025-08-21Rangoni Of Florence QUALIFIED10Ioni Bowcher
1037Munro FerenczJapan2025-08-12Truhlar And Truhlar Attys QUALIFIED60Asiya Javayant
1038Emily WhobreySpain2025-09-04King, Christopher A Esq NEGOTIATION93Elwin Sharvill
1039Johnson SergiRussia2025-08-28Dorl, James J Esq RENEWAL36Elwin Sharvill
1040Mujtaba NickaAustralia2025-09-08Chanay, Jeffrey A Esq NEGOTIATION87Anna Fali
1041Jeanfrancois VenereJapan2025-09-06Dorl, James J Esq UNQUALIFIED85Onyama Limba
1042Isabel BowleyFrance2025-09-03Rousseaux, Michael Esq QUALIFIED69Ioni Bowcher
1043Alejandro PerinGermany2025-09-01Dorl, James J Esq NEGOTIATION80Ioni Bowcher
1044Ashley DoeArgentina2025-08-31Rousseaux, Michael Esq NEGOTIATION73Anna Fali
1045Maisha RulapaughRussia2025-09-01Printing Dimensions PROPOSAL39Amy Elsner
1046Francesco ShinkoIndia2025-09-02Rousseaux, Michael Esq UNQUALIFIED24Stephen Shaw
1047Jeanfrancois VenereUnited Kingdom2025-08-20Truhlar And Truhlar Attys PROPOSAL61Elwin Sharvill
1048Antonio CaudyJapan2025-08-27Truhlar And Truhlar Attys RENEWAL71Bernardo Dominic
1049Aditya KuskoGermany2025-09-09Morlong Associates NEGOTIATION47Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Isabel BowleyFranceAsiya Javayant UNQUALIFIED
Aruna FigeroaSpainBernardo Dominic NEGOTIATION
Munro FerenczItalyAnna Fali NEGOTIATION
Wickens NestleRussiaOnyama Limba UNQUALIFIED
Munro FerenczJapanStephen Shaw NEGOTIATION
Munro FerenczItalyBernardo Dominic NEW
Munro FerenczJapanBernardo Dominic RENEWAL
Francesco ShinkoFranceBernardo Dominic QUALIFIED
Smith GlickAustraliaElwin Sharvill QUALIFIED
Chavez BriddickAustraliaXuxue Feng RENEWAL
Sinclair WaycottGermanyBernardo Dominic QUALIFIED
Kadeem FlosiUnited KingdomStephen Shaw QUALIFIED
Ashley DoeIndiaAmy Elsner PROPOSAL
David DarakjyFranceIoni Bowcher NEGOTIATION
Jeanfrancois VenereJapanAmy Elsner NEW
Clifford RimAustraliaStephen Shaw QUALIFIED
Mujtaba NickaCanadaIvan Magalhaes PROPOSAL
Aika InouyeAustraliaElwin Sharvill UNQUALIFIED
Arvin AlbaresJapanXuxue Feng PROPOSAL
Julie StensethArgentinaAmy Elsner NEW
Emily WhobreySpainAmy Elsner NEW
Costa DilliardJapanStephen Shaw RENEWAL
Francesco ShinkoFranceAmy Elsner PROPOSAL
Wickens NestleGermanyAmy Elsner RENEWAL
Claire TollnerCanadaOnyama Limba NEGOTIATION
Stacey MacleadAustraliaIoni Bowcher PROPOSAL
David DarakjyAustraliaStephen Shaw UNQUALIFIED
Ricardo GauchoItalyIoni Bowcher QUALIFIED
Claire TollnerCanadaStephen Shaw NEW
Tony FollerArgentinaAnna Fali NEW
Chavez BriddickSpainIoni Bowcher PROPOSAL
Maria MarrierJapanXuxue Feng PROPOSAL
Clifford RimJapanIvan Magalhaes UNQUALIFIED
Darci PoquetteItalyAmy Elsner PROPOSAL
Smith GlickCanadaOnyama Limba RENEWAL
Antonio CaudyGermanyXuxue Feng NEW
Leon OldroydFranceOnyama Limba NEW
Jeanfrancois VenereGermanyAmy Elsner NEW
Faith GillianJapanAnna Fali RENEWAL
Ricardo GauchoCanadaBernardo Dominic PROPOSAL
Maisha RulapaughJapanIoni Bowcher NEGOTIATION
Julie StensethCanadaIoni Bowcher PROPOSAL
Salvatore StockhamArgentinaAmy Elsner NEGOTIATION
Salvatore StockhamCanadaStephen Shaw PROPOSAL
Octavia MaletItalyXuxue Feng UNQUALIFIED
Arvin AlbaresGermanyXuxue Feng QUALIFIED
Wickens NestleRussiaElwin Sharvill NEGOTIATION
Mujtaba NickaArgentinaAnna Fali UNQUALIFIED
Munro FerenczArgentinaAnna Fali NEW
Mayumi KolmetzSpainElwin Sharvill UNQUALIFIED
Frozen Columns
Name
Rodrigues Campain
Isabel Bowley
Costa Dilliard
Julie Stenseth
Wickens Nestle
Leja Caldarera
Chavez Briddick
Maria Marrier
Izzy Garufi
Claire Tollner
Stacey Maclead
Leja Caldarera
Arvin Albares
Faith Gillian
Adams Morasca
Tony Foller
Chavez Briddick
Greenwood Bolognia
Murillo Malet
Leja Caldarera
Sinclair Waycott
Aika Inouye
Morrow Ruta
Aditya Kusko
Deepesh Chui
Wickens Nestle
Misaki Royster
Aruna Figeroa
Salvatore Stockham
Mujtaba Nicka
Misaki Royster
Murillo Malet
Morrow Ruta
Costa Dilliard
Smith Glick
Aruna Figeroa
Greenwood Bolognia
Cody Saylors
Ricardo Gaucho
Juan Wieser
Greenwood Bolognia
Claire Tollner
Wickens Nestle
Aditya Kusko
Tony Foller
Octavia Malet
Maisha Rulapaugh
Darci Poquette
Ivar Paprocki
Kadeem Flosi
IdCountryDate
1000Spain2025-08-27
1001United Kingdom2025-09-06
1002France2025-08-29
1003France2025-08-28
1004Spain2025-08-21
1005United Kingdom2025-08-15
1006Italy2025-08-24
1007Italy2025-09-05
1008Japan2025-08-12
1009Germany2025-08-30
1010Russia2025-08-22
1011Brazil2025-08-19
1012Italy2025-08-16
1013Japan2025-08-30
1014Italy2025-08-15
1015United Kingdom2025-08-17
1016Brazil2025-08-20
1017France2025-08-31
1018India2025-08-31
1019Brazil2025-09-08
1020Australia2025-08-15
1021Germany2025-08-31
1022Japan2025-09-06
1023Italy2025-09-06
1024United Kingdom2025-08-11
1025Canada2025-08-22
1026India2025-08-14
1027Spain2025-08-15
1028Italy2025-08-12
1029India2025-08-16
1030Russia2025-08-21
1031Argentina2025-08-11
1032United Kingdom2025-08-20
1033Spain2025-08-11
1034Spain2025-08-24
1035Russia2025-09-08
1036Germany2025-09-02
1037Australia2025-09-08
1038Italy2025-08-20
1039India2025-08-18
1040Canada2025-09-03
1041Argentina2025-08-19
1042Brazil2025-08-25
1043Russia2025-08-18
1044Argentina2025-08-22
1045India2025-08-26
1046Germany2025-08-11
1047Argentina2025-09-09
1048Russia2025-09-05
1049India2025-08-12

On-Demand Data

NameIdCountryDate
Izzy Garufi1000Germany2025-08-23
Silvio Slusarski1001Italy2025-08-11
Aika Inouye1002India2025-08-31
Johnson Sergi1003Australia2025-08-27
Mujtaba Nicka1004India2025-09-02
Isabel Bowley1005Japan2025-08-20
Rodrigues Campain1006Argentina2025-09-03
Ricardo Gaucho1007Argentina2025-08-15
Jefferson Schemmer1008Australia2025-08-20
Izzy Garufi1009United Kingdom2025-09-08
Jennifer Amigon1010Brazil2025-08-17
Aditya Kusko1011India2025-08-21
Kaitlin Ostrosky1012Germany2025-08-14
Misaki Royster1013Russia2025-08-20
Morrow Ruta1014Germany2025-08-27
Jeanfrancois Venere1015Italy2025-09-01
Maria Marrier1016Japan2025-09-09
Juan Wieser1017Germany2025-09-07
Arvin Albares1018France2025-08-22
Tony Foller1019Germany2025-08-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Mujtaba NickaCanadaIoni Bowcher UNQUALIFIED
Maria MarrierUnited KingdomAsiya Javayant RENEWAL
Wickens NestleRussiaBernardo Dominic NEW
Mujtaba NickaBrazilXuxue Feng NEGOTIATION
Ashley DoeFranceStephen Shaw NEGOTIATION
Antonio CaudyIndiaAsiya Javayant NEGOTIATION
Cody SaylorsUnited KingdomIvan Magalhaes UNQUALIFIED
Izzy GarufiCanadaElwin Sharvill RENEWAL
Rodrigues CampainIndiaIvan Magalhaes UNQUALIFIED
Leja CaldareraJapanOnyama Limba UNQUALIFIED
Ashley DoeBrazilOnyama Limba NEW
Cody SaylorsGermanyElwin Sharvill PROPOSAL
Claire TollnerCanadaOnyama Limba NEW
Kaitlin OstroskyJapanElwin Sharvill UNQUALIFIED
Kadeem FlosiRussiaAsiya Javayant RENEWAL
Maisha RulapaughFranceIvan Magalhaes PROPOSAL
Juan WieserIndiaAmy Elsner QUALIFIED
Nicolas IturbideUnited KingdomAmy Elsner RENEWAL
Arvin AlbaresFranceStephen Shaw UNQUALIFIED
Ivar PaprockiIndiaOnyama Limba PROPOSAL
Sinclair WaycottRussiaAnna Fali UNQUALIFIED
Silvio SlusarskiJapanBernardo Dominic NEW
Ashley DoeCanadaStephen Shaw NEW
David DarakjyArgentinaStephen Shaw NEW
Jefferson SchemmerGermanyIvan Magalhaes PROPOSAL
Salvatore StockhamGermanyIoni Bowcher PROPOSAL
Arvin AlbaresArgentinaIoni Bowcher PROPOSAL
Kadeem FlosiSpainAmy Elsner NEGOTIATION
Murillo MaletCanadaAmy Elsner NEW
Wickens NestleIndiaIvan Magalhaes NEW
Kadeem FlosiRussiaAsiya Javayant UNQUALIFIED
Rodrigues CampainGermanyStephen Shaw NEW
Sinclair WaycottBrazilIvan Magalhaes QUALIFIED
Rodrigues CampainBrazilAnna Fali UNQUALIFIED
Darci PoquetteCanadaIvan Magalhaes QUALIFIED
Arvin AlbaresBrazilAmy Elsner RENEWAL
Faith GillianGermanyElwin Sharvill RENEWAL
Juan WieserItalyStephen Shaw RENEWAL
Tony FollerItalyBernardo Dominic NEW
Jeanfrancois VenereArgentinaAsiya Javayant PROPOSAL

<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>