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 CaldareraItalyAmy Elsner NEGOTIATION
Chavez BriddickBrazilIoni Bowcher PROPOSAL
Ricardo GauchoIndiaIvan Magalhaes PROPOSAL
Kaitlin OstroskySpainAnna Fali PROPOSAL
Alejandro PerinItalyElwin Sharvill NEGOTIATION
Nicolas IturbideJapanAsiya Javayant QUALIFIED
Mujtaba NickaBrazilElwin Sharvill RENEWAL
Claire TollnerRussiaIoni Bowcher QUALIFIED
Julie StensethItalyIoni Bowcher PROPOSAL
Silvio SlusarskiUnited KingdomStephen Shaw NEW
Octavia MaletUnited KingdomAsiya Javayant PROPOSAL
Greenwood BologniaIndiaStephen Shaw QUALIFIED
Jeanfrancois VenereCanadaIvan Magalhaes RENEWAL
Adams MorascaItalyIvan Magalhaes PROPOSAL
Misaki RoysterAustraliaOnyama Limba UNQUALIFIED
Clifford RimIndiaIvan Magalhaes NEW
Smith GlickItalyElwin Sharvill NEGOTIATION
Maisha RulapaughUnited KingdomAsiya Javayant RENEWAL
Kaitlin OstroskyFranceIvan Magalhaes QUALIFIED
Salvatore StockhamRussiaBernardo Dominic NEGOTIATION
Clifford RimGermanyAnna Fali PROPOSAL
Nicolas IturbideIndiaAmy Elsner RENEWAL
Faith GillianGermanyAsiya Javayant NEGOTIATION
David DarakjyItalyAnna Fali RENEWAL
Leja CaldareraCanadaStephen Shaw PROPOSAL
Smith GlickJapanAmy Elsner QUALIFIED
Nicolas IturbideItalyAnna Fali NEW
Smith GlickSpainIoni Bowcher RENEWAL
Cody SaylorsIndiaStephen Shaw QUALIFIED
Johnson SergiArgentinaAmy Elsner UNQUALIFIED
David DarakjyIndiaElwin Sharvill QUALIFIED
Arvin AlbaresRussiaAmy Elsner QUALIFIED
Leon OldroydBrazilIvan Magalhaes NEW
Antonio CaudyItalyAnna Fali RENEWAL
Silvio SlusarskiGermanyAsiya Javayant QUALIFIED
Salvatore StockhamBrazilBernardo Dominic RENEWAL
Arvin AlbaresArgentinaIvan Magalhaes NEW
Costa DilliardSpainAsiya Javayant UNQUALIFIED
Salvatore StockhamArgentinaElwin Sharvill NEGOTIATION
Clifford RimAustraliaElwin Sharvill NEGOTIATION
Darci PoquetteGermanyIvan Magalhaes QUALIFIED
Kaitlin OstroskyJapanAsiya Javayant UNQUALIFIED
Mujtaba NickaItalyElwin Sharvill NEGOTIATION
Nicolas IturbideJapanOnyama Limba QUALIFIED
Stacey MacleadUnited KingdomBernardo Dominic QUALIFIED
Cody SaylorsSpainBernardo Dominic RENEWAL
Murillo MaletRussiaIoni Bowcher NEW
Darci PoquetteFranceAnna Fali RENEWAL
Costa DilliardSpainAsiya Javayant RENEWAL
Clifford RimCanadaAnna Fali NEW
Horizontal
NameCountryRepresentativeStatus
Leja CaldareraGermanyOnyama Limba UNQUALIFIED
Adams MorascaJapanAmy Elsner PROPOSAL
Izzy GarufiAustraliaOnyama Limba RENEWAL
Greenwood BologniaJapanElwin Sharvill NEGOTIATION
Greenwood BologniaUnited KingdomBernardo Dominic NEGOTIATION
Maisha RulapaughFranceStephen Shaw RENEWAL
Arvin AlbaresSpainBernardo Dominic QUALIFIED
Smith GlickUnited KingdomIoni Bowcher NEW
Clifford RimIndiaIoni Bowcher QUALIFIED
Claire TollnerJapanBernardo Dominic RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Antonio CaudyArgentina2026-05-22Printing Dimensions NEW18Stephen Shaw
1001Aditya KuskoCanada2026-05-10Printing Dimensions UNQUALIFIED67Elwin Sharvill
1002Ivar PaprockiJapan2026-05-31Dorl, James J Esq NEGOTIATION61Xuxue Feng
1003Francesco ShinkoRussia2026-05-20Dorl, James J Esq UNQUALIFIED18Ioni Bowcher
1004Aika InouyeArgentina2026-05-11Truhlar And Truhlar Attys NEW66Asiya Javayant
1005Johnson SergiUnited Kingdom2026-05-18Chapman, Ross E Esq UNQUALIFIED96Asiya Javayant
1006Arvin AlbaresIndia2026-05-15Feltz Printing Service PROPOSAL95Anna Fali
1007Ashley DoeFrance2026-05-04Rangoni Of Florence QUALIFIED32Amy Elsner
1008Morrow RutaItaly2026-05-09Feiner Bros PROPOSAL14Onyama Limba
1009Jennifer AmigonIndia2026-05-19King, Christopher A Esq UNQUALIFIED39Stephen Shaw
1010Juan WieserBrazil2026-05-08Rousseaux, Michael Esq NEGOTIATION13Amy Elsner
1011Jefferson SchemmerSpain2026-05-29King, Christopher A Esq UNQUALIFIED1Anna Fali
1012Antonio CaudyAustralia2026-05-17Commercial Press RENEWAL20Asiya Javayant
1013Mayumi KolmetzFrance2026-05-12Feiner Bros NEW37Anna Fali
1014Emily WhobreyAustralia2026-05-23Truhlar And Truhlar Attys UNQUALIFIED81Stephen Shaw
1015Darci PoquetteItaly2026-05-21Feiner Bros UNQUALIFIED18Asiya Javayant
1016Silvio SlusarskiRussia2026-05-07Commercial Press PROPOSAL86Xuxue Feng
1017Mujtaba NickaSpain2026-05-11Morlong Associates PROPOSAL64Anna Fali
1018Salvatore StockhamAustralia2026-05-25Feiner Bros QUALIFIED3Ivan Magalhaes
1019Nicolas IturbideSpain2026-05-07Printing Dimensions NEW56Anna Fali
1020Alejandro PerinJapan2026-05-21Benton, John B Jr QUALIFIED70Asiya Javayant
1021Maria MarrierGermany2026-05-28Truhlar And Truhlar Attys QUALIFIED6Stephen Shaw
1022Stacey MacleadUnited Kingdom2026-05-31Morlong Associates UNQUALIFIED54Xuxue Feng
1023James ButtItaly2026-05-05Morlong Associates PROPOSAL2Ioni Bowcher
1024Silvio SlusarskiGermany2026-05-31Chapman, Ross E Esq RENEWAL24Elwin Sharvill
1025Nicolas IturbideBrazil2026-05-28Dorl, James J Esq RENEWAL82Stephen Shaw
1026Clifford RimUnited Kingdom2026-05-24Buckley Miller Wright PROPOSAL72Elwin Sharvill
1027Ashley DoeFrance2026-05-24Chapman, Ross E Esq QUALIFIED54Ivan Magalhaes
1028Clifford RimJapan2026-05-27Feiner Bros PROPOSAL37Amy Elsner
1029Morrow RutaRussia2026-05-27Benton, John B Jr QUALIFIED31Anna Fali
1030Greenwood BologniaUnited Kingdom2026-05-30King, Christopher A Esq QUALIFIED36Amy Elsner
1031Aruna FigeroaBrazil2026-05-30Morlong Associates RENEWAL24Asiya Javayant
1032Maria MarrierSpain2026-05-26Truhlar And Truhlar Attys NEGOTIATION46Amy Elsner
1033Aruna FigeroaIndia2026-05-25Feltz Printing Service RENEWAL13Anna Fali
1034Leon OldroydFrance2026-05-10Dorl, James J Esq RENEWAL77Onyama Limba
1035Silvio SlusarskiArgentina2026-05-28Commercial Press PROPOSAL91Asiya Javayant
1036Jennifer AmigonBrazil2026-05-06Printing Dimensions RENEWAL47Bernardo Dominic
1037Wickens NestleGermany2026-05-28Chemel, James L Cpa PROPOSAL71Amy Elsner
1038Rodrigues CampainArgentina2026-05-04Rousseaux, Michael Esq NEGOTIATION13Ivan Magalhaes
1039Smith GlickRussia2026-05-20Chanay, Jeffrey A Esq RENEWAL2Stephen Shaw
1040Silvio SlusarskiCanada2026-05-06Printing Dimensions NEGOTIATION78Amy Elsner
1041Aditya KuskoSpain2026-05-16Rousseaux, Michael Esq NEGOTIATION46Asiya Javayant
1042Silvio SlusarskiUnited Kingdom2026-05-20Feltz Printing Service UNQUALIFIED52Amy Elsner
1043Salvatore StockhamUnited Kingdom2026-05-28Morlong Associates NEGOTIATION20Stephen Shaw
1044Arvin AlbaresJapan2026-05-21Truhlar And Truhlar Attys PROPOSAL77Onyama Limba
1045Tony FollerSpain2026-05-21Dorl, James J Esq PROPOSAL23Asiya Javayant
1046Izzy GarufiAustralia2026-05-04Morlong Associates QUALIFIED39Ivan Magalhaes
1047Izzy GarufiGermany2026-05-21Feiner Bros PROPOSAL90Stephen Shaw
1048Arvin AlbaresBrazil2026-05-10Feltz Printing Service UNQUALIFIED13Bernardo Dominic
1049Kadeem FlosiSpain2026-05-08Feiner Bros NEGOTIATION43Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Isabel BowleyBrazilIoni Bowcher PROPOSAL
Antonio CaudySpainBernardo Dominic QUALIFIED
Smith GlickItalyIvan Magalhaes NEGOTIATION
Morrow RutaUnited KingdomStephen Shaw PROPOSAL
Francesco ShinkoJapanAnna Fali PROPOSAL
Claire TollnerSpainAmy Elsner NEW
Octavia MaletAustraliaAnna Fali NEW
David DarakjyArgentinaBernardo Dominic NEW
Aruna FigeroaArgentinaAnna Fali QUALIFIED
Leja CaldareraIndiaIvan Magalhaes UNQUALIFIED
Munro FerenczArgentinaBernardo Dominic RENEWAL
Leja CaldareraFranceOnyama Limba NEGOTIATION
Costa DilliardCanadaIoni Bowcher UNQUALIFIED
Rodrigues CampainFranceIoni Bowcher QUALIFIED
Alejandro PerinBrazilIvan Magalhaes RENEWAL
Johnson SergiIndiaAsiya Javayant UNQUALIFIED
Aditya KuskoArgentinaOnyama Limba NEGOTIATION
Darci PoquetteBrazilIvan Magalhaes RENEWAL
Silvio SlusarskiItalyOnyama Limba UNQUALIFIED
Emily WhobreyFranceIoni Bowcher NEGOTIATION
Emily WhobreyGermanyIoni Bowcher NEW
Cody SaylorsRussiaAsiya Javayant PROPOSAL
Aika InouyeSpainOnyama Limba NEW
Ricardo GauchoBrazilXuxue Feng NEW
Julie StensethBrazilIoni Bowcher UNQUALIFIED
Costa DilliardSpainAmy Elsner NEGOTIATION
Izzy GarufiRussiaIoni Bowcher PROPOSAL
Johnson SergiSpainStephen Shaw QUALIFIED
Salvatore StockhamCanadaBernardo Dominic QUALIFIED
Salvatore StockhamArgentinaOnyama Limba RENEWAL
Arvin AlbaresSpainIoni Bowcher NEGOTIATION
James ButtItalyAsiya Javayant UNQUALIFIED
Sinclair WaycottSpainAnna Fali QUALIFIED
Aditya KuskoIndiaAsiya Javayant NEW
David DarakjyCanadaAmy Elsner NEW
Julie StensethSpainIoni Bowcher NEW
Deepesh ChuiUnited KingdomAnna Fali QUALIFIED
Morrow RutaJapanOnyama Limba UNQUALIFIED
James ButtArgentinaElwin Sharvill NEGOTIATION
Kaitlin OstroskyGermanyAsiya Javayant RENEWAL
Ivar PaprockiItalyIvan Magalhaes UNQUALIFIED
Rodrigues CampainBrazilBernardo Dominic NEW
Leja CaldareraRussiaBernardo Dominic NEW
Deepesh ChuiItalyXuxue Feng RENEWAL
Stacey MacleadCanadaXuxue Feng QUALIFIED
Jefferson SchemmerCanadaXuxue Feng UNQUALIFIED
Clifford RimRussiaAsiya Javayant QUALIFIED
Isabel BowleyGermanyElwin Sharvill NEW
Juan WieserJapanElwin Sharvill QUALIFIED
Deepesh ChuiItalyXuxue Feng PROPOSAL
Frozen Columns
Name
Munro Ferencz
Octavia Malet
Chavez Briddick
Juan Wieser
Maria Marrier
Tony Foller
Misaki Royster
Julie Stenseth
Maisha Rulapaugh
Juan Wieser
Alejandro Perin
Octavia Malet
Munro Ferencz
Antonio Caudy
Kadeem Flosi
Claire Tollner
Stacey Maclead
Munro Ferencz
Johnson Sergi
Cody Saylors
Jefferson Schemmer
Deepesh Chui
Jennifer Amigon
Costa Dilliard
Antonio Caudy
Ivar Paprocki
Aruna Figeroa
Mujtaba Nicka
Ivar Paprocki
Aditya Kusko
Maisha Rulapaugh
Wickens Nestle
Wickens Nestle
Ashley Doe
Wickens Nestle
Kadeem Flosi
Ricardo Gaucho
Adams Morasca
Kaitlin Ostrosky
Julie Stenseth
Octavia Malet
Adams Morasca
Adams Morasca
Mujtaba Nicka
Chavez Briddick
Jefferson Schemmer
Stacey Maclead
Aika Inouye
Cody Saylors
Ashley Doe
IdCountryDate
1000Germany2026-05-07
1001Spain2026-05-31
1002Spain2026-05-05
1003Canada2026-05-24
1004United Kingdom2026-05-02
1005Australia2026-05-22
1006France2026-05-08
1007United Kingdom2026-05-05
1008Canada2026-05-24
1009United Kingdom2026-05-11
1010Australia2026-05-21
1011Russia2026-05-18
1012Germany2026-05-05
1013India2026-05-17
1014Brazil2026-05-13
1015United Kingdom2026-05-29
1016Germany2026-05-26
1017France2026-05-11
1018Italy2026-05-20
1019France2026-05-11
1020Spain2026-05-08
1021Germany2026-05-06
1022Italy2026-05-18
1023France2026-05-26
1024India2026-05-13
1025Japan2026-05-30
1026Spain2026-05-15
1027Germany2026-05-16
1028Italy2026-05-18
1029Brazil2026-05-17
1030Australia2026-05-28
1031United Kingdom2026-05-16
1032Italy2026-05-14
1033Japan2026-05-13
1034Argentina2026-05-12
1035Spain2026-05-22
1036Germany2026-05-30
1037France2026-05-06
1038Germany2026-05-05
1039Australia2026-05-29
1040Spain2026-05-28
1041United Kingdom2026-05-30
1042Argentina2026-05-03
1043Italy2026-05-28
1044India2026-05-07
1045Canada2026-05-09
1046Russia2026-05-31
1047Japan2026-05-23
1048India2026-05-09
1049India2026-05-06

