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
Kaitlin OstroskyAustraliaStephen Shaw PROPOSAL
Greenwood BologniaAustraliaOnyama Limba UNQUALIFIED
Ivar PaprockiRussiaAmy Elsner UNQUALIFIED
Cody SaylorsFranceAsiya Javayant NEW
Faith GillianJapanIoni Bowcher NEGOTIATION
Rodrigues CampainIndiaIvan Magalhaes RENEWAL
Wickens NestleJapanAsiya Javayant QUALIFIED
Clifford RimIndiaAsiya Javayant QUALIFIED
Mujtaba NickaGermanyStephen Shaw NEGOTIATION
Nicolas IturbideFranceAsiya Javayant NEW
Stacey MacleadJapanAnna Fali QUALIFIED
Sinclair WaycottIndiaOnyama Limba QUALIFIED
Jeanfrancois VenereFranceElwin Sharvill QUALIFIED
Tony FollerUnited KingdomStephen Shaw UNQUALIFIED
Stacey MacleadItalyXuxue Feng RENEWAL
Julie StensethBrazilAsiya Javayant QUALIFIED
Jones VocelkaArgentinaStephen Shaw PROPOSAL
Tony FollerIndiaElwin Sharvill NEW
Chavez BriddickIndiaIoni Bowcher PROPOSAL
Jones VocelkaFranceAsiya Javayant PROPOSAL
Faith GillianIndiaAnna Fali PROPOSAL
Mayumi KolmetzGermanyStephen Shaw PROPOSAL
Darci PoquetteUnited KingdomStephen Shaw NEW
Faith GillianAustraliaIvan Magalhaes PROPOSAL
Johnson SergiJapanAnna Fali QUALIFIED
Julie StensethArgentinaIoni Bowcher RENEWAL
Greenwood BologniaRussiaAmy Elsner NEW
Smith GlickJapanBernardo Dominic RENEWAL
Johnson SergiSpainAnna Fali PROPOSAL
Ashley DoeIndiaIoni Bowcher UNQUALIFIED
Faith GillianSpainElwin Sharvill RENEWAL
Leja CaldareraAustraliaIvan Magalhaes UNQUALIFIED
Emily WhobreyArgentinaAsiya Javayant NEGOTIATION
Aika InouyeIndiaOnyama Limba NEW
Greenwood BologniaIndiaXuxue Feng NEW
Leon OldroydGermanyAnna Fali UNQUALIFIED
Leja CaldareraItalyAsiya Javayant PROPOSAL
Kaitlin OstroskyBrazilStephen Shaw NEW
Smith GlickJapanElwin Sharvill NEGOTIATION
Smith GlickFranceStephen Shaw UNQUALIFIED
Leon OldroydJapanAmy Elsner RENEWAL
Kaitlin OstroskyRussiaBernardo Dominic RENEWAL
Misaki RoysterArgentinaBernardo Dominic UNQUALIFIED
Chavez BriddickCanadaOnyama Limba UNQUALIFIED
Ivar PaprockiSpainElwin Sharvill PROPOSAL
Cody SaylorsArgentinaOnyama Limba PROPOSAL
Deepesh ChuiFranceIoni Bowcher NEGOTIATION
James ButtArgentinaStephen Shaw UNQUALIFIED
Deepesh ChuiFranceAnna Fali UNQUALIFIED
Chavez BriddickIndiaAsiya Javayant NEW
Horizontal
NameCountryRepresentativeStatus
Rodrigues CampainBrazilAmy Elsner PROPOSAL
Jennifer AmigonFranceElwin Sharvill UNQUALIFIED
Greenwood BologniaCanadaAnna Fali UNQUALIFIED
Greenwood BologniaSpainAnna Fali PROPOSAL
Ivar PaprockiRussiaAsiya Javayant QUALIFIED
Adams MorascaUnited KingdomAmy Elsner NEGOTIATION
Johnson SergiRussiaXuxue Feng QUALIFIED
Jennifer AmigonSpainOnyama Limba NEW
Sinclair WaycottArgentinaElwin Sharvill QUALIFIED
Leon OldroydAustraliaStephen Shaw NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Nicolas IturbideSpain2026-05-28Chanay, Jeffrey A Esq RENEWAL17Ivan Magalhaes
1001James ButtFrance2026-06-14Feiner Bros UNQUALIFIED5Elwin Sharvill
1002Leon OldroydItaly2026-05-19Rangoni Of Florence NEW88Amy Elsner
1003Aditya KuskoCanada2026-05-29Morlong Associates UNQUALIFIED43Anna Fali
1004Arvin AlbaresItaly2026-05-18Printing Dimensions NEW82Stephen Shaw
1005Salvatore StockhamArgentina2026-05-22Morlong Associates QUALIFIED60Stephen Shaw
1006Izzy GarufiGermany2026-05-28Feltz Printing Service RENEWAL10Asiya Javayant
1007Maisha RulapaughRussia2026-06-07Chemel, James L Cpa NEGOTIATION30Anna Fali
1008Julie StensethRussia2026-05-22Chapman, Ross E Esq PROPOSAL66Bernardo Dominic
1009Clifford RimArgentina2026-05-24King, Christopher A Esq NEGOTIATION60Stephen Shaw
1010Leja CaldareraIndia2026-06-03King, Christopher A Esq PROPOSAL16Ivan Magalhaes
1011Chavez BriddickItaly2026-05-30Commercial Press NEW99Elwin Sharvill
1012Munro FerenczBrazil2026-06-04Benton, John B Jr NEW53Bernardo Dominic
1013Chavez BriddickUnited Kingdom2026-06-08Printing Dimensions NEGOTIATION77Xuxue Feng
1014Darci PoquetteArgentina2026-06-03Printing Dimensions NEW62Ioni Bowcher
1015Chavez BriddickJapan2026-06-01Feiner Bros UNQUALIFIED66Anna Fali
1016Maria MarrierGermany2026-05-30Chemel, James L Cpa NEGOTIATION2Asiya Javayant
1017Leon OldroydAustralia2026-06-13Morlong Associates NEW34Anna Fali
1018Ricardo GauchoIndia2026-05-22Truhlar And Truhlar Attys RENEWAL93Xuxue Feng
1019Juan WieserCanada2026-05-30Morlong Associates NEW3Ivan Magalhaes
1020Octavia MaletFrance2026-05-30Benton, John B Jr QUALIFIED19Asiya Javayant
1021Greenwood BologniaCanada2026-06-06Rangoni Of Florence NEGOTIATION0Ioni Bowcher
1022Wickens NestleSpain2026-05-22Rousseaux, Michael Esq RENEWAL71Xuxue Feng
1023Adams MorascaAustralia2026-05-25Feltz Printing Service NEGOTIATION97Amy Elsner
1024Kadeem FlosiCanada2026-06-07Commercial Press NEW14Bernardo Dominic
1025Francesco ShinkoArgentina2026-05-18Dorl, James J Esq UNQUALIFIED36Bernardo Dominic
1026Leja CaldareraArgentina2026-06-06Morlong Associates UNQUALIFIED42Asiya Javayant
1027Emily WhobreySpain2026-05-22Feiner Bros RENEWAL57Stephen Shaw
1028Antonio CaudyArgentina2026-06-01Rousseaux, Michael Esq RENEWAL51Amy Elsner
1029Silvio SlusarskiCanada2026-05-19Truhlar And Truhlar Attys NEGOTIATION66Anna Fali
1030Aditya KuskoCanada2026-06-11Morlong Associates NEW44Stephen Shaw
1031Mayumi KolmetzUnited Kingdom2026-05-21Commercial Press QUALIFIED68Xuxue Feng
1032Morrow RutaUnited Kingdom2026-05-27Rousseaux, Michael Esq NEGOTIATION34Xuxue Feng
1033Morrow RutaJapan2026-05-20Rangoni Of Florence NEGOTIATION56Ivan Magalhaes
1034Misaki RoysterArgentina2026-06-14Printing Dimensions QUALIFIED79Ivan Magalhaes
1035Isabel BowleyAustralia2026-06-07Truhlar And Truhlar Attys UNQUALIFIED59Stephen Shaw
1036Aditya KuskoAustralia2026-05-27Morlong Associates UNQUALIFIED85Anna Fali
1037Mujtaba NickaArgentina2026-05-23Feltz Printing Service RENEWAL14Xuxue Feng
1038Maisha RulapaughFrance2026-05-25Printing Dimensions PROPOSAL51Stephen Shaw
1039Emily WhobreyRussia2026-06-10Morlong Associates NEW38Bernardo Dominic
1040James ButtSpain2026-05-28Chanay, Jeffrey A Esq NEW18Elwin Sharvill
1041Darci PoquetteItaly2026-05-28Benton, John B Jr PROPOSAL57Anna Fali
1042Claire TollnerAustralia2026-06-09Chanay, Jeffrey A Esq NEGOTIATION77Asiya Javayant
1043Jefferson SchemmerGermany2026-05-22Morlong Associates NEW50Asiya Javayant
1044Octavia MaletItaly2026-06-07Chapman, Ross E Esq RENEWAL12Ioni Bowcher
1045Deepesh ChuiFrance2026-05-18Commercial Press PROPOSAL14Xuxue Feng
1046Alejandro PerinSpain2026-06-05Chapman, Ross E Esq NEW32Ivan Magalhaes
1047Juan WieserAustralia2026-05-26Commercial Press QUALIFIED2Ivan Magalhaes
1048Cody SaylorsFrance2026-06-10Feltz Printing Service QUALIFIED81Asiya Javayant
1049Salvatore StockhamUnited Kingdom2026-06-03Morlong Associates PROPOSAL67Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Juan WieserItalyIoni Bowcher QUALIFIED
Aruna FigeroaCanadaIvan Magalhaes PROPOSAL
Ricardo GauchoAustraliaIoni Bowcher UNQUALIFIED
Kadeem FlosiCanadaStephen Shaw NEGOTIATION
Adams MorascaItalyAmy Elsner NEW
Mayumi KolmetzIndiaAsiya Javayant NEW
Darci PoquetteIndiaAnna Fali QUALIFIED
Murillo MaletArgentinaAnna Fali UNQUALIFIED
Jennifer AmigonFranceStephen Shaw NEW
Adams MorascaArgentinaAnna Fali UNQUALIFIED
Kaitlin OstroskyIndiaOnyama Limba PROPOSAL
James ButtRussiaElwin Sharvill NEGOTIATION
Greenwood BologniaSpainStephen Shaw NEGOTIATION
Rodrigues CampainAustraliaElwin Sharvill QUALIFIED
Emily WhobreyIndiaOnyama Limba RENEWAL
Aruna FigeroaItalyStephen Shaw UNQUALIFIED
Misaki RoysterUnited KingdomAsiya Javayant NEGOTIATION
Stacey MacleadRussiaBernardo Dominic NEGOTIATION
Greenwood BologniaJapanAnna Fali QUALIFIED
Mujtaba NickaCanadaAsiya Javayant NEW
Maria MarrierUnited KingdomElwin Sharvill NEGOTIATION
Emily WhobreySpainElwin Sharvill QUALIFIED
Costa DilliardSpainAsiya Javayant UNQUALIFIED
Nicolas IturbideGermanyIvan Magalhaes PROPOSAL
Julie StensethIndiaBernardo Dominic UNQUALIFIED
Izzy GarufiRussiaIoni Bowcher NEGOTIATION
Aruna FigeroaBrazilStephen Shaw QUALIFIED
Nicolas IturbideGermanyAmy Elsner PROPOSAL
Jones VocelkaItalyIvan Magalhaes QUALIFIED
Murillo MaletRussiaAmy Elsner PROPOSAL
Clifford RimUnited KingdomAnna Fali PROPOSAL
Misaki RoysterIndiaAmy Elsner NEW
Aruna FigeroaRussiaAnna Fali PROPOSAL
Francesco ShinkoAustraliaAsiya Javayant NEGOTIATION
Munro FerenczArgentinaOnyama Limba RENEWAL
Sinclair WaycottFranceElwin Sharvill RENEWAL
Antonio CaudyGermanyStephen Shaw NEGOTIATION
Smith GlickIndiaOnyama Limba QUALIFIED
Izzy GarufiItalyStephen Shaw RENEWAL
Salvatore StockhamItalyAsiya Javayant RENEWAL
Sinclair WaycottCanadaXuxue Feng PROPOSAL
Clifford RimItalyElwin Sharvill QUALIFIED
Adams MorascaIndiaXuxue Feng RENEWAL
Cody SaylorsCanadaIoni Bowcher PROPOSAL
Chavez BriddickSpainIoni Bowcher UNQUALIFIED
Morrow RutaRussiaAnna Fali NEW
Morrow RutaGermanyXuxue Feng PROPOSAL
Deepesh ChuiGermanyAmy Elsner QUALIFIED
Cody SaylorsJapanIvan Magalhaes QUALIFIED
Aditya KuskoFranceStephen Shaw QUALIFIED
Frozen Columns
Name
Kadeem Flosi
Claire Tollner
Izzy Garufi
Leja Caldarera
Aruna Figeroa
Munro Ferencz
Leon Oldroyd
Ricardo Gaucho
Rodrigues Campain
Aruna Figeroa
Greenwood Bolognia
Kadeem Flosi
Wickens Nestle
Alejandro Perin
Faith Gillian
Silvio Slusarski
Tony Foller
Isabel Bowley
Costa Dilliard
Chavez Briddick
Misaki Royster
Misaki Royster
David Darakjy
Kaitlin Ostrosky
Ivar Paprocki
Rodrigues Campain
Silvio Slusarski
Aika Inouye
Morrow Ruta
Adams Morasca
Clifford Rim
Nicolas Iturbide
Johnson Sergi
Costa Dilliard
Juan Wieser
Jones Vocelka
Aditya Kusko
Octavia Malet
Nicolas Iturbide
Darci Poquette
Rodrigues Campain
Aruna Figeroa
Izzy Garufi
Stacey Maclead
Johnson Sergi
Aruna Figeroa
Stacey Maclead
Alejandro Perin
Munro Ferencz
James Butt
IdCountryDate
1000Germany2026-06-13
1001Brazil2026-06-06
1002Canada2026-05-21
1003United Kingdom2026-05-17
1004Spain2026-05-30
1005United Kingdom2026-05-19
1006Argentina2026-05-26
1007Germany2026-06-01
1008Japan2026-06-03
1009Canada2026-06-13
1010United Kingdom2026-05-23
1011Russia2026-06-02
1012Japan2026-05-31
1013Russia2026-06-10
1014Brazil2026-05-25
1015Spain2026-06-04
1016Japan2026-05-21
1017Italy2026-06-05
1018Canada2026-05-26
1019India2026-05-22
1020Spain2026-05-24
1021Japan2026-06-06
1022Australia2026-06-14
1023Spain2026-05-20
1024Japan2026-06-06
1025Japan2026-06-14
1026India2026-05-17
1027Italy2026-06-02
1028Brazil2026-05-24
1029Australia2026-05-31
1030Spain2026-06-09
1031Germany2026-06-12
1032Argentina2026-06-05
1033India2026-05-21
1034Australia2026-06-06
1035Canada2026-06-12
1036Russia2026-05-24
1037Argentina2026-05-17
1038Japan2026-05-29
1039Argentina2026-06-14
1040Argentina2026-05-19
1041United Kingdom2026-06-06
1042Brazil2026-05-18
1043Argentina2026-05-24
1044Brazil2026-06-06
1045United Kingdom2026-06-03
1046Russia2026-05-18
1047Japan2026-05-26
1048Australia2026-06-15
1049Australia2026-06-03

