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
Deepesh ChuiIndiaXuxue Feng RENEWAL
Maria MarrierGermanyAsiya Javayant RENEWAL
Aruna FigeroaCanadaXuxue Feng PROPOSAL
Jeanfrancois VenereCanadaXuxue Feng NEW
Emily WhobreyGermanyIoni Bowcher UNQUALIFIED
Darci PoquetteJapanAmy Elsner RENEWAL
Jeanfrancois VenereItalyAnna Fali QUALIFIED
Arvin AlbaresCanadaOnyama Limba RENEWAL
Munro FerenczUnited KingdomStephen Shaw PROPOSAL
Aruna FigeroaBrazilBernardo Dominic NEGOTIATION
Izzy GarufiIndiaAmy Elsner UNQUALIFIED
Izzy GarufiCanadaIoni Bowcher RENEWAL
Stacey MacleadCanadaOnyama Limba PROPOSAL
Chavez BriddickAustraliaIvan Magalhaes RENEWAL
Arvin AlbaresUnited KingdomElwin Sharvill PROPOSAL
Nicolas IturbideBrazilAsiya Javayant UNQUALIFIED
Nicolas IturbideGermanyIvan Magalhaes RENEWAL
Antonio CaudyGermanyAsiya Javayant PROPOSAL
Aika InouyeArgentinaXuxue Feng NEW
Clifford RimRussiaBernardo Dominic RENEWAL
Rodrigues CampainAustraliaAsiya Javayant RENEWAL
Ricardo GauchoAustraliaAsiya Javayant NEW
Misaki RoysterSpainIoni Bowcher NEW
Nicolas IturbideIndiaBernardo Dominic NEGOTIATION
Nicolas IturbideBrazilAsiya Javayant UNQUALIFIED
Salvatore StockhamBrazilElwin Sharvill PROPOSAL
Jeanfrancois VenereUnited KingdomElwin Sharvill RENEWAL
Johnson SergiSpainXuxue Feng NEGOTIATION
Morrow RutaJapanAsiya Javayant NEGOTIATION
Nicolas IturbideRussiaBernardo Dominic UNQUALIFIED
Faith GillianUnited KingdomIvan Magalhaes NEW
Kaitlin OstroskyJapanElwin Sharvill NEGOTIATION
Claire TollnerUnited KingdomAnna Fali RENEWAL
Octavia MaletAustraliaIoni Bowcher QUALIFIED
Murillo MaletJapanAmy Elsner UNQUALIFIED
Ashley DoeGermanyAsiya Javayant NEW
Greenwood BologniaCanadaElwin Sharvill PROPOSAL
Chavez BriddickUnited KingdomOnyama Limba UNQUALIFIED
Cody SaylorsAustraliaStephen Shaw QUALIFIED
Aruna FigeroaGermanyAnna Fali NEGOTIATION
Mayumi KolmetzUnited KingdomIvan Magalhaes QUALIFIED
Greenwood BologniaUnited KingdomElwin Sharvill RENEWAL
Octavia MaletUnited KingdomIvan Magalhaes NEGOTIATION
Johnson SergiSpainIvan Magalhaes PROPOSAL
Kaitlin OstroskyGermanyIoni Bowcher PROPOSAL
Aditya KuskoIndiaIvan Magalhaes QUALIFIED
Cody SaylorsFranceStephen Shaw RENEWAL
Alejandro PerinUnited KingdomAsiya Javayant NEGOTIATION
Leon OldroydJapanOnyama Limba QUALIFIED
Mayumi KolmetzCanadaAsiya Javayant RENEWAL
Horizontal
NameCountryRepresentativeStatus
Adams MorascaIndiaBernardo Dominic RENEWAL
Ivar PaprockiRussiaXuxue Feng UNQUALIFIED
Stacey MacleadIndiaIoni Bowcher NEW
Tony FollerItalyBernardo Dominic NEGOTIATION
Antonio CaudyUnited KingdomIoni Bowcher QUALIFIED
Faith GillianSpainIvan Magalhaes UNQUALIFIED
Greenwood BologniaJapanBernardo Dominic UNQUALIFIED
Kaitlin OstroskySpainAsiya Javayant NEW
Silvio SlusarskiBrazilStephen Shaw NEW
James ButtArgentinaStephen Shaw RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Clifford RimArgentina2026-05-11Feiner Bros NEGOTIATION36Asiya Javayant
1001Greenwood BologniaAustralia2026-05-03Benton, John B Jr UNQUALIFIED62Xuxue Feng
1002Kadeem FlosiRussia2026-05-21Chemel, James L Cpa NEW0Ivan Magalhaes
1003Cody SaylorsRussia2026-05-11King, Christopher A Esq RENEWAL92Stephen Shaw
1004Morrow RutaCanada2026-05-08Chanay, Jeffrey A Esq RENEWAL26Asiya Javayant
1005Julie StensethItaly2026-05-05Chemel, James L Cpa PROPOSAL69Onyama Limba
1006Mayumi KolmetzSpain2026-05-05Dorl, James J Esq PROPOSAL32Ivan Magalhaes
1007Salvatore StockhamBrazil2026-05-06Buckley Miller Wright NEW86Amy Elsner
1008Jeanfrancois VenereIndia2026-05-18Feiner Bros RENEWAL49Onyama Limba
1009Wickens NestleRussia2026-05-14Rousseaux, Michael Esq NEGOTIATION41Anna Fali
1010Morrow RutaJapan2026-05-18Commercial Press RENEWAL13Onyama Limba
1011Arvin AlbaresJapan2026-05-22Buckley Miller Wright PROPOSAL30Ioni Bowcher
1012Adams MorascaRussia2026-05-06Buckley Miller Wright NEGOTIATION41Elwin Sharvill
1013Ricardo GauchoItaly2026-05-30Chapman, Ross E Esq NEW78Elwin Sharvill
1014Nicolas IturbideItaly2026-05-18Dorl, James J Esq UNQUALIFIED64Ioni Bowcher
1015Ashley DoeGermany2026-05-22Chanay, Jeffrey A Esq UNQUALIFIED16Asiya Javayant
1016Faith GillianJapan2026-05-22Chapman, Ross E Esq UNQUALIFIED57Xuxue Feng
1017Sinclair WaycottCanada2026-05-13Dorl, James J Esq NEW72Amy Elsner
1018Greenwood BologniaJapan2026-05-13Chapman, Ross E Esq QUALIFIED32Amy Elsner
1019Izzy GarufiAustralia2026-05-23Feiner Bros RENEWAL93Ioni Bowcher
1020Darci PoquetteGermany2026-05-26King, Christopher A Esq UNQUALIFIED17Anna Fali
1021Sinclair WaycottCanada2026-05-05Rangoni Of Florence NEW64Elwin Sharvill
1022Juan WieserArgentina2026-05-15Dorl, James J Esq UNQUALIFIED54Bernardo Dominic
1023Stacey MacleadItaly2026-06-01Rangoni Of Florence UNQUALIFIED56Ioni Bowcher
1024Maria MarrierFrance2026-05-08Dorl, James J Esq NEW20Bernardo Dominic
1025Kaitlin OstroskyGermany2026-05-07Buckley Miller Wright UNQUALIFIED67Elwin Sharvill
1026Emily WhobreyBrazil2026-05-30Truhlar And Truhlar Attys PROPOSAL5Bernardo Dominic
1027Emily WhobreyUnited Kingdom2026-05-04Rangoni Of Florence QUALIFIED93Ioni Bowcher
1028Wickens NestleItaly2026-06-01Feltz Printing Service NEW7Anna Fali
1029Leon OldroydArgentina2026-05-19King, Christopher A Esq NEGOTIATION29Anna Fali
1030Alejandro PerinSpain2026-05-09Dorl, James J Esq UNQUALIFIED67Bernardo Dominic
1031Smith GlickBrazil2026-05-31Commercial Press UNQUALIFIED52Stephen Shaw
1032Leja CaldareraIndia2026-05-11Feiner Bros RENEWAL42Elwin Sharvill
1033Faith GillianSpain2026-05-19Truhlar And Truhlar Attys QUALIFIED57Ivan Magalhaes
1034Salvatore StockhamCanada2026-05-21Morlong Associates NEW31Asiya Javayant
1035Clifford RimIndia2026-05-11Printing Dimensions NEGOTIATION99Ivan Magalhaes
1036Sinclair WaycottArgentina2026-05-27Chanay, Jeffrey A Esq PROPOSAL46Ivan Magalhaes
1037Claire TollnerCanada2026-05-22Chapman, Ross E Esq RENEWAL26Onyama Limba
1038Chavez BriddickJapan2026-05-24Chapman, Ross E Esq RENEWAL26Ivan Magalhaes
1039Maisha RulapaughIndia2026-05-16Chapman, Ross E Esq RENEWAL94Stephen Shaw
1040Chavez BriddickIndia2026-05-26Commercial Press NEW55Amy Elsner
1041Darci PoquetteUnited Kingdom2026-05-26Rangoni Of Florence QUALIFIED33Ivan Magalhaes
1042Leja CaldareraIndia2026-05-14Dorl, James J Esq RENEWAL53Elwin Sharvill
1043Maisha RulapaughAustralia2026-05-20King, Christopher A Esq QUALIFIED95Amy Elsner
1044Ricardo GauchoFrance2026-05-26Buckley Miller Wright NEW3Ivan Magalhaes
1045Ivar PaprockiBrazil2026-05-13Feiner Bros PROPOSAL50Stephen Shaw
1046Cody SaylorsAustralia2026-05-29Truhlar And Truhlar Attys NEGOTIATION83Xuxue Feng
1047Mujtaba NickaSpain2026-05-26Truhlar And Truhlar Attys RENEWAL77Stephen Shaw
1048Misaki RoysterJapan2026-05-08Feltz Printing Service PROPOSAL57Anna Fali
1049Aditya KuskoGermany2026-05-23Chanay, Jeffrey A Esq PROPOSAL51Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Leon OldroydBrazilAmy Elsner UNQUALIFIED
Izzy GarufiGermanyIoni Bowcher UNQUALIFIED
Adams MorascaAustraliaOnyama Limba UNQUALIFIED
Aika InouyeAustraliaOnyama Limba NEW
Wickens NestleSpainAmy Elsner QUALIFIED
Chavez BriddickAustraliaAsiya Javayant UNQUALIFIED
Kadeem FlosiAustraliaXuxue Feng NEW
Greenwood BologniaBrazilAnna Fali NEW
Munro FerenczAustraliaAnna Fali UNQUALIFIED
Maria MarrierUnited KingdomStephen Shaw PROPOSAL
Silvio SlusarskiJapanAmy Elsner PROPOSAL
Kaitlin OstroskySpainStephen Shaw UNQUALIFIED
Izzy GarufiFranceElwin Sharvill RENEWAL
Aditya KuskoSpainOnyama Limba QUALIFIED
Costa DilliardJapanStephen Shaw NEGOTIATION
Darci PoquetteGermanyIvan Magalhaes QUALIFIED
Ricardo GauchoArgentinaOnyama Limba PROPOSAL
Kadeem FlosiSpainAsiya Javayant NEGOTIATION
Nicolas IturbideSpainBernardo Dominic NEW
Tony FollerRussiaStephen Shaw PROPOSAL
Leon OldroydRussiaAnna Fali PROPOSAL
Munro FerenczArgentinaAnna Fali RENEWAL
Salvatore StockhamIndiaIvan Magalhaes PROPOSAL
Izzy GarufiUnited KingdomAnna Fali RENEWAL
Murillo MaletCanadaAmy Elsner NEGOTIATION
Emily WhobreyAustraliaAmy Elsner QUALIFIED
Deepesh ChuiIndiaBernardo Dominic PROPOSAL
Costa DilliardBrazilAsiya Javayant UNQUALIFIED
Misaki RoysterSpainIvan Magalhaes NEW
Leon OldroydFranceXuxue Feng PROPOSAL
Deepesh ChuiItalyXuxue Feng NEGOTIATION
Ricardo GauchoUnited KingdomAmy Elsner NEW
Leon OldroydIndiaAsiya Javayant NEW
Mujtaba NickaAustraliaXuxue Feng NEW
Ashley DoeItalyOnyama Limba UNQUALIFIED
Greenwood BologniaUnited KingdomAnna Fali QUALIFIED
Tony FollerUnited KingdomBernardo Dominic NEGOTIATION
Sinclair WaycottBrazilIvan Magalhaes NEW
Darci PoquetteItalyStephen Shaw QUALIFIED
Kadeem FlosiRussiaElwin Sharvill NEGOTIATION
Costa DilliardIndiaIvan Magalhaes QUALIFIED
Tony FollerSpainOnyama Limba QUALIFIED
Tony FollerBrazilBernardo Dominic QUALIFIED
Arvin AlbaresArgentinaIoni Bowcher UNQUALIFIED
Deepesh ChuiGermanyAnna Fali NEGOTIATION
Kaitlin OstroskyArgentinaIoni Bowcher PROPOSAL
Costa DilliardBrazilAsiya Javayant NEGOTIATION
Octavia MaletBrazilStephen Shaw NEW
Jefferson SchemmerFranceStephen Shaw NEGOTIATION
Octavia MaletJapanAmy Elsner UNQUALIFIED
Frozen Columns
Name
Johnson Sergi
Cody Saylors
Julie Stenseth
Isabel Bowley
Silvio Slusarski
Jefferson Schemmer
Antonio Caudy
Rodrigues Campain
Ashley Doe
Chavez Briddick
Chavez Briddick
Faith Gillian
Tony Foller
Claire Tollner
Kaitlin Ostrosky
Clifford Rim
Jones Vocelka
Kadeem Flosi
Isabel Bowley
Aditya Kusko
Misaki Royster
Costa Dilliard
Darci Poquette
Sinclair Waycott
Jefferson Schemmer
Isabel Bowley
Maria Marrier
Nicolas Iturbide
Rodrigues Campain
Aika Inouye
Francesco Shinko
Darci Poquette
Isabel Bowley
Alejandro Perin
Wickens Nestle
Aika Inouye
James Butt
Izzy Garufi
Ashley Doe
James Butt
Ashley Doe
Tony Foller
Clifford Rim
Chavez Briddick
Adams Morasca
Maisha Rulapaugh
Greenwood Bolognia
Maria Marrier
Sinclair Waycott
Misaki Royster
IdCountryDate
1000Australia2026-05-25
1001United Kingdom2026-05-27
1002France2026-05-13
1003Russia2026-05-03
1004United Kingdom2026-05-30
1005Canada2026-05-15
1006United Kingdom2026-05-12
1007Japan2026-05-30
1008India2026-05-16
1009Italy2026-05-27
1010India2026-05-26
1011Italy2026-05-24
1012Canada2026-05-24
1013Russia2026-05-06
1014Germany2026-05-25
1015Australia2026-05-14
1016India2026-05-24
1017United Kingdom2026-05-18
1018Argentina2026-05-07
1019Germany2026-05-05
1020Canada2026-05-04
1021Australia2026-05-22
1022Spain2026-05-05
1023Canada2026-05-11
1024Canada2026-05-12
1025Brazil2026-05-29
1026France2026-05-22
1027Brazil2026-05-31
1028Argentina2026-05-05
1029Germany2026-05-20
1030India2026-05-29
1031Japan2026-05-29
1032Canada2026-05-31
1033Spain2026-05-07
1034Australia2026-05-26
1035India2026-05-09
1036Brazil2026-05-14
1037India2026-05-16
1038Canada2026-05-27
1039India2026-05-26
1040Japan2026-05-28
1041Brazil2026-05-11
1042Australia2026-05-03
1043Russia2026-05-30
1044Germany2026-05-18
1045Japan2026-05-15
1046Australia2026-05-30
1047Argentina2026-05-28
1048Spain2026-05-22
1049Italy2026-05-19

