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
Mayumi KolmetzBrazilOnyama Limba RENEWAL
Aditya KuskoItalyOnyama Limba RENEWAL
Deepesh ChuiUnited KingdomAsiya Javayant UNQUALIFIED
Aditya KuskoAustraliaXuxue Feng NEGOTIATION
Salvatore StockhamRussiaAsiya Javayant UNQUALIFIED
Murillo MaletCanadaElwin Sharvill NEW
Maria MarrierCanadaElwin Sharvill UNQUALIFIED
Nicolas IturbideSpainBernardo Dominic RENEWAL
Alejandro PerinFranceIvan Magalhaes RENEWAL
Chavez BriddickRussiaIoni Bowcher NEGOTIATION
Nicolas IturbideSpainStephen Shaw QUALIFIED
Mayumi KolmetzCanadaIvan Magalhaes QUALIFIED
Octavia MaletGermanyIoni Bowcher PROPOSAL
Aditya KuskoItalyBernardo Dominic PROPOSAL
Silvio SlusarskiSpainAmy Elsner PROPOSAL
Stacey MacleadArgentinaAsiya Javayant QUALIFIED
Sinclair WaycottRussiaAnna Fali UNQUALIFIED
Costa DilliardJapanIvan Magalhaes QUALIFIED
Aika InouyeArgentinaAnna Fali PROPOSAL
Maisha RulapaughItalyBernardo Dominic PROPOSAL
Faith GillianBrazilElwin Sharvill NEW
Misaki RoysterCanadaAnna Fali NEW
Ricardo GauchoAustraliaAnna Fali NEW
Jefferson SchemmerUnited KingdomStephen Shaw PROPOSAL
Arvin AlbaresUnited KingdomOnyama Limba NEGOTIATION
Aditya KuskoJapanOnyama Limba PROPOSAL
Arvin AlbaresRussiaIvan Magalhaes NEGOTIATION
Julie StensethRussiaXuxue Feng QUALIFIED
Misaki RoysterJapanXuxue Feng NEW
Morrow RutaSpainIoni Bowcher QUALIFIED
Leon OldroydRussiaIoni Bowcher QUALIFIED
David DarakjyArgentinaOnyama Limba NEGOTIATION
Morrow RutaFranceIvan Magalhaes PROPOSAL
David DarakjyBrazilOnyama Limba NEGOTIATION
Murillo MaletBrazilStephen Shaw NEW
Wickens NestleItalyAsiya Javayant NEW
Alejandro PerinUnited KingdomXuxue Feng QUALIFIED
Aruna FigeroaSpainStephen Shaw NEW
Munro FerenczArgentinaAsiya Javayant UNQUALIFIED
Isabel BowleyArgentinaAsiya Javayant UNQUALIFIED
Kaitlin OstroskyFranceAnna Fali RENEWAL
Ricardo GauchoCanadaXuxue Feng UNQUALIFIED
Greenwood BologniaSpainStephen Shaw PROPOSAL
Ricardo GauchoSpainBernardo Dominic NEW
Jones VocelkaBrazilXuxue Feng PROPOSAL
Maria MarrierFranceAsiya Javayant PROPOSAL
Costa DilliardUnited KingdomXuxue Feng NEGOTIATION
Jennifer AmigonGermanyBernardo Dominic NEGOTIATION
Ivar PaprockiArgentinaIvan Magalhaes UNQUALIFIED
Mujtaba NickaFranceBernardo Dominic UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Kaitlin OstroskyCanadaOnyama Limba NEW
Smith GlickBrazilBernardo Dominic NEW
Izzy GarufiGermanyAmy Elsner RENEWAL
Maria MarrierCanadaStephen Shaw NEW
Aika InouyeSpainIoni Bowcher UNQUALIFIED
Murillo MaletUnited KingdomIvan Magalhaes NEGOTIATION
Silvio SlusarskiFranceAmy Elsner NEGOTIATION
Antonio CaudyIndiaIoni Bowcher PROPOSAL
Aika InouyeSpainXuxue Feng NEGOTIATION
Julie StensethRussiaBernardo Dominic NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickAustralia2025-08-11Rousseaux, Michael Esq QUALIFIED49Ivan Magalhaes
1001Ricardo GauchoCanada2025-09-03Feiner Bros RENEWAL9Bernardo Dominic
1002Antonio CaudyAustralia2025-08-25Chanay, Jeffrey A Esq NEW48Amy Elsner
1003Stacey MacleadGermany2025-09-08Rangoni Of Florence NEGOTIATION60Elwin Sharvill
1004Wickens NestleCanada2025-08-12Chemel, James L Cpa NEGOTIATION13Ioni Bowcher
1005Claire TollnerRussia2025-08-15Feiner Bros UNQUALIFIED66Asiya Javayant
1006Adams MorascaUnited Kingdom2025-09-07Truhlar And Truhlar Attys NEGOTIATION50Ioni Bowcher
1007Munro FerenczItaly2025-08-11Morlong Associates NEGOTIATION9Asiya Javayant
1008James ButtItaly2025-08-28Feltz Printing Service NEGOTIATION72Onyama Limba
1009Leja CaldareraGermany2025-08-27Dorl, James J Esq NEW30Asiya Javayant
1010Maisha RulapaughGermany2025-08-11King, Christopher A Esq UNQUALIFIED2Xuxue Feng
1011Jeanfrancois VenereAustralia2025-08-31Truhlar And Truhlar Attys RENEWAL92Ioni Bowcher
1012Jones VocelkaBrazil2025-08-30Morlong Associates RENEWAL48Xuxue Feng
1013Francesco ShinkoBrazil2025-09-09Truhlar And Truhlar Attys RENEWAL7Ioni Bowcher
1014Wickens NestleSpain2025-08-28Feiner Bros PROPOSAL22Onyama Limba
1015Leja CaldareraJapan2025-08-28Truhlar And Truhlar Attys NEGOTIATION79Onyama Limba
1016Jeanfrancois VenereFrance2025-09-03King, Christopher A Esq RENEWAL50Amy Elsner
1017Murillo MaletCanada2025-08-21Buckley Miller Wright PROPOSAL92Anna Fali
1018Tony FollerSpain2025-08-16Rousseaux, Michael Esq UNQUALIFIED69Onyama Limba
1019Adams MorascaCanada2025-08-19Benton, John B Jr RENEWAL2Bernardo Dominic
1020Jones VocelkaAustralia2025-08-28Chanay, Jeffrey A Esq PROPOSAL94Elwin Sharvill
1021Arvin AlbaresItaly2025-08-22King, Christopher A Esq NEGOTIATION90Xuxue Feng
1022Murillo MaletJapan2025-08-30Commercial Press QUALIFIED29Amy Elsner
1023Jeanfrancois VenereGermany2025-08-27King, Christopher A Esq QUALIFIED3Bernardo Dominic
1024Julie StensethRussia2025-09-07Truhlar And Truhlar Attys QUALIFIED3Bernardo Dominic
1025Wickens NestleCanada2025-08-30Benton, John B Jr QUALIFIED32Amy Elsner
1026Jeanfrancois VenereAustralia2025-08-31Chemel, James L Cpa QUALIFIED82Ivan Magalhaes
1027Aika InouyeArgentina2025-08-22Truhlar And Truhlar Attys NEGOTIATION43Anna Fali
1028Mujtaba NickaRussia2025-08-26Chemel, James L Cpa RENEWAL82Amy Elsner
1029Jones VocelkaFrance2025-09-04Printing Dimensions QUALIFIED14Anna Fali
1030Maisha RulapaughBrazil2025-09-05Benton, John B Jr UNQUALIFIED59Elwin Sharvill
1031Tony FollerArgentina2025-08-13Truhlar And Truhlar Attys RENEWAL57Elwin Sharvill
1032Darci PoquetteItaly2025-08-17Feltz Printing Service RENEWAL47Asiya Javayant
1033Jeanfrancois VenereBrazil2025-08-12Dorl, James J Esq NEW33Onyama Limba
1034Aika InouyeUnited Kingdom2025-09-02Dorl, James J Esq PROPOSAL66Onyama Limba
1035Emily WhobreyFrance2025-08-14Printing Dimensions UNQUALIFIED40Elwin Sharvill
1036Alejandro PerinGermany2025-09-09Chapman, Ross E Esq NEGOTIATION53Onyama Limba
1037Ashley DoeBrazil2025-09-04Buckley Miller Wright QUALIFIED17Asiya Javayant
1038Costa DilliardGermany2025-09-02Chemel, James L Cpa UNQUALIFIED34Onyama Limba
1039Mujtaba NickaJapan2025-09-07Chanay, Jeffrey A Esq NEGOTIATION79Onyama Limba
1040Mujtaba NickaSpain2025-08-18Buckley Miller Wright UNQUALIFIED74Asiya Javayant
1041Juan WieserItaly2025-08-14Feltz Printing Service RENEWAL35Asiya Javayant
1042Leja CaldareraAustralia2025-08-24Rousseaux, Michael Esq PROPOSAL4Onyama Limba
1043Jennifer AmigonBrazil2025-08-31Commercial Press RENEWAL85Anna Fali
1044Kadeem FlosiAustralia2025-08-21Printing Dimensions NEGOTIATION58Asiya Javayant
1045Rodrigues CampainItaly2025-08-30Dorl, James J Esq NEW97Amy Elsner
1046Kaitlin OstroskyIndia2025-09-01Rangoni Of Florence UNQUALIFIED39Elwin Sharvill
1047Adams MorascaGermany2025-08-22Chapman, Ross E Esq NEW47Ivan Magalhaes
1048James ButtFrance2025-08-30Benton, John B Jr RENEWAL54Stephen Shaw
1049Leja CaldareraBrazil2025-09-04Chemel, James L Cpa PROPOSAL46Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Rodrigues CampainJapanIvan Magalhaes NEW
Julie StensethIndiaXuxue Feng NEGOTIATION
Misaki RoysterCanadaStephen Shaw NEGOTIATION
Aika InouyeBrazilBernardo Dominic PROPOSAL
Rodrigues CampainBrazilAnna Fali RENEWAL
Morrow RutaUnited KingdomOnyama Limba NEGOTIATION
Munro FerenczIndiaAsiya Javayant UNQUALIFIED
Ivar PaprockiIndiaElwin Sharvill UNQUALIFIED
Darci PoquetteCanadaAmy Elsner PROPOSAL
Emily WhobreyItalyIoni Bowcher NEGOTIATION
Tony FollerUnited KingdomXuxue Feng NEGOTIATION
Mujtaba NickaBrazilBernardo Dominic NEGOTIATION
Ivar PaprockiJapanXuxue Feng QUALIFIED
James ButtUnited KingdomXuxue Feng UNQUALIFIED
Kadeem FlosiRussiaXuxue Feng PROPOSAL
Juan WieserRussiaElwin Sharvill NEW
Aditya KuskoRussiaAsiya Javayant NEW
Mayumi KolmetzGermanyIoni Bowcher UNQUALIFIED
Silvio SlusarskiItalyAnna Fali QUALIFIED
Ashley DoeCanadaBernardo Dominic NEGOTIATION
Misaki RoysterGermanyStephen Shaw UNQUALIFIED
Antonio CaudySpainAsiya Javayant RENEWAL
Maria MarrierAustraliaXuxue Feng UNQUALIFIED
Clifford RimItalyBernardo Dominic RENEWAL
Wickens NestleAustraliaXuxue Feng RENEWAL
Tony FollerItalyAsiya Javayant NEW
Arvin AlbaresSpainElwin Sharvill QUALIFIED
Deepesh ChuiAustraliaAnna Fali NEW
Darci PoquetteArgentinaAnna Fali NEGOTIATION
Ashley DoeIndiaAmy Elsner RENEWAL
Tony FollerBrazilOnyama Limba PROPOSAL
Julie StensethJapanBernardo Dominic QUALIFIED
Smith GlickRussiaAmy Elsner RENEWAL
Jefferson SchemmerGermanyElwin Sharvill RENEWAL
Clifford RimSpainXuxue Feng QUALIFIED
Leon OldroydArgentinaAmy Elsner NEGOTIATION
Silvio SlusarskiFranceOnyama Limba UNQUALIFIED
Morrow RutaBrazilBernardo Dominic PROPOSAL
Morrow RutaItalyStephen Shaw PROPOSAL
Aruna FigeroaBrazilBernardo Dominic RENEWAL
Ashley DoeCanadaXuxue Feng RENEWAL
Alejandro PerinItalyAmy Elsner NEW
Leja CaldareraRussiaElwin Sharvill QUALIFIED
Jeanfrancois VenereJapanXuxue Feng PROPOSAL
Ricardo GauchoFranceAnna Fali PROPOSAL
Faith GillianIndiaIoni Bowcher QUALIFIED
Adams MorascaCanadaIoni Bowcher RENEWAL
Claire TollnerGermanyElwin Sharvill NEGOTIATION
Jeanfrancois VenereCanadaStephen Shaw NEW
Clifford RimItalyAnna Fali NEW
Frozen Columns
Name
Claire Tollner
Wickens Nestle
Chavez Briddick
Jeanfrancois Venere
Maria Marrier
Leon Oldroyd
Mujtaba Nicka
Cody Saylors
Maria Marrier
Munro Ferencz
Johnson Sergi
Francesco Shinko
Juan Wieser
Tony Foller
Leon Oldroyd
Tony Foller
Francesco Shinko
Cody Saylors
Ivar Paprocki
Antonio Caudy
David Darakjy
Francesco Shinko
Kadeem Flosi
Alejandro Perin
Isabel Bowley
Kadeem Flosi
Emily Whobrey
Smith Glick
Darci Poquette
Aruna Figeroa
Arvin Albares
Costa Dilliard
Misaki Royster
Nicolas Iturbide
Claire Tollner
Kaitlin Ostrosky
Munro Ferencz
Rodrigues Campain
Mujtaba Nicka
Kadeem Flosi
Silvio Slusarski
Adams Morasca
Darci Poquette
Misaki Royster
Maisha Rulapaugh
Deepesh Chui
Julie Stenseth
Ashley Doe
Faith Gillian
Juan Wieser
IdCountryDate
1000Japan2025-09-03
1001United Kingdom2025-09-05
1002India2025-09-09
1003France2025-09-05
1004Japan2025-09-02
1005India2025-08-19
1006Germany2025-09-07
1007Brazil2025-08-15
1008United Kingdom2025-08-24
1009Japan2025-08-19
1010Canada2025-08-15
1011Germany2025-09-08
1012Japan2025-08-22
1013Russia2025-08-30
1014Argentina2025-08-22
1015Germany2025-08-22
1016France2025-08-25
1017Spain2025-09-04
1018India2025-09-08
1019Australia2025-08-18
1020Argentina2025-08-22
1021Argentina2025-09-07
1022Argentina2025-09-06
1023France2025-09-08
1024Argentina2025-08-11
1025Germany2025-09-03
1026United Kingdom2025-08-18
1027Germany2025-08-29
1028Italy2025-08-30
1029Brazil2025-09-07
1030Argentina2025-08-11
1031Germany2025-08-19
1032France2025-09-03
1033Italy2025-08-17
1034Canada2025-08-18
1035Argentina2025-08-18
1036Japan2025-08-18
1037Canada2025-09-02
1038Canada2025-09-03
1039Australia2025-08-14
1040Spain2025-08-15
1041India2025-08-26
1042Japan2025-08-29
1043Germany2025-08-11
1044Brazil2025-08-25
1045Italy2025-08-16
1046Brazil2025-08-26
1047India2025-08-27
1048Brazil2025-08-13
1049Argentina2025-09-09