On-Demand Data

NameIdCountryDate
Alejandro Perin1000Italy2026-05-26
Isabel Bowley1001France2026-05-27
Aika Inouye1002United Kingdom2026-05-28
Greenwood Bolognia1003France2026-06-02
James Butt1004United Kingdom2026-05-17
Salvatore Stockham1005Argentina2026-06-15
Jones Vocelka1006France2026-06-15
Juan Wieser1007Germany2026-06-04
Aruna Figeroa1008Japan2026-06-02
Jeanfrancois Venere1009United Kingdom2026-06-15
Kaitlin Ostrosky1010France2026-05-23
Leja Caldarera1011Canada2026-05-22
Kaitlin Ostrosky1012Brazil2026-05-31
Chavez Briddick1013Canada2026-06-08
Antonio Caudy1014Italy2026-06-01
Darci Poquette1015Germany2026-06-05
Murillo Malet1016India2026-05-24
Ricardo Gaucho1017Japan2026-06-04
Sinclair Waycott1018Italy2026-05-18
Stacey Maclead1019Canada2026-06-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Munro FerenczJapanAnna Fali RENEWAL
Francesco ShinkoIndiaElwin Sharvill NEW
Ricardo GauchoArgentinaOnyama Limba NEW
Arvin AlbaresJapanIvan Magalhaes UNQUALIFIED
Rodrigues CampainFranceStephen Shaw NEGOTIATION
Nicolas IturbideIndiaAmy Elsner PROPOSAL
Nicolas IturbideAustraliaStephen Shaw UNQUALIFIED
Deepesh ChuiArgentinaIoni Bowcher NEGOTIATION
Smith GlickFranceAsiya Javayant UNQUALIFIED
Rodrigues CampainFranceStephen Shaw PROPOSAL
Emily WhobreyItalyStephen Shaw UNQUALIFIED
Mayumi KolmetzRussiaBernardo Dominic PROPOSAL
Claire TollnerCanadaOnyama Limba UNQUALIFIED
Jefferson SchemmerUnited KingdomIvan Magalhaes NEGOTIATION
Costa DilliardSpainAmy Elsner RENEWAL
Costa DilliardItalyAsiya Javayant UNQUALIFIED
Julie StensethAustraliaXuxue Feng PROPOSAL
Adams MorascaFranceBernardo Dominic UNQUALIFIED
Izzy GarufiGermanyStephen Shaw NEW
Costa DilliardIndiaIvan Magalhaes NEGOTIATION
Deepesh ChuiItalyAnna Fali NEW
Leja CaldareraArgentinaElwin Sharvill RENEWAL
Munro FerenczIndiaIoni Bowcher UNQUALIFIED
Sinclair WaycottCanadaXuxue Feng NEW
Aditya KuskoUnited KingdomXuxue Feng NEGOTIATION
Misaki RoysterAustraliaAnna Fali PROPOSAL
Jennifer AmigonSpainElwin Sharvill QUALIFIED
Antonio CaudyCanadaStephen Shaw NEW
Francesco ShinkoUnited KingdomXuxue Feng NEGOTIATION
Julie StensethCanadaAmy Elsner UNQUALIFIED
Julie StensethUnited KingdomElwin Sharvill NEGOTIATION
Rodrigues CampainFranceAnna Fali RENEWAL
Mujtaba NickaUnited KingdomXuxue Feng PROPOSAL
Julie StensethJapanAsiya Javayant NEGOTIATION
Murillo MaletCanadaOnyama Limba UNQUALIFIED
Emily WhobreyBrazilOnyama Limba NEGOTIATION
Misaki RoysterSpainOnyama Limba NEW
Jeanfrancois VenereJapanAsiya Javayant UNQUALIFIED
Francesco ShinkoGermanyIvan Magalhaes PROPOSAL
Darci PoquetteCanadaBernardo Dominic NEW

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