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
Leja CaldareraSpainStephen Shaw NEW
Julie StensethCanadaBernardo Dominic NEGOTIATION
Greenwood BologniaArgentinaElwin Sharvill PROPOSAL
Claire TollnerBrazilAnna Fali NEW
Johnson SergiGermanyBernardo Dominic NEW
Kaitlin OstroskyUnited KingdomXuxue Feng PROPOSAL
Leon OldroydGermanyAsiya Javayant NEGOTIATION
Costa DilliardAustraliaOnyama Limba PROPOSAL
Maria MarrierArgentinaElwin Sharvill RENEWAL
Morrow RutaUnited KingdomAsiya Javayant PROPOSAL
James ButtBrazilXuxue Feng UNQUALIFIED
Maria MarrierFranceXuxue Feng NEW
Juan WieserFranceAsiya Javayant NEGOTIATION
Jefferson SchemmerGermanyAnna Fali NEGOTIATION
Leon OldroydIndiaAsiya Javayant RENEWAL
Claire TollnerAustraliaIvan Magalhaes RENEWAL
Ivar PaprockiAustraliaIoni Bowcher PROPOSAL
Salvatore StockhamItalyOnyama Limba QUALIFIED
Aruna FigeroaRussiaBernardo Dominic NEGOTIATION
Murillo MaletJapanAmy Elsner NEW
Ivar PaprockiBrazilBernardo Dominic UNQUALIFIED
Isabel BowleyAustraliaIoni Bowcher NEW
Cody SaylorsFranceAsiya Javayant NEW
James ButtAustraliaAsiya Javayant NEW
Aika InouyeSpainElwin Sharvill PROPOSAL
Aika InouyeAustraliaAnna Fali RENEWAL
Clifford RimAustraliaAmy Elsner NEGOTIATION
Deepesh ChuiBrazilStephen Shaw RENEWAL
Aika InouyeArgentinaIvan Magalhaes UNQUALIFIED
Misaki RoysterFranceStephen Shaw RENEWAL
Deepesh ChuiGermanyStephen Shaw QUALIFIED
Aika InouyeFranceBernardo Dominic NEGOTIATION
Darci PoquetteItalyStephen Shaw UNQUALIFIED
Leon OldroydRussiaOnyama Limba QUALIFIED
Smith GlickIndiaStephen Shaw NEGOTIATION
Wickens NestleGermanyAnna Fali NEW
Darci PoquetteItalyIvan Magalhaes NEW
Francesco ShinkoIndiaAnna Fali NEW
Nicolas IturbideBrazilIvan Magalhaes QUALIFIED
Kadeem FlosiBrazilIoni Bowcher QUALIFIED
Jeanfrancois VenereFranceXuxue Feng NEW
Aditya KuskoCanadaIvan Magalhaes NEGOTIATION
Clifford RimUnited KingdomIoni Bowcher NEW
Wickens NestleJapanOnyama Limba QUALIFIED
Chavez BriddickItalyXuxue Feng UNQUALIFIED
Jeanfrancois VenereSpainIvan Magalhaes PROPOSAL
Aditya KuskoAustraliaAmy Elsner UNQUALIFIED
Kaitlin OstroskyRussiaAmy Elsner QUALIFIED
Julie StensethGermanyIvan Magalhaes UNQUALIFIED
Kaitlin OstroskyArgentinaAnna Fali UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Jeanfrancois VenereBrazilIvan Magalhaes PROPOSAL
James ButtIndiaAsiya Javayant QUALIFIED
Johnson SergiRussiaStephen Shaw QUALIFIED
Ricardo GauchoRussiaBernardo Dominic NEW
Aruna FigeroaIndiaBernardo Dominic PROPOSAL
Aruna FigeroaArgentinaIoni Bowcher NEGOTIATION
Isabel BowleyFranceOnyama Limba RENEWAL
Silvio SlusarskiBrazilIvan Magalhaes NEGOTIATION
Nicolas IturbideFranceAnna Fali NEW
Tony FollerRussiaAnna Fali UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Deepesh ChuiArgentina2025-07-24Feiner Bros NEW54Amy Elsner
1001Stacey MacleadAustralia2025-07-29Feiner Bros NEGOTIATION93Bernardo Dominic
1002Jones VocelkaItaly2025-07-24Rangoni Of Florence RENEWAL2Ivan Magalhaes
1003Wickens NestleGermany2025-08-03Commercial Press NEW32Amy Elsner
1004Johnson SergiSpain2025-07-20Commercial Press QUALIFIED49Ivan Magalhaes
1005Jefferson SchemmerGermany2025-08-11Morlong Associates NEGOTIATION12Bernardo Dominic
1006Chavez BriddickArgentina2025-07-18Commercial Press UNQUALIFIED71Asiya Javayant
1007Ashley DoeCanada2025-08-04Chanay, Jeffrey A Esq NEGOTIATION48Onyama Limba
1008Darci PoquetteSpain2025-08-04Feiner Bros PROPOSAL30Amy Elsner
1009Morrow RutaFrance2025-07-30Rousseaux, Michael Esq NEGOTIATION90Amy Elsner
1010Aika InouyeFrance2025-07-29Commercial Press UNQUALIFIED25Asiya Javayant
1011Faith GillianJapan2025-08-02Feltz Printing Service UNQUALIFIED68Anna Fali
1012Munro FerenczAustralia2025-07-27Chanay, Jeffrey A Esq NEGOTIATION2Anna Fali
1013Smith GlickFrance2025-07-18Truhlar And Truhlar Attys NEW84Anna Fali
1014Stacey MacleadFrance2025-08-02Morlong Associates QUALIFIED40Ivan Magalhaes
1015Ivar PaprockiIndia2025-08-10Feltz Printing Service NEW5Elwin Sharvill
1016Silvio SlusarskiSpain2025-07-25Benton, John B Jr NEGOTIATION21Ioni Bowcher
1017Salvatore StockhamGermany2025-07-25Dorl, James J Esq UNQUALIFIED36Stephen Shaw
1018Claire TollnerArgentina2025-07-19Truhlar And Truhlar Attys QUALIFIED50Amy Elsner
1019Jones VocelkaFrance2025-08-10Chanay, Jeffrey A Esq PROPOSAL91Xuxue Feng
1020Clifford RimJapan2025-08-10Commercial Press NEW49Ivan Magalhaes
1021Emily WhobreyAustralia2025-07-26Printing Dimensions PROPOSAL43Xuxue Feng
1022Alejandro PerinSpain2025-08-02Chemel, James L Cpa UNQUALIFIED89Bernardo Dominic
1023Cody SaylorsUnited Kingdom2025-07-25Chemel, James L Cpa NEW75Ivan Magalhaes
1024Ashley DoeRussia2025-08-11Morlong Associates RENEWAL60Onyama Limba
1025Faith GillianAustralia2025-07-16Rangoni Of Florence UNQUALIFIED25Stephen Shaw
1026Stacey MacleadArgentina2025-07-16Benton, John B Jr QUALIFIED31Elwin Sharvill
1027Johnson SergiFrance2025-08-11Chapman, Ross E Esq UNQUALIFIED59Xuxue Feng
1028Munro FerenczAustralia2025-08-09Morlong Associates UNQUALIFIED40Bernardo Dominic
1029Ricardo GauchoCanada2025-08-09Chapman, Ross E Esq QUALIFIED8Anna Fali
1030Greenwood BologniaRussia2025-07-18Truhlar And Truhlar Attys NEW21Ivan Magalhaes
1031Costa DilliardRussia2025-07-26Feiner Bros UNQUALIFIED12Ioni Bowcher
1032Maisha RulapaughRussia2025-07-22Feiner Bros PROPOSAL33Xuxue Feng
1033Faith GillianGermany2025-08-10Truhlar And Truhlar Attys PROPOSAL53Anna Fali
1034Francesco ShinkoIndia2025-08-02Printing Dimensions NEW15Bernardo Dominic
1035Francesco ShinkoBrazil2025-08-05Feltz Printing Service PROPOSAL21Elwin Sharvill
1036Aika InouyeItaly2025-07-23Rangoni Of Florence NEW14Stephen Shaw
1037Julie StensethRussia2025-07-14King, Christopher A Esq UNQUALIFIED20Ivan Magalhaes
1038Sinclair WaycottAustralia2025-08-12Printing Dimensions PROPOSAL88Bernardo Dominic
1039Morrow RutaArgentina2025-08-08Commercial Press QUALIFIED59Elwin Sharvill
1040Chavez BriddickFrance2025-07-21Printing Dimensions QUALIFIED66Xuxue Feng
1041Silvio SlusarskiSpain2025-07-22Feltz Printing Service UNQUALIFIED46Onyama Limba
1042Leon OldroydCanada2025-07-24Benton, John B Jr UNQUALIFIED64Onyama Limba
1043Silvio SlusarskiGermany2025-07-17Feiner Bros UNQUALIFIED34Ivan Magalhaes
1044Kadeem FlosiBrazil2025-07-21Rangoni Of Florence UNQUALIFIED92Asiya Javayant
1045Maria MarrierBrazil2025-08-09Benton, John B Jr QUALIFIED47Onyama Limba
1046Francesco ShinkoUnited Kingdom2025-07-25King, Christopher A Esq RENEWAL65Bernardo Dominic
1047Mayumi KolmetzAustralia2025-07-24Feltz Printing Service RENEWAL0Anna Fali
1048Juan WieserIndia2025-07-21Truhlar And Truhlar Attys QUALIFIED66Amy Elsner
1049Stacey MacleadBrazil2025-07-21Chanay, Jeffrey A Esq UNQUALIFIED59Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Maisha RulapaughSpainElwin Sharvill NEW
Misaki RoysterUnited KingdomBernardo Dominic PROPOSAL
Ricardo GauchoIndiaElwin Sharvill QUALIFIED
Tony FollerCanadaAnna Fali PROPOSAL
Juan WieserIndiaBernardo Dominic RENEWAL
Ivar PaprockiItalyAmy Elsner QUALIFIED
Wickens NestleAustraliaBernardo Dominic NEW
Maria MarrierUnited KingdomAnna Fali NEW
Emily WhobreyGermanyStephen Shaw UNQUALIFIED
Deepesh ChuiRussiaIoni Bowcher NEW
Jefferson SchemmerIndiaIvan Magalhaes NEGOTIATION
Octavia MaletAustraliaOnyama Limba UNQUALIFIED
Kaitlin OstroskyBrazilIoni Bowcher UNQUALIFIED
Francesco ShinkoSpainIvan Magalhaes NEGOTIATION
Leon OldroydGermanyXuxue Feng RENEWAL
David DarakjyAustraliaAmy Elsner NEW
Maria MarrierGermanyXuxue Feng UNQUALIFIED
Mujtaba NickaIndiaAmy Elsner UNQUALIFIED
Morrow RutaRussiaXuxue Feng NEW
Nicolas IturbideBrazilBernardo Dominic UNQUALIFIED
Antonio CaudyArgentinaXuxue Feng UNQUALIFIED
Ashley DoeRussiaStephen Shaw NEGOTIATION
Alejandro PerinArgentinaBernardo Dominic PROPOSAL
Jennifer AmigonItalyXuxue Feng QUALIFIED
Tony FollerBrazilAmy Elsner QUALIFIED
Greenwood BologniaSpainStephen Shaw QUALIFIED
Izzy GarufiBrazilAnna Fali NEGOTIATION
Nicolas IturbideArgentinaXuxue Feng PROPOSAL
Munro FerenczAustraliaIoni Bowcher RENEWAL
Costa DilliardBrazilAsiya Javayant PROPOSAL
Leon OldroydGermanyAnna Fali NEGOTIATION
Jeanfrancois VenereGermanyIoni Bowcher QUALIFIED
Ivar PaprockiBrazilAsiya Javayant NEW
Greenwood BologniaGermanyIvan Magalhaes NEW
Francesco ShinkoJapanAsiya Javayant RENEWAL
Johnson SergiItalyElwin Sharvill QUALIFIED
Aditya KuskoRussiaAsiya Javayant UNQUALIFIED
Salvatore StockhamBrazilBernardo Dominic QUALIFIED
Munro FerenczJapanAsiya Javayant PROPOSAL
Nicolas IturbideGermanyBernardo Dominic NEGOTIATION
Wickens NestleGermanyBernardo Dominic UNQUALIFIED
Deepesh ChuiJapanIvan Magalhaes UNQUALIFIED
Alejandro PerinItalyAsiya Javayant PROPOSAL
Aditya KuskoUnited KingdomAsiya Javayant NEW
Ashley DoeArgentinaAmy Elsner PROPOSAL
Chavez BriddickIndiaAnna Fali NEGOTIATION
Arvin AlbaresGermanyStephen Shaw QUALIFIED
Kadeem FlosiAustraliaIoni Bowcher RENEWAL
Isabel BowleyItalyElwin Sharvill UNQUALIFIED
Tony FollerItalyAnna Fali NEW
Frozen Columns
Name
Chavez Briddick
Stacey Maclead
Jones Vocelka
Juan Wieser
Faith Gillian
Rodrigues Campain
Murillo Malet
Mayumi Kolmetz
Ashley Doe
Tony Foller
Octavia Malet
Jefferson Schemmer
Kaitlin Ostrosky
Jennifer Amigon
Antonio Caudy
Faith Gillian
Juan Wieser
Sinclair Waycott
Cody Saylors
Faith Gillian
Jefferson Schemmer
Munro Ferencz
Leja Caldarera
James Butt
Munro Ferencz
Salvatore Stockham
Antonio Caudy
Isabel Bowley
Maisha Rulapaugh
Wickens Nestle
Maria Marrier
Faith Gillian
Octavia Malet
Juan Wieser
Antonio Caudy
Jeanfrancois Venere
Alejandro Perin
Wickens Nestle
Cody Saylors
Silvio Slusarski
Claire Tollner
Francesco Shinko
Clifford Rim
Stacey Maclead
Costa Dilliard
Claire Tollner
Deepesh Chui
Rodrigues Campain
Emily Whobrey
Salvatore Stockham
IdCountryDate
1000Argentina2025-07-20
1001Brazil2025-07-15
1002United Kingdom2025-08-10
1003Spain2025-08-11
1004United Kingdom2025-08-01
1005Germany2025-07-28
1006United Kingdom2025-07-31
1007Japan2025-07-20
1008Japan2025-08-02
1009Australia2025-07-27
1010Russia2025-08-03
1011France2025-08-06
1012Canada2025-07-17
1013Germany2025-08-04
1014Japan2025-08-11
1015Germany2025-08-09
1016Brazil2025-08-03
1017Canada2025-07-28
1018France2025-07-26
1019Germany2025-08-11
1020United Kingdom2025-08-12
1021Argentina2025-07-29
1022Canada2025-07-21
1023Italy2025-08-06
1024Germany2025-08-01
1025Japan2025-07-17
1026Brazil2025-07-23
1027United Kingdom2025-07-23
1028Spain2025-07-16
1029Japan2025-07-17
1030Japan2025-07-15
1031Russia2025-08-06
1032Russia2025-07-18
1033Russia2025-07-31
1034Russia2025-07-18
1035Italy2025-08-11
1036Russia2025-08-01
1037Brazil2025-08-12
1038Germany2025-07-27
1039Italy2025-07-28
1040Australia2025-07-24
1041United Kingdom2025-08-04
1042United Kingdom2025-07-15
1043United Kingdom2025-08-02
1044Russia2025-08-11
1045Canada2025-07-22
1046Spain2025-07-23
1047Spain2025-07-20
1048United Kingdom2025-08-12
1049Russia2025-08-02

