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
Juan WieserAustraliaElwin Sharvill NEW
Silvio SlusarskiUnited KingdomIoni Bowcher NEW
Antonio CaudyGermanyAnna Fali QUALIFIED
Faith GillianUnited KingdomBernardo Dominic PROPOSAL
Leon OldroydRussiaStephen Shaw QUALIFIED
Deepesh ChuiItalyXuxue Feng PROPOSAL
Isabel BowleyJapanAsiya Javayant QUALIFIED
Alejandro PerinGermanyXuxue Feng QUALIFIED
Ashley DoeUnited KingdomBernardo Dominic UNQUALIFIED
Sinclair WaycottItalyAmy Elsner NEGOTIATION
Nicolas IturbideSpainAmy Elsner NEW
Jefferson SchemmerArgentinaAmy Elsner NEW
Nicolas IturbideBrazilStephen Shaw NEW
Wickens NestleArgentinaAmy Elsner QUALIFIED
Leon OldroydAustraliaStephen Shaw NEW
Costa DilliardCanadaAnna Fali RENEWAL
Nicolas IturbideArgentinaElwin Sharvill NEGOTIATION
Mayumi KolmetzArgentinaAsiya Javayant RENEWAL
Munro FerenczArgentinaBernardo Dominic PROPOSAL
Clifford RimSpainXuxue Feng QUALIFIED
Smith GlickArgentinaAmy Elsner NEGOTIATION
Faith GillianGermanyIoni Bowcher QUALIFIED
Aditya KuskoRussiaAmy Elsner RENEWAL
Maisha RulapaughIndiaAmy Elsner NEW
Chavez BriddickBrazilOnyama Limba UNQUALIFIED
Murillo MaletGermanyXuxue Feng NEW
Izzy GarufiRussiaBernardo Dominic PROPOSAL
Munro FerenczCanadaIvan Magalhaes NEW
Sinclair WaycottArgentinaStephen Shaw NEGOTIATION
Munro FerenczBrazilElwin Sharvill NEGOTIATION
Izzy GarufiJapanAsiya Javayant QUALIFIED
Sinclair WaycottGermanyOnyama Limba UNQUALIFIED
Ricardo GauchoBrazilAmy Elsner PROPOSAL
Misaki RoysterUnited KingdomXuxue Feng RENEWAL
Adams MorascaFranceAnna Fali NEGOTIATION
Salvatore StockhamItalyXuxue Feng QUALIFIED
Silvio SlusarskiAustraliaOnyama Limba NEW
Morrow RutaBrazilAsiya Javayant RENEWAL
Wickens NestleCanadaAmy Elsner NEW
Jeanfrancois VenereIndiaAnna Fali QUALIFIED
Stacey MacleadRussiaXuxue Feng QUALIFIED
Kaitlin OstroskyFranceAmy Elsner UNQUALIFIED
Johnson SergiIndiaAnna Fali NEW
Greenwood BologniaUnited KingdomAmy Elsner NEW
James ButtCanadaOnyama Limba QUALIFIED
Isabel BowleyCanadaStephen Shaw RENEWAL
Sinclair WaycottFranceIvan Magalhaes PROPOSAL
Mayumi KolmetzIndiaIoni Bowcher QUALIFIED
Ivar PaprockiUnited KingdomIoni Bowcher NEGOTIATION
Kadeem FlosiItalyXuxue Feng QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Maria MarrierItalyIoni Bowcher QUALIFIED
Francesco ShinkoArgentinaAnna Fali UNQUALIFIED
Rodrigues CampainJapanIvan Magalhaes QUALIFIED
Ashley DoeJapanBernardo Dominic PROPOSAL
Leja CaldareraAustraliaBernardo Dominic NEW
Emily WhobreyArgentinaAsiya Javayant RENEWAL
Julie StensethRussiaOnyama Limba NEW
Mayumi KolmetzArgentinaOnyama Limba UNQUALIFIED
Stacey MacleadCanadaIvan Magalhaes RENEWAL
Tony FollerAustraliaStephen Shaw NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Juan WieserAustralia2026-05-18Feiner Bros QUALIFIED23Stephen Shaw
1001Stacey MacleadSpain2026-05-12Rousseaux, Michael Esq UNQUALIFIED70Bernardo Dominic
1002James ButtJapan2026-05-02Morlong Associates PROPOSAL52Xuxue Feng
1003Tony FollerJapan2026-05-02Dorl, James J Esq PROPOSAL91Xuxue Feng
1004Arvin AlbaresArgentina2026-05-18Truhlar And Truhlar Attys RENEWAL73Amy Elsner
1005Aditya KuskoItaly2026-05-16Commercial Press RENEWAL12Ioni Bowcher
1006Wickens NestleCanada2026-04-24Printing Dimensions QUALIFIED50Asiya Javayant
1007Morrow RutaArgentina2026-04-26Truhlar And Truhlar Attys UNQUALIFIED72Anna Fali
1008Maisha RulapaughRussia2026-05-11Dorl, James J Esq QUALIFIED51Ioni Bowcher
1009Costa DilliardJapan2026-04-26Chapman, Ross E Esq NEW24Stephen Shaw
1010Darci PoquetteIndia2026-05-02Printing Dimensions PROPOSAL48Ioni Bowcher
1011Alejandro PerinFrance2026-05-18Rangoni Of Florence PROPOSAL6Ivan Magalhaes
1012Deepesh ChuiJapan2026-04-30Feltz Printing Service PROPOSAL37Ivan Magalhaes
1013Alejandro PerinSpain2026-04-27Rangoni Of Florence RENEWAL88Onyama Limba
1014Stacey MacleadUnited Kingdom2026-05-16Chanay, Jeffrey A Esq UNQUALIFIED62Amy Elsner
1015Ivar PaprockiAustralia2026-05-11Rangoni Of Florence RENEWAL42Bernardo Dominic
1016Juan WieserArgentina2026-05-01Printing Dimensions NEW51Stephen Shaw
1017Munro FerenczBrazil2026-05-16King, Christopher A Esq NEGOTIATION6Stephen Shaw
1018Munro FerenczArgentina2026-04-26King, Christopher A Esq QUALIFIED0Asiya Javayant
1019Tony FollerGermany2026-05-13Chanay, Jeffrey A Esq RENEWAL13Anna Fali
1020Aika InouyeGermany2026-05-07Chemel, James L Cpa NEGOTIATION42Anna Fali
1021Ricardo GauchoUnited Kingdom2026-05-05Benton, John B Jr PROPOSAL49Anna Fali
1022Costa DilliardIndia2026-05-01Truhlar And Truhlar Attys NEW23Asiya Javayant
1023Leon OldroydIndia2026-04-28Benton, John B Jr UNQUALIFIED59Bernardo Dominic
1024Antonio CaudyJapan2026-04-24Rangoni Of Florence QUALIFIED83Stephen Shaw
1025Ricardo GauchoJapan2026-04-21Truhlar And Truhlar Attys QUALIFIED99Xuxue Feng
1026Clifford RimAustralia2026-04-22Printing Dimensions RENEWAL23Amy Elsner
1027Octavia MaletRussia2026-05-19Chemel, James L Cpa NEGOTIATION19Bernardo Dominic
1028Faith GillianArgentina2026-04-24Chapman, Ross E Esq PROPOSAL44Amy Elsner
1029Rodrigues CampainFrance2026-05-11Printing Dimensions RENEWAL63Elwin Sharvill
1030Aruna FigeroaRussia2026-05-06King, Christopher A Esq PROPOSAL55Stephen Shaw
1031Rodrigues CampainSpain2026-05-14Chanay, Jeffrey A Esq RENEWAL68Onyama Limba
1032Clifford RimGermany2026-05-11Buckley Miller Wright QUALIFIED20Ioni Bowcher
1033Isabel BowleyIndia2026-04-27Chemel, James L Cpa UNQUALIFIED90Ioni Bowcher
1034Tony FollerBrazil2026-05-14Printing Dimensions NEGOTIATION34Bernardo Dominic
1035Jeanfrancois VenereJapan2026-05-13Dorl, James J Esq QUALIFIED35Xuxue Feng
1036Alejandro PerinUnited Kingdom2026-05-03Chanay, Jeffrey A Esq NEGOTIATION29Anna Fali
1037Faith GillianFrance2026-04-24Printing Dimensions QUALIFIED77Ioni Bowcher
1038Tony FollerRussia2026-05-12Feiner Bros UNQUALIFIED63Asiya Javayant
1039James ButtIndia2026-05-15Dorl, James J Esq NEGOTIATION60Amy Elsner
1040Costa DilliardAustralia2026-05-14Rangoni Of Florence QUALIFIED8Asiya Javayant
1041Leon OldroydFrance2026-05-11Rousseaux, Michael Esq NEGOTIATION57Ioni Bowcher
1042Nicolas IturbideFrance2026-05-13Chapman, Ross E Esq NEW40Ioni Bowcher
1043Silvio SlusarskiArgentina2026-05-02Rousseaux, Michael Esq NEGOTIATION82Ioni Bowcher
1044Silvio SlusarskiFrance2026-04-30Dorl, James J Esq QUALIFIED68Bernardo Dominic
1045Salvatore StockhamJapan2026-05-08Feiner Bros NEW55Ioni Bowcher
1046Claire TollnerSpain2026-05-08Truhlar And Truhlar Attys NEW21Ioni Bowcher
1047Ricardo GauchoGermany2026-05-12Benton, John B Jr QUALIFIED55Ioni Bowcher
1048Isabel BowleyIndia2026-04-30King, Christopher A Esq NEGOTIATION0Stephen Shaw
1049Murillo MaletIndia2026-05-13Commercial Press NEW84Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Murillo MaletArgentinaBernardo Dominic QUALIFIED
Stacey MacleadJapanXuxue Feng RENEWAL
Salvatore StockhamItalyAmy Elsner NEW
Alejandro PerinArgentinaAmy Elsner NEW
Arvin AlbaresItalyXuxue Feng UNQUALIFIED
Julie StensethGermanyStephen Shaw UNQUALIFIED
Smith GlickRussiaXuxue Feng UNQUALIFIED
Antonio CaudyRussiaStephen Shaw QUALIFIED
Octavia MaletCanadaIvan Magalhaes UNQUALIFIED
Deepesh ChuiCanadaAmy Elsner NEGOTIATION
Juan WieserItalyOnyama Limba QUALIFIED
Emily WhobreyAustraliaAmy Elsner PROPOSAL
James ButtUnited KingdomBernardo Dominic QUALIFIED
Salvatore StockhamGermanyAnna Fali NEGOTIATION
Morrow RutaCanadaXuxue Feng NEGOTIATION
Arvin AlbaresIndiaAnna Fali UNQUALIFIED
Kadeem FlosiBrazilAmy Elsner NEGOTIATION
Nicolas IturbideIndiaStephen Shaw NEGOTIATION
Maisha RulapaughUnited KingdomOnyama Limba UNQUALIFIED
Tony FollerRussiaAnna Fali UNQUALIFIED
Murillo MaletArgentinaXuxue Feng NEW
Claire TollnerGermanyStephen Shaw PROPOSAL
Kadeem FlosiSpainIoni Bowcher RENEWAL
Jones VocelkaSpainAsiya Javayant NEW
Salvatore StockhamBrazilAmy Elsner NEGOTIATION
Mayumi KolmetzGermanyElwin Sharvill UNQUALIFIED
Misaki RoysterGermanyBernardo Dominic PROPOSAL
Faith GillianGermanyAnna Fali NEGOTIATION
Greenwood BologniaGermanyAsiya Javayant RENEWAL
Aika InouyeFranceAnna Fali NEGOTIATION
Jones VocelkaBrazilElwin Sharvill NEGOTIATION
Octavia MaletArgentinaAnna Fali UNQUALIFIED
Jones VocelkaArgentinaAmy Elsner NEW
Jones VocelkaSpainAnna Fali RENEWAL
Alejandro PerinJapanAsiya Javayant RENEWAL
Chavez BriddickIndiaElwin Sharvill RENEWAL
Tony FollerSpainAsiya Javayant NEW
Mujtaba NickaFranceAnna Fali PROPOSAL
Darci PoquetteUnited KingdomBernardo Dominic PROPOSAL
Silvio SlusarskiGermanyIoni Bowcher NEGOTIATION
Aditya KuskoBrazilIoni Bowcher NEGOTIATION
Juan WieserSpainAnna Fali UNQUALIFIED
Munro FerenczFranceAmy Elsner RENEWAL
Maria MarrierItalyAmy Elsner RENEWAL
Octavia MaletIndiaAmy Elsner QUALIFIED
Maisha RulapaughGermanyIoni Bowcher NEGOTIATION
Antonio CaudySpainOnyama Limba RENEWAL
Rodrigues CampainRussiaAsiya Javayant QUALIFIED
Jones VocelkaRussiaAmy Elsner NEW
Julie StensethSpainXuxue Feng PROPOSAL
Frozen Columns
Name
Cody Saylors
Clifford Rim
Munro Ferencz
Francesco Shinko
Octavia Malet
Arvin Albares
Sinclair Waycott
Aruna Figeroa
Ivar Paprocki
Nicolas Iturbide
Silvio Slusarski
Salvatore Stockham
Ashley Doe
Ashley Doe
Ivar Paprocki
Jeanfrancois Venere
Darci Poquette
Ashley Doe
Jeanfrancois Venere
Kaitlin Ostrosky
Ricardo Gaucho
Arvin Albares
Kadeem Flosi
Isabel Bowley
Deepesh Chui
Maisha Rulapaugh
Francesco Shinko
Kaitlin Ostrosky
Maria Marrier
Jefferson Schemmer
Deepesh Chui
Claire Tollner
Emily Whobrey
Mujtaba Nicka
Misaki Royster
Tony Foller
Jeanfrancois Venere
Arvin Albares
Leon Oldroyd
Leja Caldarera
Chavez Briddick
Arvin Albares
Antonio Caudy
Darci Poquette
Salvatore Stockham
Izzy Garufi
Silvio Slusarski
Ricardo Gaucho
Claire Tollner
Nicolas Iturbide
IdCountryDate
1000Australia2026-05-14
1001India2026-05-02
1002United Kingdom2026-04-23
1003Australia2026-04-26
1004Spain2026-05-15
1005Italy2026-04-20
1006Russia2026-04-23
1007Brazil2026-04-28
1008Italy2026-05-10
1009Spain2026-05-06
1010Brazil2026-05-06
1011Australia2026-05-05
1012Russia2026-04-30
1013Australia2026-04-29
1014Canada2026-05-05
1015Germany2026-05-14
1016Argentina2026-05-09
1017Canada2026-04-30
1018Argentina2026-05-01
1019Japan2026-05-14
1020Canada2026-04-23
1021Argentina2026-05-12
1022United Kingdom2026-04-29
1023Russia2026-04-23
1024Japan2026-04-25
1025Japan2026-04-30
1026India2026-05-18
1027Argentina2026-05-19
1028Argentina2026-04-20
1029Argentina2026-05-02
1030Argentina2026-04-23
1031Russia2026-05-16
1032India2026-05-17
1033Australia2026-04-20
1034Brazil2026-04-26
1035Argentina2026-05-04
1036Italy2026-04-26
1037Spain2026-05-16
1038Brazil2026-05-15
1039Australia2026-05-18
1040France2026-05-09
1041Australia2026-05-15
1042Germany2026-04-23
1043Brazil2026-04-27
1044Argentina2026-05-12
1045Brazil2026-05-15
1046Argentina2026-05-03
1047Canada2026-04-25
1048Russia2026-05-11
1049United Kingdom2026-05-03

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000Spain2026-05-02
Ricardo Gaucho1001United Kingdom2026-04-20
Alejandro Perin1002Canada2026-04-26
Jennifer Amigon1003Australia2026-05-04
Deepesh Chui1004Russia2026-04-30
Kadeem Flosi1005Germany2026-05-13
Arvin Albares1006Brazil2026-04-20
Maria Marrier1007Brazil2026-05-12
Tony Foller1008Canada2026-04-23
Tony Foller1009Spain2026-04-29
Kaitlin Ostrosky1010India2026-04-30
Ricardo Gaucho1011Australia2026-04-24
Murillo Malet1012Australia2026-04-22
Johnson Sergi1013Australia2026-04-21
Kadeem Flosi1014Russia2026-04-25
Izzy Garufi1015Italy2026-04-26
Smith Glick1016Brazil2026-05-02
Wickens Nestle1017United Kingdom2026-04-29
Costa Dilliard1018Argentina2026-04-25
Smith Glick1019Italy2026-05-09
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Francesco ShinkoRussiaXuxue Feng RENEWAL
Tony FollerFranceAmy Elsner RENEWAL
Clifford RimRussiaAnna Fali PROPOSAL
Murillo MaletRussiaIvan Magalhaes RENEWAL
Deepesh ChuiGermanyStephen Shaw NEW
Ricardo GauchoArgentinaAsiya Javayant QUALIFIED
Costa DilliardAustraliaAsiya Javayant QUALIFIED
Misaki RoysterCanadaAmy Elsner QUALIFIED
Clifford RimSpainAnna Fali NEW
Emily WhobreyArgentinaStephen Shaw UNQUALIFIED
Costa DilliardFranceIvan Magalhaes NEW
Johnson SergiFranceStephen Shaw QUALIFIED
Cody SaylorsRussiaBernardo Dominic QUALIFIED
Leon OldroydBrazilAsiya Javayant RENEWAL
Maisha RulapaughItalyElwin Sharvill NEW
Izzy GarufiSpainAmy Elsner NEW
Darci PoquetteBrazilAsiya Javayant QUALIFIED
Misaki RoysterCanadaBernardo Dominic QUALIFIED
Kaitlin OstroskyFranceAnna Fali NEGOTIATION
Rodrigues CampainGermanyIoni Bowcher UNQUALIFIED
Chavez BriddickIndiaAmy Elsner UNQUALIFIED
Murillo MaletFranceAmy Elsner UNQUALIFIED
Jeanfrancois VenereFranceAmy Elsner UNQUALIFIED
Aruna FigeroaUnited KingdomAmy Elsner UNQUALIFIED
Stacey MacleadRussiaAsiya Javayant NEW
Aruna FigeroaJapanXuxue Feng NEW
Mayumi KolmetzCanadaIoni Bowcher RENEWAL
Clifford RimSpainIoni Bowcher NEGOTIATION
Juan WieserJapanIoni Bowcher NEGOTIATION
Francesco ShinkoGermanyIvan Magalhaes NEGOTIATION
Ashley DoeUnited KingdomOnyama Limba NEW
Misaki RoysterJapanOnyama Limba NEW
Alejandro PerinAustraliaIoni Bowcher RENEWAL
Izzy GarufiBrazilIoni Bowcher QUALIFIED
Aditya KuskoFranceIvan Magalhaes NEW
Isabel BowleyJapanAnna Fali RENEWAL
Mujtaba NickaRussiaBernardo Dominic NEGOTIATION
Murillo MaletArgentinaIvan Magalhaes NEW
Rodrigues CampainJapanStephen Shaw UNQUALIFIED
James ButtJapanElwin 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>