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 CaldareraFranceIvan Magalhaes QUALIFIED
Ashley DoeItalyIvan Magalhaes RENEWAL
Johnson SergiBrazilOnyama Limba QUALIFIED
Munro FerenczFranceOnyama Limba UNQUALIFIED
Juan WieserFranceAsiya Javayant NEGOTIATION
Octavia MaletItalyIvan Magalhaes RENEWAL
Aruna FigeroaIndiaXuxue Feng QUALIFIED
Juan WieserIndiaAsiya Javayant PROPOSAL
Jeanfrancois VenereAustraliaAmy Elsner UNQUALIFIED
Aditya KuskoIndiaAnna Fali RENEWAL
Greenwood BologniaAustraliaIvan Magalhaes PROPOSAL
Salvatore StockhamArgentinaAnna Fali PROPOSAL
Kaitlin OstroskyFranceAnna Fali QUALIFIED
Kaitlin OstroskyBrazilAnna Fali UNQUALIFIED
Morrow RutaItalyIoni Bowcher QUALIFIED
Silvio SlusarskiIndiaIvan Magalhaes NEGOTIATION
Darci PoquetteItalyBernardo Dominic RENEWAL
Aditya KuskoFranceElwin Sharvill NEW
Munro FerenczItalyStephen Shaw NEW
Misaki RoysterJapanIoni Bowcher PROPOSAL
Izzy GarufiGermanyOnyama Limba QUALIFIED
Antonio CaudyGermanyAnna Fali NEW
Misaki RoysterRussiaOnyama Limba NEW
Nicolas IturbideBrazilIoni Bowcher UNQUALIFIED
Cody SaylorsJapanIoni Bowcher NEGOTIATION
Chavez BriddickFranceAsiya Javayant UNQUALIFIED
Clifford RimAustraliaAmy Elsner QUALIFIED
Chavez BriddickUnited KingdomAmy Elsner RENEWAL
Leja CaldareraSpainXuxue Feng NEW
Kadeem FlosiIndiaElwin Sharvill NEGOTIATION
Antonio CaudyGermanyAmy Elsner NEGOTIATION
Greenwood BologniaJapanElwin Sharvill NEGOTIATION
Clifford RimJapanAmy Elsner PROPOSAL
Sinclair WaycottFranceOnyama Limba NEGOTIATION
Darci PoquetteUnited KingdomXuxue Feng RENEWAL
Aika InouyeCanadaStephen Shaw NEGOTIATION
Ivar PaprockiFranceElwin Sharvill NEGOTIATION
Faith GillianIndiaIoni Bowcher NEW
Greenwood BologniaIndiaOnyama Limba UNQUALIFIED
Misaki RoysterRussiaOnyama Limba QUALIFIED
Julie StensethJapanAnna Fali PROPOSAL
Juan WieserJapanAnna Fali NEGOTIATION
Greenwood BologniaAustraliaAnna Fali NEW
Octavia MaletCanadaBernardo Dominic PROPOSAL
Kadeem FlosiIndiaOnyama Limba QUALIFIED
Salvatore StockhamItalyElwin Sharvill UNQUALIFIED
Leon OldroydIndiaIvan Magalhaes PROPOSAL
Morrow RutaIndiaBernardo Dominic PROPOSAL
Ashley DoeBrazilBernardo Dominic NEW
Adams MorascaJapanOnyama Limba QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Izzy GarufiJapanXuxue Feng NEW
Smith GlickJapanXuxue Feng UNQUALIFIED
Arvin AlbaresFranceIvan Magalhaes RENEWAL
Jennifer AmigonGermanyBernardo Dominic NEW
Ivar PaprockiGermanyElwin Sharvill NEGOTIATION
Morrow RutaFranceBernardo Dominic NEGOTIATION
Kaitlin OstroskyCanadaElwin Sharvill NEW
Stacey MacleadUnited KingdomAmy Elsner UNQUALIFIED
Deepesh ChuiCanadaAnna Fali PROPOSAL
Jones VocelkaFranceIoni Bowcher PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000David DarakjyBrazil2026-06-08Chanay, Jeffrey A Esq NEGOTIATION46Ioni Bowcher
1001Kaitlin OstroskyAustralia2026-06-09Rousseaux, Michael Esq PROPOSAL69Xuxue Feng
1002Stacey MacleadUnited Kingdom2026-05-25Feiner Bros RENEWAL96Xuxue Feng
1003Aruna FigeroaIndia2026-05-14Chanay, Jeffrey A Esq RENEWAL69Anna Fali
1004Greenwood BologniaItaly2026-05-23Printing Dimensions RENEWAL78Ivan Magalhaes
1005Kadeem FlosiFrance2026-05-28Commercial Press QUALIFIED75Bernardo Dominic
1006Wickens NestleFrance2026-06-06Commercial Press NEGOTIATION69Xuxue Feng
1007David DarakjyArgentina2026-05-25King, Christopher A Esq UNQUALIFIED47Onyama Limba
1008Emily WhobreySpain2026-05-20Morlong Associates NEGOTIATION97Anna Fali
1009Salvatore StockhamItaly2026-06-02Commercial Press UNQUALIFIED75Ivan Magalhaes
1010Jefferson SchemmerArgentina2026-05-26Feltz Printing Service RENEWAL19Ivan Magalhaes
1011Wickens NestleJapan2026-05-17Chemel, James L Cpa PROPOSAL93Anna Fali
1012Morrow RutaBrazil2026-06-07Feltz Printing Service RENEWAL77Onyama Limba
1013Jennifer AmigonFrance2026-05-25Commercial Press RENEWAL7Asiya Javayant
1014Octavia MaletCanada2026-05-18Printing Dimensions PROPOSAL84Anna Fali
1015Costa DilliardFrance2026-05-25Feltz Printing Service NEGOTIATION20Ioni Bowcher
1016Kaitlin OstroskyFrance2026-06-03Chanay, Jeffrey A Esq PROPOSAL46Ivan Magalhaes
1017Emily WhobreyUnited Kingdom2026-05-22Feiner Bros NEW35Elwin Sharvill
1018Izzy GarufiFrance2026-05-27Commercial Press RENEWAL39Amy Elsner
1019Arvin AlbaresGermany2026-06-08Morlong Associates NEGOTIATION50Elwin Sharvill
1020Faith GillianAustralia2026-05-31Truhlar And Truhlar Attys UNQUALIFIED67Xuxue Feng
1021Greenwood BologniaCanada2026-06-07Feiner Bros UNQUALIFIED77Xuxue Feng
1022Julie StensethSpain2026-05-31Dorl, James J Esq UNQUALIFIED32Amy Elsner
1023Maria MarrierUnited Kingdom2026-06-07Rangoni Of Florence UNQUALIFIED56Bernardo Dominic
1024Salvatore StockhamCanada2026-05-29Benton, John B Jr NEGOTIATION94Ioni Bowcher
1025Jones VocelkaFrance2026-05-18Commercial Press UNQUALIFIED45Xuxue Feng
1026Deepesh ChuiRussia2026-05-26Chemel, James L Cpa NEW93Ioni Bowcher
1027Morrow RutaBrazil2026-06-10Chanay, Jeffrey A Esq PROPOSAL9Xuxue Feng
1028Morrow RutaCanada2026-06-07Benton, John B Jr RENEWAL14Bernardo Dominic
1029Darci PoquetteIndia2026-05-13Buckley Miller Wright RENEWAL94Amy Elsner
1030Julie StensethIndia2026-06-09Chapman, Ross E Esq RENEWAL70Xuxue Feng
1031Adams MorascaAustralia2026-05-31Chemel, James L Cpa PROPOSAL22Asiya Javayant
1032Alejandro PerinSpain2026-05-28Rangoni Of Florence NEW70Amy Elsner
1033Clifford RimJapan2026-05-17Chanay, Jeffrey A Esq NEW39Onyama Limba
1034Alejandro PerinRussia2026-06-10Benton, John B Jr NEW50Amy Elsner
1035Cody SaylorsItaly2026-05-17Buckley Miller Wright RENEWAL12Anna Fali
1036Arvin AlbaresJapan2026-05-28King, Christopher A Esq UNQUALIFIED75Elwin Sharvill
1037Jennifer AmigonSpain2026-05-24Morlong Associates RENEWAL25Onyama Limba
1038Clifford RimIndia2026-06-07Feiner Bros NEW43Stephen Shaw
1039Juan WieserCanada2026-06-04Chapman, Ross E Esq QUALIFIED72Ivan Magalhaes
1040Alejandro PerinJapan2026-06-04Benton, John B Jr NEW9Ioni Bowcher
1041Aruna FigeroaGermany2026-05-27Rousseaux, Michael Esq PROPOSAL29Onyama Limba
1042Costa DilliardBrazil2026-05-14Commercial Press PROPOSAL65Ivan Magalhaes
1043Aruna FigeroaSpain2026-06-07Buckley Miller Wright UNQUALIFIED7Anna Fali
1044Isabel BowleyJapan2026-06-09Chapman, Ross E Esq NEW28Ioni Bowcher
1045Arvin AlbaresIndia2026-05-20Buckley Miller Wright QUALIFIED46Elwin Sharvill
1046Misaki RoysterSpain2026-05-21Feiner Bros NEGOTIATION19Anna Fali
1047Jefferson SchemmerGermany2026-05-13Morlong Associates UNQUALIFIED60Xuxue Feng
1048Ricardo GauchoRussia2026-05-26Chemel, James L Cpa UNQUALIFIED56Ioni Bowcher
1049Mujtaba NickaItaly2026-05-31Benton, John B Jr NEGOTIATION62Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Misaki RoysterJapanAnna Fali PROPOSAL
Aditya KuskoAustraliaElwin Sharvill NEW
Arvin AlbaresFranceIoni Bowcher NEGOTIATION
Ivar PaprockiFranceStephen Shaw QUALIFIED
Darci PoquetteGermanyAsiya Javayant UNQUALIFIED
Chavez BriddickArgentinaElwin Sharvill NEGOTIATION
Faith GillianAustraliaAnna Fali RENEWAL
Salvatore StockhamIndiaStephen Shaw RENEWAL
Darci PoquetteIndiaOnyama Limba NEW
Aruna FigeroaCanadaElwin Sharvill NEW
Chavez BriddickIndiaAnna Fali RENEWAL
James ButtUnited KingdomElwin Sharvill QUALIFIED
Antonio CaudyArgentinaBernardo Dominic PROPOSAL
Sinclair WaycottAustraliaAmy Elsner NEGOTIATION
Aika InouyeUnited KingdomAsiya Javayant QUALIFIED
Jones VocelkaSpainOnyama Limba NEGOTIATION
Jones VocelkaCanadaBernardo Dominic RENEWAL
Jefferson SchemmerBrazilOnyama Limba NEW
Mujtaba NickaGermanyIvan Magalhaes NEW
Jones VocelkaJapanIvan Magalhaes QUALIFIED
Isabel BowleyGermanyElwin Sharvill NEGOTIATION
Aika InouyeArgentinaAmy Elsner NEW
Murillo MaletUnited KingdomOnyama Limba NEGOTIATION
Salvatore StockhamSpainStephen Shaw PROPOSAL
Stacey MacleadRussiaBernardo Dominic NEW
Morrow RutaRussiaAnna Fali QUALIFIED
Salvatore StockhamJapanElwin Sharvill PROPOSAL
Ivar PaprockiGermanyIvan Magalhaes PROPOSAL
Chavez BriddickAustraliaBernardo Dominic QUALIFIED
Aika InouyeRussiaBernardo Dominic NEW
Mayumi KolmetzRussiaIoni Bowcher NEGOTIATION
Kaitlin OstroskyFranceBernardo Dominic NEGOTIATION
Adams MorascaArgentinaStephen Shaw NEW
Cody SaylorsGermanyIoni Bowcher UNQUALIFIED
Juan WieserCanadaAnna Fali UNQUALIFIED
Maisha RulapaughBrazilElwin Sharvill UNQUALIFIED
Rodrigues CampainSpainAnna Fali NEGOTIATION
Murillo MaletCanadaElwin Sharvill RENEWAL
Deepesh ChuiCanadaOnyama Limba PROPOSAL
Chavez BriddickItalyAmy Elsner PROPOSAL
Clifford RimGermanyIvan Magalhaes NEW
Tony FollerIndiaIvan Magalhaes RENEWAL
Stacey MacleadArgentinaAsiya Javayant QUALIFIED
Octavia MaletIndiaOnyama Limba QUALIFIED
Faith GillianGermanyAmy Elsner QUALIFIED
Juan WieserFranceIvan Magalhaes QUALIFIED
Chavez BriddickUnited KingdomIoni Bowcher UNQUALIFIED
Julie StensethRussiaElwin Sharvill NEGOTIATION
Salvatore StockhamSpainStephen Shaw QUALIFIED
Rodrigues CampainGermanyAmy Elsner RENEWAL
Frozen Columns
Name
Jefferson Schemmer
Izzy Garufi
Munro Ferencz
Jones Vocelka
Leja Caldarera
Wickens Nestle
David Darakjy
Cody Saylors
Adams Morasca
Smith Glick
Aditya Kusko
Mayumi Kolmetz
Jefferson Schemmer
Greenwood Bolognia
Leja Caldarera
Nicolas Iturbide
Aruna Figeroa
Darci Poquette
Kaitlin Ostrosky
Jefferson Schemmer
Costa Dilliard
Jefferson Schemmer
Wickens Nestle
Maisha Rulapaugh
Morrow Ruta
Wickens Nestle
Ricardo Gaucho
Sinclair Waycott
Wickens Nestle
Jones Vocelka
Deepesh Chui
Antonio Caudy
Johnson Sergi
James Butt
Leon Oldroyd
Rodrigues Campain
Jefferson Schemmer
Nicolas Iturbide
Jeanfrancois Venere
Munro Ferencz
Nicolas Iturbide
Greenwood Bolognia
Isabel Bowley
Costa Dilliard
Wickens Nestle
Mujtaba Nicka
Stacey Maclead
Maisha Rulapaugh
Salvatore Stockham
Ashley Doe
IdCountryDate
1000United Kingdom2026-05-15
1001France2026-06-01
1002Germany2026-06-01
1003Italy2026-06-07
1004Canada2026-05-24
1005Argentina2026-05-18
1006Japan2026-05-13
1007United Kingdom2026-05-29
1008Russia2026-06-02
1009Russia2026-06-02
1010Brazil2026-05-16
1011Japan2026-05-22
1012Germany2026-05-19
1013Italy2026-06-05
1014Spain2026-05-28
1015Russia2026-05-29
1016Japan2026-05-19
1017Brazil2026-06-08
1018United Kingdom2026-05-28
1019Germany2026-06-07
1020United Kingdom2026-05-28
1021Spain2026-05-29
1022Japan2026-05-25
1023Germany2026-05-26
1024United Kingdom2026-05-21
1025Germany2026-05-24
1026India2026-05-16
1027Brazil2026-06-07
1028Italy2026-05-28
1029United Kingdom2026-05-25
1030Germany2026-06-10
1031Japan2026-06-02
1032Brazil2026-05-30
1033Italy2026-05-22
1034Spain2026-06-08
1035Brazil2026-06-06
1036Russia2026-06-04
1037India2026-06-05
1038Japan2026-05-23
1039India2026-06-09
1040Brazil2026-05-26
1041United Kingdom2026-05-25
1042Canada2026-05-17
1043Russia2026-05-17
1044Germany2026-06-01
1045Russia2026-06-01
1046Germany2026-06-01
1047Japan2026-06-06
1048Germany2026-05-17
1049Italy2026-05-29

