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
Costa DilliardFranceIvan Magalhaes NEW
Jones VocelkaUnited KingdomElwin Sharvill NEGOTIATION
Aika InouyeGermanyAmy Elsner PROPOSAL
Julie StensethRussiaIoni Bowcher NEGOTIATION
Ashley DoeUnited KingdomXuxue Feng QUALIFIED
Clifford RimItalyOnyama Limba PROPOSAL
Ricardo GauchoBrazilIvan Magalhaes PROPOSAL
Mujtaba NickaAustraliaXuxue Feng QUALIFIED
Clifford RimFranceElwin Sharvill PROPOSAL
Jefferson SchemmerUnited KingdomAsiya Javayant NEGOTIATION
Aruna FigeroaSpainAsiya Javayant UNQUALIFIED
Johnson SergiAustraliaAmy Elsner RENEWAL
Jefferson SchemmerArgentinaBernardo Dominic UNQUALIFIED
Alejandro PerinItalyAsiya Javayant PROPOSAL
Ashley DoeJapanIvan Magalhaes QUALIFIED
Alejandro PerinArgentinaXuxue Feng UNQUALIFIED
Maisha RulapaughBrazilAsiya Javayant RENEWAL
Cody SaylorsItalyIvan Magalhaes NEGOTIATION
Ricardo GauchoFranceAnna Fali NEW
Kaitlin OstroskySpainAsiya Javayant NEGOTIATION
Smith GlickFranceAsiya Javayant QUALIFIED
Smith GlickGermanyXuxue Feng UNQUALIFIED
Darci PoquetteArgentinaAsiya Javayant PROPOSAL
Alejandro PerinAustraliaBernardo Dominic QUALIFIED
David DarakjyItalyStephen Shaw RENEWAL
Adams MorascaJapanAmy Elsner RENEWAL
Kaitlin OstroskyJapanBernardo Dominic UNQUALIFIED
David DarakjyCanadaAnna Fali QUALIFIED
Octavia MaletRussiaElwin Sharvill RENEWAL
Munro FerenczIndiaAnna Fali PROPOSAL
Emily WhobreyJapanBernardo Dominic QUALIFIED
Chavez BriddickRussiaAmy Elsner PROPOSAL
Kaitlin OstroskyJapanAnna Fali PROPOSAL
Francesco ShinkoBrazilOnyama Limba NEGOTIATION
Adams MorascaRussiaOnyama Limba NEGOTIATION
Munro FerenczJapanXuxue Feng NEGOTIATION
Kaitlin OstroskySpainBernardo Dominic NEGOTIATION
Arvin AlbaresSpainAmy Elsner PROPOSAL
Mujtaba NickaSpainOnyama Limba NEW
Francesco ShinkoFranceStephen Shaw QUALIFIED
Ricardo GauchoArgentinaXuxue Feng UNQUALIFIED
Wickens NestleBrazilElwin Sharvill NEW
Kaitlin OstroskyBrazilAnna Fali NEW
Cody SaylorsIndiaOnyama Limba RENEWAL
Izzy GarufiSpainStephen Shaw RENEWAL
Morrow RutaSpainAnna Fali NEW
Tony FollerBrazilAnna Fali QUALIFIED
Kaitlin OstroskyRussiaStephen Shaw UNQUALIFIED
Octavia MaletRussiaStephen Shaw NEGOTIATION
Aruna FigeroaCanadaOnyama Limba NEW
Horizontal
NameCountryRepresentativeStatus
Wickens NestleAustraliaAmy Elsner RENEWAL
Chavez BriddickAustraliaAsiya Javayant NEGOTIATION
Smith GlickCanadaStephen Shaw NEW
Jones VocelkaBrazilAnna Fali QUALIFIED
Johnson SergiJapanBernardo Dominic QUALIFIED
Jefferson SchemmerUnited KingdomOnyama Limba UNQUALIFIED
Arvin AlbaresRussiaIvan Magalhaes PROPOSAL
Jefferson SchemmerAustraliaBernardo Dominic UNQUALIFIED
Stacey MacleadItalyAsiya Javayant UNQUALIFIED
Aditya KuskoGermanyAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Juan WieserArgentina2026-05-26Buckley Miller Wright NEGOTIATION56Anna Fali
1001Juan WieserCanada2026-05-15Chanay, Jeffrey A Esq NEGOTIATION60Bernardo Dominic
1002Clifford RimIndia2026-06-03Chanay, Jeffrey A Esq UNQUALIFIED95Elwin Sharvill
1003Salvatore StockhamFrance2026-05-15King, Christopher A Esq QUALIFIED33Asiya Javayant
1004Izzy GarufiFrance2026-05-25Rangoni Of Florence QUALIFIED36Ioni Bowcher
1005James ButtIndia2026-05-12Chemel, James L Cpa PROPOSAL54Stephen Shaw
1006Octavia MaletJapan2026-06-05King, Christopher A Esq PROPOSAL57Ioni Bowcher
1007Wickens NestleItaly2026-06-06Dorl, James J Esq NEW31Onyama Limba
1008Emily WhobreyItaly2026-06-03Morlong Associates PROPOSAL82Stephen Shaw
1009Jeanfrancois VenereAustralia2026-06-04Dorl, James J Esq UNQUALIFIED33Onyama Limba
1010Maisha RulapaughIndia2026-05-14Buckley Miller Wright RENEWAL78Ioni Bowcher
1011Kadeem FlosiCanada2026-05-16Feiner Bros NEGOTIATION84Onyama Limba
1012Claire TollnerAustralia2026-06-04Benton, John B Jr NEW4Anna Fali
1013Jennifer AmigonSpain2026-05-16Truhlar And Truhlar Attys UNQUALIFIED34Onyama Limba
1014Kadeem FlosiJapan2026-06-02Printing Dimensions PROPOSAL81Ivan Magalhaes
1015Murillo MaletRussia2026-06-02King, Christopher A Esq NEGOTIATION68Xuxue Feng
1016Alejandro PerinUnited Kingdom2026-05-28Feiner Bros RENEWAL64Onyama Limba
1017Maria MarrierAustralia2026-05-26Morlong Associates UNQUALIFIED67Amy Elsner
1018Murillo MaletItaly2026-05-18Morlong Associates NEGOTIATION10Ioni Bowcher
1019Maisha RulapaughCanada2026-05-25Truhlar And Truhlar Attys QUALIFIED10Anna Fali
1020Stacey MacleadJapan2026-05-15Feiner Bros QUALIFIED43Ivan Magalhaes
1021Izzy GarufiUnited Kingdom2026-06-04Chapman, Ross E Esq QUALIFIED33Stephen Shaw
1022David DarakjyRussia2026-05-19Chemel, James L Cpa UNQUALIFIED79Ivan Magalhaes
1023Johnson SergiArgentina2026-06-06Rousseaux, Michael Esq RENEWAL85Xuxue Feng
1024Salvatore StockhamArgentina2026-05-22Chemel, James L Cpa UNQUALIFIED34Anna Fali
1025Juan WieserUnited Kingdom2026-06-07Feltz Printing Service QUALIFIED80Bernardo Dominic
1026Silvio SlusarskiIndia2026-06-01Chapman, Ross E Esq NEGOTIATION85Onyama Limba
1027Kadeem FlosiIndia2026-06-08Commercial Press QUALIFIED28Ivan Magalhaes
1028Greenwood BologniaAustralia2026-05-27Printing Dimensions PROPOSAL84Ivan Magalhaes
1029Octavia MaletRussia2026-05-15Feiner Bros QUALIFIED41Xuxue Feng
1030Maria MarrierIndia2026-06-03Benton, John B Jr NEGOTIATION33Onyama Limba
1031Aruna FigeroaSpain2026-06-09Chemel, James L Cpa NEW78Anna Fali
1032Arvin AlbaresFrance2026-05-12Truhlar And Truhlar Attys QUALIFIED96Elwin Sharvill
1033Stacey MacleadJapan2026-05-12Feltz Printing Service UNQUALIFIED44Amy Elsner
1034Alejandro PerinArgentina2026-05-23Buckley Miller Wright UNQUALIFIED8Xuxue Feng
1035Misaki RoysterUnited Kingdom2026-05-18Dorl, James J Esq RENEWAL99Onyama Limba
1036Mayumi KolmetzBrazil2026-05-21Chemel, James L Cpa QUALIFIED74Asiya Javayant
1037Mayumi KolmetzGermany2026-05-23Benton, John B Jr NEW88Asiya Javayant
1038Maria MarrierBrazil2026-05-30Rangoni Of Florence PROPOSAL54Anna Fali
1039Silvio SlusarskiUnited Kingdom2026-05-31Commercial Press QUALIFIED15Ivan Magalhaes
1040Jeanfrancois VenereIndia2026-05-29Morlong Associates RENEWAL2Asiya Javayant
1041Costa DilliardRussia2026-05-18Feiner Bros UNQUALIFIED75Elwin Sharvill
1042Misaki RoysterAustralia2026-06-05Morlong Associates NEGOTIATION78Onyama Limba
1043David DarakjyIndia2026-06-02Feltz Printing Service NEGOTIATION76Stephen Shaw
1044Maria MarrierSpain2026-05-15Truhlar And Truhlar Attys NEGOTIATION23Stephen Shaw
1045Smith GlickCanada2026-06-09Dorl, James J Esq RENEWAL75Stephen Shaw
1046Emily WhobreyGermany2026-06-01Benton, John B Jr PROPOSAL69Asiya Javayant
1047David DarakjyFrance2026-05-30Truhlar And Truhlar Attys RENEWAL86Amy Elsner
1048Francesco ShinkoArgentina2026-05-19Feiner Bros PROPOSAL97Ivan Magalhaes
1049Claire TollnerGermany2026-05-26Feiner Bros QUALIFIED25Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Claire TollnerBrazilStephen Shaw RENEWAL
Claire TollnerAustraliaAsiya Javayant RENEWAL
Izzy GarufiIndiaAnna Fali UNQUALIFIED
Adams MorascaCanadaAnna Fali UNQUALIFIED
Maria MarrierIndiaOnyama Limba NEW
Izzy GarufiBrazilAmy Elsner NEW
Chavez BriddickArgentinaXuxue Feng UNQUALIFIED
Murillo MaletGermanyAmy Elsner QUALIFIED
Smith GlickIndiaAnna Fali NEGOTIATION
Nicolas IturbideAustraliaBernardo Dominic QUALIFIED
Izzy GarufiIndiaStephen Shaw RENEWAL
Wickens NestleItalyAmy Elsner RENEWAL
Maria MarrierItalyAnna Fali NEW
Tony FollerCanadaBernardo Dominic RENEWAL
Stacey MacleadItalyAnna Fali NEW
Jennifer AmigonRussiaBernardo Dominic NEGOTIATION
Leja CaldareraArgentinaIoni Bowcher QUALIFIED
Aditya KuskoAustraliaOnyama Limba NEGOTIATION
Darci PoquetteUnited KingdomElwin Sharvill PROPOSAL
Misaki RoysterAustraliaIvan Magalhaes QUALIFIED
Stacey MacleadGermanyXuxue Feng QUALIFIED
Claire TollnerIndiaXuxue Feng RENEWAL
Darci PoquetteArgentinaXuxue Feng RENEWAL
Costa DilliardGermanyAnna Fali QUALIFIED
Isabel BowleyIndiaAnna Fali PROPOSAL
Costa DilliardJapanAsiya Javayant RENEWAL
Aruna FigeroaItalyElwin Sharvill UNQUALIFIED
Mujtaba NickaGermanyOnyama Limba UNQUALIFIED
Aditya KuskoSpainElwin Sharvill QUALIFIED
Silvio SlusarskiGermanyXuxue Feng NEGOTIATION
Stacey MacleadGermanyStephen Shaw NEGOTIATION
Francesco ShinkoIndiaElwin Sharvill NEGOTIATION
Izzy GarufiSpainAnna Fali QUALIFIED
James ButtFranceBernardo Dominic QUALIFIED
Jefferson SchemmerCanadaXuxue Feng UNQUALIFIED
Ivar PaprockiJapanIoni Bowcher NEW
Octavia MaletIndiaIoni Bowcher QUALIFIED
Clifford RimUnited KingdomIoni Bowcher RENEWAL
Kadeem FlosiArgentinaIvan Magalhaes UNQUALIFIED
Leja CaldareraAustraliaOnyama Limba NEGOTIATION
Munro FerenczItalyIoni Bowcher NEW
Arvin AlbaresAustraliaAsiya Javayant RENEWAL
Isabel BowleyCanadaAmy Elsner NEW
Mujtaba NickaUnited KingdomAsiya Javayant NEGOTIATION
David DarakjyFranceBernardo Dominic NEW
Smith GlickArgentinaAsiya Javayant PROPOSAL
Izzy GarufiUnited KingdomIoni Bowcher PROPOSAL
Cody SaylorsRussiaStephen Shaw NEW
Isabel BowleyGermanyOnyama Limba NEW
Murillo MaletJapanElwin Sharvill NEW
Frozen Columns
Name
Arvin Albares
Maisha Rulapaugh
Misaki Royster
Faith Gillian
Chavez Briddick
Salvatore Stockham
Arvin Albares
Alejandro Perin
Maisha Rulapaugh
Munro Ferencz
Clifford Rim
Maria Marrier
Chavez Briddick
Clifford Rim
Tony Foller
Maisha Rulapaugh
David Darakjy
Mujtaba Nicka
Kadeem Flosi
Maisha Rulapaugh
Tony Foller
Silvio Slusarski
James Butt
Aika Inouye
Claire Tollner
Kaitlin Ostrosky
Johnson Sergi
Stacey Maclead
Jefferson Schemmer
Isabel Bowley
Jones Vocelka
Stacey Maclead
Rodrigues Campain
Sinclair Waycott
Julie Stenseth
Leon Oldroyd
Jefferson Schemmer
Silvio Slusarski
Jones Vocelka
Silvio Slusarski
Faith Gillian
Greenwood Bolognia
Leja Caldarera
Kadeem Flosi
Claire Tollner
Mayumi Kolmetz
Clifford Rim
Emily Whobrey
Ashley Doe
Munro Ferencz
IdCountryDate
1000Canada2026-05-14
1001Japan2026-05-26
1002Australia2026-05-12
1003Russia2026-06-02
1004Brazil2026-06-07
1005Italy2026-05-26
1006Italy2026-06-09
1007Russia2026-05-31
1008Argentina2026-05-28
1009Argentina2026-05-30
1010Italy2026-05-29
1011Argentina2026-05-26
1012Germany2026-06-06
1013Brazil2026-05-19
1014Japan2026-06-10
1015France2026-05-20
1016Japan2026-05-22
1017Argentina2026-06-10
1018Japan2026-06-03
1019Russia2026-06-08
1020Brazil2026-06-05
1021Argentina2026-05-20
1022Canada2026-05-30
1023India2026-05-12
1024France2026-05-18
1025Argentina2026-06-06
1026Russia2026-05-13
1027Japan2026-05-26
1028Russia2026-06-02
1029Spain2026-06-07
1030Germany2026-06-10
1031Australia2026-05-14
1032Germany2026-05-17
1033Australia2026-05-28
1034Argentina2026-06-03
1035Brazil2026-05-22
1036Italy2026-06-04
1037Italy2026-06-05
1038India2026-05-16
1039Australia2026-05-18
1040Russia2026-05-13
1041Italy2026-05-20
1042United Kingdom2026-06-05
1043Russia2026-05-22
1044Australia2026-06-06
1045Italy2026-05-19
1046United Kingdom2026-06-03
1047Argentina2026-06-01
1048France2026-06-09
1049France2026-05-15

