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
Jefferson SchemmerGermanyAnna Fali PROPOSAL
Darci PoquetteSpainIoni Bowcher QUALIFIED
Stacey MacleadSpainOnyama Limba QUALIFIED
Francesco ShinkoRussiaAsiya Javayant QUALIFIED
David DarakjyItalyElwin Sharvill PROPOSAL
Jeanfrancois VenereRussiaBernardo Dominic NEGOTIATION
David DarakjyItalyElwin Sharvill NEW
Antonio CaudyIndiaStephen Shaw UNQUALIFIED
Ashley DoeSpainIvan Magalhaes PROPOSAL
Smith GlickSpainAsiya Javayant NEGOTIATION
Mayumi KolmetzSpainIoni Bowcher NEGOTIATION
Faith GillianSpainStephen Shaw QUALIFIED
Tony FollerAustraliaIvan Magalhaes NEGOTIATION
Silvio SlusarskiGermanyXuxue Feng UNQUALIFIED
Emily WhobreyArgentinaStephen Shaw NEGOTIATION
Kadeem FlosiSpainXuxue Feng NEGOTIATION
Jeanfrancois VenereBrazilAmy Elsner UNQUALIFIED
Aruna FigeroaCanadaElwin Sharvill RENEWAL
Arvin AlbaresUnited KingdomIvan Magalhaes RENEWAL
Sinclair WaycottIndiaIvan Magalhaes NEGOTIATION
Arvin AlbaresFranceOnyama Limba UNQUALIFIED
Juan WieserJapanIoni Bowcher QUALIFIED
Salvatore StockhamSpainIvan Magalhaes QUALIFIED
Cody SaylorsAustraliaOnyama Limba PROPOSAL
Costa DilliardIndiaElwin Sharvill RENEWAL
Juan WieserSpainXuxue Feng UNQUALIFIED
Nicolas IturbideAustraliaAnna Fali PROPOSAL
Kaitlin OstroskySpainStephen Shaw QUALIFIED
Jefferson SchemmerCanadaIoni Bowcher QUALIFIED
Sinclair WaycottJapanBernardo Dominic RENEWAL
Salvatore StockhamIndiaXuxue Feng PROPOSAL
Nicolas IturbideSpainStephen Shaw NEW
Claire TollnerFranceStephen Shaw RENEWAL
Costa DilliardGermanyStephen Shaw UNQUALIFIED
Murillo MaletIndiaIvan Magalhaes NEGOTIATION
Alejandro PerinRussiaElwin Sharvill QUALIFIED
Leon OldroydJapanAnna Fali PROPOSAL
Kaitlin OstroskyJapanIoni Bowcher RENEWAL
David DarakjyBrazilAmy Elsner NEGOTIATION
Isabel BowleyFranceXuxue Feng UNQUALIFIED
Mujtaba NickaGermanyAsiya Javayant PROPOSAL
Faith GillianCanadaAnna Fali NEW
Costa DilliardItalyAsiya Javayant UNQUALIFIED
Silvio SlusarskiSpainAnna Fali RENEWAL
Misaki RoysterGermanyAsiya Javayant QUALIFIED
Julie StensethArgentinaIvan Magalhaes NEGOTIATION
Costa DilliardIndiaAsiya Javayant RENEWAL
Antonio CaudySpainElwin Sharvill RENEWAL
Rodrigues CampainAustraliaIoni Bowcher RENEWAL
Mujtaba NickaGermanyBernardo Dominic RENEWAL
Horizontal
NameCountryRepresentativeStatus
Smith GlickUnited KingdomIvan Magalhaes RENEWAL
Aditya KuskoRussiaBernardo Dominic UNQUALIFIED
Octavia MaletRussiaAsiya Javayant NEGOTIATION
Jones VocelkaRussiaOnyama Limba QUALIFIED
Kadeem FlosiJapanIvan Magalhaes NEGOTIATION
David DarakjyItalyBernardo Dominic UNQUALIFIED
Jennifer AmigonArgentinaOnyama Limba UNQUALIFIED
Faith GillianArgentinaStephen Shaw PROPOSAL
Johnson SergiIndiaXuxue Feng QUALIFIED
Costa DilliardAustraliaStephen Shaw RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Arvin AlbaresFrance2025-08-28Chemel, James L Cpa UNQUALIFIED50Ioni Bowcher
1001Salvatore StockhamCanada2025-09-13Feiner Bros RENEWAL20Amy Elsner
1002Mujtaba NickaJapan2025-08-26Chanay, Jeffrey A Esq UNQUALIFIED93Ivan Magalhaes
1003Darci PoquetteCanada2025-08-21Benton, John B Jr NEGOTIATION7Stephen Shaw
1004Greenwood BologniaBrazil2025-09-09Truhlar And Truhlar Attys NEW94Xuxue Feng
1005Mayumi KolmetzSpain2025-09-16Feltz Printing Service QUALIFIED45Ioni Bowcher
1006David DarakjySpain2025-09-15Morlong Associates RENEWAL5Anna Fali
1007Alejandro PerinFrance2025-08-27King, Christopher A Esq PROPOSAL26Elwin Sharvill
1008Ashley DoeGermany2025-08-22Chapman, Ross E Esq UNQUALIFIED83Amy Elsner
1009Kaitlin OstroskyIndia2025-09-08Rangoni Of Florence UNQUALIFIED61Stephen Shaw
1010Mujtaba NickaAustralia2025-08-31Commercial Press RENEWAL53Stephen Shaw
1011Julie StensethIndia2025-08-23Morlong Associates PROPOSAL78Anna Fali
1012Tony FollerAustralia2025-08-20Chemel, James L Cpa NEW95Stephen Shaw
1013Stacey MacleadSpain2025-08-26Benton, John B Jr NEGOTIATION87Anna Fali
1014Clifford RimItaly2025-09-14Morlong Associates NEGOTIATION40Ivan Magalhaes
1015Aditya KuskoGermany2025-09-03Chapman, Ross E Esq RENEWAL26Xuxue Feng
1016Francesco ShinkoUnited Kingdom2025-09-03Rousseaux, Michael Esq PROPOSAL63Onyama Limba
1017Morrow RutaRussia2025-08-31King, Christopher A Esq NEGOTIATION38Onyama Limba
1018Faith GillianFrance2025-09-08Morlong Associates RENEWAL26Bernardo Dominic
1019Claire TollnerGermany2025-08-28Chanay, Jeffrey A Esq PROPOSAL84Xuxue Feng
1020Ivar PaprockiBrazil2025-09-14Morlong Associates RENEWAL60Amy Elsner
1021Jeanfrancois VenereSpain2025-09-11Chemel, James L Cpa PROPOSAL21Asiya Javayant
1022Stacey MacleadSpain2025-08-21Morlong Associates UNQUALIFIED70Onyama Limba
1023Mujtaba NickaIndia2025-08-29Rangoni Of Florence NEW56Bernardo Dominic
1024Octavia MaletBrazil2025-09-10Truhlar And Truhlar Attys NEGOTIATION88Ioni Bowcher
1025Jefferson SchemmerGermany2025-09-02King, Christopher A Esq PROPOSAL98Anna Fali
1026Leon OldroydArgentina2025-09-15Feltz Printing Service RENEWAL41Asiya Javayant
1027James ButtAustralia2025-08-19Feiner Bros UNQUALIFIED0Asiya Javayant
1028Smith GlickAustralia2025-09-13Feltz Printing Service PROPOSAL3Anna Fali
1029Ashley DoeIndia2025-08-25Chapman, Ross E Esq RENEWAL66Asiya Javayant
1030Adams MorascaUnited Kingdom2025-08-21Commercial Press UNQUALIFIED48Amy Elsner
1031Stacey MacleadUnited Kingdom2025-08-30King, Christopher A Esq RENEWAL3Ivan Magalhaes
1032Ricardo GauchoIndia2025-08-20Morlong Associates QUALIFIED66Bernardo Dominic
1033Maisha RulapaughJapan2025-09-12Chemel, James L Cpa QUALIFIED86Xuxue Feng
1034Deepesh ChuiFrance2025-08-18Chemel, James L Cpa NEGOTIATION10Xuxue Feng
1035Adams MorascaArgentina2025-08-31Rousseaux, Michael Esq RENEWAL11Ioni Bowcher
1036Salvatore StockhamIndia2025-09-14Commercial Press NEW13Ioni Bowcher
1037Isabel BowleyIndia2025-08-26Chapman, Ross E Esq NEW3Ioni Bowcher
1038Antonio CaudyItaly2025-09-06Buckley Miller Wright PROPOSAL38Asiya Javayant
1039Kaitlin OstroskyIndia2025-08-26King, Christopher A Esq PROPOSAL6Bernardo Dominic
1040Arvin AlbaresRussia2025-09-02Chemel, James L Cpa QUALIFIED68Onyama Limba
1041Leon OldroydUnited Kingdom2025-09-04Rousseaux, Michael Esq NEW6Anna Fali
1042Chavez BriddickGermany2025-08-28Dorl, James J Esq RENEWAL28Anna Fali
1043Smith GlickArgentina2025-09-11Truhlar And Truhlar Attys UNQUALIFIED50Ivan Magalhaes
1044Smith GlickCanada2025-09-08Benton, John B Jr UNQUALIFIED62Stephen Shaw
1045Juan WieserAustralia2025-09-12Rangoni Of Florence RENEWAL5Ivan Magalhaes
1046Juan WieserItaly2025-08-19Morlong Associates RENEWAL53Anna Fali
1047Clifford RimGermany2025-09-06Benton, John B Jr PROPOSAL3Bernardo Dominic
1048Kadeem FlosiIndia2025-08-18Rangoni Of Florence RENEWAL8Xuxue Feng
1049Smith GlickJapan2025-09-01Buckley Miller Wright QUALIFIED5Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Silvio SlusarskiRussiaOnyama Limba NEGOTIATION
Chavez BriddickSpainIoni Bowcher QUALIFIED
Kadeem FlosiAustraliaAsiya Javayant PROPOSAL
Faith GillianBrazilElwin Sharvill NEGOTIATION
Morrow RutaIndiaAnna Fali UNQUALIFIED
Clifford RimRussiaAsiya Javayant UNQUALIFIED
Rodrigues CampainGermanyOnyama Limba PROPOSAL
Deepesh ChuiUnited KingdomIvan Magalhaes NEW
Izzy GarufiFranceIoni Bowcher NEGOTIATION
Darci PoquetteFranceAnna Fali RENEWAL
Ashley DoeJapanXuxue Feng NEW
Octavia MaletRussiaElwin Sharvill NEW
Aditya KuskoCanadaXuxue Feng RENEWAL
Salvatore StockhamIndiaBernardo Dominic RENEWAL
Aika InouyeCanadaAmy Elsner NEGOTIATION
Maisha RulapaughFranceIoni Bowcher RENEWAL
Nicolas IturbideBrazilBernardo Dominic RENEWAL
Ivar PaprockiGermanyIvan Magalhaes UNQUALIFIED
Leon OldroydFranceElwin Sharvill RENEWAL
Munro FerenczRussiaBernardo Dominic PROPOSAL
Misaki RoysterFranceAsiya Javayant QUALIFIED
Morrow RutaFranceBernardo Dominic RENEWAL
Tony FollerBrazilIvan Magalhaes NEGOTIATION
Julie StensethJapanAmy Elsner UNQUALIFIED
Deepesh ChuiGermanyIvan Magalhaes NEW
Adams MorascaSpainAsiya Javayant UNQUALIFIED
Wickens NestleFranceXuxue Feng RENEWAL
Tony FollerGermanyIoni Bowcher QUALIFIED
Costa DilliardUnited KingdomAsiya Javayant NEGOTIATION
Mayumi KolmetzRussiaStephen Shaw UNQUALIFIED
Murillo MaletJapanStephen Shaw QUALIFIED
Tony FollerCanadaOnyama Limba NEW
David DarakjyBrazilIoni Bowcher NEW
Izzy GarufiGermanyOnyama Limba RENEWAL
Greenwood BologniaArgentinaOnyama Limba UNQUALIFIED
Smith GlickCanadaBernardo Dominic PROPOSAL
Isabel BowleyArgentinaStephen Shaw UNQUALIFIED
Maisha RulapaughIndiaXuxue Feng QUALIFIED
Chavez BriddickSpainAmy Elsner PROPOSAL
Leja CaldareraGermanyIoni Bowcher NEGOTIATION
Claire TollnerJapanAsiya Javayant PROPOSAL
Misaki RoysterJapanIvan Magalhaes RENEWAL
Greenwood BologniaArgentinaAsiya Javayant RENEWAL
Jones VocelkaRussiaElwin Sharvill NEGOTIATION
Jennifer AmigonAustraliaIvan Magalhaes NEW
James ButtBrazilXuxue Feng NEGOTIATION
Aruna FigeroaRussiaBernardo Dominic QUALIFIED
Ivar PaprockiRussiaAsiya Javayant QUALIFIED
Jones VocelkaIndiaOnyama Limba RENEWAL
Rodrigues CampainAustraliaBernardo Dominic NEGOTIATION
Frozen Columns
Name
Greenwood Bolognia
Kadeem Flosi
Antonio Caudy
Chavez Briddick
Mayumi Kolmetz
Greenwood Bolognia
Darci Poquette
Silvio Slusarski
Julie Stenseth
Faith Gillian
Misaki Royster
Isabel Bowley
Leon Oldroyd
Mayumi Kolmetz
Darci Poquette
Kadeem Flosi
Salvatore Stockham
James Butt
Juan Wieser
Ivar Paprocki
Julie Stenseth
Tony Foller
Greenwood Bolognia
Chavez Briddick
Cody Saylors
Deepesh Chui
Rodrigues Campain
Arvin Albares
Ricardo Gaucho
Julie Stenseth
Kaitlin Ostrosky
Nicolas Iturbide
Alejandro Perin
Maria Marrier
Nicolas Iturbide
Cody Saylors
Isabel Bowley
Jefferson Schemmer
Leja Caldarera
Chavez Briddick
Alejandro Perin
Rodrigues Campain
Emily Whobrey
Cody Saylors
Leja Caldarera
Silvio Slusarski
Alejandro Perin
Jennifer Amigon
Morrow Ruta
Izzy Garufi
IdCountryDate
1000Russia2025-09-06
1001Canada2025-09-06
1002Australia2025-08-27
1003Argentina2025-08-27
1004Russia2025-09-16
1005India2025-08-31
1006Russia2025-09-09
1007France2025-08-31
1008United Kingdom2025-08-18
1009Argentina2025-09-01
1010Spain2025-08-25
1011France2025-08-23
1012Canada2025-08-25
1013Spain2025-08-21
1014Australia2025-08-20
1015Italy2025-08-21
1016Australia2025-09-13
1017Australia2025-09-05
1018Brazil2025-09-04
1019Australia2025-08-24
1020Spain2025-08-28
1021Italy2025-08-29
1022Germany2025-09-03
1023Italy2025-09-07
1024Italy2025-09-10
1025Russia2025-09-10
1026Canada2025-08-23
1027Canada2025-08-31
1028India2025-08-18
1029Canada2025-08-28
1030France2025-09-06
1031Brazil2025-09-05
1032Germany2025-08-31
1033United Kingdom2025-08-27
1034Japan2025-09-12
1035United Kingdom2025-09-05
1036India2025-09-16
1037India2025-09-06
1038Australia2025-09-10
1039Australia2025-09-05
1040Argentina2025-08-25
1041Italy2025-09-15
1042Brazil2025-08-28
1043Italy2025-08-25
1044Germany2025-09-07
1045Canada2025-09-12
1046India2025-09-10
1047Australia2025-08-22
1048India2025-09-02
1049Italy2025-08-26

