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
Darci PoquetteFranceIoni Bowcher QUALIFIED
Julie StensethSpainIoni Bowcher QUALIFIED
Munro FerenczFranceElwin Sharvill UNQUALIFIED
Maisha RulapaughIndiaAnna Fali RENEWAL
Rodrigues CampainIndiaBernardo Dominic PROPOSAL
Juan WieserJapanBernardo Dominic NEW
Johnson SergiBrazilStephen Shaw QUALIFIED
Rodrigues CampainRussiaIoni Bowcher NEGOTIATION
Deepesh ChuiBrazilBernardo Dominic NEW
James ButtUnited KingdomIoni Bowcher PROPOSAL
Isabel BowleyArgentinaIvan Magalhaes UNQUALIFIED
Costa DilliardCanadaAnna Fali QUALIFIED
Misaki RoysterRussiaAnna Fali PROPOSAL
James ButtAustraliaStephen Shaw RENEWAL
Leja CaldareraJapanAnna Fali PROPOSAL
Ricardo GauchoIndiaAnna Fali PROPOSAL
Mujtaba NickaSpainXuxue Feng UNQUALIFIED
Antonio CaudyJapanAsiya Javayant UNQUALIFIED
Jennifer AmigonBrazilAmy Elsner QUALIFIED
Juan WieserIndiaXuxue Feng PROPOSAL
Silvio SlusarskiSpainIvan Magalhaes NEW
Maisha RulapaughUnited KingdomIvan Magalhaes NEGOTIATION
Emily WhobreyFranceElwin Sharvill RENEWAL
Ivar PaprockiJapanAnna Fali PROPOSAL
Stacey MacleadArgentinaXuxue Feng NEGOTIATION
Costa DilliardAustraliaStephen Shaw NEGOTIATION
Mujtaba NickaUnited KingdomIoni Bowcher QUALIFIED
Darci PoquetteBrazilAmy Elsner NEW
Emily WhobreyRussiaAnna Fali NEW
Aruna FigeroaBrazilStephen Shaw PROPOSAL
Juan WieserFranceIvan Magalhaes NEW
Kaitlin OstroskyCanadaOnyama Limba NEW
Deepesh ChuiUnited KingdomElwin Sharvill NEW
Antonio CaudyFranceXuxue Feng NEGOTIATION
Maisha RulapaughGermanyOnyama Limba NEW
Morrow RutaJapanAnna Fali NEW
Morrow RutaIndiaBernardo Dominic RENEWAL
Stacey MacleadItalyOnyama Limba NEGOTIATION
Aruna FigeroaIndiaStephen Shaw QUALIFIED
Sinclair WaycottBrazilOnyama Limba NEW
Sinclair WaycottRussiaOnyama Limba QUALIFIED
Maisha RulapaughIndiaAnna Fali NEW
Kadeem FlosiJapanOnyama Limba NEGOTIATION
Aruna FigeroaUnited KingdomOnyama Limba UNQUALIFIED
Cody SaylorsUnited KingdomXuxue Feng NEW
Izzy GarufiBrazilIoni Bowcher QUALIFIED
Kadeem FlosiSpainOnyama Limba RENEWAL
James ButtSpainStephen Shaw PROPOSAL
Ivar PaprockiRussiaElwin Sharvill RENEWAL
Costa DilliardJapanIvan Magalhaes PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Jones VocelkaCanadaAsiya Javayant NEW
Costa DilliardJapanAsiya Javayant NEGOTIATION
Cody SaylorsFranceAmy Elsner UNQUALIFIED
Johnson SergiBrazilIvan Magalhaes UNQUALIFIED
Adams MorascaCanadaIoni Bowcher QUALIFIED
Julie StensethAustraliaAsiya Javayant RENEWAL
Jefferson SchemmerUnited KingdomBernardo Dominic UNQUALIFIED
Aruna FigeroaAustraliaAsiya Javayant NEGOTIATION
Jennifer AmigonJapanIvan Magalhaes NEGOTIATION
Arvin AlbaresRussiaAmy Elsner QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Cody SaylorsItaly2026-05-07Morlong Associates RENEWAL18Bernardo Dominic
1001Munro FerenczUnited Kingdom2026-05-22Rousseaux, Michael Esq PROPOSAL15Amy Elsner
1002Salvatore StockhamAustralia2026-05-30Feiner Bros PROPOSAL45Onyama Limba
1003Isabel BowleyItaly2026-05-10Buckley Miller Wright RENEWAL43Ioni Bowcher
1004Nicolas IturbideArgentina2026-05-28Rousseaux, Michael Esq PROPOSAL38Onyama Limba
1005Smith GlickSpain2026-05-16Benton, John B Jr UNQUALIFIED48Stephen Shaw
1006Salvatore StockhamItaly2026-05-16Chemel, James L Cpa PROPOSAL26Anna Fali
1007Aika InouyeFrance2026-05-06Morlong Associates NEW87Ivan Magalhaes
1008David DarakjyJapan2026-05-19Chapman, Ross E Esq PROPOSAL65Stephen Shaw
1009Wickens NestleBrazil2026-05-09Rousseaux, Michael Esq QUALIFIED28Amy Elsner
1010Adams MorascaItaly2026-05-27Chanay, Jeffrey A Esq UNQUALIFIED2Ivan Magalhaes
1011Ricardo GauchoItaly2026-05-23Benton, John B Jr NEGOTIATION86Xuxue Feng
1012Faith GillianSpain2026-05-04Rousseaux, Michael Esq NEW28Ivan Magalhaes
1013Juan WieserRussia2026-05-26Dorl, James J Esq UNQUALIFIED66Stephen Shaw
1014Cody SaylorsBrazil2026-05-24King, Christopher A Esq UNQUALIFIED2Bernardo Dominic
1015Salvatore StockhamRussia2026-05-15Rangoni Of Florence QUALIFIED66Amy Elsner
1016Darci PoquetteRussia2026-05-05Morlong Associates PROPOSAL90Ivan Magalhaes
1017Murillo MaletSpain2026-05-22Dorl, James J Esq NEW24Stephen Shaw
1018Izzy GarufiGermany2026-05-29Chanay, Jeffrey A Esq PROPOSAL19Ivan Magalhaes
1019Cody SaylorsAustralia2026-05-03Feltz Printing Service RENEWAL92Ivan Magalhaes
1020Deepesh ChuiJapan2026-05-19Commercial Press PROPOSAL2Ivan Magalhaes
1021Wickens NestleArgentina2026-05-01Morlong Associates UNQUALIFIED51Asiya Javayant
1022Smith GlickRussia2026-05-20Truhlar And Truhlar Attys UNQUALIFIED48Elwin Sharvill
1023Ivar PaprockiCanada2026-05-19Dorl, James J Esq UNQUALIFIED38Xuxue Feng
1024Francesco ShinkoItaly2026-05-28Commercial Press NEGOTIATION60Anna Fali
1025Greenwood BologniaJapan2026-05-27Feiner Bros RENEWAL37Ivan Magalhaes
1026Ashley DoeJapan2026-05-23King, Christopher A Esq NEGOTIATION48Asiya Javayant
1027David DarakjySpain2026-05-23Morlong Associates PROPOSAL54Stephen Shaw
1028Sinclair WaycottCanada2026-05-28Printing Dimensions NEGOTIATION63Anna Fali
1029Emily WhobreySpain2026-05-03Chapman, Ross E Esq RENEWAL62Bernardo Dominic
1030Adams MorascaIndia2026-05-15Feiner Bros NEW16Asiya Javayant
1031Julie StensethFrance2026-05-20Feiner Bros NEGOTIATION86Anna Fali
1032Rodrigues CampainFrance2026-05-04Feiner Bros NEW74Elwin Sharvill
1033Jefferson SchemmerCanada2026-05-17Printing Dimensions QUALIFIED99Anna Fali
1034Arvin AlbaresGermany2026-05-04Morlong Associates NEW43Elwin Sharvill
1035Francesco ShinkoRussia2026-05-11Benton, John B Jr RENEWAL84Anna Fali
1036Smith GlickRussia2026-05-12Chemel, James L Cpa NEW58Amy Elsner
1037Jennifer AmigonJapan2026-05-01Chapman, Ross E Esq PROPOSAL20Ivan Magalhaes
1038Costa DilliardJapan2026-05-29Truhlar And Truhlar Attys NEW78Anna Fali
1039James ButtItaly2026-05-03Feiner Bros NEW83Ioni Bowcher
1040Leja CaldareraUnited Kingdom2026-05-23King, Christopher A Esq NEGOTIATION23Stephen Shaw
1041Nicolas IturbideFrance2026-05-23Printing Dimensions NEW82Stephen Shaw
1042Stacey MacleadRussia2026-05-22Dorl, James J Esq RENEWAL86Anna Fali
1043Stacey MacleadJapan2026-05-21Benton, John B Jr QUALIFIED70Amy Elsner
1044Leon OldroydJapan2026-05-14Morlong Associates UNQUALIFIED36Bernardo Dominic
1045Aika InouyeSpain2026-05-28Rousseaux, Michael Esq NEW60Amy Elsner
1046Deepesh ChuiGermany2026-05-28Truhlar And Truhlar Attys PROPOSAL70Onyama Limba
1047Faith GillianSpain2026-05-29Morlong Associates UNQUALIFIED64Ivan Magalhaes
1048Munro FerenczBrazil2026-05-20Buckley Miller Wright QUALIFIED44Ivan Magalhaes
1049Arvin AlbaresUnited Kingdom2026-05-29Chapman, Ross E Esq RENEWAL34Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyItalyAmy Elsner RENEWAL
Mujtaba NickaJapanIoni Bowcher NEGOTIATION
Kaitlin OstroskyFranceIoni Bowcher RENEWAL
Ricardo GauchoSpainAnna Fali PROPOSAL
Salvatore StockhamRussiaAnna Fali UNQUALIFIED
Costa DilliardIndiaBernardo Dominic NEW
Wickens NestleGermanyBernardo Dominic NEGOTIATION
Jefferson SchemmerJapanIvan Magalhaes UNQUALIFIED
Leja CaldareraUnited KingdomAsiya Javayant UNQUALIFIED
Deepesh ChuiBrazilElwin Sharvill NEGOTIATION
Adams MorascaItalyAmy Elsner PROPOSAL
James ButtUnited KingdomBernardo Dominic NEW
Chavez BriddickBrazilAsiya Javayant QUALIFIED
Salvatore StockhamJapanStephen Shaw UNQUALIFIED
Jeanfrancois VenereAustraliaAmy Elsner RENEWAL
Arvin AlbaresBrazilStephen Shaw UNQUALIFIED
Aditya KuskoIndiaIvan Magalhaes NEW
Kaitlin OstroskyCanadaAnna Fali QUALIFIED
Jennifer AmigonIndiaAnna Fali PROPOSAL
Salvatore StockhamUnited KingdomAmy Elsner NEGOTIATION
Munro FerenczArgentinaStephen Shaw QUALIFIED
Alejandro PerinRussiaElwin Sharvill NEW
Claire TollnerJapanElwin Sharvill RENEWAL
Francesco ShinkoFranceAsiya Javayant PROPOSAL
Leja CaldareraFranceIoni Bowcher PROPOSAL
Maisha RulapaughGermanyIoni Bowcher PROPOSAL
Jeanfrancois VenereRussiaBernardo Dominic RENEWAL
Sinclair WaycottRussiaIoni Bowcher RENEWAL
Darci PoquetteRussiaElwin Sharvill NEW
Ivar PaprockiAustraliaIoni Bowcher NEW
Kaitlin OstroskyIndiaElwin Sharvill NEW
Nicolas IturbideCanadaAnna Fali QUALIFIED
Deepesh ChuiItalyAnna Fali PROPOSAL
Aruna FigeroaCanadaXuxue Feng QUALIFIED
Smith GlickArgentinaXuxue Feng QUALIFIED
Munro FerenczFranceAsiya Javayant NEGOTIATION
Aditya KuskoRussiaIvan Magalhaes PROPOSAL
Costa DilliardUnited KingdomAnna Fali QUALIFIED
David DarakjyItalyIoni Bowcher PROPOSAL
Izzy GarufiGermanyAsiya Javayant NEGOTIATION
Darci PoquetteBrazilStephen Shaw UNQUALIFIED
Aruna FigeroaArgentinaAnna Fali NEW
Arvin AlbaresBrazilIoni Bowcher UNQUALIFIED
Izzy GarufiArgentinaBernardo Dominic PROPOSAL
Costa DilliardIndiaBernardo Dominic NEGOTIATION
Costa DilliardItalyStephen Shaw UNQUALIFIED
Mujtaba NickaBrazilIvan Magalhaes PROPOSAL
Ricardo GauchoAustraliaOnyama Limba PROPOSAL
Silvio SlusarskiItalyIoni Bowcher RENEWAL
Aruna FigeroaJapanIvan Magalhaes NEGOTIATION
Frozen Columns
Name
Leja Caldarera
Munro Ferencz
Aika Inouye
Julie Stenseth
Kadeem Flosi
Francesco Shinko
David Darakjy
Stacey Maclead
Darci Poquette
Juan Wieser
Silvio Slusarski
Darci Poquette
James Butt
Alejandro Perin
Johnson Sergi
Silvio Slusarski
Morrow Ruta
Jennifer Amigon
Maisha Rulapaugh
Clifford Rim
Costa Dilliard
Maria Marrier
Cody Saylors
Nicolas Iturbide
Salvatore Stockham
Murillo Malet
Ivar Paprocki
Deepesh Chui
Maisha Rulapaugh
Cody Saylors
Kaitlin Ostrosky
Leja Caldarera
Juan Wieser
Ivar Paprocki
Mujtaba Nicka
Cody Saylors
Maisha Rulapaugh
Jefferson Schemmer
Johnson Sergi
Aruna Figeroa
Johnson Sergi
Leja Caldarera
Jennifer Amigon
Mujtaba Nicka
Aditya Kusko
Adams Morasca
Aditya Kusko
Jones Vocelka
Aruna Figeroa
Maria Marrier
IdCountryDate
1000France2026-05-15
1001Japan2026-05-16
1002Japan2026-05-26
1003United Kingdom2026-05-02
1004Canada2026-05-04
1005Germany2026-05-26
1006Italy2026-05-13
1007Argentina2026-05-29
1008Brazil2026-05-11
1009Brazil2026-05-18
1010Japan2026-05-01
1011United Kingdom2026-05-29
1012Canada2026-05-30
1013Australia2026-05-16
1014India2026-05-03
1015Italy2026-05-11
1016Brazil2026-05-07
1017Argentina2026-05-18
1018Argentina2026-05-03
1019Spain2026-05-07
1020Canada2026-05-02
1021Russia2026-05-27
1022Australia2026-05-04
1023Argentina2026-05-07
1024United Kingdom2026-05-10
1025Italy2026-05-21
1026United Kingdom2026-05-28
1027France2026-05-02
1028United Kingdom2026-05-06
1029Russia2026-05-15
1030Australia2026-05-17
1031Italy2026-05-21
1032Australia2026-05-21
1033Argentina2026-05-28
1034France2026-05-18
1035Germany2026-05-24
1036Brazil2026-05-29
1037Argentina2026-05-16
1038Canada2026-05-03
1039India2026-05-27
1040Italy2026-05-10
1041United Kingdom2026-05-18
1042India2026-05-03
1043Germany2026-05-15
1044Italy2026-05-09
1045India2026-05-12
1046Germany2026-05-12
1047Russia2026-05-29
1048France2026-05-25
1049France2026-05-03

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000Germany2026-05-27
Silvio Slusarski1001Germany2026-05-08
Chavez Briddick1002France2026-05-30
Julie Stenseth1003France2026-05-28
Greenwood Bolognia1004Canada2026-05-18
Jones Vocelka1005France2026-05-29
Kadeem Flosi1006India2026-05-24
Arvin Albares1007India2026-05-30
James Butt1008Brazil2026-05-27
Juan Wieser1009Argentina2026-05-20
Julie Stenseth1010Argentina2026-05-01
Isabel Bowley1011Brazil2026-05-19
Sinclair Waycott1012Brazil2026-05-03
Alejandro Perin1013Russia2026-05-29
Arvin Albares1014Canada2026-05-07
Ivar Paprocki1015Australia2026-05-06
Juan Wieser1016Argentina2026-05-19
Juan Wieser1017United Kingdom2026-05-03
Faith Gillian1018Brazil2026-05-27
Emily Whobrey1019Brazil2026-05-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereFranceAnna Fali NEGOTIATION
Jeanfrancois VenereAustraliaAmy Elsner UNQUALIFIED
Rodrigues CampainSpainIoni Bowcher NEGOTIATION
Silvio SlusarskiArgentinaElwin Sharvill NEW
Maria MarrierJapanXuxue Feng NEGOTIATION
Maisha RulapaughItalyBernardo Dominic QUALIFIED
Jefferson SchemmerSpainIvan Magalhaes NEW
Juan WieserBrazilBernardo Dominic NEW
Silvio SlusarskiCanadaAnna Fali QUALIFIED
Claire TollnerJapanStephen Shaw NEW
Tony FollerArgentinaBernardo Dominic UNQUALIFIED
Ricardo GauchoFranceIvan Magalhaes PROPOSAL
Francesco ShinkoCanadaIvan Magalhaes PROPOSAL
Kadeem FlosiSpainIvan Magalhaes PROPOSAL
Costa DilliardJapanStephen Shaw NEW
Silvio SlusarskiBrazilAmy Elsner NEGOTIATION
Munro FerenczBrazilIvan Magalhaes NEW
Darci PoquetteCanadaIoni Bowcher RENEWAL
Jennifer AmigonRussiaIoni Bowcher NEGOTIATION
Rodrigues CampainBrazilOnyama Limba NEW
Mayumi KolmetzIndiaAmy Elsner UNQUALIFIED
Antonio CaudySpainIvan Magalhaes PROPOSAL
Deepesh ChuiSpainAmy Elsner RENEWAL
Nicolas IturbideFranceAnna Fali RENEWAL
Tony FollerIndiaIvan Magalhaes NEGOTIATION
Faith GillianCanadaAnna Fali RENEWAL
Jeanfrancois VenereBrazilAnna Fali NEGOTIATION
Arvin AlbaresSpainIoni Bowcher UNQUALIFIED
Leja CaldareraItalyOnyama Limba RENEWAL
James ButtItalyXuxue Feng RENEWAL
Maria MarrierItalyElwin Sharvill QUALIFIED
Deepesh ChuiSpainElwin Sharvill UNQUALIFIED
Jeanfrancois VenereCanadaIoni Bowcher NEGOTIATION
Izzy GarufiFranceIoni Bowcher UNQUALIFIED
Ricardo GauchoIndiaBernardo Dominic UNQUALIFIED
Leon OldroydCanadaIoni Bowcher PROPOSAL
Jefferson SchemmerBrazilIoni Bowcher NEW
Octavia MaletGermanyIoni Bowcher NEGOTIATION
Maisha RulapaughGermanyBernardo Dominic NEGOTIATION
Leja CaldareraSpainAmy Elsner 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>