On-Demand Data

NameIdCountryDate
Ashley Doe1000Russia2026-06-02
Kadeem Flosi1001Canada2026-05-27
Cody Saylors1002Italy2026-06-03
Ivar Paprocki1003Brazil2026-05-24
Cody Saylors1004Germany2026-05-20
Deepesh Chui1005France2026-05-28
Wickens Nestle1006Germany2026-06-07
Francesco Shinko1007India2026-05-25
Leja Caldarera1008France2026-05-13
Salvatore Stockham1009Germany2026-05-12
Julie Stenseth1010Italy2026-06-05
Aruna Figeroa1011Canada2026-05-21
Ricardo Gaucho1012Japan2026-05-15
Johnson Sergi1013India2026-06-01
Emily Whobrey1014Germany2026-06-04
Aika Inouye1015Japan2026-06-05
Juan Wieser1016Germany2026-05-28
Salvatore Stockham1017Canada2026-06-03
Morrow Ruta1018France2026-05-19
Alejandro Perin1019United Kingdom2026-05-20
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Stacey MacleadItalyOnyama Limba QUALIFIED
Leja CaldareraJapanAnna Fali PROPOSAL
Ivar PaprockiRussiaXuxue Feng NEW
Greenwood BologniaArgentinaElwin Sharvill NEW
Greenwood BologniaFranceElwin Sharvill QUALIFIED
Rodrigues CampainRussiaXuxue Feng NEW
Greenwood BologniaArgentinaStephen Shaw UNQUALIFIED
Nicolas IturbideGermanyAsiya Javayant RENEWAL
Adams MorascaGermanyAnna Fali NEGOTIATION
Jeanfrancois VenereUnited KingdomBernardo Dominic PROPOSAL
Aditya KuskoJapanAmy Elsner UNQUALIFIED
Murillo MaletIndiaXuxue Feng QUALIFIED
Antonio CaudyItalyIvan Magalhaes NEW
Kaitlin OstroskyItalyAmy Elsner NEW
Faith GillianUnited KingdomOnyama Limba NEGOTIATION
Isabel BowleyUnited KingdomAnna Fali PROPOSAL
Cody SaylorsFranceAnna Fali PROPOSAL
Silvio SlusarskiFranceIvan Magalhaes NEW
Julie StensethUnited KingdomAmy Elsner RENEWAL
Cody SaylorsItalyBernardo Dominic NEGOTIATION
Leja CaldareraCanadaIoni Bowcher NEW
Leja CaldareraJapanIvan Magalhaes UNQUALIFIED
Darci PoquetteIndiaAmy Elsner RENEWAL
Mujtaba NickaGermanyBernardo Dominic NEGOTIATION
Stacey MacleadGermanyAsiya Javayant QUALIFIED
Mayumi KolmetzBrazilElwin Sharvill UNQUALIFIED
Jones VocelkaCanadaBernardo Dominic QUALIFIED
Maisha RulapaughFranceXuxue Feng NEW
Morrow RutaItalyXuxue Feng NEGOTIATION
Darci PoquetteCanadaAmy Elsner PROPOSAL
Jeanfrancois VenereBrazilBernardo Dominic PROPOSAL
Darci PoquetteFranceBernardo Dominic RENEWAL
Clifford RimRussiaOnyama Limba PROPOSAL
David DarakjyAustraliaElwin Sharvill NEW
Tony FollerRussiaBernardo Dominic NEW
Leon OldroydGermanyIvan Magalhaes PROPOSAL
Smith GlickSpainStephen Shaw RENEWAL
Antonio CaudyBrazilIoni Bowcher NEGOTIATION
Clifford RimSpainOnyama Limba PROPOSAL
Maria MarrierRussiaBernardo Dominic QUALIFIED

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