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
Aruna FigeroaGermanyXuxue Feng NEGOTIATION
Ivar PaprockiItalyElwin Sharvill UNQUALIFIED
Sinclair WaycottIndiaIvan Magalhaes PROPOSAL
Ricardo GauchoSpainElwin Sharvill NEGOTIATION
Clifford RimArgentinaOnyama Limba NEW
Aruna FigeroaBrazilElwin Sharvill RENEWAL
Juan WieserSpainAsiya Javayant QUALIFIED
David DarakjyBrazilAsiya Javayant RENEWAL
Aditya KuskoJapanIoni Bowcher PROPOSAL
Aruna FigeroaFranceIoni Bowcher NEW
Ivar PaprockiItalyAsiya Javayant NEW
Jennifer AmigonFranceAmy Elsner QUALIFIED
Tony FollerAustraliaElwin Sharvill PROPOSAL
Jennifer AmigonBrazilXuxue Feng QUALIFIED
Morrow RutaFranceElwin Sharvill UNQUALIFIED
Kaitlin OstroskyCanadaXuxue Feng RENEWAL
Murillo MaletSpainIvan Magalhaes UNQUALIFIED
Deepesh ChuiSpainIvan Magalhaes RENEWAL
Mayumi KolmetzJapanAmy Elsner NEGOTIATION
Jones VocelkaCanadaIvan Magalhaes QUALIFIED
James ButtCanadaElwin Sharvill QUALIFIED
Greenwood BologniaGermanyBernardo Dominic NEGOTIATION
Claire TollnerItalyAsiya Javayant NEW
Octavia MaletIndiaXuxue Feng NEGOTIATION
Stacey MacleadCanadaStephen Shaw PROPOSAL
Ivar PaprockiSpainXuxue Feng NEW
Greenwood BologniaArgentinaIoni Bowcher RENEWAL
Smith GlickRussiaElwin Sharvill RENEWAL
Maria MarrierUnited KingdomIvan Magalhaes NEGOTIATION
Mayumi KolmetzRussiaElwin Sharvill QUALIFIED
Chavez BriddickFranceElwin Sharvill NEGOTIATION
Antonio CaudyFranceIoni Bowcher QUALIFIED
James ButtArgentinaAmy Elsner UNQUALIFIED
Antonio CaudySpainAmy Elsner PROPOSAL
Mujtaba NickaGermanyElwin Sharvill RENEWAL
Cody SaylorsItalyAnna Fali QUALIFIED
Aika InouyeFranceStephen Shaw QUALIFIED
Sinclair WaycottArgentinaElwin Sharvill NEW
Ricardo GauchoCanadaIvan Magalhaes RENEWAL
Greenwood BologniaItalyOnyama Limba UNQUALIFIED
Francesco ShinkoUnited KingdomIoni Bowcher PROPOSAL
Claire TollnerBrazilIvan Magalhaes UNQUALIFIED
Clifford RimAustraliaOnyama Limba UNQUALIFIED
Aika InouyeBrazilElwin Sharvill NEGOTIATION
Clifford RimRussiaStephen Shaw PROPOSAL
Munro FerenczGermanyAsiya Javayant PROPOSAL
David DarakjyFranceXuxue Feng RENEWAL
Greenwood BologniaFranceAmy Elsner NEW
Claire TollnerJapanAnna Fali PROPOSAL
Jones VocelkaSpainOnyama Limba PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Smith GlickGermanyIvan Magalhaes NEGOTIATION
Cody SaylorsJapanOnyama Limba UNQUALIFIED
Maria MarrierUnited KingdomStephen Shaw UNQUALIFIED
Tony FollerItalyIvan Magalhaes UNQUALIFIED
Murillo MaletItalyStephen Shaw QUALIFIED
Jones VocelkaAustraliaAnna Fali PROPOSAL
Munro FerenczIndiaOnyama Limba RENEWAL
Emily WhobreyFranceIvan Magalhaes NEGOTIATION
Leon OldroydBrazilOnyama Limba NEW
Ivar PaprockiCanadaElwin Sharvill NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kadeem FlosiItaly2026-05-28Morlong Associates PROPOSAL0Ioni Bowcher
1001Morrow RutaBrazil2026-05-27Rousseaux, Michael Esq NEW78Onyama Limba
1002Tony FollerIndia2026-05-21Feltz Printing Service NEGOTIATION74Amy Elsner
1003Jeanfrancois VenereGermany2026-05-28Feiner Bros NEGOTIATION18Ivan Magalhaes
1004Ivar PaprockiJapan2026-05-15Benton, John B Jr PROPOSAL75Asiya Javayant
1005Smith GlickIndia2026-05-27Commercial Press QUALIFIED81Onyama Limba
1006Murillo MaletIndia2026-05-18Rousseaux, Michael Esq QUALIFIED91Xuxue Feng
1007Clifford RimRussia2026-05-20Benton, John B Jr NEW57Onyama Limba
1008Antonio CaudyIndia2026-05-23Rangoni Of Florence PROPOSAL5Elwin Sharvill
1009Aika InouyeJapan2026-06-04Truhlar And Truhlar Attys RENEWAL62Stephen Shaw
1010Maria MarrierArgentina2026-06-05Benton, John B Jr QUALIFIED26Xuxue Feng
1011Francesco ShinkoAustralia2026-05-28Commercial Press NEW65Ivan Magalhaes
1012Ashley DoeFrance2026-05-08Buckley Miller Wright NEGOTIATION44Onyama Limba
1013Mujtaba NickaCanada2026-05-23Dorl, James J Esq RENEWAL81Ivan Magalhaes
1014Jennifer AmigonSpain2026-05-25Chapman, Ross E Esq UNQUALIFIED51Stephen Shaw
1015Izzy GarufiItaly2026-05-12Commercial Press UNQUALIFIED15Bernardo Dominic
1016Kaitlin OstroskyRussia2026-05-17Benton, John B Jr RENEWAL30Ivan Magalhaes
1017James ButtUnited Kingdom2026-06-04Chapman, Ross E Esq NEW9Ioni Bowcher
1018Aika InouyeJapan2026-06-02Buckley Miller Wright NEW80Ivan Magalhaes
1019Deepesh ChuiJapan2026-05-25Feiner Bros PROPOSAL62Anna Fali
1020Aika InouyeJapan2026-06-05Rousseaux, Michael Esq RENEWAL15Onyama Limba
1021Octavia MaletBrazil2026-05-16Chanay, Jeffrey A Esq NEGOTIATION78Xuxue Feng
1022Munro FerenczAustralia2026-05-12Rangoni Of Florence UNQUALIFIED9Onyama Limba
1023Misaki RoysterBrazil2026-06-03Rangoni Of Florence NEW39Onyama Limba
1024Ivar PaprockiItaly2026-06-03Buckley Miller Wright RENEWAL88Asiya Javayant
1025Rodrigues CampainFrance2026-05-26Chemel, James L Cpa UNQUALIFIED80Bernardo Dominic
1026Kaitlin OstroskyItaly2026-05-26Rousseaux, Michael Esq RENEWAL81Ivan Magalhaes
1027David DarakjyArgentina2026-05-25Commercial Press QUALIFIED0Asiya Javayant
1028Sinclair WaycottCanada2026-05-24Buckley Miller Wright NEGOTIATION33Asiya Javayant
1029Aditya KuskoGermany2026-05-26Buckley Miller Wright UNQUALIFIED4Bernardo Dominic
1030Smith GlickItaly2026-06-05Dorl, James J Esq QUALIFIED40Anna Fali
1031Ricardo GauchoSpain2026-06-02Benton, John B Jr NEW82Anna Fali
1032Nicolas IturbideSpain2026-06-01Feltz Printing Service NEGOTIATION73Bernardo Dominic
1033Mujtaba NickaItaly2026-05-31Feiner Bros NEW56Asiya Javayant
1034Darci PoquetteFrance2026-05-25Chemel, James L Cpa NEGOTIATION16Amy Elsner
1035Leja CaldareraBrazil2026-05-26Rousseaux, Michael Esq QUALIFIED36Ivan Magalhaes
1036Francesco ShinkoCanada2026-05-23Truhlar And Truhlar Attys NEW40Ivan Magalhaes
1037Aruna FigeroaBrazil2026-05-26Chemel, James L Cpa NEGOTIATION99Bernardo Dominic
1038Sinclair WaycottBrazil2026-05-25Rousseaux, Michael Esq UNQUALIFIED57Ioni Bowcher
1039Rodrigues CampainGermany2026-05-30Benton, John B Jr PROPOSAL32Xuxue Feng
1040Leon OldroydBrazil2026-05-08Chemel, James L Cpa RENEWAL93Ioni Bowcher
1041Clifford RimGermany2026-05-31Chapman, Ross E Esq UNQUALIFIED11Xuxue Feng
1042Tony FollerCanada2026-05-24Feiner Bros NEW85Xuxue Feng
1043Jefferson SchemmerItaly2026-05-16Chemel, James L Cpa QUALIFIED6Amy Elsner
1044Cody SaylorsGermany2026-05-29Benton, John B Jr RENEWAL24Amy Elsner
1045Octavia MaletFrance2026-05-19Dorl, James J Esq NEW65Anna Fali
1046Johnson SergiItaly2026-05-31Rangoni Of Florence QUALIFIED32Elwin Sharvill
1047Munro FerenczIndia2026-05-14Morlong Associates NEW99Stephen Shaw
1048Maria MarrierUnited Kingdom2026-05-21Benton, John B Jr PROPOSAL43Ivan Magalhaes
1049Maisha RulapaughRussia2026-05-18Rangoni Of Florence UNQUALIFIED88Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Wickens NestleSpainIvan Magalhaes RENEWAL
Aditya KuskoFranceAsiya Javayant NEGOTIATION
Silvio SlusarskiArgentinaAmy Elsner RENEWAL
Mayumi KolmetzItalyOnyama Limba PROPOSAL
Johnson SergiArgentinaBernardo Dominic UNQUALIFIED
Kaitlin OstroskyFranceIoni Bowcher QUALIFIED
Rodrigues CampainFranceElwin Sharvill RENEWAL
Aditya KuskoRussiaStephen Shaw NEGOTIATION
Francesco ShinkoAustraliaAmy Elsner UNQUALIFIED
Sinclair WaycottSpainAmy Elsner RENEWAL
Misaki RoysterBrazilBernardo Dominic RENEWAL
Kadeem FlosiGermanyOnyama Limba UNQUALIFIED
Smith GlickArgentinaBernardo Dominic UNQUALIFIED
Johnson SergiCanadaXuxue Feng NEW
Leja CaldareraIndiaBernardo Dominic UNQUALIFIED
Clifford RimItalyBernardo Dominic UNQUALIFIED
Mujtaba NickaSpainIvan Magalhaes NEW
Aika InouyeRussiaOnyama Limba UNQUALIFIED
Leon OldroydFranceIoni Bowcher UNQUALIFIED
Arvin AlbaresUnited KingdomIoni Bowcher NEGOTIATION
Leja CaldareraIndiaStephen Shaw NEGOTIATION
Arvin AlbaresAustraliaIoni Bowcher RENEWAL
Aditya KuskoItalyAnna Fali RENEWAL
Arvin AlbaresBrazilAmy Elsner UNQUALIFIED
Claire TollnerSpainIoni Bowcher RENEWAL
Octavia MaletJapanAsiya Javayant UNQUALIFIED
Costa DilliardItalyStephen Shaw PROPOSAL
David DarakjySpainAmy Elsner NEGOTIATION
Leon OldroydCanadaIoni Bowcher QUALIFIED
Izzy GarufiBrazilAnna Fali NEW
Aika InouyeCanadaStephen Shaw PROPOSAL
Juan WieserAustraliaElwin Sharvill PROPOSAL
Tony FollerFranceBernardo Dominic NEW
Mayumi KolmetzArgentinaStephen Shaw QUALIFIED
Tony FollerBrazilStephen Shaw PROPOSAL
Nicolas IturbideCanadaAmy Elsner PROPOSAL
Juan WieserItalyStephen Shaw NEW
Aditya KuskoUnited KingdomIoni Bowcher NEGOTIATION
Jeanfrancois VenereSpainOnyama Limba PROPOSAL
Isabel BowleyBrazilStephen Shaw NEGOTIATION
Octavia MaletFranceOnyama Limba RENEWAL
Smith GlickItalyStephen Shaw UNQUALIFIED
Ricardo GauchoAustraliaAsiya Javayant QUALIFIED
Emily WhobreySpainOnyama Limba NEGOTIATION
David DarakjyAustraliaAsiya Javayant UNQUALIFIED
Wickens NestleItalyAmy Elsner QUALIFIED
Izzy GarufiItalyBernardo Dominic UNQUALIFIED
Clifford RimIndiaStephen Shaw PROPOSAL
Rodrigues CampainItalyElwin Sharvill PROPOSAL
Aruna FigeroaBrazilXuxue Feng QUALIFIED
Frozen Columns
Name
Aruna Figeroa
Costa Dilliard
Tony Foller
Aika Inouye
Wickens Nestle
Julie Stenseth
Juan Wieser
Johnson Sergi
Nicolas Iturbide
James Butt
Maisha Rulapaugh
Mujtaba Nicka
Maria Marrier
Izzy Garufi
Tony Foller
Munro Ferencz
Leja Caldarera
Emily Whobrey
Rodrigues Campain
Maisha Rulapaugh
Emily Whobrey
Clifford Rim
Morrow Ruta
Johnson Sergi
Jefferson Schemmer
Clifford Rim
Ashley Doe
Clifford Rim
Aika Inouye
Octavia Malet
James Butt
Jefferson Schemmer
James Butt
Juan Wieser
Jeanfrancois Venere
Costa Dilliard
Cody Saylors
Leja Caldarera
Clifford Rim
Murillo Malet
Nicolas Iturbide
Clifford Rim
Adams Morasca
Greenwood Bolognia
Wickens Nestle
Jeanfrancois Venere
Silvio Slusarski
Faith Gillian
Ashley Doe
Maisha Rulapaugh
IdCountryDate
1000France2026-05-16
1001India2026-05-31
1002United Kingdom2026-05-30
1003Germany2026-05-21
1004Germany2026-05-30
1005France2026-06-02
1006United Kingdom2026-05-10
1007Germany2026-06-04
1008Spain2026-05-08
1009Brazil2026-06-02
1010Russia2026-06-01
1011India2026-05-24
1012Germany2026-05-31
1013Russia2026-05-08
1014Brazil2026-05-29
1015India2026-05-17
1016India2026-05-30
1017United Kingdom2026-05-25
1018Canada2026-05-18
1019India2026-05-28
1020India2026-05-12
1021India2026-05-18
1022Germany2026-05-11
1023Brazil2026-05-23
1024Japan2026-05-25
1025India2026-05-13
1026Italy2026-06-04
1027Japan2026-06-04
1028Spain2026-05-27
1029Argentina2026-05-27
1030United Kingdom2026-05-20
1031Japan2026-05-11
1032Australia2026-05-18
1033India2026-05-14
1034Brazil2026-05-10
1035France2026-05-28
1036United Kingdom2026-05-27
1037Japan2026-05-24
1038Japan2026-05-10
1039India2026-05-30
1040Japan2026-05-13
1041Australia2026-06-02
1042Canada2026-05-19
1043Russia2026-05-08
1044Brazil2026-06-02
1045Argentina2026-05-25
1046Spain2026-05-09
1047Spain2026-05-13
1048Germany2026-06-04
1049Brazil2026-06-02

