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 CaldareraBrazilXuxue Feng NEW
Arvin AlbaresCanadaStephen Shaw UNQUALIFIED
Clifford RimJapanAmy Elsner UNQUALIFIED
Johnson SergiUnited KingdomIvan Magalhaes PROPOSAL
Salvatore StockhamFranceIvan Magalhaes NEW
Aruna FigeroaIndiaElwin Sharvill PROPOSAL
Maria MarrierFranceXuxue Feng NEW
David DarakjyGermanyIoni Bowcher PROPOSAL
Silvio SlusarskiRussiaElwin Sharvill PROPOSAL
Alejandro PerinBrazilIoni Bowcher QUALIFIED
Alejandro PerinFranceAnna Fali UNQUALIFIED
Silvio SlusarskiAustraliaAnna Fali PROPOSAL
Juan WieserCanadaStephen Shaw RENEWAL
Julie StensethFranceIvan Magalhaes PROPOSAL
Jeanfrancois VenereIndiaIoni Bowcher NEW
Nicolas IturbideBrazilAsiya Javayant QUALIFIED
Rodrigues CampainCanadaAnna Fali PROPOSAL
Misaki RoysterUnited KingdomStephen Shaw UNQUALIFIED
Ivar PaprockiGermanyAsiya Javayant UNQUALIFIED
Aditya KuskoFranceIoni Bowcher NEGOTIATION
Tony FollerRussiaAmy Elsner RENEWAL
Jeanfrancois VenereGermanyOnyama Limba PROPOSAL
Greenwood BologniaJapanIvan Magalhaes UNQUALIFIED
Isabel BowleyRussiaIvan Magalhaes NEGOTIATION
Salvatore StockhamItalyBernardo Dominic RENEWAL
Maisha RulapaughBrazilIoni Bowcher PROPOSAL
Antonio CaudyBrazilBernardo Dominic NEGOTIATION
Tony FollerItalyXuxue Feng RENEWAL
Leja CaldareraJapanStephen Shaw PROPOSAL
Ricardo GauchoAustraliaStephen Shaw PROPOSAL
David DarakjyBrazilAmy Elsner NEW
Aditya KuskoFranceElwin Sharvill UNQUALIFIED
Costa DilliardRussiaXuxue Feng PROPOSAL
Munro FerenczArgentinaStephen Shaw PROPOSAL
Greenwood BologniaFranceOnyama Limba QUALIFIED
Emily WhobreyIndiaXuxue Feng QUALIFIED
Antonio CaudyCanadaAnna Fali QUALIFIED
Arvin AlbaresFranceIoni Bowcher RENEWAL
Costa DilliardUnited KingdomAnna Fali RENEWAL
Salvatore StockhamGermanyAmy Elsner QUALIFIED
Sinclair WaycottUnited KingdomBernardo Dominic NEGOTIATION
Jennifer AmigonFranceIvan Magalhaes NEW
Jefferson SchemmerCanadaIvan Magalhaes PROPOSAL
Darci PoquetteBrazilXuxue Feng NEGOTIATION
Smith GlickGermanyStephen Shaw RENEWAL
Chavez BriddickAustraliaAsiya Javayant PROPOSAL
Ivar PaprockiIndiaAnna Fali RENEWAL
Wickens NestleItalyBernardo Dominic UNQUALIFIED
Johnson SergiGermanyElwin Sharvill PROPOSAL
Greenwood BologniaIndiaXuxue Feng UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Kadeem FlosiAustraliaAsiya Javayant PROPOSAL
Salvatore StockhamGermanyOnyama Limba PROPOSAL
Aditya KuskoFranceOnyama Limba QUALIFIED
Tony FollerFranceAnna Fali QUALIFIED
Isabel BowleyCanadaElwin Sharvill RENEWAL
Jefferson SchemmerCanadaIoni Bowcher PROPOSAL
Emily WhobreyCanadaOnyama Limba NEW
Smith GlickSpainXuxue Feng QUALIFIED
Alejandro PerinUnited KingdomAsiya Javayant PROPOSAL
Antonio CaudyArgentinaBernardo Dominic UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Claire TollnerCanada2026-04-12Morlong Associates PROPOSAL12Xuxue Feng
1001Mayumi KolmetzArgentina2026-04-20Rousseaux, Michael Esq RENEWAL35Xuxue Feng
1002Claire TollnerSpain2026-04-21Morlong Associates NEW7Ivan Magalhaes
1003Arvin AlbaresFrance2026-04-25Commercial Press PROPOSAL15Onyama Limba
1004Darci PoquetteRussia2026-04-12Feltz Printing Service PROPOSAL54Ioni Bowcher
1005Ashley DoeBrazil2026-04-21Rousseaux, Michael Esq RENEWAL82Ivan Magalhaes
1006Juan WieserSpain2026-04-01Morlong Associates QUALIFIED31Xuxue Feng
1007Aditya KuskoGermany2026-03-30Rangoni Of Florence UNQUALIFIED14Bernardo Dominic
1008Maria MarrierJapan2026-04-19King, Christopher A Esq UNQUALIFIED12Xuxue Feng
1009Emily WhobreyFrance2026-04-04Rousseaux, Michael Esq PROPOSAL53Bernardo Dominic
1010Clifford RimIndia2026-03-31Printing Dimensions PROPOSAL1Amy Elsner
1011Alejandro PerinUnited Kingdom2026-04-12Dorl, James J Esq PROPOSAL43Bernardo Dominic
1012Octavia MaletRussia2026-04-08Chapman, Ross E Esq RENEWAL89Stephen Shaw
1013Nicolas IturbideGermany2026-04-21Feiner Bros QUALIFIED52Stephen Shaw
1014Misaki RoysterFrance2026-04-17Chanay, Jeffrey A Esq PROPOSAL19Asiya Javayant
1015David DarakjyCanada2026-04-10King, Christopher A Esq NEGOTIATION8Elwin Sharvill
1016Kadeem FlosiSpain2026-04-05Commercial Press NEGOTIATION55Asiya Javayant
1017Jones VocelkaCanada2026-04-24Printing Dimensions RENEWAL60Stephen Shaw
1018Stacey MacleadItaly2026-04-06Morlong Associates PROPOSAL1Stephen Shaw
1019Arvin AlbaresArgentina2026-04-09Rangoni Of Florence NEGOTIATION39Onyama Limba
1020Greenwood BologniaSpain2026-04-02Dorl, James J Esq NEGOTIATION99Stephen Shaw
1021Ricardo GauchoBrazil2026-04-21Chemel, James L Cpa RENEWAL83Ivan Magalhaes
1022Salvatore StockhamBrazil2026-04-27King, Christopher A Esq UNQUALIFIED72Xuxue Feng
1023Darci PoquetteArgentina2026-04-21Rangoni Of Florence NEW94Ivan Magalhaes
1024Smith GlickBrazil2026-04-08Commercial Press QUALIFIED74Anna Fali
1025Costa DilliardSpain2026-04-12Chemel, James L Cpa NEW35Onyama Limba
1026Ashley DoeItaly2026-04-15Dorl, James J Esq RENEWAL29Bernardo Dominic
1027Arvin AlbaresBrazil2026-04-13Feiner Bros QUALIFIED57Elwin Sharvill
1028Ivar PaprockiIndia2026-03-30Printing Dimensions RENEWAL11Ioni Bowcher
1029Wickens NestleBrazil2026-04-02Benton, John B Jr RENEWAL85Stephen Shaw
1030Adams MorascaItaly2026-04-06Chemel, James L Cpa NEGOTIATION11Onyama Limba
1031Murillo MaletArgentina2026-04-16Feiner Bros QUALIFIED7Elwin Sharvill
1032Deepesh ChuiArgentina2026-04-20Printing Dimensions NEGOTIATION8Onyama Limba
1033Salvatore StockhamItaly2026-04-24Morlong Associates PROPOSAL51Anna Fali
1034Ashley DoeIndia2026-04-19Chanay, Jeffrey A Esq UNQUALIFIED33Amy Elsner
1035Kadeem FlosiGermany2026-04-01Dorl, James J Esq PROPOSAL37Anna Fali
1036Emily WhobreyBrazil2026-04-20Feltz Printing Service QUALIFIED54Asiya Javayant
1037David DarakjyRussia2026-04-18Printing Dimensions PROPOSAL86Ioni Bowcher
1038Chavez BriddickFrance2026-04-22Chemel, James L Cpa NEW84Amy Elsner
1039Clifford RimCanada2026-04-15Morlong Associates PROPOSAL66Amy Elsner
1040Silvio SlusarskiArgentina2026-04-12Rousseaux, Michael Esq QUALIFIED93Ioni Bowcher
1041Jeanfrancois VenereBrazil2026-04-21Chemel, James L Cpa NEGOTIATION31Asiya Javayant
1042Leon OldroydUnited Kingdom2026-04-23King, Christopher A Esq UNQUALIFIED93Bernardo Dominic
1043Maisha RulapaughAustralia2026-04-09Dorl, James J Esq UNQUALIFIED38Stephen Shaw
1044Costa DilliardBrazil2026-04-12Commercial Press PROPOSAL51Stephen Shaw
1045Deepesh ChuiSpain2026-04-23Chemel, James L Cpa RENEWAL23Ioni Bowcher
1046Jennifer AmigonGermany2026-04-01Feltz Printing Service PROPOSAL6Bernardo Dominic
1047Cody SaylorsCanada2026-04-02Rangoni Of Florence NEGOTIATION82Amy Elsner
1048Stacey MacleadJapan2026-04-15Rangoni Of Florence NEGOTIATION79Elwin Sharvill
1049Jefferson SchemmerIndia2026-04-01Chapman, Ross E Esq PROPOSAL34Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Alejandro PerinCanadaBernardo Dominic RENEWAL
David DarakjyArgentinaAnna Fali PROPOSAL
Chavez BriddickRussiaAmy Elsner NEGOTIATION
Claire TollnerItalyAnna Fali PROPOSAL
Smith GlickGermanyStephen Shaw PROPOSAL
Stacey MacleadGermanyAnna Fali QUALIFIED
Jennifer AmigonRussiaBernardo Dominic UNQUALIFIED
Morrow RutaJapanBernardo Dominic RENEWAL
Ashley DoeUnited KingdomAnna Fali NEW
Ivar PaprockiArgentinaElwin Sharvill NEW
Kaitlin OstroskyBrazilElwin Sharvill RENEWAL
Jefferson SchemmerFranceAsiya Javayant NEGOTIATION
Darci PoquetteUnited KingdomStephen Shaw QUALIFIED
Francesco ShinkoSpainXuxue Feng UNQUALIFIED
Jones VocelkaItalyOnyama Limba NEGOTIATION
Misaki RoysterAustraliaAmy Elsner QUALIFIED
Stacey MacleadItalyXuxue Feng RENEWAL
Isabel BowleyBrazilElwin Sharvill PROPOSAL
Jeanfrancois VenereAustraliaXuxue Feng UNQUALIFIED
Kaitlin OstroskyArgentinaOnyama Limba QUALIFIED
Jeanfrancois VenereIndiaAsiya Javayant RENEWAL
Sinclair WaycottGermanyXuxue Feng NEGOTIATION
Stacey MacleadIndiaOnyama Limba PROPOSAL
Isabel BowleyBrazilOnyama Limba RENEWAL
Isabel BowleyGermanyIoni Bowcher PROPOSAL
Silvio SlusarskiArgentinaIoni Bowcher NEGOTIATION
Jefferson SchemmerArgentinaBernardo Dominic NEW
Juan WieserJapanElwin Sharvill RENEWAL
Adams MorascaBrazilXuxue Feng QUALIFIED
James ButtItalyOnyama Limba NEGOTIATION
Kaitlin OstroskyAustraliaElwin Sharvill RENEWAL
Emily WhobreyAustraliaIoni Bowcher UNQUALIFIED
Juan WieserFranceElwin Sharvill PROPOSAL
Mujtaba NickaAustraliaStephen Shaw NEW
Jennifer AmigonGermanyAnna Fali UNQUALIFIED
Octavia MaletIndiaStephen Shaw NEW
Costa DilliardCanadaIoni Bowcher UNQUALIFIED
Murillo MaletAustraliaIoni Bowcher QUALIFIED
Emily WhobreyAustraliaBernardo Dominic QUALIFIED
David DarakjyRussiaElwin Sharvill RENEWAL
Adams MorascaJapanBernardo Dominic NEGOTIATION
Jeanfrancois VenereFranceAmy Elsner NEGOTIATION
Jennifer AmigonFranceXuxue Feng NEW
Darci PoquetteSpainElwin Sharvill UNQUALIFIED
Mujtaba NickaIndiaAmy Elsner UNQUALIFIED
Murillo MaletArgentinaIoni Bowcher PROPOSAL
Octavia MaletFranceStephen Shaw RENEWAL
Darci PoquetteFranceOnyama Limba NEW
Clifford RimUnited KingdomAsiya Javayant UNQUALIFIED
Adams MorascaJapanXuxue Feng NEGOTIATION
Frozen Columns
Name
Silvio Slusarski
Chavez Briddick
Stacey Maclead
Arvin Albares
Jefferson Schemmer
Octavia Malet
Francesco Shinko
Silvio Slusarski
Morrow Ruta
Smith Glick
Jefferson Schemmer
Juan Wieser
Kaitlin Ostrosky
Costa Dilliard
Aditya Kusko
Juan Wieser
Adams Morasca
Leja Caldarera
Murillo Malet
Jones Vocelka
Maria Marrier
Greenwood Bolognia
David Darakjy
Juan Wieser
Adams Morasca
Sinclair Waycott
Maria Marrier
Nicolas Iturbide
Emily Whobrey
Aruna Figeroa
Greenwood Bolognia
Cody Saylors
Ivar Paprocki
Leon Oldroyd
James Butt
Silvio Slusarski
Rodrigues Campain
Isabel Bowley
Julie Stenseth
Aika Inouye
Darci Poquette
Maria Marrier
Leon Oldroyd
David Darakjy
Darci Poquette
Emily Whobrey
Misaki Royster
Claire Tollner
Ashley Doe
Leon Oldroyd
IdCountryDate
1000Spain2026-04-23
1001Italy2026-04-07
1002Spain2026-04-20
1003Spain2026-04-02
1004France2026-04-04
1005Spain2026-04-11
1006Russia2026-04-15
1007Germany2026-04-23
1008France2026-04-11
1009Brazil2026-04-06
1010Canada2026-04-03
1011France2026-04-27
1012France2026-04-07
1013Japan2026-04-01
1014Russia2026-04-11
1015Australia2026-04-11
1016France2026-04-20
1017Canada2026-04-05
1018United Kingdom2026-04-14
1019Brazil2026-04-18
1020Argentina2026-04-27
1021United Kingdom2026-04-04
1022Spain2026-04-11
1023Argentina2026-04-18
1024Australia2026-04-09
1025Argentina2026-04-04
1026United Kingdom2026-04-05
1027Russia2026-04-01
1028United Kingdom2026-04-11
1029Canada2026-04-11
1030Brazil2026-04-05
1031Canada2026-04-08
1032Russia2026-04-16
1033Italy2026-04-25
1034Spain2026-04-04
1035Brazil2026-04-26
1036India2026-04-16
1037France2026-03-29
1038Brazil2026-04-02
1039France2026-04-17
1040Canada2026-04-23
1041Brazil2026-04-19
1042Japan2026-04-07
1043France2026-04-04
1044United Kingdom2026-04-07
1045France2026-04-11
1046India2026-04-23
1047Australia2026-04-25
1048Russia2026-04-14
1049Spain2026-04-02

