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
Morrow RutaFranceIoni Bowcher QUALIFIED
Antonio CaudyAustraliaIoni Bowcher NEGOTIATION
Kaitlin OstroskyCanadaIoni Bowcher PROPOSAL
Aruna FigeroaIndiaIvan Magalhaes QUALIFIED
Salvatore StockhamUnited KingdomAsiya Javayant RENEWAL
Isabel BowleyRussiaAmy Elsner NEW
Smith GlickAustraliaOnyama Limba PROPOSAL
Jeanfrancois VenereCanadaAnna Fali NEGOTIATION
Jefferson SchemmerJapanBernardo Dominic PROPOSAL
Morrow RutaJapanOnyama Limba NEGOTIATION
Clifford RimAustraliaIoni Bowcher RENEWAL
Greenwood BologniaJapanOnyama Limba NEGOTIATION
Aruna FigeroaItalyAsiya Javayant QUALIFIED
Murillo MaletUnited KingdomIoni Bowcher QUALIFIED
Aika InouyeRussiaAsiya Javayant NEW
Johnson SergiAustraliaAsiya Javayant NEGOTIATION
Aruna FigeroaAustraliaBernardo Dominic UNQUALIFIED
Kadeem FlosiGermanyIoni Bowcher UNQUALIFIED
Morrow RutaFranceBernardo Dominic PROPOSAL
Adams MorascaFranceIvan Magalhaes NEW
Jennifer AmigonUnited KingdomStephen Shaw RENEWAL
David DarakjyAustraliaOnyama Limba RENEWAL
Maisha RulapaughArgentinaElwin Sharvill UNQUALIFIED
Leon OldroydIndiaBernardo Dominic NEW
Silvio SlusarskiSpainIvan Magalhaes NEGOTIATION
Stacey MacleadArgentinaBernardo Dominic RENEWAL
Munro FerenczGermanyAnna Fali PROPOSAL
Murillo MaletArgentinaIoni Bowcher UNQUALIFIED
Wickens NestleFranceStephen Shaw UNQUALIFIED
Leon OldroydIndiaStephen Shaw PROPOSAL
David DarakjyArgentinaIvan Magalhaes NEW
Cody SaylorsBrazilIoni Bowcher QUALIFIED
Ricardo GauchoJapanIvan Magalhaes RENEWAL
Chavez BriddickArgentinaBernardo Dominic PROPOSAL
Emily WhobreyJapanBernardo Dominic UNQUALIFIED
Maisha RulapaughRussiaElwin Sharvill NEGOTIATION
Mayumi KolmetzBrazilAnna Fali RENEWAL
Stacey MacleadUnited KingdomAmy Elsner PROPOSAL
Claire TollnerGermanyAmy Elsner RENEWAL
Tony FollerUnited KingdomAsiya Javayant PROPOSAL
Jennifer AmigonCanadaAmy Elsner PROPOSAL
Jeanfrancois VenereSpainBernardo Dominic NEW
Morrow RutaGermanyElwin Sharvill NEW
Deepesh ChuiBrazilIoni Bowcher PROPOSAL
Mujtaba NickaSpainXuxue Feng NEW
Sinclair WaycottJapanOnyama Limba QUALIFIED
Misaki RoysterSpainStephen Shaw RENEWAL
Isabel BowleyCanadaOnyama Limba QUALIFIED
Murillo MaletItalyStephen Shaw PROPOSAL
Stacey MacleadCanadaBernardo Dominic NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Mujtaba NickaIndiaAmy Elsner RENEWAL
Munro FerenczBrazilBernardo Dominic UNQUALIFIED
Izzy GarufiUnited KingdomAmy Elsner PROPOSAL
Kadeem FlosiIndiaXuxue Feng NEW
Kaitlin OstroskySpainAmy Elsner PROPOSAL
Izzy GarufiRussiaBernardo Dominic PROPOSAL
Ivar PaprockiBrazilAmy Elsner RENEWAL
Johnson SergiGermanyBernardo Dominic UNQUALIFIED
Chavez BriddickArgentinaBernardo Dominic NEGOTIATION
Aditya KuskoUnited KingdomIoni Bowcher NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Julie StensethItaly2025-10-07Buckley Miller Wright QUALIFIED92Anna Fali
1001Antonio CaudyUnited Kingdom2025-10-08Truhlar And Truhlar Attys RENEWAL39Ivan Magalhaes
1002Johnson SergiFrance2025-10-31Dorl, James J Esq PROPOSAL15Ivan Magalhaes
1003Chavez BriddickRussia2025-10-17Printing Dimensions PROPOSAL3Asiya Javayant
1004Julie StensethRussia2025-10-28Morlong Associates PROPOSAL40Anna Fali
1005Costa DilliardUnited Kingdom2025-10-17Chapman, Ross E Esq RENEWAL62Ioni Bowcher
1006Cody SaylorsGermany2025-10-20Chapman, Ross E Esq UNQUALIFIED93Onyama Limba
1007Wickens NestleIndia2025-10-22Rousseaux, Michael Esq NEW21Amy Elsner
1008Tony FollerRussia2025-10-28Dorl, James J Esq NEGOTIATION29Elwin Sharvill
1009Mujtaba NickaGermany2025-10-19Rangoni Of Florence QUALIFIED35Stephen Shaw
1010Murillo MaletRussia2025-10-26Chemel, James L Cpa UNQUALIFIED3Stephen Shaw
1011Munro FerenczFrance2025-10-18Rangoni Of Florence NEGOTIATION74Onyama Limba
1012Arvin AlbaresIndia2025-10-19Commercial Press NEGOTIATION59Stephen Shaw
1013Leja CaldareraGermany2025-10-13Chemel, James L Cpa PROPOSAL81Asiya Javayant
1014Aditya KuskoArgentina2025-10-15Benton, John B Jr NEGOTIATION71Onyama Limba
1015Emily WhobreyAustralia2025-10-18Commercial Press NEGOTIATION9Xuxue Feng
1016Julie StensethBrazil2025-10-05Buckley Miller Wright PROPOSAL82Amy Elsner
1017Octavia MaletGermany2025-10-20Rangoni Of Florence NEW13Xuxue Feng
1018Ivar PaprockiUnited Kingdom2025-10-19Rousseaux, Michael Esq UNQUALIFIED2Elwin Sharvill
1019Juan WieserAustralia2025-10-26Benton, John B Jr PROPOSAL83Elwin Sharvill
1020Darci PoquetteAustralia2025-10-10Feltz Printing Service RENEWAL59Anna Fali
1021Jennifer AmigonFrance2025-10-17Rangoni Of Florence RENEWAL80Bernardo Dominic
1022Faith GillianIndia2025-10-10Feiner Bros QUALIFIED93Asiya Javayant
1023Maria MarrierFrance2025-10-31Truhlar And Truhlar Attys NEW1Elwin Sharvill
1024Aditya KuskoFrance2025-10-23Rangoni Of Florence RENEWAL21Ivan Magalhaes
1025Faith GillianFrance2025-10-13Feiner Bros RENEWAL78Xuxue Feng
1026Aditya KuskoFrance2025-10-06Buckley Miller Wright RENEWAL1Ioni Bowcher
1027Alejandro PerinSpain2025-10-29Buckley Miller Wright RENEWAL71Ivan Magalhaes
1028Johnson SergiIndia2025-10-23Chemel, James L Cpa UNQUALIFIED67Xuxue Feng
1029Adams MorascaIndia2025-10-18Dorl, James J Esq UNQUALIFIED62Asiya Javayant
1030Smith GlickSpain2025-10-10Rangoni Of Florence UNQUALIFIED88Anna Fali
1031Leja CaldareraIndia2025-10-23Buckley Miller Wright UNQUALIFIED32Bernardo Dominic
1032Adams MorascaCanada2025-10-16Commercial Press PROPOSAL31Anna Fali
1033Izzy GarufiUnited Kingdom2025-10-09Commercial Press UNQUALIFIED69Stephen Shaw
1034Emily WhobreyAustralia2025-10-22King, Christopher A Esq UNQUALIFIED40Ioni Bowcher
1035Aika InouyeJapan2025-10-13Commercial Press RENEWAL47Ivan Magalhaes
1036Clifford RimGermany2025-10-25King, Christopher A Esq QUALIFIED90Asiya Javayant
1037Chavez BriddickUnited Kingdom2025-10-05Chapman, Ross E Esq RENEWAL55Ioni Bowcher
1038Chavez BriddickIndia2025-10-16King, Christopher A Esq NEW20Bernardo Dominic
1039Izzy GarufiAustralia2025-10-18Dorl, James J Esq PROPOSAL9Ivan Magalhaes
1040Ashley DoeArgentina2025-10-03Benton, John B Jr QUALIFIED57Bernardo Dominic
1041James ButtFrance2025-10-19Feiner Bros QUALIFIED15Elwin Sharvill
1042Adams MorascaCanada2025-10-10Printing Dimensions RENEWAL77Ivan Magalhaes
1043Leja CaldareraSpain2025-10-08Benton, John B Jr NEGOTIATION64Onyama Limba
1044Aika InouyeBrazil2025-10-18Dorl, James J Esq PROPOSAL89Asiya Javayant
1045Tony FollerBrazil2025-10-06Rousseaux, Michael Esq UNQUALIFIED94Onyama Limba
1046Aruna FigeroaUnited Kingdom2025-10-03Commercial Press NEGOTIATION29Asiya Javayant
1047Sinclair WaycottGermany2025-10-08Chapman, Ross E Esq NEW10Onyama Limba
1048Morrow RutaIndia2025-10-27Chapman, Ross E Esq QUALIFIED85Onyama Limba
1049Jeanfrancois VenereUnited Kingdom2025-10-17Buckley Miller Wright QUALIFIED21Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Tony FollerSpainAsiya Javayant NEW
Isabel BowleyItalyIoni Bowcher NEGOTIATION
Ricardo GauchoBrazilAsiya Javayant NEW
Kaitlin OstroskyGermanyAnna Fali NEW
Clifford RimFranceOnyama Limba PROPOSAL
Adams MorascaGermanyBernardo Dominic NEGOTIATION
Antonio CaudyArgentinaAsiya Javayant PROPOSAL
Alejandro PerinBrazilXuxue Feng RENEWAL
Murillo MaletCanadaIoni Bowcher UNQUALIFIED
Francesco ShinkoBrazilElwin Sharvill RENEWAL
Leja CaldareraSpainElwin Sharvill UNQUALIFIED
Aika InouyeItalyAnna Fali RENEWAL
Clifford RimGermanyAsiya Javayant NEW
Tony FollerSpainBernardo Dominic UNQUALIFIED
Aditya KuskoIndiaAmy Elsner NEW
Adams MorascaArgentinaAnna Fali QUALIFIED
Octavia MaletJapanBernardo Dominic NEW
Maisha RulapaughFranceAnna Fali RENEWAL
Kadeem FlosiItalyXuxue Feng QUALIFIED
Octavia MaletBrazilElwin Sharvill RENEWAL
Aruna FigeroaAustraliaOnyama Limba NEGOTIATION
Ricardo GauchoUnited KingdomElwin Sharvill NEGOTIATION
Adams MorascaItalyBernardo Dominic QUALIFIED
Wickens NestleItalyXuxue Feng UNQUALIFIED
Ivar PaprockiArgentinaBernardo Dominic PROPOSAL
Leja CaldareraIndiaAsiya Javayant NEW
Costa DilliardRussiaIoni Bowcher RENEWAL
Mayumi KolmetzIndiaAnna Fali NEGOTIATION
Aruna FigeroaBrazilIvan Magalhaes NEGOTIATION
Julie StensethBrazilStephen Shaw UNQUALIFIED
Morrow RutaAustraliaElwin Sharvill NEGOTIATION
Silvio SlusarskiFranceElwin Sharvill NEGOTIATION
Leja CaldareraFranceStephen Shaw QUALIFIED
Rodrigues CampainAustraliaAsiya Javayant QUALIFIED
Wickens NestleFranceBernardo Dominic NEW
Ricardo GauchoSpainBernardo Dominic RENEWAL
Munro FerenczFranceIoni Bowcher NEGOTIATION
Salvatore StockhamSpainElwin Sharvill QUALIFIED
Jeanfrancois VenereItalyAsiya Javayant NEGOTIATION
Darci PoquetteSpainIoni Bowcher QUALIFIED
Arvin AlbaresArgentinaOnyama Limba QUALIFIED
Aruna FigeroaCanadaIvan Magalhaes NEW
David DarakjyGermanyXuxue Feng QUALIFIED
Aruna FigeroaRussiaStephen Shaw UNQUALIFIED
Leja CaldareraCanadaAmy Elsner QUALIFIED
Wickens NestleJapanAmy Elsner QUALIFIED
Octavia MaletAustraliaIoni Bowcher PROPOSAL
Juan WieserGermanyBernardo Dominic UNQUALIFIED
Jeanfrancois VenereBrazilXuxue Feng RENEWAL
Francesco ShinkoCanadaStephen Shaw QUALIFIED
Frozen Columns
Name
Maria Marrier
Aditya Kusko
Clifford Rim
Francesco Shinko
Tony Foller
Rodrigues Campain
Juan Wieser
Rodrigues Campain
Murillo Malet
Juan Wieser
Silvio Slusarski
Chavez Briddick
Arvin Albares
Jeanfrancois Venere
Arvin Albares
Wickens Nestle
Juan Wieser
Deepesh Chui
Maisha Rulapaugh
Morrow Ruta
Greenwood Bolognia
Clifford Rim
Johnson Sergi
Mujtaba Nicka
Chavez Briddick
Francesco Shinko
Maisha Rulapaugh
James Butt
Antonio Caudy
Maria Marrier
Kadeem Flosi
Chavez Briddick
Emily Whobrey
Smith Glick
Juan Wieser
Faith Gillian
Johnson Sergi
Murillo Malet
Costa Dilliard
Mujtaba Nicka
Silvio Slusarski
Johnson Sergi
Wickens Nestle
Greenwood Bolognia
Jefferson Schemmer
Adams Morasca
Misaki Royster
Octavia Malet
Munro Ferencz
Jones Vocelka
IdCountryDate
1000Argentina2025-10-19
1001India2025-10-27
1002Argentina2025-10-17
1003France2025-10-07
1004Spain2025-10-05
1005Argentina2025-10-08
1006Australia2025-10-21
1007Argentina2025-10-25
1008Argentina2025-10-07
1009Canada2025-10-06
1010France2025-10-04
1011Canada2025-10-25
1012Russia2025-10-15
1013France2025-11-01
1014Canada2025-10-13
1015United Kingdom2025-10-24
1016Germany2025-10-08
1017Spain2025-10-22
1018Italy2025-10-05
1019Russia2025-10-13
1020France2025-10-04
1021Australia2025-10-24
1022Canada2025-10-18
1023Germany2025-10-27
1024Australia2025-10-05
1025Canada2025-10-27
1026Spain2025-10-13
1027India2025-10-26
1028Japan2025-10-06
1029France2025-10-15
1030Canada2025-10-20
1031Australia2025-11-01
1032India2025-10-05
1033Argentina2025-10-29
1034Australia2025-10-16
1035United Kingdom2025-10-16
1036Spain2025-11-01
1037India2025-10-13
1038Japan2025-10-18
1039Spain2025-10-14
1040Argentina2025-10-09
1041Italy2025-10-23
1042Australia2025-10-06
1043France2025-10-29
1044Germany2025-10-07
1045India2025-10-04
1046Spain2025-10-31
1047Germany2025-10-25
1048United Kingdom2025-10-24
1049Australia2025-10-16