On-Demand Data

NameIdCountryDate
Jeanfrancois Venere1000Japan2025-08-16
Kaitlin Ostrosky1001Canada2025-09-05
Maria Marrier1002Germany2025-08-25
Arvin Albares1003Spain2025-08-14
Leon Oldroyd1004Brazil2025-08-21
Wickens Nestle1005India2025-09-04
Arvin Albares1006Japan2025-09-04
Julie Stenseth1007Spain2025-08-26
Ashley Doe1008Germany2025-09-01
Stacey Maclead1009Spain2025-08-13
Tony Foller1010United Kingdom2025-08-28
Rodrigues Campain1011Brazil2025-08-26
Maria Marrier1012Japan2025-08-29
Misaki Royster1013Spain2025-08-17
Ivar Paprocki1014Argentina2025-08-23
Antonio Caudy1015United Kingdom2025-08-13
Mayumi Kolmetz1016Spain2025-08-18
Wickens Nestle1017Argentina2025-08-25
Clifford Rim1018United Kingdom2025-08-26
Faith Gillian1019Canada2025-09-05
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kadeem FlosiCanadaOnyama Limba QUALIFIED
Julie StensethJapanAnna Fali RENEWAL
Silvio SlusarskiRussiaAsiya Javayant UNQUALIFIED
Ricardo GauchoFranceIoni Bowcher PROPOSAL
Mujtaba NickaGermanyAnna Fali NEW
Sinclair WaycottSpainXuxue Feng RENEWAL
Jennifer AmigonJapanIvan Magalhaes NEGOTIATION
Izzy GarufiRussiaOnyama Limba PROPOSAL
Leon OldroydArgentinaAnna Fali NEW
Jennifer AmigonFranceStephen Shaw NEGOTIATION
Claire TollnerAustraliaOnyama Limba RENEWAL
Ivar PaprockiBrazilXuxue Feng NEW
Rodrigues CampainItalyIvan Magalhaes NEGOTIATION
Ricardo GauchoUnited KingdomIvan Magalhaes RENEWAL
Smith GlickBrazilStephen Shaw RENEWAL
Morrow RutaFranceAsiya Javayant PROPOSAL
Aruna FigeroaIndiaAmy Elsner QUALIFIED
Cody SaylorsCanadaXuxue Feng NEW
Rodrigues CampainCanadaAmy Elsner RENEWAL
Alejandro PerinUnited KingdomOnyama Limba PROPOSAL
Francesco ShinkoJapanAsiya Javayant NEGOTIATION
Izzy GarufiRussiaAmy Elsner PROPOSAL
Izzy GarufiGermanyElwin Sharvill PROPOSAL
Ivar PaprockiJapanAsiya Javayant QUALIFIED
Claire TollnerCanadaElwin Sharvill RENEWAL
Jennifer AmigonCanadaIoni Bowcher NEW
Rodrigues CampainFranceOnyama Limba PROPOSAL
Arvin AlbaresItalyBernardo Dominic UNQUALIFIED
Clifford RimCanadaAsiya Javayant NEW
Maria MarrierGermanyOnyama Limba PROPOSAL
Francesco ShinkoArgentinaXuxue Feng RENEWAL
Nicolas IturbideRussiaAnna Fali QUALIFIED
Leon OldroydSpainStephen Shaw UNQUALIFIED
Murillo MaletGermanyIvan Magalhaes QUALIFIED
Maria MarrierAustraliaAsiya Javayant RENEWAL
Leja CaldareraCanadaAmy Elsner NEGOTIATION
Salvatore StockhamCanadaAsiya Javayant RENEWAL
Misaki RoysterItalyAsiya Javayant UNQUALIFIED
Greenwood BologniaSpainAnna Fali QUALIFIED
Leja CaldareraRussiaXuxue Feng RENEWAL

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