On-Demand Data

NameIdCountryDate
Clifford Rim1000Canada2026-06-10
Smith Glick1001Italy2026-05-18
Aditya Kusko1002Argentina2026-05-26
Morrow Ruta1003Spain2026-05-15
Faith Gillian1004Argentina2026-06-09
David Darakjy1005Argentina2026-05-19
Costa Dilliard1006Spain2026-05-23
Isabel Bowley1007Brazil2026-05-16
Misaki Royster1008Japan2026-06-09
Leon Oldroyd1009France2026-05-27
Mujtaba Nicka1010France2026-06-08
David Darakjy1011Germany2026-05-21
Rodrigues Campain1012Spain2026-05-26
Emily Whobrey1013Brazil2026-05-17
Maria Marrier1014Argentina2026-05-13
Julie Stenseth1015Spain2026-05-18
Maria Marrier1016Russia2026-05-15
James Butt1017Germany2026-05-17
Cody Saylors1018United Kingdom2026-05-23
Ivar Paprocki1019Russia2026-05-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
David DarakjyJapanAmy Elsner UNQUALIFIED
Stacey MacleadUnited KingdomIvan Magalhaes QUALIFIED
Emily WhobreyRussiaAmy Elsner RENEWAL
Salvatore StockhamJapanBernardo Dominic NEW
Deepesh ChuiGermanyElwin Sharvill NEGOTIATION
Maisha RulapaughGermanyIoni Bowcher PROPOSAL
Ricardo GauchoGermanyBernardo Dominic NEGOTIATION
Aditya KuskoBrazilElwin Sharvill NEW
Aruna FigeroaUnited KingdomElwin Sharvill NEW
Aruna FigeroaArgentinaAsiya Javayant RENEWAL
Kadeem FlosiUnited KingdomElwin Sharvill QUALIFIED
Faith GillianItalyIoni Bowcher PROPOSAL
Maria MarrierJapanAsiya Javayant NEGOTIATION
Silvio SlusarskiBrazilStephen Shaw NEGOTIATION
Leon OldroydItalyXuxue Feng NEW
James ButtGermanyAmy Elsner RENEWAL
Claire TollnerAustraliaElwin Sharvill PROPOSAL
Silvio SlusarskiArgentinaElwin Sharvill NEW
Nicolas IturbideRussiaAsiya Javayant RENEWAL
Leon OldroydSpainAsiya Javayant PROPOSAL
Salvatore StockhamItalyBernardo Dominic UNQUALIFIED
Juan WieserIndiaAsiya Javayant RENEWAL
Leja CaldareraAustraliaBernardo Dominic NEGOTIATION
Aika InouyeJapanIvan Magalhaes NEGOTIATION
Juan WieserCanadaAmy Elsner RENEWAL
Izzy GarufiArgentinaIoni Bowcher RENEWAL
Munro FerenczSpainIvan Magalhaes PROPOSAL
Leja CaldareraCanadaAsiya Javayant QUALIFIED
Smith GlickFranceBernardo Dominic RENEWAL
Greenwood BologniaJapanStephen Shaw NEGOTIATION
James ButtSpainAnna Fali NEW
Ivar PaprockiBrazilIoni Bowcher NEGOTIATION
Murillo MaletSpainElwin Sharvill NEW
Rodrigues CampainSpainElwin Sharvill NEW
Francesco ShinkoRussiaAnna Fali UNQUALIFIED
Jones VocelkaAustraliaOnyama Limba RENEWAL
Isabel BowleySpainIvan Magalhaes QUALIFIED
Jennifer AmigonRussiaIoni Bowcher NEGOTIATION
Greenwood BologniaCanadaAmy Elsner RENEWAL
Murillo MaletSpainElwin Sharvill 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>