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
Jennifer AmigonIndiaIoni Bowcher NEW
Julie StensethGermanyXuxue Feng RENEWAL
Darci PoquetteAustraliaXuxue Feng PROPOSAL
Ivar PaprockiItalyOnyama Limba PROPOSAL
James ButtRussiaStephen Shaw NEGOTIATION
Claire TollnerSpainAsiya Javayant UNQUALIFIED
Antonio CaudyAustraliaIoni Bowcher QUALIFIED
Nicolas IturbideJapanIoni Bowcher PROPOSAL
Jeanfrancois VenereGermanyIoni Bowcher NEGOTIATION
Juan WieserItalyXuxue Feng UNQUALIFIED
Sinclair WaycottArgentinaXuxue Feng NEGOTIATION
Faith GillianSpainElwin Sharvill NEW
Francesco ShinkoBrazilXuxue Feng RENEWAL
Aika InouyeItalyElwin Sharvill PROPOSAL
Izzy GarufiGermanyElwin Sharvill NEW
Kaitlin OstroskyItalyElwin Sharvill NEGOTIATION
Isabel BowleyJapanAnna Fali NEGOTIATION
Sinclair WaycottIndiaOnyama Limba QUALIFIED
Cody SaylorsItalyStephen Shaw UNQUALIFIED
Nicolas IturbideGermanyStephen Shaw NEW
Leon OldroydFranceIoni Bowcher NEGOTIATION
Claire TollnerRussiaAsiya Javayant QUALIFIED
Octavia MaletFranceAmy Elsner NEW
Aruna FigeroaGermanyAmy Elsner UNQUALIFIED
Jeanfrancois VenereFranceXuxue Feng RENEWAL
Wickens NestleFranceAsiya Javayant RENEWAL
Alejandro PerinGermanyStephen Shaw QUALIFIED
Isabel BowleyJapanAsiya Javayant NEW
Emily WhobreyUnited KingdomXuxue Feng RENEWAL
Smith GlickAustraliaXuxue Feng PROPOSAL
Stacey MacleadArgentinaAnna Fali NEGOTIATION
Murillo MaletItalyElwin Sharvill QUALIFIED
Salvatore StockhamRussiaIvan Magalhaes UNQUALIFIED
Izzy GarufiSpainElwin Sharvill PROPOSAL
Julie StensethJapanAsiya Javayant UNQUALIFIED
Faith GillianArgentinaIoni Bowcher QUALIFIED
Arvin AlbaresJapanIoni Bowcher NEGOTIATION
Francesco ShinkoCanadaIvan Magalhaes QUALIFIED
Izzy GarufiArgentinaOnyama Limba QUALIFIED
Misaki RoysterItalyAmy Elsner NEGOTIATION
Chavez BriddickJapanIvan Magalhaes NEGOTIATION
Jones VocelkaJapanIoni Bowcher RENEWAL
Ivar PaprockiSpainElwin Sharvill PROPOSAL
Jefferson SchemmerArgentinaAsiya Javayant NEW
Aruna FigeroaArgentinaXuxue Feng NEGOTIATION
Julie StensethUnited KingdomXuxue Feng QUALIFIED
Rodrigues CampainSpainXuxue Feng UNQUALIFIED
Izzy GarufiGermanyAsiya Javayant PROPOSAL
Cody SaylorsRussiaXuxue Feng UNQUALIFIED
Emily WhobreyUnited KingdomBernardo Dominic NEW
Horizontal
NameCountryRepresentativeStatus
Claire TollnerUnited KingdomAsiya Javayant NEGOTIATION
Kadeem FlosiAustraliaOnyama Limba NEW
Leon OldroydGermanyIvan Magalhaes NEW
Francesco ShinkoRussiaXuxue Feng UNQUALIFIED
Misaki RoysterIndiaBernardo Dominic QUALIFIED
Adams MorascaFranceAnna Fali QUALIFIED
Faith GillianFranceAnna Fali PROPOSAL
Tony FollerCanadaAmy Elsner NEW
Maria MarrierCanadaOnyama Limba UNQUALIFIED
Rodrigues CampainIndiaXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Izzy GarufiGermany2025-08-26Chemel, James L Cpa PROPOSAL34Asiya Javayant
1001Darci PoquetteFrance2025-09-08Chapman, Ross E Esq QUALIFIED80Xuxue Feng
1002Emily WhobreyArgentina2025-09-15Chanay, Jeffrey A Esq PROPOSAL52Elwin Sharvill
1003Deepesh ChuiJapan2025-09-10Benton, John B Jr UNQUALIFIED44Bernardo Dominic
1004Faith GillianItaly2025-09-15Chemel, James L Cpa NEW55Ivan Magalhaes
1005Cody SaylorsIndia2025-09-10Chanay, Jeffrey A Esq QUALIFIED50Asiya Javayant
1006Kaitlin OstroskyJapan2025-08-23Chapman, Ross E Esq UNQUALIFIED16Elwin Sharvill
1007Ricardo GauchoBrazil2025-08-24Chemel, James L Cpa NEGOTIATION92Asiya Javayant
1008Jennifer AmigonItaly2025-09-10Buckley Miller Wright QUALIFIED67Xuxue Feng
1009Ricardo GauchoItaly2025-08-19Morlong Associates RENEWAL55Asiya Javayant
1010Maria MarrierArgentina2025-08-18Printing Dimensions UNQUALIFIED97Ioni Bowcher
1011Francesco ShinkoRussia2025-09-04Dorl, James J Esq UNQUALIFIED98Ioni Bowcher
1012Aruna FigeroaIndia2025-09-01Benton, John B Jr RENEWAL84Stephen Shaw
1013Ricardo GauchoSpain2025-09-14Feiner Bros UNQUALIFIED76Amy Elsner
1014Leja CaldareraAustralia2025-09-11King, Christopher A Esq UNQUALIFIED60Elwin Sharvill
1015Johnson SergiItaly2025-09-07Rangoni Of Florence UNQUALIFIED0Xuxue Feng
1016Ashley DoeArgentina2025-08-22Dorl, James J Esq NEW30Xuxue Feng
1017Isabel BowleyBrazil2025-09-12Commercial Press NEW50Ivan Magalhaes
1018Aruna FigeroaCanada2025-09-02Feiner Bros QUALIFIED11Ivan Magalhaes
1019Mujtaba NickaArgentina2025-09-10Commercial Press RENEWAL5Stephen Shaw
1020Aditya KuskoGermany2025-09-13Rangoni Of Florence RENEWAL66Ivan Magalhaes
1021Darci PoquetteArgentina2025-08-18Chemel, James L Cpa QUALIFIED45Xuxue Feng
1022Aditya KuskoCanada2025-08-21Rousseaux, Michael Esq UNQUALIFIED4Amy Elsner
1023Adams MorascaGermany2025-09-01Rangoni Of Florence RENEWAL81Amy Elsner
1024Darci PoquetteAustralia2025-08-30Chanay, Jeffrey A Esq RENEWAL53Stephen Shaw
1025Claire TollnerSpain2025-08-19Rousseaux, Michael Esq NEW55Onyama Limba
1026Ashley DoeJapan2025-09-07King, Christopher A Esq RENEWAL7Ivan Magalhaes
1027Murillo MaletRussia2025-08-17Chanay, Jeffrey A Esq NEW13Ioni Bowcher
1028Mayumi KolmetzFrance2025-08-17Buckley Miller Wright RENEWAL18Ivan Magalhaes
1029Aika InouyeCanada2025-08-26King, Christopher A Esq PROPOSAL44Stephen Shaw
1030Silvio SlusarskiGermany2025-08-20Chanay, Jeffrey A Esq RENEWAL94Ioni Bowcher
1031Murillo MaletGermany2025-09-01Dorl, James J Esq QUALIFIED34Amy Elsner
1032Aditya KuskoSpain2025-08-22Chapman, Ross E Esq QUALIFIED68Stephen Shaw
1033Wickens NestleIndia2025-08-20Feiner Bros RENEWAL1Anna Fali
1034Murillo MaletJapan2025-08-31Morlong Associates RENEWAL98Xuxue Feng
1035Francesco ShinkoGermany2025-08-31Dorl, James J Esq PROPOSAL70Xuxue Feng
1036Leja CaldareraBrazil2025-08-19Commercial Press RENEWAL69Bernardo Dominic
1037Aditya KuskoUnited Kingdom2025-08-26King, Christopher A Esq QUALIFIED29Onyama Limba
1038Leon OldroydCanada2025-09-09Dorl, James J Esq NEGOTIATION98Anna Fali
1039Juan WieserUnited Kingdom2025-08-22Chapman, Ross E Esq UNQUALIFIED85Stephen Shaw
1040Alejandro PerinItaly2025-09-15Chapman, Ross E Esq NEGOTIATION40Onyama Limba
1041Jeanfrancois VenereUnited Kingdom2025-09-06Feltz Printing Service QUALIFIED42Asiya Javayant
1042Rodrigues CampainIndia2025-08-27Printing Dimensions UNQUALIFIED43Stephen Shaw
1043Smith GlickAustralia2025-09-03Dorl, James J Esq QUALIFIED54Onyama Limba
1044Jones VocelkaUnited Kingdom2025-08-29Truhlar And Truhlar Attys NEGOTIATION54Ivan Magalhaes
1045Aruna FigeroaJapan2025-08-19Buckley Miller Wright RENEWAL94Amy Elsner
1046Sinclair WaycottSpain2025-08-24Morlong Associates NEW98Bernardo Dominic
1047Ashley DoeJapan2025-09-09Rangoni Of Florence NEGOTIATION26Elwin Sharvill
1048Francesco ShinkoArgentina2025-08-21Chemel, James L Cpa UNQUALIFIED2Onyama Limba
1049Octavia MaletRussia2025-08-18Morlong Associates PROPOSAL34Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Julie StensethRussiaAnna Fali NEW
Kaitlin OstroskyAustraliaAmy Elsner NEGOTIATION
Costa DilliardBrazilXuxue Feng PROPOSAL
Juan WieserSpainIoni Bowcher PROPOSAL
Johnson SergiRussiaBernardo Dominic PROPOSAL
Kadeem FlosiFranceOnyama Limba PROPOSAL
Leon OldroydSpainIvan Magalhaes QUALIFIED
Aditya KuskoRussiaAsiya Javayant PROPOSAL
Leon OldroydCanadaOnyama Limba UNQUALIFIED
Munro FerenczGermanyStephen Shaw NEW
Morrow RutaArgentinaIoni Bowcher UNQUALIFIED
Chavez BriddickRussiaXuxue Feng PROPOSAL
Maria MarrierBrazilStephen Shaw RENEWAL
Ivar PaprockiJapanAsiya Javayant UNQUALIFIED
Mujtaba NickaGermanyStephen Shaw RENEWAL
Jones VocelkaCanadaIoni Bowcher NEGOTIATION
Munro FerenczSpainIoni Bowcher NEW
Ivar PaprockiItalyOnyama Limba UNQUALIFIED
Sinclair WaycottIndiaAmy Elsner UNQUALIFIED
Jones VocelkaCanadaXuxue Feng RENEWAL
Aruna FigeroaFranceIvan Magalhaes NEW
Tony FollerIndiaOnyama Limba RENEWAL
Sinclair WaycottUnited KingdomAsiya Javayant RENEWAL
Cody SaylorsArgentinaBernardo Dominic NEW
Antonio CaudyGermanyBernardo Dominic NEW
Antonio CaudyBrazilIvan Magalhaes UNQUALIFIED
Mujtaba NickaBrazilAnna Fali QUALIFIED
Silvio SlusarskiArgentinaXuxue Feng PROPOSAL
James ButtFranceElwin Sharvill RENEWAL
Aditya KuskoIndiaAsiya Javayant UNQUALIFIED
Arvin AlbaresFranceStephen Shaw QUALIFIED
Darci PoquetteItalyIoni Bowcher UNQUALIFIED
Antonio CaudyIndiaAnna Fali RENEWAL
Greenwood BologniaRussiaAnna Fali QUALIFIED
Ivar PaprockiFranceElwin Sharvill RENEWAL
Kadeem FlosiRussiaAnna Fali PROPOSAL
Aruna FigeroaArgentinaAmy Elsner RENEWAL
Misaki RoysterUnited KingdomXuxue Feng PROPOSAL
Costa DilliardGermanyAmy Elsner PROPOSAL
Murillo MaletArgentinaOnyama Limba PROPOSAL
Ricardo GauchoCanadaBernardo Dominic PROPOSAL
Jennifer AmigonIndiaStephen Shaw PROPOSAL
Cody SaylorsArgentinaXuxue Feng PROPOSAL
Francesco ShinkoItalyAmy Elsner QUALIFIED
Faith GillianIndiaAmy Elsner PROPOSAL
Jones VocelkaIndiaIvan Magalhaes UNQUALIFIED
Salvatore StockhamRussiaIvan Magalhaes NEW
James ButtFranceAmy Elsner PROPOSAL
Jones VocelkaGermanyStephen Shaw NEW
Stacey MacleadFranceAnna Fali PROPOSAL
Frozen Columns
Name
Ivar Paprocki
Kadeem Flosi
Clifford Rim
Francesco Shinko
Clifford Rim
Murillo Malet
Antonio Caudy
Aditya Kusko
Mayumi Kolmetz
Stacey Maclead
Murillo Malet
Kaitlin Ostrosky
Jones Vocelka
James Butt
Kadeem Flosi
Smith Glick
Jefferson Schemmer
Aika Inouye
Rodrigues Campain
Murillo Malet
Octavia Malet
Tony Foller
Maria Marrier
Jennifer Amigon
Alejandro Perin
Munro Ferencz
David Darakjy
Rodrigues Campain
Faith Gillian
Emily Whobrey
Cody Saylors
Aditya Kusko
Jennifer Amigon
Silvio Slusarski
Leja Caldarera
Faith Gillian
Alejandro Perin
Juan Wieser
Cody Saylors
Aruna Figeroa
Greenwood Bolognia
Alejandro Perin
Emily Whobrey
Jennifer Amigon
Greenwood Bolognia
Darci Poquette
Munro Ferencz
Alejandro Perin
Aika Inouye
Claire Tollner
IdCountryDate
1000Japan2025-08-26
1001France2025-09-09
1002Japan2025-08-25
1003Japan2025-09-09
1004Japan2025-08-27
1005United Kingdom2025-08-22
1006United Kingdom2025-08-17
1007Germany2025-09-02
1008Spain2025-08-31
1009Italy2025-09-11
1010Japan2025-09-02
1011Russia2025-09-08
1012Canada2025-09-01
1013India2025-09-07
1014Argentina2025-08-26
1015United Kingdom2025-09-08
1016United Kingdom2025-08-30
1017France2025-09-09
1018France2025-08-21
1019France2025-08-25
1020United Kingdom2025-09-13
1021United Kingdom2025-08-28
1022United Kingdom2025-08-25
1023Argentina2025-09-13
1024Germany2025-09-10
1025Spain2025-08-30
1026Australia2025-08-22
1027United Kingdom2025-09-11
1028Germany2025-09-07
1029France2025-08-21
1030France2025-08-28
1031Russia2025-08-22
1032India2025-08-25
1033Brazil2025-09-05
1034Brazil2025-08-27
1035Japan2025-09-02
1036Australia2025-09-03
1037Canada2025-08-28
1038France2025-09-07
1039Germany2025-09-06
1040Germany2025-08-29
1041France2025-08-31
1042Australia2025-08-22
1043Italy2025-09-15
1044Brazil2025-09-15
1045India2025-08-17
1046Brazil2025-09-09
1047Italy2025-08-19
1048Japan2025-08-20
1049India2025-08-26

