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
Emily WhobreyFranceStephen Shaw UNQUALIFIED
Tony FollerBrazilIvan Magalhaes QUALIFIED
Morrow RutaAustraliaAnna Fali PROPOSAL
Antonio CaudyUnited KingdomOnyama Limba RENEWAL
Stacey MacleadArgentinaAmy Elsner NEW
James ButtAustraliaAnna Fali UNQUALIFIED
Jefferson SchemmerItalyBernardo Dominic RENEWAL
Ricardo GauchoFranceXuxue Feng RENEWAL
Aika InouyeItalyIvan Magalhaes QUALIFIED
Mujtaba NickaJapanOnyama Limba NEGOTIATION
Tony FollerItalyXuxue Feng NEW
Claire TollnerCanadaOnyama Limba QUALIFIED
Alejandro PerinBrazilStephen Shaw NEGOTIATION
Kadeem FlosiJapanBernardo Dominic NEW
Mayumi KolmetzArgentinaStephen Shaw UNQUALIFIED
Sinclair WaycottCanadaAnna Fali UNQUALIFIED
Octavia MaletCanadaXuxue Feng NEW
Emily WhobreyIndiaIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereItalyIvan Magalhaes QUALIFIED
Francesco ShinkoBrazilBernardo Dominic PROPOSAL
Aditya KuskoFranceXuxue Feng RENEWAL
Johnson SergiGermanyElwin Sharvill NEW
Salvatore StockhamItalyXuxue Feng NEGOTIATION
Chavez BriddickCanadaXuxue Feng QUALIFIED
Maria MarrierFranceIvan Magalhaes RENEWAL
Tony FollerUnited KingdomXuxue Feng NEGOTIATION
Arvin AlbaresJapanAnna Fali RENEWAL
Costa DilliardFranceAnna Fali NEGOTIATION
Izzy GarufiBrazilOnyama Limba NEGOTIATION
Silvio SlusarskiJapanAmy Elsner PROPOSAL
Mayumi KolmetzSpainAsiya Javayant UNQUALIFIED
Aika InouyeItalyStephen Shaw UNQUALIFIED
Izzy GarufiAustraliaAmy Elsner QUALIFIED
Mayumi KolmetzAustraliaStephen Shaw NEGOTIATION
Jefferson SchemmerArgentinaIvan Magalhaes PROPOSAL
Francesco ShinkoCanadaAnna Fali RENEWAL
Clifford RimIndiaAnna Fali QUALIFIED
Maisha RulapaughUnited KingdomStephen Shaw PROPOSAL
Misaki RoysterItalyOnyama Limba UNQUALIFIED
Smith GlickUnited KingdomAmy Elsner NEW
Arvin AlbaresSpainIoni Bowcher RENEWAL
Izzy GarufiArgentinaStephen Shaw QUALIFIED
Aditya KuskoBrazilElwin Sharvill NEGOTIATION
Leja CaldareraItalyAmy Elsner PROPOSAL
Antonio CaudyRussiaStephen Shaw NEGOTIATION
Francesco ShinkoJapanBernardo Dominic NEGOTIATION
Aditya KuskoIndiaXuxue Feng QUALIFIED
Mujtaba NickaItalyBernardo Dominic RENEWAL
Ivar PaprockiUnited KingdomBernardo Dominic UNQUALIFIED
Leon OldroydCanadaAnna Fali NEW
Horizontal
NameCountryRepresentativeStatus
David DarakjyAustraliaAnna Fali QUALIFIED
Jeanfrancois VenereGermanyStephen Shaw PROPOSAL
Aruna FigeroaBrazilStephen Shaw PROPOSAL
Juan WieserJapanElwin Sharvill RENEWAL
Aika InouyeAustraliaAmy Elsner PROPOSAL
David DarakjyUnited KingdomIvan Magalhaes QUALIFIED
Julie StensethJapanAnna Fali QUALIFIED
Tony FollerCanadaAnna Fali UNQUALIFIED
Octavia MaletRussiaAnna Fali UNQUALIFIED
Costa DilliardBrazilElwin Sharvill RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aditya KuskoFrance2025-09-01Feltz Printing Service RENEWAL85Anna Fali
1001Nicolas IturbideIndia2025-08-30Printing Dimensions NEGOTIATION81Amy Elsner
1002Jones VocelkaAustralia2025-09-07Morlong Associates PROPOSAL16Anna Fali
1003Smith GlickBrazil2025-09-08Truhlar And Truhlar Attys UNQUALIFIED4Amy Elsner
1004Claire TollnerFrance2025-09-13Dorl, James J Esq NEGOTIATION95Asiya Javayant
1005Tony FollerCanada2025-09-20Rangoni Of Florence PROPOSAL92Xuxue Feng
1006Kadeem FlosiBrazil2025-08-30Rousseaux, Michael Esq QUALIFIED36Bernardo Dominic
1007Aruna FigeroaJapan2025-09-09Rousseaux, Michael Esq UNQUALIFIED73Bernardo Dominic
1008Claire TollnerJapan2025-08-30Commercial Press UNQUALIFIED55Onyama Limba
1009Octavia MaletGermany2025-08-28Morlong Associates NEGOTIATION52Ioni Bowcher
1010Octavia MaletFrance2025-09-18Rangoni Of Florence RENEWAL89Onyama Limba
1011Kadeem FlosiRussia2025-09-05King, Christopher A Esq NEGOTIATION99Bernardo Dominic
1012Clifford RimCanada2025-09-07Truhlar And Truhlar Attys PROPOSAL28Ioni Bowcher
1013Claire TollnerUnited Kingdom2025-09-22Chemel, James L Cpa NEW61Stephen Shaw
1014Deepesh ChuiCanada2025-08-31Benton, John B Jr UNQUALIFIED0Xuxue Feng
1015Nicolas IturbideCanada2025-09-19Chanay, Jeffrey A Esq PROPOSAL38Onyama Limba
1016James ButtGermany2025-08-30Feltz Printing Service NEW15Amy Elsner
1017Sinclair WaycottJapan2025-09-17Rousseaux, Michael Esq NEW93Asiya Javayant
1018Arvin AlbaresUnited Kingdom2025-09-21Buckley Miller Wright NEGOTIATION41Amy Elsner
1019Murillo MaletUnited Kingdom2025-09-21Feiner Bros QUALIFIED91Ivan Magalhaes
1020Misaki RoysterCanada2025-09-02King, Christopher A Esq UNQUALIFIED94Onyama Limba
1021David DarakjySpain2025-08-29Buckley Miller Wright QUALIFIED52Xuxue Feng
1022Isabel BowleyUnited Kingdom2025-09-03Chemel, James L Cpa NEGOTIATION94Asiya Javayant
1023Cody SaylorsIndia2025-09-03Morlong Associates RENEWAL88Bernardo Dominic
1024Sinclair WaycottSpain2025-09-21Buckley Miller Wright NEW17Stephen Shaw
1025Chavez BriddickCanada2025-08-28Dorl, James J Esq RENEWAL75Bernardo Dominic
1026Chavez BriddickSpain2025-09-20Chapman, Ross E Esq NEW38Elwin Sharvill
1027Nicolas IturbideGermany2025-09-08King, Christopher A Esq QUALIFIED83Bernardo Dominic
1028Aruna FigeroaRussia2025-09-19Buckley Miller Wright UNQUALIFIED37Elwin Sharvill
1029Julie StensethFrance2025-09-14Rousseaux, Michael Esq QUALIFIED39Amy Elsner
1030Murillo MaletItaly2025-08-27Rangoni Of Florence RENEWAL62Anna Fali
1031Kaitlin OstroskyArgentina2025-09-06Rousseaux, Michael Esq RENEWAL20Stephen Shaw
1032Jefferson SchemmerJapan2025-08-26Commercial Press PROPOSAL3Xuxue Feng
1033Sinclair WaycottAustralia2025-09-13Rousseaux, Michael Esq QUALIFIED25Ivan Magalhaes
1034Nicolas IturbideFrance2025-09-11Chemel, James L Cpa QUALIFIED85Bernardo Dominic
1035James ButtSpain2025-09-06Truhlar And Truhlar Attys NEGOTIATION11Stephen Shaw
1036Johnson SergiItaly2025-09-23Printing Dimensions UNQUALIFIED6Anna Fali
1037Mayumi KolmetzItaly2025-08-29Morlong Associates NEW87Elwin Sharvill
1038Mujtaba NickaUnited Kingdom2025-09-14Chanay, Jeffrey A Esq UNQUALIFIED6Amy Elsner
1039Octavia MaletGermany2025-09-01Feiner Bros NEW94Amy Elsner
1040Arvin AlbaresItaly2025-09-07Feiner Bros UNQUALIFIED61Amy Elsner
1041Antonio CaudyFrance2025-08-27Chanay, Jeffrey A Esq PROPOSAL63Ioni Bowcher
1042Alejandro PerinItaly2025-09-12Truhlar And Truhlar Attys NEGOTIATION37Xuxue Feng
1043Nicolas IturbideIndia2025-09-22Chemel, James L Cpa PROPOSAL79Onyama Limba
1044Salvatore StockhamFrance2025-09-20Feltz Printing Service UNQUALIFIED35Ivan Magalhaes
1045Morrow RutaRussia2025-09-09Chemel, James L Cpa QUALIFIED72Bernardo Dominic
1046Maria MarrierSpain2025-09-07Rangoni Of Florence PROPOSAL28Asiya Javayant
1047Ricardo GauchoGermany2025-09-06Chanay, Jeffrey A Esq QUALIFIED71Xuxue Feng
1048Faith GillianIndia2025-09-08Commercial Press PROPOSAL52Asiya Javayant
1049Smith GlickBrazil2025-09-22Printing Dimensions NEGOTIATION48Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Costa DilliardAustraliaBernardo Dominic QUALIFIED
Juan WieserJapanAmy Elsner RENEWAL
Jones VocelkaCanadaAsiya Javayant NEW
Claire TollnerArgentinaBernardo Dominic NEGOTIATION
Darci PoquetteJapanIvan Magalhaes RENEWAL
Jennifer AmigonArgentinaXuxue Feng UNQUALIFIED
Nicolas IturbideSpainIoni Bowcher UNQUALIFIED
Emily WhobreyFranceElwin Sharvill PROPOSAL
Jefferson SchemmerUnited KingdomBernardo Dominic UNQUALIFIED
Jeanfrancois VenereItalyIvan Magalhaes NEGOTIATION
Misaki RoysterJapanXuxue Feng NEGOTIATION
Wickens NestleJapanElwin Sharvill NEGOTIATION
Julie StensethCanadaElwin Sharvill QUALIFIED
Alejandro PerinItalyStephen Shaw NEW
Mujtaba NickaAustraliaXuxue Feng NEW
Adams MorascaJapanStephen Shaw NEGOTIATION
Jennifer AmigonItalyAsiya Javayant RENEWAL
Stacey MacleadRussiaBernardo Dominic PROPOSAL
Rodrigues CampainArgentinaIoni Bowcher NEW
Deepesh ChuiGermanyOnyama Limba UNQUALIFIED
Jefferson SchemmerGermanyAmy Elsner RENEWAL
Mujtaba NickaFranceIoni Bowcher PROPOSAL
Darci PoquetteFranceXuxue Feng NEGOTIATION
Jennifer AmigonRussiaStephen Shaw RENEWAL
Aditya KuskoRussiaIoni Bowcher NEGOTIATION
Rodrigues CampainJapanBernardo Dominic RENEWAL
Ashley DoeUnited KingdomIoni Bowcher QUALIFIED
Antonio CaudyFranceStephen Shaw UNQUALIFIED
Mujtaba NickaJapanStephen Shaw NEW
Francesco ShinkoUnited KingdomAnna Fali UNQUALIFIED
Darci PoquetteFranceAnna Fali QUALIFIED
Ivar PaprockiSpainAnna Fali RENEWAL
Kadeem FlosiItalyStephen Shaw NEW
Misaki RoysterFranceStephen Shaw UNQUALIFIED
Costa DilliardArgentinaIvan Magalhaes NEGOTIATION
Johnson SergiAustraliaXuxue Feng RENEWAL
Julie StensethBrazilStephen Shaw NEW
Chavez BriddickUnited KingdomIvan Magalhaes NEGOTIATION
Arvin AlbaresCanadaStephen Shaw RENEWAL
Jefferson SchemmerBrazilOnyama Limba NEW
Wickens NestleUnited KingdomIoni Bowcher NEGOTIATION
Tony FollerBrazilOnyama Limba NEGOTIATION
Tony FollerRussiaAsiya Javayant QUALIFIED
Cody SaylorsItalyAsiya Javayant QUALIFIED
Ivar PaprockiBrazilAsiya Javayant RENEWAL
Jeanfrancois VenereFranceIvan Magalhaes NEW
Ashley DoeRussiaOnyama Limba NEGOTIATION
Rodrigues CampainFranceBernardo Dominic NEGOTIATION
Wickens NestleUnited KingdomIvan Magalhaes QUALIFIED
Aruna FigeroaSpainXuxue Feng NEGOTIATION
Frozen Columns
Name
Ivar Paprocki
Alejandro Perin
Deepesh Chui
Cody Saylors
Wickens Nestle
Aditya Kusko
Aika Inouye
Costa Dilliard
Aditya Kusko
Jones Vocelka
Silvio Slusarski
Sinclair Waycott
Aika Inouye
Murillo Malet
Morrow Ruta
Leon Oldroyd
Adams Morasca
James Butt
Jeanfrancois Venere
Costa Dilliard
Leja Caldarera
Costa Dilliard
Arvin Albares
Clifford Rim
Claire Tollner
Claire Tollner
Alejandro Perin
Morrow Ruta
Nicolas Iturbide
Morrow Ruta
Leja Caldarera
Maisha Rulapaugh
Maria Marrier
Chavez Briddick
Francesco Shinko
Leon Oldroyd
Aika Inouye
Darci Poquette
Chavez Briddick
Octavia Malet
Adams Morasca
Faith Gillian
Juan Wieser
Stacey Maclead
David Darakjy
Nicolas Iturbide
Faith Gillian
Sinclair Waycott
Wickens Nestle
Jeanfrancois Venere
IdCountryDate
1000France2025-09-21
1001France2025-09-01
1002Spain2025-08-29
1003Australia2025-09-24
1004Argentina2025-09-12
1005India2025-08-29
1006France2025-08-28
1007Argentina2025-09-18
1008Australia2025-09-10
1009Russia2025-09-13
1010Australia2025-09-01
1011Japan2025-09-12
1012Germany2025-09-17
1013Australia2025-09-02
1014United Kingdom2025-09-03
1015India2025-08-31
1016Argentina2025-09-13
1017Germany2025-09-21
1018Japan2025-09-21
1019Russia2025-09-22
1020France2025-09-03
1021Argentina2025-09-19
1022Spain2025-09-10
1023Brazil2025-09-16
1024Australia2025-09-06
1025Canada2025-09-17
1026United Kingdom2025-09-10
1027Russia2025-09-02
1028Brazil2025-09-16
1029Spain2025-09-24
1030Argentina2025-09-18
1031Germany2025-08-26
1032Russia2025-09-23
1033Germany2025-09-01
1034Italy2025-08-27
1035Canada2025-09-16
1036India2025-08-26
1037India2025-09-21
1038Japan2025-08-26
1039Canada2025-08-28
1040Brazil2025-08-30
1041France2025-09-20
1042Canada2025-09-24
1043Australia2025-09-23
1044Brazil2025-09-24
1045India2025-08-31
1046India2025-09-21
1047Russia2025-09-14
1048Spain2025-09-08
1049Germany2025-08-27