On-Demand Data

NameIdCountryDate
Jennifer Amigon1000Japan2025-07-17
Ashley Doe1001Argentina2025-08-11
Smith Glick1002Argentina2025-07-30
Jefferson Schemmer1003Spain2025-07-24
Deepesh Chui1004Australia2025-08-04
Alejandro Perin1005Australia2025-07-29
Wickens Nestle1006Argentina2025-07-20
Wickens Nestle1007Italy2025-08-03
Jones Vocelka1008France2025-07-18
Munro Ferencz1009Australia2025-07-28
Octavia Malet1010Spain2025-07-30
Adams Morasca1011Germany2025-07-16
Jones Vocelka1012India2025-08-12
Greenwood Bolognia1013Germany2025-07-14
Juan Wieser1014United Kingdom2025-07-27
Leja Caldarera1015United Kingdom2025-07-24
Jennifer Amigon1016France2025-07-16
Clifford Rim1017Spain2025-07-29
Johnson Sergi1018Australia2025-07-28
Murillo Malet1019Canada2025-07-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leon OldroydIndiaXuxue Feng NEW
Murillo MaletIndiaAnna Fali PROPOSAL
Ricardo GauchoSpainIvan Magalhaes QUALIFIED
Jennifer AmigonArgentinaAmy Elsner PROPOSAL
Ivar PaprockiIndiaIoni Bowcher RENEWAL
Maisha RulapaughAustraliaOnyama Limba RENEWAL
Darci PoquetteCanadaStephen Shaw NEW
Costa DilliardCanadaAsiya Javayant QUALIFIED
Aruna FigeroaCanadaXuxue Feng QUALIFIED
Maria MarrierRussiaIoni Bowcher PROPOSAL
Johnson SergiGermanyStephen Shaw NEW
Aditya KuskoCanadaBernardo Dominic PROPOSAL
Misaki RoysterSpainOnyama Limba NEGOTIATION
Darci PoquetteBrazilStephen Shaw RENEWAL
Clifford RimAustraliaIoni Bowcher PROPOSAL
Deepesh ChuiBrazilStephen Shaw PROPOSAL
Clifford RimGermanyElwin Sharvill QUALIFIED
Costa DilliardSpainIvan Magalhaes NEGOTIATION
Misaki RoysterRussiaXuxue Feng RENEWAL
Francesco ShinkoItalyStephen Shaw QUALIFIED
Deepesh ChuiJapanStephen Shaw PROPOSAL
Rodrigues CampainBrazilAnna Fali PROPOSAL
Julie StensethGermanyStephen Shaw PROPOSAL
Arvin AlbaresFranceStephen Shaw QUALIFIED
Smith GlickItalyBernardo Dominic QUALIFIED
Maisha RulapaughArgentinaBernardo Dominic UNQUALIFIED
Mujtaba NickaJapanStephen Shaw NEGOTIATION
Octavia MaletBrazilBernardo Dominic NEGOTIATION
Maria MarrierIndiaAmy Elsner UNQUALIFIED
Adams MorascaItalyXuxue Feng PROPOSAL
Tony FollerRussiaAsiya Javayant PROPOSAL
Deepesh ChuiJapanAnna Fali NEW
Kaitlin OstroskyItalyElwin Sharvill NEGOTIATION
Francesco ShinkoAustraliaIoni Bowcher NEW
Juan WieserIndiaBernardo Dominic NEW
Claire TollnerCanadaIoni Bowcher UNQUALIFIED
Octavia MaletCanadaXuxue Feng PROPOSAL
Aditya KuskoRussiaXuxue Feng NEGOTIATION
Maria MarrierItalyXuxue Feng NEW
Francesco ShinkoGermanyAmy Elsner QUALIFIED

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