On-Demand Data

NameIdCountryDate
Izzy Garufi1000France2025-08-27
Chavez Briddick1001Brazil2025-08-27
Leja Caldarera1002Japan2025-09-02
Tony Foller1003Italy2025-09-11
Darci Poquette1004Spain2025-08-22
Alejandro Perin1005Japan2025-09-13
Alejandro Perin1006Argentina2025-09-08
Jennifer Amigon1007Italy2025-08-27
Antonio Caudy1008United Kingdom2025-08-31
Ricardo Gaucho1009Canada2025-09-03
Emily Whobrey1010India2025-09-16
Murillo Malet1011India2025-09-16
Stacey Maclead1012Canada2025-09-13
Clifford Rim1013Canada2025-08-30
Antonio Caudy1014Brazil2025-08-22
Jeanfrancois Venere1015Germany2025-08-30
Juan Wieser1016Germany2025-08-18
Ashley Doe1017Spain2025-08-25
Rodrigues Campain1018Russia2025-09-02
Johnson Sergi1019Spain2025-08-31
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Isabel BowleyCanadaBernardo Dominic NEGOTIATION
David DarakjySpainAsiya Javayant PROPOSAL
Francesco ShinkoAustraliaOnyama Limba PROPOSAL
Aditya KuskoRussiaStephen Shaw QUALIFIED
Mayumi KolmetzCanadaAmy Elsner NEW
Leja CaldareraUnited KingdomStephen Shaw PROPOSAL
Isabel BowleyFranceAnna Fali QUALIFIED
Kaitlin OstroskyGermanyIoni Bowcher NEW
Nicolas IturbideAustraliaOnyama Limba QUALIFIED
Mayumi KolmetzJapanBernardo Dominic UNQUALIFIED
Johnson SergiIndiaAnna Fali PROPOSAL
Smith GlickSpainAmy Elsner RENEWAL
Jones VocelkaCanadaOnyama Limba QUALIFIED
Misaki RoysterSpainIvan Magalhaes UNQUALIFIED
Aika InouyeItalyIoni Bowcher NEW
Adams MorascaGermanyOnyama Limba PROPOSAL
Mayumi KolmetzJapanStephen Shaw QUALIFIED
David DarakjyBrazilBernardo Dominic UNQUALIFIED
Juan WieserItalyElwin Sharvill QUALIFIED
Ivar PaprockiJapanIvan Magalhaes PROPOSAL
Greenwood BologniaBrazilElwin Sharvill PROPOSAL
Leja CaldareraCanadaAnna Fali QUALIFIED
Mujtaba NickaCanadaStephen Shaw RENEWAL
Jeanfrancois VenereItalyIvan Magalhaes UNQUALIFIED
Alejandro PerinRussiaIoni Bowcher PROPOSAL
Kaitlin OstroskyUnited KingdomAmy Elsner RENEWAL
Arvin AlbaresItalyOnyama Limba NEW
Leja CaldareraAustraliaAnna Fali QUALIFIED
Wickens NestleFranceAnna Fali NEW
Leon OldroydBrazilIoni Bowcher RENEWAL
Octavia MaletUnited KingdomBernardo Dominic NEW
Jennifer AmigonIndiaIoni Bowcher QUALIFIED
Alejandro PerinRussiaXuxue Feng RENEWAL
Morrow RutaCanadaIvan Magalhaes NEW
Jennifer AmigonAustraliaElwin Sharvill NEGOTIATION
Leja CaldareraGermanyXuxue Feng NEW
Leon OldroydArgentinaIoni Bowcher QUALIFIED
Sinclair WaycottUnited KingdomOnyama Limba UNQUALIFIED
Maria MarrierAustraliaElwin Sharvill PROPOSAL
Aika InouyeArgentinaOnyama Limba 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>