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
Kadeem FlosiArgentinaElwin Sharvill UNQUALIFIED
Isabel BowleyJapanElwin Sharvill NEW
Morrow RutaGermanyIvan Magalhaes QUALIFIED
Emily WhobreyCanadaIvan Magalhaes NEGOTIATION
Mayumi KolmetzCanadaOnyama Limba NEW
Mayumi KolmetzItalyElwin Sharvill RENEWAL
Leon OldroydRussiaOnyama Limba NEGOTIATION
Aika InouyeCanadaBernardo Dominic PROPOSAL
Greenwood BologniaJapanIvan Magalhaes RENEWAL
Mayumi KolmetzFranceStephen Shaw NEW
Jones VocelkaItalyIvan Magalhaes NEGOTIATION
Darci PoquetteIndiaStephen Shaw NEW
Morrow RutaBrazilAnna Fali RENEWAL
Jennifer AmigonBrazilBernardo Dominic PROPOSAL
Leon OldroydAustraliaIoni Bowcher RENEWAL
Izzy GarufiRussiaAsiya Javayant NEGOTIATION
Deepesh ChuiJapanElwin Sharvill NEW
Morrow RutaBrazilOnyama Limba PROPOSAL
Morrow RutaBrazilAnna Fali NEW
Jeanfrancois VenereArgentinaXuxue Feng RENEWAL
Aditya KuskoRussiaIvan Magalhaes RENEWAL
Alejandro PerinCanadaAnna Fali UNQUALIFIED
Izzy GarufiItalyStephen Shaw RENEWAL
Murillo MaletArgentinaBernardo Dominic PROPOSAL
Antonio CaudyFranceOnyama Limba PROPOSAL
Clifford RimUnited KingdomOnyama Limba RENEWAL
Maisha RulapaughGermanyBernardo Dominic NEW
Antonio CaudyBrazilElwin Sharvill PROPOSAL
Maria MarrierRussiaBernardo Dominic QUALIFIED
Ashley DoeCanadaStephen Shaw PROPOSAL
Maria MarrierFranceXuxue Feng NEW
Greenwood BologniaUnited KingdomIoni Bowcher UNQUALIFIED
Jeanfrancois VenereCanadaStephen Shaw PROPOSAL
Smith GlickIndiaBernardo Dominic PROPOSAL
Deepesh ChuiRussiaIvan Magalhaes NEW
Stacey MacleadSpainAsiya Javayant UNQUALIFIED
Clifford RimGermanyAnna Fali UNQUALIFIED
Maria MarrierGermanyAmy Elsner NEW
Tony FollerJapanXuxue Feng NEW
Aruna FigeroaGermanyAnna Fali RENEWAL
Antonio CaudyIndiaElwin Sharvill NEW
Stacey MacleadCanadaIoni Bowcher RENEWAL
Aruna FigeroaBrazilIoni Bowcher RENEWAL
Octavia MaletIndiaIoni Bowcher NEW
Maisha RulapaughCanadaXuxue Feng NEGOTIATION
Aika InouyeBrazilXuxue Feng PROPOSAL
Darci PoquetteGermanyStephen Shaw NEGOTIATION
Faith GillianSpainXuxue Feng NEW
Kadeem FlosiItalyXuxue Feng QUALIFIED
Cody SaylorsSpainStephen Shaw NEW
Horizontal
NameCountryRepresentativeStatus
Jennifer AmigonUnited KingdomXuxue Feng RENEWAL
Julie StensethFranceAnna Fali QUALIFIED
Salvatore StockhamGermanyAnna Fali UNQUALIFIED
Mayumi KolmetzFranceOnyama Limba QUALIFIED
Arvin AlbaresSpainXuxue Feng NEGOTIATION
Kaitlin OstroskyGermanyIvan Magalhaes RENEWAL
Munro FerenczSpainStephen Shaw QUALIFIED
Silvio SlusarskiFranceOnyama Limba RENEWAL
Cody SaylorsCanadaStephen Shaw NEW
Julie StensethJapanOnyama Limba UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maisha RulapaughItaly2026-04-18Chanay, Jeffrey A Esq PROPOSAL59Elwin Sharvill
1001Cody SaylorsJapan2026-05-07Rangoni Of Florence UNQUALIFIED17Xuxue Feng
1002Claire TollnerSpain2026-05-04Printing Dimensions NEGOTIATION13Elwin Sharvill
1003Misaki RoysterArgentina2026-04-17Chemel, James L Cpa UNQUALIFIED27Xuxue Feng
1004Ivar PaprockiItaly2026-05-05Chemel, James L Cpa RENEWAL12Ioni Bowcher
1005Deepesh ChuiRussia2026-04-11King, Christopher A Esq UNQUALIFIED10Amy Elsner
1006James ButtSpain2026-04-28Dorl, James J Esq QUALIFIED47Amy Elsner
1007Claire TollnerAustralia2026-04-13Feiner Bros PROPOSAL54Ioni Bowcher
1008Greenwood BologniaSpain2026-04-27Morlong Associates NEW3Onyama Limba
1009Jennifer AmigonFrance2026-04-25Buckley Miller Wright NEGOTIATION59Stephen Shaw
1010Izzy GarufiIndia2026-04-24Rousseaux, Michael Esq NEGOTIATION19Bernardo Dominic
1011Sinclair WaycottCanada2026-04-23Rousseaux, Michael Esq PROPOSAL47Xuxue Feng
1012Ricardo GauchoArgentina2026-04-25Truhlar And Truhlar Attys PROPOSAL12Elwin Sharvill
1013Kadeem FlosiFrance2026-04-17Commercial Press QUALIFIED97Bernardo Dominic
1014Deepesh ChuiArgentina2026-04-12King, Christopher A Esq NEGOTIATION37Onyama Limba
1015Deepesh ChuiAustralia2026-04-18Benton, John B Jr UNQUALIFIED16Onyama Limba
1016Kaitlin OstroskyJapan2026-05-07Chanay, Jeffrey A Esq PROPOSAL99Bernardo Dominic
1017Ricardo GauchoJapan2026-05-08Benton, John B Jr NEW96Xuxue Feng
1018Sinclair WaycottCanada2026-04-17Dorl, James J Esq NEGOTIATION91Ioni Bowcher
1019Emily WhobreyIndia2026-04-13Rousseaux, Michael Esq NEW6Xuxue Feng
1020Sinclair WaycottGermany2026-04-15Dorl, James J Esq QUALIFIED77Asiya Javayant
1021Faith GillianArgentina2026-04-18Printing Dimensions RENEWAL1Bernardo Dominic
1022Leja CaldareraArgentina2026-04-27Feltz Printing Service PROPOSAL28Amy Elsner
1023Jennifer AmigonBrazil2026-04-28Rangoni Of Florence RENEWAL92Ivan Magalhaes
1024Rodrigues CampainArgentina2026-04-26Feltz Printing Service NEGOTIATION73Ioni Bowcher
1025Darci PoquetteItaly2026-05-01Rangoni Of Florence RENEWAL56Anna Fali
1026Costa DilliardItaly2026-05-05Rousseaux, Michael Esq NEGOTIATION89Stephen Shaw
1027Cody SaylorsGermany2026-04-12Rousseaux, Michael Esq NEW14Elwin Sharvill
1028Salvatore StockhamUnited Kingdom2026-04-17Feltz Printing Service UNQUALIFIED97Amy Elsner
1029Maria MarrierUnited Kingdom2026-05-05Rangoni Of Florence UNQUALIFIED46Ivan Magalhaes
1030Stacey MacleadCanada2026-04-15Chanay, Jeffrey A Esq UNQUALIFIED35Stephen Shaw
1031Silvio SlusarskiAustralia2026-04-27Benton, John B Jr QUALIFIED96Elwin Sharvill
1032Izzy GarufiGermany2026-04-17Buckley Miller Wright QUALIFIED52Ivan Magalhaes
1033Munro FerenczItaly2026-05-09Printing Dimensions NEW93Bernardo Dominic
1034Leon OldroydJapan2026-05-03Rousseaux, Michael Esq NEGOTIATION1Amy Elsner
1035Octavia MaletAustralia2026-04-11Chemel, James L Cpa NEW73Ivan Magalhaes
1036Mayumi KolmetzSpain2026-04-19Printing Dimensions RENEWAL30Stephen Shaw
1037Clifford RimAustralia2026-04-15Dorl, James J Esq PROPOSAL54Ivan Magalhaes
1038Maisha RulapaughUnited Kingdom2026-05-09Chapman, Ross E Esq QUALIFIED48Ivan Magalhaes
1039Emily WhobreyUnited Kingdom2026-04-16Chapman, Ross E Esq QUALIFIED86Onyama Limba
1040Misaki RoysterAustralia2026-04-15Rangoni Of Florence RENEWAL60Xuxue Feng
1041Jeanfrancois VenereGermany2026-04-12Chemel, James L Cpa UNQUALIFIED3Ioni Bowcher
1042Aruna FigeroaArgentina2026-05-08King, Christopher A Esq RENEWAL21Ioni Bowcher
1043Johnson SergiAustralia2026-05-08Printing Dimensions NEGOTIATION32Anna Fali
1044Tony FollerGermany2026-04-19Chanay, Jeffrey A Esq RENEWAL73Xuxue Feng
1045James ButtItaly2026-04-21Chanay, Jeffrey A Esq PROPOSAL18Elwin Sharvill
1046James ButtAustralia2026-04-17Rousseaux, Michael Esq UNQUALIFIED55Stephen Shaw
1047James ButtItaly2026-04-20Chanay, Jeffrey A Esq QUALIFIED62Ioni Bowcher
1048David DarakjyJapan2026-04-27Buckley Miller Wright NEW27Onyama Limba
1049Cody SaylorsSpain2026-04-12Buckley Miller Wright QUALIFIED52Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Ricardo GauchoSpainAnna Fali NEGOTIATION
Izzy GarufiGermanyStephen Shaw NEGOTIATION
Juan WieserItalyOnyama Limba QUALIFIED
Adams MorascaUnited KingdomAmy Elsner NEW
Munro FerenczArgentinaBernardo Dominic RENEWAL
Octavia MaletBrazilAnna Fali UNQUALIFIED
Maisha RulapaughUnited KingdomXuxue Feng QUALIFIED
Arvin AlbaresGermanyXuxue Feng QUALIFIED
Kaitlin OstroskyItalyAnna Fali NEGOTIATION
Leja CaldareraBrazilIoni Bowcher QUALIFIED
Nicolas IturbideGermanyIvan Magalhaes QUALIFIED
Chavez BriddickBrazilAsiya Javayant QUALIFIED
Silvio SlusarskiItalyIoni Bowcher RENEWAL
Kadeem FlosiItalyIoni Bowcher QUALIFIED
Stacey MacleadArgentinaIvan Magalhaes NEGOTIATION
Leon OldroydItalyBernardo Dominic QUALIFIED
Isabel BowleyUnited KingdomAnna Fali NEW
Kadeem FlosiFranceAsiya Javayant QUALIFIED
Wickens NestleSpainAnna Fali NEW
Maria MarrierUnited KingdomAnna Fali QUALIFIED
Mayumi KolmetzIndiaAnna Fali PROPOSAL
Chavez BriddickRussiaAnna Fali NEW
Antonio CaudyItalyIvan Magalhaes PROPOSAL
Claire TollnerFranceAnna Fali RENEWAL
Salvatore StockhamIndiaOnyama Limba QUALIFIED
Leja CaldareraSpainIoni Bowcher NEGOTIATION
Rodrigues CampainItalyAnna Fali QUALIFIED
Maria MarrierBrazilAmy Elsner RENEWAL
Tony FollerUnited KingdomAmy Elsner NEW
Morrow RutaFranceAsiya Javayant UNQUALIFIED
Kadeem FlosiIndiaStephen Shaw NEGOTIATION
Misaki RoysterUnited KingdomIvan Magalhaes QUALIFIED
Sinclair WaycottArgentinaXuxue Feng NEW
Morrow RutaGermanyBernardo Dominic NEW
David DarakjyRussiaStephen Shaw NEW
Arvin AlbaresItalyIoni Bowcher QUALIFIED
Wickens NestleBrazilOnyama Limba NEW
Greenwood BologniaGermanyIoni Bowcher QUALIFIED
Jefferson SchemmerCanadaXuxue Feng NEGOTIATION
Antonio CaudyAustraliaAnna Fali NEW
Misaki RoysterUnited KingdomAsiya Javayant RENEWAL
Claire TollnerIndiaStephen Shaw RENEWAL
Silvio SlusarskiCanadaIoni Bowcher QUALIFIED
Silvio SlusarskiBrazilAmy Elsner RENEWAL
Maisha RulapaughGermanyXuxue Feng RENEWAL
Misaki RoysterAustraliaIvan Magalhaes RENEWAL
Jeanfrancois VenereSpainElwin Sharvill RENEWAL
Misaki RoysterFranceStephen Shaw NEGOTIATION
Wickens NestleBrazilAmy Elsner PROPOSAL
Clifford RimAustraliaXuxue Feng QUALIFIED
Frozen Columns
Name
Emily Whobrey
Smith Glick
Antonio Caudy
Octavia Malet
Ricardo Gaucho
Mujtaba Nicka
Maisha Rulapaugh
Johnson Sergi
Juan Wieser
Cody Saylors
Johnson Sergi
Francesco Shinko
Aruna Figeroa
Salvatore Stockham
Costa Dilliard
Ashley Doe
Jones Vocelka
Darci Poquette
Jefferson Schemmer
Octavia Malet
Claire Tollner
Salvatore Stockham
James Butt
Deepesh Chui
Francesco Shinko
Adams Morasca
Antonio Caudy
Chavez Briddick
Kaitlin Ostrosky
Aditya Kusko
Jefferson Schemmer
Rodrigues Campain
Ricardo Gaucho
Leja Caldarera
Costa Dilliard
Adams Morasca
David Darakjy
Jeanfrancois Venere
Isabel Bowley
Silvio Slusarski
Wickens Nestle
Juan Wieser
Chavez Briddick
Ashley Doe
Juan Wieser
Smith Glick
Leja Caldarera
Claire Tollner
Wickens Nestle
David Darakjy
IdCountryDate
1000Australia2026-05-01
1001United Kingdom2026-05-07
1002United Kingdom2026-05-04
1003Brazil2026-04-25
1004Australia2026-04-11
1005Brazil2026-04-24
1006Japan2026-04-13
1007United Kingdom2026-04-24
1008Germany2026-04-24
1009Australia2026-04-19
1010Spain2026-04-23
1011Canada2026-04-25
1012India2026-05-07
1013Russia2026-05-04
1014Brazil2026-05-05
1015India2026-04-22
1016Argentina2026-04-13
1017Germany2026-04-26
1018Germany2026-04-15
1019France2026-05-04
1020Brazil2026-05-05
1021Germany2026-04-16
1022Japan2026-04-30
1023United Kingdom2026-04-16
1024Canada2026-04-27
1025Russia2026-05-06
1026Japan2026-04-16
1027Spain2026-04-27
1028Argentina2026-05-01
1029Spain2026-05-06
1030India2026-04-21
1031Russia2026-04-29
1032India2026-04-29
1033Australia2026-05-05
1034Russia2026-04-10
1035Russia2026-04-19
1036Canada2026-04-29
1037Brazil2026-05-07
1038France2026-04-24
1039Germany2026-04-28
1040France2026-04-21
1041Germany2026-04-14
1042Japan2026-04-21
1043France2026-04-13
1044Spain2026-04-10
1045Brazil2026-05-01
1046United Kingdom2026-04-20
1047Italy2026-04-19
1048France2026-04-14
1049Argentina2026-05-01