On-Demand Data

NameIdCountryDate
Ricardo Gaucho1000Canada2026-04-04
Claire Tollner1001Argentina2026-04-20
Silvio Slusarski1002Japan2026-03-30
Leon Oldroyd1003Russia2026-04-22
Arvin Albares1004Australia2026-04-05
Ricardo Gaucho1005India2026-04-23
Julie Stenseth1006France2026-04-24
Nicolas Iturbide1007United Kingdom2026-04-18
Greenwood Bolognia1008Russia2026-04-09
Izzy Garufi1009Australia2026-04-25
David Darakjy1010Australia2026-04-19
Aditya Kusko1011Brazil2026-04-17
Jeanfrancois Venere1012Italy2026-04-07
Adams Morasca1013Spain2026-04-13
Nicolas Iturbide1014Japan2026-04-16
Jennifer Amigon1015Canada2026-04-12
Claire Tollner1016Japan2026-04-10
Leon Oldroyd1017Canada2026-04-03
Mujtaba Nicka1018Italy2026-03-29
Ashley Doe1019Canada2026-04-18
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Munro FerenczAustraliaBernardo Dominic NEW
Costa DilliardItalyBernardo Dominic QUALIFIED
Clifford RimBrazilXuxue Feng UNQUALIFIED
Salvatore StockhamSpainIoni Bowcher QUALIFIED
Nicolas IturbideIndiaIoni Bowcher PROPOSAL
James ButtBrazilAmy Elsner PROPOSAL
Ivar PaprockiSpainAmy Elsner UNQUALIFIED
Jeanfrancois VenereJapanOnyama Limba NEW
Emily WhobreySpainBernardo Dominic NEW
Kadeem FlosiAustraliaAmy Elsner PROPOSAL
Mayumi KolmetzIndiaBernardo Dominic QUALIFIED
Jones VocelkaItalyIvan Magalhaes NEGOTIATION
Murillo MaletUnited KingdomIvan Magalhaes NEGOTIATION
Emily WhobreyGermanyStephen Shaw RENEWAL
Clifford RimArgentinaStephen Shaw RENEWAL
David DarakjySpainOnyama Limba RENEWAL
Isabel BowleyAustraliaIvan Magalhaes NEGOTIATION
Aika InouyeJapanAnna Fali NEW
Francesco ShinkoFranceAmy Elsner PROPOSAL
Aruna FigeroaSpainIvan Magalhaes NEW
Munro FerenczJapanOnyama Limba RENEWAL
Francesco ShinkoArgentinaAsiya Javayant NEGOTIATION
Clifford RimCanadaAnna Fali RENEWAL
Julie StensethSpainBernardo Dominic NEW
Octavia MaletIndiaIvan Magalhaes NEGOTIATION
Costa DilliardJapanAmy Elsner PROPOSAL
Aditya KuskoBrazilStephen Shaw PROPOSAL
Ricardo GauchoAustraliaAnna Fali NEGOTIATION
Jones VocelkaGermanyBernardo Dominic RENEWAL
Wickens NestleUnited KingdomElwin Sharvill NEW
Jones VocelkaItalyIvan Magalhaes QUALIFIED
James ButtGermanyXuxue Feng NEGOTIATION
Faith GillianAustraliaAnna Fali NEGOTIATION
Rodrigues CampainGermanyXuxue Feng RENEWAL
Johnson SergiItalyAmy Elsner NEGOTIATION
Faith GillianRussiaStephen Shaw NEW
Maria MarrierCanadaElwin Sharvill NEW
Greenwood BologniaRussiaAsiya Javayant NEGOTIATION
Cody SaylorsGermanyAmy Elsner RENEWAL
Octavia MaletBrazilOnyama Limba RENEWAL

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