On-Demand Data

NameIdCountryDate
Jones Vocelka1000Germany2026-05-07
Faith Gillian1001Japan2026-05-20
Juan Wieser1002Spain2026-05-24
Aika Inouye1003Canada2026-05-06
Francesco Shinko1004Italy2026-06-01
Jennifer Amigon1005India2026-05-30
Misaki Royster1006India2026-05-30
Maria Marrier1007Italy2026-05-04
Silvio Slusarski1008Brazil2026-05-17
Aditya Kusko1009Canada2026-05-25
Adams Morasca1010Spain2026-05-21
Kadeem Flosi1011Canada2026-05-16
Ashley Doe1012Germany2026-05-13
Alejandro Perin1013France2026-05-11
Octavia Malet1014Brazil2026-05-15
Octavia Malet1015Spain2026-05-30
Juan Wieser1016India2026-05-16
Tony Foller1017United Kingdom2026-05-07
Tony Foller1018France2026-05-20
Julie Stenseth1019Russia2026-05-09
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Octavia MaletGermanyAsiya Javayant PROPOSAL
Greenwood BologniaItalyXuxue Feng UNQUALIFIED
Greenwood BologniaFranceXuxue Feng RENEWAL
Octavia MaletCanadaAnna Fali RENEWAL
Maria MarrierBrazilAmy Elsner NEW
Jeanfrancois VenereFranceXuxue Feng PROPOSAL
Aditya KuskoBrazilIvan Magalhaes NEGOTIATION
Stacey MacleadCanadaXuxue Feng QUALIFIED
Juan WieserAustraliaOnyama Limba NEGOTIATION
Maisha RulapaughGermanyBernardo Dominic NEGOTIATION
Francesco ShinkoSpainBernardo Dominic QUALIFIED
Costa DilliardUnited KingdomIvan Magalhaes NEW
Darci PoquetteArgentinaAsiya Javayant NEW
Sinclair WaycottCanadaAmy Elsner RENEWAL
Maria MarrierJapanAmy Elsner NEGOTIATION
Julie StensethIndiaAnna Fali QUALIFIED
Sinclair WaycottFranceElwin Sharvill UNQUALIFIED
Izzy GarufiSpainIvan Magalhaes NEGOTIATION
Aruna FigeroaFranceXuxue Feng PROPOSAL
Mujtaba NickaGermanyAsiya Javayant QUALIFIED
David DarakjyBrazilBernardo Dominic RENEWAL
Aruna FigeroaSpainAmy Elsner QUALIFIED
Leon OldroydBrazilElwin Sharvill QUALIFIED
Jennifer AmigonCanadaAmy Elsner NEW
Johnson SergiGermanyIvan Magalhaes QUALIFIED
Greenwood BologniaIndiaElwin Sharvill NEGOTIATION
Darci PoquetteFranceXuxue Feng NEW
Arvin AlbaresAustraliaStephen Shaw PROPOSAL
Morrow RutaGermanyAmy Elsner NEW
Munro FerenczItalyIvan Magalhaes PROPOSAL
Aika InouyeUnited KingdomAsiya Javayant QUALIFIED
Ivar PaprockiUnited KingdomBernardo Dominic QUALIFIED
Francesco ShinkoBrazilAmy Elsner NEW
David DarakjyFranceAnna Fali NEW
Sinclair WaycottBrazilXuxue Feng NEW
Mayumi KolmetzIndiaAsiya Javayant NEW
Leon OldroydJapanBernardo Dominic NEW
Jefferson SchemmerIndiaAsiya Javayant QUALIFIED
Claire TollnerIndiaIvan Magalhaes PROPOSAL
Johnson SergiFranceXuxue Feng 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>