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
Jeanfrancois VenereUnited KingdomAmy Elsner RENEWAL
Maria MarrierFranceAnna Fali UNQUALIFIED
Cody SaylorsRussiaXuxue Feng QUALIFIED
Munro FerenczBrazilOnyama Limba QUALIFIED
Izzy GarufiItalyAsiya Javayant PROPOSAL
Juan WieserCanadaStephen Shaw RENEWAL
Isabel BowleyCanadaAmy Elsner NEGOTIATION
Juan WieserAustraliaAmy Elsner UNQUALIFIED
Maria MarrierUnited KingdomBernardo Dominic NEW
Misaki RoysterUnited KingdomStephen Shaw NEGOTIATION
Isabel BowleyIndiaIoni Bowcher RENEWAL
Munro FerenczArgentinaElwin Sharvill NEGOTIATION
Jeanfrancois VenereArgentinaElwin Sharvill UNQUALIFIED
Faith GillianAustraliaAnna Fali NEGOTIATION
Maria MarrierGermanyElwin Sharvill NEW
Arvin AlbaresCanadaAmy Elsner RENEWAL
Izzy GarufiItalyXuxue Feng QUALIFIED
Claire TollnerGermanyXuxue Feng NEW
Clifford RimCanadaBernardo Dominic QUALIFIED
James ButtGermanyBernardo Dominic RENEWAL
Misaki RoysterBrazilStephen Shaw QUALIFIED
Tony FollerItalyIvan Magalhaes RENEWAL
Kaitlin OstroskyBrazilElwin Sharvill NEGOTIATION
Maisha RulapaughJapanAnna Fali UNQUALIFIED
Antonio CaudyIndiaBernardo Dominic PROPOSAL
Alejandro PerinArgentinaAmy Elsner QUALIFIED
Kaitlin OstroskyArgentinaAmy Elsner QUALIFIED
Darci PoquetteAustraliaAsiya Javayant RENEWAL
Leja CaldareraSpainXuxue Feng UNQUALIFIED
Mujtaba NickaRussiaOnyama Limba RENEWAL
Mayumi KolmetzSpainIvan Magalhaes NEGOTIATION
Rodrigues CampainIndiaXuxue Feng NEW
Darci PoquetteArgentinaElwin Sharvill UNQUALIFIED
Salvatore StockhamCanadaAnna Fali UNQUALIFIED
Clifford RimCanadaStephen Shaw QUALIFIED
Rodrigues CampainGermanyXuxue Feng PROPOSAL
Ivar PaprockiCanadaBernardo Dominic QUALIFIED
Kaitlin OstroskyArgentinaAsiya Javayant QUALIFIED
Tony FollerFranceAsiya Javayant NEW
Alejandro PerinGermanyBernardo Dominic QUALIFIED
Salvatore StockhamRussiaIoni Bowcher NEW
Julie StensethUnited KingdomAsiya Javayant RENEWAL
Tony FollerGermanyAsiya Javayant PROPOSAL
Clifford RimBrazilElwin Sharvill PROPOSAL
Francesco ShinkoIndiaOnyama Limba RENEWAL
Aika InouyeCanadaAsiya Javayant UNQUALIFIED
Darci PoquetteArgentinaStephen Shaw PROPOSAL
Costa DilliardIndiaAmy Elsner PROPOSAL
Francesco ShinkoCanadaIoni Bowcher NEGOTIATION
Deepesh ChuiGermanyAmy Elsner NEW
Horizontal
NameCountryRepresentativeStatus
Aika InouyeGermanyIoni Bowcher PROPOSAL
Kaitlin OstroskyArgentinaXuxue Feng UNQUALIFIED
Cody SaylorsJapanXuxue Feng NEW
Mujtaba NickaRussiaAnna Fali NEW
Darci PoquetteGermanyOnyama Limba QUALIFIED
Kaitlin OstroskyIndiaIvan Magalhaes NEW
Chavez BriddickFranceOnyama Limba PROPOSAL
Claire TollnerGermanyAnna Fali NEGOTIATION
Antonio CaudyUnited KingdomIvan Magalhaes NEW
Silvio SlusarskiItalyElwin Sharvill NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Misaki RoysterCanada2026-04-11King, Christopher A Esq NEW2Anna Fali
1001Aditya KuskoUnited Kingdom2026-04-08Commercial Press NEW56Onyama Limba
1002Ivar PaprockiArgentina2026-04-07Feltz Printing Service QUALIFIED95Amy Elsner
1003Leon OldroydBrazil2026-04-12Chemel, James L Cpa PROPOSAL80Ivan Magalhaes
1004Mujtaba NickaRussia2026-04-11Chemel, James L Cpa QUALIFIED38Bernardo Dominic
1005Kaitlin OstroskySpain2026-04-09Feiner Bros NEGOTIATION46Xuxue Feng
1006Mayumi KolmetzJapan2026-04-04Feltz Printing Service QUALIFIED92Ivan Magalhaes
1007Antonio CaudyArgentina2026-04-27Benton, John B Jr PROPOSAL57Bernardo Dominic
1008Leja CaldareraGermany2026-04-06Feiner Bros PROPOSAL16Amy Elsner
1009Costa DilliardRussia2026-05-02Dorl, James J Esq PROPOSAL53Elwin Sharvill
1010Aruna FigeroaSpain2026-04-30Dorl, James J Esq NEGOTIATION40Onyama Limba
1011Mayumi KolmetzFrance2026-04-12Truhlar And Truhlar Attys RENEWAL65Asiya Javayant
1012Mayumi KolmetzBrazil2026-04-16Truhlar And Truhlar Attys NEW73Amy Elsner
1013Rodrigues CampainSpain2026-04-14Commercial Press NEW4Anna Fali
1014Jeanfrancois VenereGermany2026-04-29Chapman, Ross E Esq PROPOSAL94Xuxue Feng
1015Jeanfrancois VenereFrance2026-04-15Truhlar And Truhlar Attys NEW34Anna Fali
1016Adams MorascaCanada2026-04-21Rangoni Of Florence UNQUALIFIED93Bernardo Dominic
1017Jefferson SchemmerItaly2026-04-10King, Christopher A Esq NEGOTIATION8Amy Elsner
1018Faith GillianRussia2026-04-22Rangoni Of Florence QUALIFIED98Ivan Magalhaes
1019Antonio CaudyBrazil2026-04-18Commercial Press RENEWAL96Asiya Javayant
1020Salvatore StockhamFrance2026-04-14Rangoni Of Florence NEGOTIATION46Asiya Javayant
1021Chavez BriddickGermany2026-04-03Printing Dimensions NEGOTIATION94Anna Fali
1022Kaitlin OstroskyArgentina2026-04-19Chapman, Ross E Esq NEW14Bernardo Dominic
1023Kaitlin OstroskyUnited Kingdom2026-04-24Benton, John B Jr NEW17Anna Fali
1024Francesco ShinkoSpain2026-04-13Rangoni Of Florence UNQUALIFIED23Amy Elsner
1025Smith GlickCanada2026-04-23Dorl, James J Esq NEW70Stephen Shaw
1026Darci PoquetteIndia2026-04-19Rangoni Of Florence NEW6Elwin Sharvill
1027Murillo MaletFrance2026-04-20Commercial Press UNQUALIFIED79Onyama Limba
1028Ashley DoeFrance2026-04-07Printing Dimensions UNQUALIFIED80Bernardo Dominic
1029Morrow RutaJapan2026-04-15Morlong Associates QUALIFIED9Xuxue Feng
1030Antonio CaudyItaly2026-04-11Buckley Miller Wright NEW59Amy Elsner
1031Aruna FigeroaItaly2026-04-27Chanay, Jeffrey A Esq PROPOSAL50Ivan Magalhaes
1032Faith GillianBrazil2026-04-29Printing Dimensions NEGOTIATION74Ivan Magalhaes
1033Maisha RulapaughRussia2026-04-07Morlong Associates QUALIFIED26Amy Elsner
1034Sinclair WaycottRussia2026-04-09King, Christopher A Esq NEGOTIATION79Xuxue Feng
1035David DarakjyRussia2026-04-06Chapman, Ross E Esq PROPOSAL76Asiya Javayant
1036Ashley DoeSpain2026-04-26Dorl, James J Esq RENEWAL80Bernardo Dominic
1037Costa DilliardItaly2026-04-16Rousseaux, Michael Esq QUALIFIED59Onyama Limba
1038Costa DilliardSpain2026-04-26Benton, John B Jr NEW64Onyama Limba
1039Deepesh ChuiArgentina2026-04-15Printing Dimensions PROPOSAL71Amy Elsner
1040Adams MorascaFrance2026-04-14Benton, John B Jr QUALIFIED36Ivan Magalhaes
1041Arvin AlbaresCanada2026-04-08Feltz Printing Service PROPOSAL55Asiya Javayant
1042Darci PoquetteIndia2026-04-27Benton, John B Jr RENEWAL74Amy Elsner
1043Ashley DoeFrance2026-04-22Benton, John B Jr UNQUALIFIED42Stephen Shaw
1044Isabel BowleySpain2026-04-30Morlong Associates RENEWAL76Ioni Bowcher
1045Jennifer AmigonArgentina2026-04-24Buckley Miller Wright RENEWAL87Bernardo Dominic
1046Murillo MaletItaly2026-04-30Benton, John B Jr PROPOSAL95Ivan Magalhaes
1047Munro FerenczGermany2026-04-05King, Christopher A Esq NEGOTIATION3Elwin Sharvill
1048Stacey MacleadCanada2026-04-04Benton, John B Jr NEW87Anna Fali
1049Antonio CaudyItaly2026-04-17Truhlar And Truhlar Attys RENEWAL80Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Nicolas IturbideRussiaStephen Shaw RENEWAL
Antonio CaudyUnited KingdomXuxue Feng UNQUALIFIED
Aika InouyeIndiaXuxue Feng NEGOTIATION
Juan WieserCanadaIvan Magalhaes NEW
Costa DilliardIndiaAnna Fali NEGOTIATION
Aika InouyeRussiaAsiya Javayant RENEWAL
Octavia MaletBrazilIvan Magalhaes UNQUALIFIED
Mayumi KolmetzUnited KingdomIvan Magalhaes QUALIFIED
Kaitlin OstroskyRussiaOnyama Limba NEW
Jones VocelkaFranceIvan Magalhaes NEW
Leja CaldareraAustraliaIoni Bowcher NEGOTIATION
Julie StensethSpainAnna Fali UNQUALIFIED
Johnson SergiCanadaBernardo Dominic NEGOTIATION
Deepesh ChuiUnited KingdomIvan Magalhaes NEGOTIATION
Munro FerenczArgentinaOnyama Limba RENEWAL
Clifford RimJapanIvan Magalhaes NEW
Maria MarrierBrazilBernardo Dominic UNQUALIFIED
Faith GillianBrazilAsiya Javayant NEW
Arvin AlbaresIndiaElwin Sharvill NEGOTIATION
Aruna FigeroaAustraliaOnyama Limba PROPOSAL
Adams MorascaArgentinaAnna Fali NEGOTIATION
Cody SaylorsFranceElwin Sharvill RENEWAL
Claire TollnerIndiaBernardo Dominic QUALIFIED
Kadeem FlosiFranceAnna Fali NEGOTIATION
Ivar PaprockiCanadaAsiya Javayant RENEWAL
David DarakjyFranceAsiya Javayant NEW
Morrow RutaIndiaAsiya Javayant PROPOSAL
Rodrigues CampainItalyIoni Bowcher NEW
Faith GillianCanadaIvan Magalhaes QUALIFIED
Faith GillianUnited KingdomOnyama Limba QUALIFIED
Emily WhobreyBrazilElwin Sharvill UNQUALIFIED
Alejandro PerinFranceXuxue Feng NEGOTIATION
Claire TollnerAustraliaElwin Sharvill PROPOSAL
Leja CaldareraJapanIvan Magalhaes PROPOSAL
Johnson SergiCanadaAmy Elsner UNQUALIFIED
Leon OldroydSpainIoni Bowcher RENEWAL
Cody SaylorsJapanIvan Magalhaes PROPOSAL
Julie StensethSpainElwin Sharvill NEGOTIATION
Sinclair WaycottItalyOnyama Limba UNQUALIFIED
Aika InouyeAustraliaStephen Shaw PROPOSAL
Costa DilliardSpainAmy Elsner UNQUALIFIED
Izzy GarufiJapanElwin Sharvill NEW
Darci PoquetteCanadaXuxue Feng PROPOSAL
Sinclair WaycottArgentinaOnyama Limba RENEWAL
Morrow RutaSpainXuxue Feng PROPOSAL
Jefferson SchemmerGermanyIvan Magalhaes QUALIFIED
Octavia MaletUnited KingdomAnna Fali PROPOSAL
Arvin AlbaresSpainIoni Bowcher UNQUALIFIED
Jefferson SchemmerBrazilAsiya Javayant UNQUALIFIED
Stacey MacleadSpainElwin Sharvill NEW
Frozen Columns
Name
Nicolas Iturbide
Leja Caldarera
Alejandro Perin
Aruna Figeroa
Aika Inouye
Chavez Briddick
Jones Vocelka
Ricardo Gaucho
Tony Foller
Claire Tollner
Leon Oldroyd
Leja Caldarera
Arvin Albares
Izzy Garufi
Octavia Malet
Costa Dilliard
Kaitlin Ostrosky
Wickens Nestle
Octavia Malet
Jefferson Schemmer
Stacey Maclead
Juan Wieser
Johnson Sergi
Aika Inouye
Jones Vocelka
Aditya Kusko
Silvio Slusarski
Maria Marrier
Munro Ferencz
Alejandro Perin
Cody Saylors
Maria Marrier
Silvio Slusarski
Nicolas Iturbide
Izzy Garufi
Octavia Malet
Aditya Kusko
Cody Saylors
Smith Glick
Francesco Shinko
Izzy Garufi
Antonio Caudy
Munro Ferencz
Arvin Albares
Costa Dilliard
Jefferson Schemmer
Jones Vocelka
Smith Glick
Sinclair Waycott
James Butt
IdCountryDate
1000France2026-04-14
1001Canada2026-04-25
1002Canada2026-04-23
1003India2026-04-18
1004Russia2026-04-18
1005Argentina2026-04-13
1006Australia2026-04-03
1007Germany2026-04-17
1008Russia2026-04-08
1009Canada2026-04-28
1010Russia2026-04-04
1011Russia2026-04-12
1012United Kingdom2026-04-20
1013Russia2026-04-30
1014Spain2026-04-30
1015Canada2026-04-08
1016Spain2026-04-24
1017Italy2026-04-30
1018Germany2026-04-07
1019United Kingdom2026-04-06
1020Germany2026-04-13
1021Canada2026-04-10
1022Australia2026-04-11
1023France2026-04-14
1024France2026-04-20
1025United Kingdom2026-04-04
1026Argentina2026-04-29
1027Spain2026-04-16
1028Australia2026-04-16
1029France2026-04-11
1030Australia2026-04-30
1031Japan2026-05-01
1032Argentina2026-04-14
1033Japan2026-04-23
1034Japan2026-04-15
1035Argentina2026-04-17
1036United Kingdom2026-04-17
1037Spain2026-04-03
1038Japan2026-04-28
1039France2026-04-23
1040Italy2026-04-30
1041Japan2026-04-29
1042Russia2026-04-23
1043France2026-04-26
1044Canada2026-04-23
1045United Kingdom2026-04-27
1046Canada2026-04-07
1047Australia2026-05-01
1048Japan2026-04-30
1049India2026-04-15

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000India2026-04-16
Aditya Kusko1001United Kingdom2026-04-03
Kadeem Flosi1002Russia2026-04-25
Julie Stenseth1003Argentina2026-04-13
Kadeem Flosi1004Brazil2026-05-01
Misaki Royster1005Germany2026-04-22
Sinclair Waycott1006Japan2026-04-06
Smith Glick1007Germany2026-04-29
Faith Gillian1008Canada2026-04-22
Aditya Kusko1009Japan2026-04-26
Murillo Malet1010Germany2026-04-04
Cody Saylors1011France2026-04-09
Darci Poquette1012Brazil2026-04-12
Rodrigues Campain1013Argentina2026-04-10
Julie Stenseth1014Australia2026-04-08
Morrow Ruta1015Germany2026-04-08
Wickens Nestle1016Argentina2026-04-10
Arvin Albares1017Canada2026-04-06
Aditya Kusko1018France2026-04-26
Morrow Ruta1019Russia2026-04-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leon OldroydFranceStephen Shaw NEW
Isabel BowleyIndiaOnyama Limba NEW
Morrow RutaSpainBernardo Dominic UNQUALIFIED
Costa DilliardItalyOnyama Limba PROPOSAL
Munro FerenczArgentinaOnyama Limba PROPOSAL
Jeanfrancois VenereCanadaStephen Shaw RENEWAL
Darci PoquetteArgentinaIoni Bowcher UNQUALIFIED
David DarakjyUnited KingdomAsiya Javayant QUALIFIED
Jennifer AmigonCanadaAnna Fali UNQUALIFIED
Clifford RimSpainAmy Elsner PROPOSAL
Aditya KuskoIndiaAnna Fali PROPOSAL
Antonio CaudyBrazilAsiya Javayant QUALIFIED
Aruna FigeroaArgentinaXuxue Feng NEW
Ivar PaprockiArgentinaIvan Magalhaes RENEWAL
Darci PoquetteGermanyAsiya Javayant QUALIFIED
Tony FollerAustraliaAnna Fali UNQUALIFIED
Kadeem FlosiUnited KingdomElwin Sharvill PROPOSAL
Aditya KuskoArgentinaElwin Sharvill NEGOTIATION
Isabel BowleySpainAsiya Javayant NEW
Octavia MaletArgentinaAnna Fali PROPOSAL
Greenwood BologniaBrazilAsiya Javayant UNQUALIFIED
Leja CaldareraJapanOnyama Limba NEGOTIATION
Maisha RulapaughArgentinaIvan Magalhaes PROPOSAL
Kadeem FlosiUnited KingdomAsiya Javayant UNQUALIFIED
Kaitlin OstroskyUnited KingdomIoni Bowcher NEGOTIATION
Julie StensethJapanAnna Fali UNQUALIFIED
Aika InouyeUnited KingdomIvan Magalhaes QUALIFIED
Darci PoquetteCanadaIoni Bowcher PROPOSAL
Emily WhobreyRussiaAnna Fali NEGOTIATION
Chavez BriddickSpainStephen Shaw QUALIFIED
Juan WieserUnited KingdomXuxue Feng UNQUALIFIED
Juan WieserUnited KingdomIoni Bowcher PROPOSAL
Francesco ShinkoIndiaXuxue Feng NEW
Darci PoquetteGermanyIvan Magalhaes RENEWAL
Johnson SergiAustraliaAsiya Javayant NEGOTIATION
Kaitlin OstroskyIndiaAsiya Javayant PROPOSAL
Costa DilliardUnited KingdomXuxue Feng RENEWAL
Alejandro PerinGermanyStephen Shaw UNQUALIFIED
Costa DilliardItalyXuxue Feng NEGOTIATION
Smith GlickFranceAsiya Javayant PROPOSAL

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