On-Demand Data

NameIdCountryDate
Octavia Malet1000Brazil2025-09-12
Murillo Malet1001Australia2025-08-27
Ashley Doe1002Japan2025-08-28
Faith Gillian1003United Kingdom2025-09-19
Juan Wieser1004Brazil2025-08-28
Murillo Malet1005India2025-09-06
Kaitlin Ostrosky1006India2025-09-06
Kadeem Flosi1007France2025-09-08
Tony Foller1008Japan2025-09-16
Clifford Rim1009Spain2025-09-22
Claire Tollner1010Argentina2025-08-30
Adams Morasca1011France2025-09-04
Sinclair Waycott1012Italy2025-09-06
Mayumi Kolmetz1013France2025-09-13
Ivar Paprocki1014Russia2025-09-09
Francesco Shinko1015Russia2025-09-13
Kaitlin Ostrosky1016United Kingdom2025-09-03
Ivar Paprocki1017Argentina2025-09-19
Murillo Malet1018Argentina2025-09-12
Alejandro Perin1019Argentina2025-09-12
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Julie StensethItalyBernardo Dominic UNQUALIFIED
Munro FerenczAustraliaAmy Elsner PROPOSAL
Emily WhobreySpainAmy Elsner QUALIFIED
Smith GlickRussiaStephen Shaw NEGOTIATION
Maria MarrierFranceAmy Elsner NEGOTIATION
Costa DilliardCanadaStephen Shaw PROPOSAL
Greenwood BologniaFranceAmy Elsner NEW
Johnson SergiAustraliaBernardo Dominic RENEWAL
Munro FerenczFranceIvan Magalhaes NEGOTIATION
Darci PoquetteSpainBernardo Dominic PROPOSAL
Costa DilliardArgentinaOnyama Limba UNQUALIFIED
Aruna FigeroaUnited KingdomOnyama Limba PROPOSAL
Aika InouyeAustraliaAsiya Javayant PROPOSAL
Maria MarrierJapanAnna Fali UNQUALIFIED
Octavia MaletFranceIoni Bowcher RENEWAL
Kadeem FlosiSpainAsiya Javayant QUALIFIED
Costa DilliardFranceOnyama Limba QUALIFIED
Jefferson SchemmerGermanyStephen Shaw UNQUALIFIED
Aditya KuskoCanadaIoni Bowcher QUALIFIED
Kaitlin OstroskyUnited KingdomBernardo Dominic NEGOTIATION
Leon OldroydBrazilAnna Fali QUALIFIED
Clifford RimGermanyBernardo Dominic NEGOTIATION
Jeanfrancois VenereArgentinaXuxue Feng NEW
Kaitlin OstroskyIndiaAsiya Javayant NEW
Antonio CaudyUnited KingdomAmy Elsner RENEWAL
Wickens NestleBrazilAmy Elsner NEGOTIATION
Silvio SlusarskiIndiaOnyama Limba RENEWAL
Claire TollnerJapanOnyama Limba NEGOTIATION
Juan WieserCanadaAnna Fali NEGOTIATION
Munro FerenczCanadaAsiya Javayant QUALIFIED
Emily WhobreyUnited KingdomStephen Shaw NEW
Smith GlickUnited KingdomElwin Sharvill PROPOSAL
Maisha RulapaughFranceIoni Bowcher NEGOTIATION
Stacey MacleadCanadaAsiya Javayant PROPOSAL
Mujtaba NickaFranceAnna Fali RENEWAL
Kaitlin OstroskyItalyBernardo Dominic NEW
Francesco ShinkoAustraliaIvan Magalhaes QUALIFIED
Aditya KuskoSpainIoni Bowcher NEW
Darci PoquetteJapanAmy Elsner NEW
James ButtItalyAmy Elsner UNQUALIFIED

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