On-Demand Data

NameIdCountryDate
Antonio Caudy1000Germany2026-05-31
Maisha Rulapaugh1001Argentina2026-05-16
Kadeem Flosi1002Canada2026-05-22
Silvio Slusarski1003Japan2026-05-08
Salvatore Stockham1004Argentina2026-05-23
Stacey Maclead1005Japan2026-05-04
Nicolas Iturbide1006Japan2026-05-26
Ivar Paprocki1007United Kingdom2026-05-21
Antonio Caudy1008Russia2026-05-18
Kaitlin Ostrosky1009Germany2026-05-26
Rodrigues Campain1010France2026-05-03
Izzy Garufi1011India2026-05-12
Ashley Doe1012Japan2026-05-29
Misaki Royster1013Russia2026-05-03
Leja Caldarera1014India2026-05-27
Cody Saylors1015India2026-05-18
Isabel Bowley1016France2026-05-19
Claire Tollner1017Argentina2026-05-30
Jennifer Amigon1018Germany2026-05-18
David Darakjy1019Brazil2026-05-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Costa DilliardGermanyBernardo Dominic UNQUALIFIED
Ricardo GauchoGermanyXuxue Feng RENEWAL
Silvio SlusarskiItalyAsiya Javayant RENEWAL
Aika InouyeUnited KingdomAnna Fali NEGOTIATION
Rodrigues CampainArgentinaAmy Elsner NEGOTIATION
Aditya KuskoJapanOnyama Limba RENEWAL
Alejandro PerinSpainIvan Magalhaes QUALIFIED
Deepesh ChuiItalyElwin Sharvill NEGOTIATION
Clifford RimRussiaElwin Sharvill NEW
Octavia MaletAustraliaIoni Bowcher UNQUALIFIED
Costa DilliardArgentinaOnyama Limba NEW
Jeanfrancois VenereUnited KingdomOnyama Limba NEGOTIATION
Aruna FigeroaUnited KingdomStephen Shaw NEW
David DarakjySpainIvan Magalhaes RENEWAL
Francesco ShinkoSpainStephen Shaw PROPOSAL
Mayumi KolmetzRussiaElwin Sharvill PROPOSAL
Munro FerenczItalyBernardo Dominic RENEWAL
Johnson SergiItalyIvan Magalhaes QUALIFIED
Aruna FigeroaSpainAnna Fali NEGOTIATION
Aruna FigeroaIndiaAnna Fali NEGOTIATION
Octavia MaletCanadaElwin Sharvill QUALIFIED
Rodrigues CampainAustraliaAnna Fali QUALIFIED
Johnson SergiRussiaElwin Sharvill PROPOSAL
Faith GillianSpainXuxue Feng UNQUALIFIED
Tony FollerUnited KingdomAmy Elsner UNQUALIFIED
Julie StensethSpainElwin Sharvill QUALIFIED
Octavia MaletAustraliaIoni Bowcher QUALIFIED
Sinclair WaycottAustraliaAnna Fali NEW
Morrow RutaItalyIvan Magalhaes QUALIFIED
Jennifer AmigonBrazilBernardo Dominic NEGOTIATION
Juan WieserGermanyOnyama Limba NEW
Rodrigues CampainArgentinaAnna Fali NEGOTIATION
Tony FollerUnited KingdomAsiya Javayant PROPOSAL
Leja CaldareraJapanAnna Fali NEW
Smith GlickSpainElwin Sharvill QUALIFIED
Morrow RutaUnited KingdomXuxue Feng RENEWAL
Juan WieserGermanyAsiya Javayant UNQUALIFIED
Rodrigues CampainAustraliaStephen Shaw QUALIFIED
David DarakjyItalyStephen Shaw NEW
Aditya KuskoSpainAmy Elsner 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>