On-Demand Data

NameIdCountryDate
David Darakjy1000France2025-09-13
Leon Oldroyd1001Canada2025-08-26
Aika Inouye1002United Kingdom2025-08-31
Aditya Kusko1003United Kingdom2025-08-30
Julie Stenseth1004Australia2025-08-30
Cody Saylors1005Spain2025-09-04
Mayumi Kolmetz1006Germany2025-08-25
Jefferson Schemmer1007Japan2025-08-27
Arvin Albares1008Japan2025-08-31
Maria Marrier1009India2025-09-05
Izzy Garufi1010Canada2025-08-21
Jennifer Amigon1011United Kingdom2025-08-29
James Butt1012India2025-08-20
Jeanfrancois Venere1013Brazil2025-08-17
Tony Foller1014Australia2025-09-01
Aika Inouye1015Argentina2025-08-25
Munro Ferencz1016Australia2025-09-14
James Butt1017Canada2025-09-09
Johnson Sergi1018Japan2025-09-02
Smith Glick1019France2025-08-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Silvio SlusarskiIndiaAsiya Javayant NEGOTIATION
Stacey MacleadJapanXuxue Feng QUALIFIED
Chavez BriddickJapanAsiya Javayant NEGOTIATION
Aditya KuskoRussiaBernardo Dominic NEGOTIATION
Antonio CaudyGermanyElwin Sharvill NEGOTIATION
Chavez BriddickJapanAsiya Javayant NEGOTIATION
Francesco ShinkoGermanyIvan Magalhaes RENEWAL
Aika InouyeAustraliaOnyama Limba QUALIFIED
Aditya KuskoArgentinaIoni Bowcher RENEWAL
Costa DilliardIndiaAsiya Javayant NEGOTIATION
Aika InouyeArgentinaElwin Sharvill QUALIFIED
Leon OldroydJapanOnyama Limba NEGOTIATION
Johnson SergiAustraliaElwin Sharvill QUALIFIED
Aika InouyeFranceAsiya Javayant QUALIFIED
Salvatore StockhamIndiaIoni Bowcher PROPOSAL
Aditya KuskoIndiaIvan Magalhaes QUALIFIED
Sinclair WaycottCanadaStephen Shaw RENEWAL
Adams MorascaItalyIoni Bowcher NEGOTIATION
Leon OldroydGermanyIoni Bowcher RENEWAL
Francesco ShinkoBrazilOnyama Limba PROPOSAL
Darci PoquetteBrazilAmy Elsner QUALIFIED
Salvatore StockhamIndiaIvan Magalhaes QUALIFIED
Maria MarrierUnited KingdomIoni Bowcher RENEWAL
Aditya KuskoFranceBernardo Dominic NEW
Arvin AlbaresArgentinaXuxue Feng NEGOTIATION
Adams MorascaUnited KingdomAsiya Javayant NEGOTIATION
Francesco ShinkoFranceBernardo Dominic PROPOSAL
Misaki RoysterFranceAsiya Javayant NEGOTIATION
Izzy GarufiIndiaAsiya Javayant UNQUALIFIED
Murillo MaletArgentinaIvan Magalhaes PROPOSAL
Sinclair WaycottRussiaAnna Fali PROPOSAL
Faith GillianSpainIvan Magalhaes PROPOSAL
Nicolas IturbideSpainAnna Fali UNQUALIFIED
Mujtaba NickaRussiaElwin Sharvill UNQUALIFIED
David DarakjyCanadaAmy Elsner NEGOTIATION
Costa DilliardCanadaStephen Shaw UNQUALIFIED
Clifford RimSpainBernardo Dominic PROPOSAL
Adams MorascaIndiaAnna Fali RENEWAL
Francesco ShinkoRussiaIvan Magalhaes NEW
Kaitlin OstroskyArgentinaAsiya Javayant 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>