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
Octavia MaletFranceBernardo Dominic RENEWAL
Smith GlickFranceAnna Fali PROPOSAL
Adams MorascaGermanyAnna Fali NEW
Maria MarrierGermanyXuxue Feng NEGOTIATION
Smith GlickGermanyBernardo Dominic PROPOSAL
Adams MorascaIndiaElwin Sharvill UNQUALIFIED
James ButtArgentinaOnyama Limba NEW
Kadeem FlosiBrazilOnyama Limba UNQUALIFIED
Mujtaba NickaArgentinaStephen Shaw PROPOSAL
Johnson SergiItalyAnna Fali NEW
Ashley DoeFranceBernardo Dominic UNQUALIFIED
Ashley DoeFranceAmy Elsner NEW
James ButtBrazilIoni Bowcher QUALIFIED
Ivar PaprockiRussiaElwin Sharvill UNQUALIFIED
Aika InouyeJapanStephen Shaw UNQUALIFIED
Clifford RimIndiaAnna Fali UNQUALIFIED
Deepesh ChuiGermanyIoni Bowcher RENEWAL
Wickens NestleIndiaBernardo Dominic PROPOSAL
Aditya KuskoCanadaXuxue Feng QUALIFIED
Stacey MacleadSpainAmy Elsner RENEWAL
Juan WieserArgentinaIoni Bowcher QUALIFIED
Juan WieserFranceOnyama Limba NEW
Antonio CaudyUnited KingdomIoni Bowcher QUALIFIED
Jones VocelkaFranceElwin Sharvill NEW
Jefferson SchemmerArgentinaIoni Bowcher UNQUALIFIED
Mayumi KolmetzCanadaAsiya Javayant NEW
Morrow RutaFranceIoni Bowcher QUALIFIED
Kadeem FlosiArgentinaElwin Sharvill NEW
Izzy GarufiJapanAmy Elsner NEW
Greenwood BologniaAustraliaIoni Bowcher QUALIFIED
Wickens NestleRussiaIoni Bowcher QUALIFIED
Greenwood BologniaRussiaAmy Elsner NEW
James ButtRussiaStephen Shaw PROPOSAL
Ivar PaprockiJapanIoni Bowcher NEW
Leon OldroydIndiaAmy Elsner NEW
Ashley DoeItalyIvan Magalhaes PROPOSAL
Chavez BriddickItalyStephen Shaw QUALIFIED
Smith GlickBrazilXuxue Feng NEGOTIATION
Morrow RutaItalyAnna Fali PROPOSAL
Mayumi KolmetzIndiaBernardo Dominic NEW
Rodrigues CampainIndiaXuxue Feng NEW
Ashley DoeFranceAmy Elsner QUALIFIED
Jeanfrancois VenereCanadaAmy Elsner NEGOTIATION
Munro FerenczBrazilBernardo Dominic RENEWAL
Johnson SergiBrazilStephen Shaw NEGOTIATION
Wickens NestleBrazilElwin Sharvill NEGOTIATION
Alejandro PerinRussiaBernardo Dominic PROPOSAL
Francesco ShinkoAustraliaAnna Fali PROPOSAL
Kaitlin OstroskyRussiaElwin Sharvill PROPOSAL
Nicolas IturbideItalyAsiya Javayant QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Jennifer AmigonRussiaElwin Sharvill NEW
Ashley DoeArgentinaAsiya Javayant PROPOSAL
Aika InouyeFranceElwin Sharvill UNQUALIFIED
Smith GlickIndiaXuxue Feng NEW
David DarakjyJapanXuxue Feng NEW
Claire TollnerAustraliaStephen Shaw NEGOTIATION
Jeanfrancois VenereIndiaIoni Bowcher PROPOSAL
Jefferson SchemmerJapanAsiya Javayant QUALIFIED
Nicolas IturbideIndiaIvan Magalhaes UNQUALIFIED
Adams MorascaIndiaIoni Bowcher RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Juan WieserBrazil2026-04-09Rousseaux, Michael Esq UNQUALIFIED22Stephen Shaw
1001Emily WhobreyUnited Kingdom2026-03-30King, Christopher A Esq PROPOSAL19Onyama Limba
1002Johnson SergiIndia2026-04-10Rousseaux, Michael Esq PROPOSAL98Anna Fali
1003Arvin AlbaresRussia2026-03-31Morlong Associates NEGOTIATION99Ivan Magalhaes
1004Tony FollerJapan2026-03-31Feiner Bros QUALIFIED41Ivan Magalhaes
1005Darci PoquetteJapan2026-03-25Benton, John B Jr UNQUALIFIED9Onyama Limba
1006Munro FerenczCanada2026-04-11Morlong Associates UNQUALIFIED29Asiya Javayant
1007Munro FerenczJapan2026-04-12Chapman, Ross E Esq NEGOTIATION11Ivan Magalhaes
1008Jennifer AmigonBrazil2026-04-01Rousseaux, Michael Esq QUALIFIED36Elwin Sharvill
1009Leon OldroydFrance2026-04-13Feltz Printing Service RENEWAL94Ivan Magalhaes
1010Mayumi KolmetzFrance2026-04-12King, Christopher A Esq PROPOSAL94Ioni Bowcher
1011Darci PoquetteGermany2026-04-15Truhlar And Truhlar Attys RENEWAL21Bernardo Dominic
1012Morrow RutaGermany2026-04-02Commercial Press NEW76Asiya Javayant
1013Claire TollnerIndia2026-03-21Rangoni Of Florence UNQUALIFIED20Stephen Shaw
1014Murillo MaletSpain2026-04-17Truhlar And Truhlar Attys NEW94Asiya Javayant
1015Kaitlin OstroskyBrazil2026-03-24Chanay, Jeffrey A Esq PROPOSAL85Stephen Shaw
1016Juan WieserItaly2026-04-09Chemel, James L Cpa RENEWAL63Xuxue Feng
1017Kadeem FlosiAustralia2026-04-06Feiner Bros UNQUALIFIED55Onyama Limba
1018Rodrigues CampainRussia2026-04-14Feltz Printing Service UNQUALIFIED7Anna Fali
1019Leja CaldareraGermany2026-03-29Rousseaux, Michael Esq RENEWAL71Asiya Javayant
1020Morrow RutaCanada2026-04-06Rousseaux, Michael Esq PROPOSAL59Elwin Sharvill
1021Mayumi KolmetzIndia2026-04-03Chanay, Jeffrey A Esq QUALIFIED12Stephen Shaw
1022Faith GillianBrazil2026-03-30Feltz Printing Service RENEWAL64Ioni Bowcher
1023Claire TollnerRussia2026-03-25Commercial Press RENEWAL63Ioni Bowcher
1024Arvin AlbaresRussia2026-04-09Feiner Bros NEGOTIATION61Anna Fali
1025Alejandro PerinBrazil2026-04-10Rousseaux, Michael Esq RENEWAL85Amy Elsner
1026Isabel BowleyBrazil2026-04-18Buckley Miller Wright UNQUALIFIED91Ivan Magalhaes
1027Kaitlin OstroskyCanada2026-04-17Buckley Miller Wright PROPOSAL85Elwin Sharvill
1028Octavia MaletJapan2026-04-04Chapman, Ross E Esq NEGOTIATION37Asiya Javayant
1029Munro FerenczIndia2026-04-13Feltz Printing Service PROPOSAL83Ivan Magalhaes
1030Adams MorascaSpain2026-03-27Dorl, James J Esq RENEWAL26Ivan Magalhaes
1031Greenwood BologniaGermany2026-04-14Printing Dimensions PROPOSAL75Ioni Bowcher
1032Jones VocelkaSpain2026-04-04Chemel, James L Cpa NEGOTIATION81Ioni Bowcher
1033Munro FerenczAustralia2026-04-12Morlong Associates UNQUALIFIED40Ivan Magalhaes
1034Jennifer AmigonJapan2026-03-21Dorl, James J Esq UNQUALIFIED45Ivan Magalhaes
1035Aditya KuskoBrazil2026-04-08Chanay, Jeffrey A Esq QUALIFIED48Xuxue Feng
1036Clifford RimIndia2026-04-07Rangoni Of Florence PROPOSAL35Anna Fali
1037Leon OldroydArgentina2026-04-06Rousseaux, Michael Esq UNQUALIFIED29Asiya Javayant
1038Mujtaba NickaGermany2026-04-17King, Christopher A Esq RENEWAL1Ioni Bowcher
1039Rodrigues CampainGermany2026-04-19Morlong Associates NEW24Xuxue Feng
1040James ButtAustralia2026-03-30King, Christopher A Esq NEW32Stephen Shaw
1041Darci PoquetteArgentina2026-04-04Rangoni Of Florence UNQUALIFIED85Anna Fali
1042Ivar PaprockiIndia2026-03-22Rousseaux, Michael Esq RENEWAL25Ioni Bowcher
1043Murillo MaletUnited Kingdom2026-03-26Dorl, James J Esq NEW1Onyama Limba
1044Izzy GarufiCanada2026-04-01Rangoni Of Florence NEW90Bernardo Dominic
1045Rodrigues CampainUnited Kingdom2026-04-15Chemel, James L Cpa RENEWAL54Anna Fali
1046Morrow RutaUnited Kingdom2026-04-17Feltz Printing Service UNQUALIFIED65Amy Elsner
1047Jennifer AmigonGermany2026-04-02Chapman, Ross E Esq NEGOTIATION66Ivan Magalhaes
1048Kadeem FlosiFrance2026-03-24Chemel, James L Cpa QUALIFIED19Ioni Bowcher
1049Emily WhobreyFrance2026-04-16Printing Dimensions UNQUALIFIED72Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Sinclair WaycottSpainIvan Magalhaes UNQUALIFIED
Ashley DoeIndiaBernardo Dominic NEGOTIATION
Aditya KuskoItalyAsiya Javayant UNQUALIFIED
Kadeem FlosiBrazilAmy Elsner PROPOSAL
Kadeem FlosiArgentinaAmy Elsner QUALIFIED
Mujtaba NickaIndiaStephen Shaw UNQUALIFIED
Alejandro PerinItalyStephen Shaw NEGOTIATION
Misaki RoysterUnited KingdomXuxue Feng QUALIFIED
Adams MorascaArgentinaElwin Sharvill PROPOSAL
Alejandro PerinUnited KingdomIoni Bowcher RENEWAL
Wickens NestleArgentinaIvan Magalhaes NEW
Chavez BriddickFranceBernardo Dominic NEGOTIATION
Chavez BriddickUnited KingdomOnyama Limba QUALIFIED
David DarakjyBrazilXuxue Feng UNQUALIFIED
Costa DilliardRussiaStephen Shaw RENEWAL
Jefferson SchemmerFranceElwin Sharvill NEW
Maisha RulapaughAustraliaAmy Elsner QUALIFIED
Emily WhobreyArgentinaAnna Fali NEW
Ashley DoeItalyAnna Fali NEW
Misaki RoysterUnited KingdomAnna Fali NEGOTIATION
Smith GlickAustraliaIvan Magalhaes QUALIFIED
Maria MarrierJapanIvan Magalhaes PROPOSAL
Ricardo GauchoAustraliaIoni Bowcher PROPOSAL
Morrow RutaRussiaAnna Fali NEGOTIATION
Aditya KuskoArgentinaStephen Shaw NEW
Wickens NestleGermanyAnna Fali UNQUALIFIED
Francesco ShinkoRussiaStephen Shaw PROPOSAL
Emily WhobreyRussiaIoni Bowcher NEW
Mujtaba NickaIndiaAsiya Javayant RENEWAL
Julie StensethJapanAnna Fali RENEWAL
Kaitlin OstroskyIndiaXuxue Feng NEW
Ashley DoeIndiaAmy Elsner RENEWAL
Chavez BriddickSpainXuxue Feng PROPOSAL
Ivar PaprockiJapanOnyama Limba QUALIFIED
Costa DilliardBrazilIoni Bowcher QUALIFIED
Munro FerenczIndiaAnna Fali UNQUALIFIED
Leja CaldareraRussiaBernardo Dominic UNQUALIFIED
Jeanfrancois VenereBrazilAmy Elsner PROPOSAL
Murillo MaletCanadaIoni Bowcher PROPOSAL
Aika InouyeBrazilAsiya Javayant QUALIFIED
Rodrigues CampainJapanAsiya Javayant QUALIFIED
Izzy GarufiAustraliaAmy Elsner RENEWAL
Chavez BriddickCanadaIvan Magalhaes PROPOSAL
Morrow RutaJapanBernardo Dominic NEW
Deepesh ChuiItalyAmy Elsner PROPOSAL
Ashley DoeRussiaBernardo Dominic QUALIFIED
Murillo MaletAustraliaOnyama Limba UNQUALIFIED
Izzy GarufiRussiaAmy Elsner QUALIFIED
Claire TollnerRussiaAnna Fali RENEWAL
Rodrigues CampainSpainIvan Magalhaes UNQUALIFIED
Frozen Columns
Name
Juan Wieser
Leon Oldroyd
Sinclair Waycott
Maria Marrier
Maisha Rulapaugh
Jefferson Schemmer
Izzy Garufi
Clifford Rim
Aditya Kusko
Adams Morasca
Misaki Royster
Salvatore Stockham
Julie Stenseth
Jeanfrancois Venere
Kadeem Flosi
Nicolas Iturbide
Kaitlin Ostrosky
Nicolas Iturbide
Jones Vocelka
Kaitlin Ostrosky
Jones Vocelka
Silvio Slusarski
Antonio Caudy
Nicolas Iturbide
Leon Oldroyd
Octavia Malet
Leon Oldroyd
James Butt
Ricardo Gaucho
Clifford Rim
Leon Oldroyd
Aika Inouye
Alejandro Perin
Jeanfrancois Venere
Darci Poquette
Sinclair Waycott
Cody Saylors
Jefferson Schemmer
Costa Dilliard
Aika Inouye
Izzy Garufi
Aditya Kusko
Arvin Albares
Alejandro Perin
Julie Stenseth
Greenwood Bolognia
Cody Saylors
Misaki Royster
Adams Morasca
Leon Oldroyd
IdCountryDate
1000Japan2026-03-25
1001Argentina2026-04-12
1002Australia2026-04-03
1003Spain2026-03-25
1004Italy2026-04-13
1005Argentina2026-04-05
1006Canada2026-04-15
1007France2026-04-19
1008France2026-03-30
1009Germany2026-04-04
1010Canada2026-03-27
1011India2026-04-18
1012Argentina2026-04-07
1013Brazil2026-03-24
1014Spain2026-04-05
1015Russia2026-03-23
1016India2026-04-19
1017Germany2026-04-03
1018Spain2026-03-22
1019Russia2026-04-10
1020France2026-04-10
1021Canada2026-03-22
1022Russia2026-04-09
1023Russia2026-04-16
1024Brazil2026-03-27
1025Germany2026-04-18
1026Canada2026-04-15
1027Germany2026-03-29
1028United Kingdom2026-04-19
1029United Kingdom2026-04-03
1030France2026-03-30
1031Spain2026-03-28
1032Italy2026-04-06
1033India2026-04-02
1034United Kingdom2026-04-03
1035Japan2026-03-25
1036Russia2026-03-21
1037Germany2026-04-08
1038Brazil2026-03-21
1039India2026-04-15
1040Canada2026-03-30
1041Australia2026-04-11
1042Australia2026-03-28
1043Italy2026-03-22
1044Italy2026-04-14
1045Spain2026-03-22
1046Spain2026-04-04
1047Japan2026-03-21
1048India2026-04-04
1049United Kingdom2026-03-28