On-Demand Data

NameIdCountryDate
James Butt1000India2026-05-03
Mayumi Kolmetz1001Germany2026-04-29
Stacey Maclead1002Canada2026-04-10
Darci Poquette1003Spain2026-04-26
Mujtaba Nicka1004Canada2026-04-18
Julie Stenseth1005Russia2026-05-02
Cody Saylors1006Brazil2026-05-08
Alejandro Perin1007France2026-04-10
Rodrigues Campain1008Argentina2026-04-21
Jennifer Amigon1009France2026-04-16
Jefferson Schemmer1010Canada2026-04-14
Munro Ferencz1011Germany2026-04-29
Ashley Doe1012Brazil2026-04-24
Julie Stenseth1013United Kingdom2026-04-18
Ashley Doe1014Germany2026-04-15
Tony Foller1015Spain2026-05-07
Salvatore Stockham1016Italy2026-05-03
Aruna Figeroa1017United Kingdom2026-05-07
Arvin Albares1018Argentina2026-05-01
Smith Glick1019Argentina2026-04-20
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Salvatore StockhamJapanAsiya Javayant QUALIFIED
Leon OldroydCanadaXuxue Feng PROPOSAL
Deepesh ChuiIndiaIvan Magalhaes NEW
Darci PoquetteUnited KingdomAmy Elsner PROPOSAL
Chavez BriddickAustraliaIvan Magalhaes NEW
Johnson SergiBrazilElwin Sharvill QUALIFIED
Johnson SergiAustraliaStephen Shaw NEW
Nicolas IturbideRussiaAsiya Javayant QUALIFIED
James ButtSpainBernardo Dominic RENEWAL
Juan WieserIndiaIvan Magalhaes PROPOSAL
Stacey MacleadIndiaAnna Fali NEW
Maisha RulapaughIndiaIoni Bowcher RENEWAL
Cody SaylorsJapanXuxue Feng NEW
James ButtArgentinaAsiya Javayant RENEWAL
Emily WhobreyGermanyAmy Elsner NEW
Murillo MaletSpainAsiya Javayant PROPOSAL
Kaitlin OstroskyIndiaIvan Magalhaes NEGOTIATION
Morrow RutaUnited KingdomOnyama Limba NEGOTIATION
Nicolas IturbideGermanyXuxue Feng QUALIFIED
Smith GlickAustraliaElwin Sharvill UNQUALIFIED
Aditya KuskoBrazilStephen Shaw UNQUALIFIED
Kadeem FlosiBrazilOnyama Limba PROPOSAL
Darci PoquetteUnited KingdomAnna Fali UNQUALIFIED
Costa DilliardAustraliaAnna Fali QUALIFIED
Faith GillianAustraliaIoni Bowcher NEW
Jones VocelkaIndiaIoni Bowcher RENEWAL
Wickens NestleCanadaIvan Magalhaes RENEWAL
Julie StensethGermanyStephen Shaw UNQUALIFIED
Tony FollerBrazilXuxue Feng UNQUALIFIED
Jennifer AmigonJapanBernardo Dominic RENEWAL
Izzy GarufiIndiaElwin Sharvill NEGOTIATION
Deepesh ChuiAustraliaStephen Shaw QUALIFIED
Deepesh ChuiJapanXuxue Feng NEW
Leja CaldareraSpainAsiya Javayant NEGOTIATION
Jefferson SchemmerGermanyAnna Fali NEW
Julie StensethRussiaAnna Fali NEW
Cody SaylorsCanadaBernardo Dominic RENEWAL
Aika InouyeBrazilAnna Fali PROPOSAL
Salvatore StockhamGermanyElwin Sharvill QUALIFIED
Mujtaba NickaGermanyXuxue Feng UNQUALIFIED

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