On-Demand Data

NameIdCountryDate
Julie Stenseth1000Canada2025-10-09
Cody Saylors1001France2025-10-09
Murillo Malet1002France2025-10-15
Wickens Nestle1003Spain2025-10-25
Stacey Maclead1004Brazil2025-10-27
Juan Wieser1005Australia2025-10-13
Maria Marrier1006Argentina2025-10-22
Adams Morasca1007Brazil2025-10-28
Ricardo Gaucho1008Japan2025-10-30
Morrow Ruta1009Australia2025-10-28
Cody Saylors1010France2025-10-28
Julie Stenseth1011Argentina2025-10-19
Deepesh Chui1012Spain2025-10-23
Tony Foller1013Brazil2025-10-29
Darci Poquette1014Argentina2025-10-13
Ricardo Gaucho1015Argentina2025-10-17
Jeanfrancois Venere1016United Kingdom2025-10-17
Kaitlin Ostrosky1017Japan2025-10-11
Wickens Nestle1018Germany2025-10-03
Johnson Sergi1019India2025-10-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Morrow RutaBrazilAnna Fali UNQUALIFIED
Emily WhobreyJapanAmy Elsner NEGOTIATION
Kadeem FlosiItalyAsiya Javayant NEGOTIATION
Julie StensethArgentinaIoni Bowcher QUALIFIED
Ivar PaprockiRussiaStephen Shaw RENEWAL
Alejandro PerinJapanIvan Magalhaes RENEWAL
Greenwood BologniaArgentinaIvan Magalhaes NEGOTIATION
Leon OldroydRussiaAmy Elsner NEGOTIATION
James ButtUnited KingdomAnna Fali PROPOSAL
Misaki RoysterGermanyElwin Sharvill NEGOTIATION
Munro FerenczGermanyOnyama Limba PROPOSAL
Salvatore StockhamRussiaElwin Sharvill RENEWAL
Jeanfrancois VenereRussiaIoni Bowcher QUALIFIED
Claire TollnerCanadaElwin Sharvill RENEWAL
Salvatore StockhamArgentinaAmy Elsner QUALIFIED
James ButtBrazilElwin Sharvill NEGOTIATION
Clifford RimFranceXuxue Feng PROPOSAL
Wickens NestleItalyXuxue Feng RENEWAL
Kadeem FlosiFranceElwin Sharvill RENEWAL
Arvin AlbaresArgentinaElwin Sharvill PROPOSAL
Misaki RoysterSpainAmy Elsner PROPOSAL
Jeanfrancois VenereGermanyXuxue Feng PROPOSAL
Izzy GarufiIndiaAnna Fali NEW
Aika InouyeJapanOnyama Limba RENEWAL
Morrow RutaCanadaAmy Elsner QUALIFIED
Rodrigues CampainFranceXuxue Feng QUALIFIED
Jennifer AmigonFranceStephen Shaw PROPOSAL
James ButtIndiaBernardo Dominic NEW
Munro FerenczItalyElwin Sharvill QUALIFIED
James ButtAustraliaAmy Elsner QUALIFIED
Jennifer AmigonRussiaElwin Sharvill RENEWAL
Deepesh ChuiGermanyAmy Elsner NEW
Leon OldroydJapanOnyama Limba UNQUALIFIED
Tony FollerSpainAnna Fali PROPOSAL
Nicolas IturbideCanadaIoni Bowcher UNQUALIFIED
David DarakjyBrazilAmy Elsner NEGOTIATION
Darci PoquetteRussiaIvan Magalhaes NEGOTIATION
Leja CaldareraCanadaIoni Bowcher NEW
Maisha RulapaughBrazilXuxue Feng RENEWAL
Claire TollnerUnited KingdomElwin Sharvill 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>