On-Demand Data

NameIdCountryDate
Francesco Shinko1000United Kingdom2026-04-02
Antonio Caudy1001Argentina2026-04-17
Juan Wieser1002Australia2026-04-14
Emily Whobrey1003Spain2026-03-21
Johnson Sergi1004Brazil2026-03-31
Juan Wieser1005United Kingdom2026-03-26
Maria Marrier1006Argentina2026-03-26
Greenwood Bolognia1007India2026-03-25
Silvio Slusarski1008India2026-04-03
James Butt1009Italy2026-04-19
David Darakjy1010France2026-04-17
Nicolas Iturbide1011Germany2026-03-25
Johnson Sergi1012Italy2026-04-14
Jones Vocelka1013Australia2026-04-01
Claire Tollner1014India2026-04-04
Maria Marrier1015Spain2026-04-15
Johnson Sergi1016Russia2026-04-10
Johnson Sergi1017Italy2026-04-03
Rodrigues Campain1018France2026-04-17
Clifford Rim1019Russia2026-03-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Julie StensethAustraliaBernardo Dominic NEGOTIATION
Aditya KuskoItalyAmy Elsner RENEWAL
James ButtUnited KingdomAnna Fali RENEWAL
Leon OldroydGermanyAsiya Javayant UNQUALIFIED
Nicolas IturbideFranceElwin Sharvill RENEWAL
Johnson SergiItalyAsiya Javayant RENEWAL
Aika InouyeGermanyXuxue Feng RENEWAL
Ivar PaprockiArgentinaIvan Magalhaes QUALIFIED
Leon OldroydFranceIoni Bowcher RENEWAL
Ashley DoeBrazilIoni Bowcher NEGOTIATION
Misaki RoysterIndiaIoni Bowcher PROPOSAL
Ashley DoeRussiaOnyama Limba PROPOSAL
Mujtaba NickaItalyAsiya Javayant QUALIFIED
Aruna FigeroaGermanyAnna Fali PROPOSAL
Jennifer AmigonAustraliaIoni Bowcher RENEWAL
Nicolas IturbideGermanyBernardo Dominic QUALIFIED
Faith GillianCanadaXuxue Feng UNQUALIFIED
Adams MorascaIndiaAsiya Javayant NEW
Sinclair WaycottBrazilBernardo Dominic QUALIFIED
James ButtFranceIvan Magalhaes UNQUALIFIED
Johnson SergiBrazilAnna Fali PROPOSAL
Maria MarrierArgentinaIoni Bowcher NEGOTIATION
Ricardo GauchoSpainAnna Fali QUALIFIED
James ButtSpainAmy Elsner RENEWAL
Clifford RimGermanyStephen Shaw NEW
Isabel BowleyBrazilAsiya Javayant PROPOSAL
Ricardo GauchoJapanAsiya Javayant NEW
Nicolas IturbideItalyStephen Shaw NEGOTIATION
Johnson SergiUnited KingdomIvan Magalhaes UNQUALIFIED
Ivar PaprockiSpainXuxue Feng RENEWAL
Morrow RutaGermanyAmy Elsner NEW
Claire TollnerFranceOnyama Limba QUALIFIED
Adams MorascaArgentinaAmy Elsner UNQUALIFIED
Jeanfrancois VenereSpainBernardo Dominic RENEWAL
Stacey MacleadIndiaAsiya Javayant UNQUALIFIED
Leja CaldareraRussiaAnna Fali RENEWAL
Mujtaba NickaIndiaOnyama Limba RENEWAL
Nicolas IturbideAustraliaIvan Magalhaes NEW
Cody SaylorsFranceIvan Magalhaes NEGOTIATION
Salvatore StockhamIndiaAsiya Javayant 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>