On-Demand Data

NameIdCountryDate
Julie Stenseth1000Brazil2026-05-14
Jeanfrancois Venere1001Spain2026-05-22
Jones Vocelka1002Japan2026-05-27
Smith Glick1003Russia2026-05-22
Jennifer Amigon1004Canada2026-05-23
Cody Saylors1005Russia2026-06-04
Clifford Rim1006Canada2026-05-26
Aruna Figeroa1007India2026-06-01
Nicolas Iturbide1008France2026-06-02
Antonio Caudy1009Italy2026-05-24
Smith Glick1010Australia2026-05-08
Izzy Garufi1011Australia2026-05-13
Francesco Shinko1012Argentina2026-05-12
Wickens Nestle1013Argentina2026-06-01
Silvio Slusarski1014Argentina2026-05-26
Ashley Doe1015Italy2026-05-22
Juan Wieser1016Canada2026-05-11
Nicolas Iturbide1017India2026-06-04
Leon Oldroyd1018Germany2026-05-29
Mayumi Kolmetz1019Brazil2026-05-22
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Isabel BowleyUnited KingdomBernardo Dominic NEW
Izzy GarufiRussiaBernardo Dominic NEGOTIATION
Costa DilliardBrazilXuxue Feng QUALIFIED
Ashley DoeFranceOnyama Limba NEGOTIATION
Smith GlickItalyIoni Bowcher NEW
Darci PoquetteFranceAmy Elsner PROPOSAL
Emily WhobreyUnited KingdomOnyama Limba NEGOTIATION
Leon OldroydIndiaIoni Bowcher NEGOTIATION
Aruna FigeroaFranceIoni Bowcher QUALIFIED
Maisha RulapaughIndiaBernardo Dominic UNQUALIFIED
Jeanfrancois VenereUnited KingdomXuxue Feng NEGOTIATION
Antonio CaudyAustraliaIoni Bowcher PROPOSAL
Jefferson SchemmerGermanyAmy Elsner NEGOTIATION
Cody SaylorsIndiaOnyama Limba QUALIFIED
Alejandro PerinRussiaOnyama Limba RENEWAL
Jennifer AmigonUnited KingdomAmy Elsner PROPOSAL
Aruna FigeroaAustraliaXuxue Feng NEGOTIATION
Aditya KuskoFranceElwin Sharvill NEW
Mayumi KolmetzRussiaBernardo Dominic UNQUALIFIED
Jefferson SchemmerRussiaAnna Fali NEGOTIATION
Aika InouyeIndiaBernardo Dominic UNQUALIFIED
Arvin AlbaresRussiaAnna Fali NEGOTIATION
Darci PoquetteUnited KingdomElwin Sharvill NEGOTIATION
Jones VocelkaRussiaIvan Magalhaes QUALIFIED
Silvio SlusarskiBrazilElwin Sharvill PROPOSAL
Aruna FigeroaIndiaIoni Bowcher RENEWAL
Mayumi KolmetzGermanyAmy Elsner UNQUALIFIED
Jennifer AmigonSpainIvan Magalhaes QUALIFIED
Juan WieserIndiaAmy Elsner NEGOTIATION
Maisha RulapaughFranceStephen Shaw NEW
Ricardo GauchoArgentinaIvan Magalhaes PROPOSAL
Cody SaylorsFranceAmy Elsner RENEWAL
Mayumi KolmetzAustraliaBernardo Dominic RENEWAL
Julie StensethIndiaAsiya Javayant NEW
Antonio CaudyFranceXuxue Feng UNQUALIFIED
Tony FollerFranceAnna Fali QUALIFIED
Maisha RulapaughRussiaAmy Elsner NEW
Kaitlin OstroskySpainAsiya Javayant RENEWAL
Johnson SergiItalyIoni Bowcher UNQUALIFIED
Ivar PaprockiJapanBernardo Dominic NEGOTIATION

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