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
Wickens NestleCanadaIvan Magalhaes PROPOSAL
Alejandro PerinAustraliaElwin Sharvill NEGOTIATION
Salvatore StockhamCanadaElwin Sharvill UNQUALIFIED
Ivar PaprockiGermanyAnna Fali NEGOTIATION
Emily WhobreyJapanAmy Elsner UNQUALIFIED
Mayumi KolmetzCanadaBernardo Dominic PROPOSAL
Wickens NestleJapanStephen Shaw UNQUALIFIED
Salvatore StockhamArgentinaIvan Magalhaes UNQUALIFIED
Misaki RoysterIndiaStephen Shaw RENEWAL
Jeanfrancois VenereJapanOnyama Limba NEGOTIATION
Cody SaylorsItalyElwin Sharvill QUALIFIED
James ButtJapanElwin Sharvill QUALIFIED
Francesco ShinkoItalyAsiya Javayant NEW
David DarakjyArgentinaXuxue Feng NEGOTIATION
Alejandro PerinJapanXuxue Feng NEW
Mayumi KolmetzFranceBernardo Dominic PROPOSAL
Wickens NestleFranceXuxue Feng PROPOSAL
Cody SaylorsCanadaStephen Shaw PROPOSAL
Jefferson SchemmerGermanyOnyama Limba RENEWAL
Greenwood BologniaRussiaAnna Fali UNQUALIFIED
Morrow RutaAustraliaIoni Bowcher NEGOTIATION
Julie StensethArgentinaIoni Bowcher NEW
Ashley DoeIndiaElwin Sharvill NEGOTIATION
Mujtaba NickaCanadaAnna Fali NEW
Darci PoquetteCanadaIoni Bowcher NEGOTIATION
Jefferson SchemmerSpainXuxue Feng UNQUALIFIED
Jeanfrancois VenereCanadaIvan Magalhaes RENEWAL
Juan WieserAustraliaBernardo Dominic QUALIFIED
Ricardo GauchoAustraliaAsiya Javayant NEGOTIATION
Mayumi KolmetzBrazilOnyama Limba UNQUALIFIED
Leon OldroydIndiaStephen Shaw QUALIFIED
Octavia MaletGermanyIvan Magalhaes PROPOSAL
Leja CaldareraFranceBernardo Dominic NEW
Smith GlickGermanyIoni Bowcher QUALIFIED
Nicolas IturbideAustraliaXuxue Feng UNQUALIFIED
Maria MarrierUnited KingdomBernardo Dominic RENEWAL
Jeanfrancois VenereBrazilOnyama Limba NEW
Izzy GarufiUnited KingdomAnna Fali NEGOTIATION
Antonio CaudyGermanyAmy Elsner QUALIFIED
Rodrigues CampainCanadaAmy Elsner PROPOSAL
Maria MarrierItalyAmy Elsner NEGOTIATION
Izzy GarufiIndiaStephen Shaw QUALIFIED
James ButtGermanyIvan Magalhaes QUALIFIED
Tony FollerBrazilIvan Magalhaes NEGOTIATION
Salvatore StockhamSpainAnna Fali NEGOTIATION
Misaki RoysterSpainOnyama Limba QUALIFIED
Ivar PaprockiIndiaElwin Sharvill PROPOSAL
Morrow RutaArgentinaAsiya Javayant RENEWAL
Izzy GarufiRussiaOnyama Limba QUALIFIED
Izzy GarufiIndiaElwin Sharvill QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Silvio SlusarskiUnited KingdomOnyama Limba NEW
Faith GillianSpainXuxue Feng NEW
Ivar PaprockiAustraliaElwin Sharvill PROPOSAL
Costa DilliardBrazilBernardo Dominic NEGOTIATION
Murillo MaletBrazilAmy Elsner QUALIFIED
Alejandro PerinGermanyIvan Magalhaes NEW
Johnson SergiJapanOnyama Limba NEGOTIATION
Deepesh ChuiRussiaXuxue Feng UNQUALIFIED
Jones VocelkaFranceAsiya Javayant UNQUALIFIED
Smith GlickCanadaAnna Fali RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Nicolas IturbideGermany2025-10-13Chemel, James L Cpa RENEWAL18Amy Elsner
1001Maisha RulapaughSpain2025-09-20Chapman, Ross E Esq QUALIFIED19Asiya Javayant
1002Deepesh ChuiUnited Kingdom2025-10-08Morlong Associates UNQUALIFIED17Ivan Magalhaes
1003Ashley DoeUnited Kingdom2025-10-05Printing Dimensions NEW58Asiya Javayant
1004Murillo MaletJapan2025-09-21Chemel, James L Cpa NEGOTIATION79Ioni Bowcher
1005Aruna FigeroaAustralia2025-09-25Feltz Printing Service PROPOSAL28Elwin Sharvill
1006David DarakjyIndia2025-10-09Rousseaux, Michael Esq QUALIFIED43Xuxue Feng
1007Costa DilliardCanada2025-09-22Commercial Press PROPOSAL18Anna Fali
1008Costa DilliardGermany2025-09-26Chanay, Jeffrey A Esq PROPOSAL77Stephen Shaw
1009Maria MarrierIndia2025-09-17Dorl, James J Esq NEGOTIATION22Stephen Shaw
1010Murillo MaletItaly2025-10-02Buckley Miller Wright NEW72Anna Fali
1011Silvio SlusarskiSpain2025-10-08Chemel, James L Cpa QUALIFIED84Asiya Javayant
1012Kaitlin OstroskyJapan2025-09-27Feltz Printing Service QUALIFIED36Xuxue Feng
1013Stacey MacleadUnited Kingdom2025-10-13Printing Dimensions RENEWAL15Stephen Shaw
1014Greenwood BologniaCanada2025-09-26Truhlar And Truhlar Attys QUALIFIED42Anna Fali
1015Jones VocelkaCanada2025-10-02King, Christopher A Esq NEW0Ivan Magalhaes
1016Johnson SergiGermany2025-09-29Feltz Printing Service PROPOSAL71Asiya Javayant
1017Tony FollerItaly2025-09-27Buckley Miller Wright UNQUALIFIED65Anna Fali
1018Stacey MacleadFrance2025-09-16Chanay, Jeffrey A Esq NEW13Ioni Bowcher
1019Juan WieserFrance2025-09-27Chemel, James L Cpa PROPOSAL4Asiya Javayant
1020James ButtFrance2025-10-05Chemel, James L Cpa QUALIFIED7Ivan Magalhaes
1021Maisha RulapaughGermany2025-10-10Rangoni Of Florence RENEWAL97Xuxue Feng
1022Costa DilliardIndia2025-09-22Printing Dimensions NEGOTIATION73Stephen Shaw
1023David DarakjyBrazil2025-10-07Feiner Bros QUALIFIED98Anna Fali
1024Arvin AlbaresArgentina2025-09-22Feiner Bros RENEWAL13Elwin Sharvill
1025Greenwood BologniaIndia2025-10-02Chanay, Jeffrey A Esq PROPOSAL2Bernardo Dominic
1026Sinclair WaycottIndia2025-09-18King, Christopher A Esq NEW43Anna Fali
1027Johnson SergiItaly2025-10-14King, Christopher A Esq UNQUALIFIED28Asiya Javayant
1028Murillo MaletJapan2025-09-23Dorl, James J Esq RENEWAL34Xuxue Feng
1029Julie StensethArgentina2025-10-09Truhlar And Truhlar Attys QUALIFIED45Ivan Magalhaes
1030Johnson SergiCanada2025-09-19Feltz Printing Service PROPOSAL35Ivan Magalhaes
1031Smith GlickIndia2025-09-27Feltz Printing Service NEGOTIATION18Xuxue Feng
1032Stacey MacleadFrance2025-09-15Truhlar And Truhlar Attys PROPOSAL46Elwin Sharvill
1033Deepesh ChuiJapan2025-10-05Buckley Miller Wright PROPOSAL91Anna Fali
1034Emily WhobreySpain2025-09-16Commercial Press RENEWAL92Stephen Shaw
1035Alejandro PerinIndia2025-10-11Feltz Printing Service NEGOTIATION49Asiya Javayant
1036Kaitlin OstroskyIndia2025-10-02Printing Dimensions UNQUALIFIED49Ivan Magalhaes
1037Nicolas IturbideSpain2025-09-21Chanay, Jeffrey A Esq NEW89Xuxue Feng
1038Johnson SergiItaly2025-10-03Commercial Press NEGOTIATION17Xuxue Feng
1039Aditya KuskoRussia2025-10-08Printing Dimensions NEGOTIATION8Onyama Limba
1040Mujtaba NickaBrazil2025-10-05Benton, John B Jr NEW6Xuxue Feng
1041Jefferson SchemmerBrazil2025-09-23Feiner Bros QUALIFIED42Anna Fali
1042Mayumi KolmetzCanada2025-09-29Commercial Press NEW65Onyama Limba
1043Claire TollnerGermany2025-10-07Dorl, James J Esq PROPOSAL15Ioni Bowcher
1044Munro FerenczArgentina2025-09-21Commercial Press QUALIFIED52Onyama Limba
1045Aditya KuskoBrazil2025-09-30Chapman, Ross E Esq PROPOSAL47Ioni Bowcher
1046Murillo MaletUnited Kingdom2025-10-03King, Christopher A Esq PROPOSAL79Xuxue Feng
1047Misaki RoysterCanada2025-09-21King, Christopher A Esq QUALIFIED47Elwin Sharvill
1048Maria MarrierArgentina2025-10-08King, Christopher A Esq NEGOTIATION6Amy Elsner
1049Leja CaldareraUnited Kingdom2025-09-25Chemel, James L Cpa UNQUALIFIED52Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Sinclair WaycottArgentinaBernardo Dominic NEW
Cody SaylorsFranceIvan Magalhaes UNQUALIFIED
Adams MorascaItalyXuxue Feng UNQUALIFIED
Johnson SergiJapanAmy Elsner RENEWAL
Tony FollerJapanStephen Shaw QUALIFIED
Mujtaba NickaItalyIoni Bowcher QUALIFIED
Octavia MaletJapanIvan Magalhaes RENEWAL
Juan WieserCanadaIvan Magalhaes NEGOTIATION
Jeanfrancois VenereBrazilIvan Magalhaes NEGOTIATION
Antonio CaudyItalyXuxue Feng RENEWAL
Chavez BriddickCanadaXuxue Feng NEW
Cody SaylorsAustraliaAmy Elsner QUALIFIED
Izzy GarufiBrazilAnna Fali RENEWAL
Greenwood BologniaRussiaIvan Magalhaes RENEWAL
Murillo MaletCanadaIoni Bowcher NEW
Alejandro PerinFranceBernardo Dominic QUALIFIED
Isabel BowleyAustraliaOnyama Limba NEW
Octavia MaletSpainOnyama Limba RENEWAL
Tony FollerRussiaXuxue Feng NEGOTIATION
Izzy GarufiItalyBernardo Dominic NEGOTIATION
Faith GillianAustraliaIoni Bowcher PROPOSAL
David DarakjyGermanyOnyama Limba RENEWAL
Jones VocelkaAustraliaBernardo Dominic UNQUALIFIED
Emily WhobreyGermanyAsiya Javayant QUALIFIED
Leon OldroydGermanyBernardo Dominic NEGOTIATION
Claire TollnerRussiaElwin Sharvill PROPOSAL
Stacey MacleadUnited KingdomAnna Fali UNQUALIFIED
Silvio SlusarskiBrazilXuxue Feng PROPOSAL
Juan WieserJapanAmy Elsner RENEWAL
Silvio SlusarskiJapanIvan Magalhaes NEW
Silvio SlusarskiAustraliaOnyama Limba UNQUALIFIED
Aditya KuskoItalyStephen Shaw NEW
Isabel BowleySpainElwin Sharvill PROPOSAL
Smith GlickCanadaAnna Fali NEW
Jefferson SchemmerItalyStephen Shaw PROPOSAL
Jennifer AmigonIndiaIoni Bowcher NEGOTIATION
Jennifer AmigonJapanOnyama Limba PROPOSAL
Aika InouyeUnited KingdomStephen Shaw RENEWAL
Greenwood BologniaSpainIoni Bowcher RENEWAL
Kadeem FlosiArgentinaStephen Shaw RENEWAL
Faith GillianCanadaStephen Shaw NEW
Alejandro PerinJapanXuxue Feng NEGOTIATION
Ivar PaprockiSpainOnyama Limba UNQUALIFIED
Tony FollerIndiaAmy Elsner NEW
Aruna FigeroaCanadaIoni Bowcher NEGOTIATION
Claire TollnerFranceAnna Fali NEW
Aika InouyeSpainXuxue Feng RENEWAL
Greenwood BologniaSpainBernardo Dominic UNQUALIFIED
Cody SaylorsGermanyAsiya Javayant NEGOTIATION
Munro FerenczCanadaElwin Sharvill QUALIFIED
Frozen Columns
Name
Chavez Briddick
Mayumi Kolmetz
Silvio Slusarski
Rodrigues Campain
Juan Wieser
Claire Tollner
James Butt
Leon Oldroyd
Mujtaba Nicka
Stacey Maclead
Aika Inouye
Arvin Albares
Smith Glick
Emily Whobrey
Sinclair Waycott
Clifford Rim
Costa Dilliard
Izzy Garufi
Clifford Rim
Adams Morasca
Silvio Slusarski
Nicolas Iturbide
Misaki Royster
Leja Caldarera
Faith Gillian
Maisha Rulapaugh
Silvio Slusarski
Greenwood Bolognia
Leon Oldroyd
Faith Gillian
Tony Foller
Francesco Shinko
Kadeem Flosi
Jones Vocelka
Tony Foller
Antonio Caudy
David Darakjy
Stacey Maclead
Nicolas Iturbide
Darci Poquette
Ashley Doe
Juan Wieser
Isabel Bowley
Aditya Kusko
Clifford Rim
Misaki Royster
Cody Saylors
Wickens Nestle
Nicolas Iturbide
Greenwood Bolognia
IdCountryDate
1000India2025-10-12
1001Spain2025-09-30
1002Canada2025-10-07
1003Argentina2025-09-27
1004United Kingdom2025-10-13
1005India2025-09-27
1006Russia2025-09-22
1007Argentina2025-09-20
1008India2025-09-28
1009Japan2025-09-28
1010Canada2025-10-10
1011United Kingdom2025-09-21
1012United Kingdom2025-09-29
1013Canada2025-09-19
1014Germany2025-09-26
1015Spain2025-10-09
1016Spain2025-09-18
1017France2025-09-24
1018Australia2025-10-07
1019United Kingdom2025-10-01
1020Australia2025-09-27
1021Australia2025-10-03
1022Japan2025-10-01
1023Italy2025-09-15
1024Brazil2025-10-14
1025Germany2025-09-30
1026Russia2025-10-03
1027Canada2025-10-07
1028Canada2025-09-15
1029Argentina2025-10-14
1030Canada2025-09-16
1031United Kingdom2025-09-24
1032United Kingdom2025-09-23
1033Russia2025-10-11
1034Canada2025-10-05
1035France2025-09-24
1036Germany2025-10-08
1037United Kingdom2025-09-15
1038Japan2025-09-17
1039Argentina2025-10-14
1040Brazil2025-10-13
1041Australia2025-10-12
1042Argentina2025-10-11
1043Italy2025-09-30
1044Canada2025-09-20
1045Japan2025-09-15
1046India2025-09-19
1047Russia2025-09-24
1048India2025-09-22
1049Spain2025-10-12

On-Demand Data

NameIdCountryDate
Ashley Doe1000Argentina2025-10-11
Aika Inouye1001Japan2025-09-25
Darci Poquette1002Canada2025-09-20
Faith Gillian1003India2025-10-11
Isabel Bowley1004Germany2025-10-05
Kadeem Flosi1005Spain2025-10-04
Aditya Kusko1006Argentina2025-10-14
Jennifer Amigon1007Brazil2025-09-27
Smith Glick1008Spain2025-10-02
Kadeem Flosi1009India2025-10-05
Jefferson Schemmer1010Argentina2025-10-12
Julie Stenseth1011Japan2025-10-02
Claire Tollner1012Germany2025-09-26
Izzy Garufi1013Canada2025-10-10
Emily Whobrey1014India2025-10-07
Faith Gillian1015Australia2025-09-23
Munro Ferencz1016Spain2025-09-25
Smith Glick1017France2025-09-15
Leon Oldroyd1018Canada2025-09-25
Johnson Sergi1019Canada2025-10-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leja CaldareraItalyAnna Fali QUALIFIED
Mayumi KolmetzBrazilAmy Elsner NEW
David DarakjyItalyIoni Bowcher QUALIFIED
Izzy GarufiFranceAnna Fali QUALIFIED
Sinclair WaycottUnited KingdomXuxue Feng QUALIFIED
Leon OldroydArgentinaAsiya Javayant NEGOTIATION
Chavez BriddickCanadaIvan Magalhaes NEW
Deepesh ChuiRussiaElwin Sharvill QUALIFIED
Cody SaylorsUnited KingdomIvan Magalhaes UNQUALIFIED
Francesco ShinkoUnited KingdomAnna Fali RENEWAL
Claire TollnerRussiaAnna Fali PROPOSAL
Clifford RimCanadaElwin Sharvill NEGOTIATION
Murillo MaletFranceStephen Shaw RENEWAL
Sinclair WaycottAustraliaAmy Elsner NEGOTIATION
Misaki RoysterAustraliaAsiya Javayant NEGOTIATION
Kaitlin OstroskyItalyAnna Fali RENEWAL
Aruna FigeroaItalyAmy Elsner PROPOSAL
Rodrigues CampainItalyIvan Magalhaes UNQUALIFIED
Mayumi KolmetzItalyAnna Fali NEW
Munro FerenczArgentinaIvan Magalhaes UNQUALIFIED
Stacey MacleadJapanOnyama Limba PROPOSAL
Ricardo GauchoIndiaStephen Shaw NEGOTIATION
James ButtBrazilStephen Shaw RENEWAL
Julie StensethFranceIoni Bowcher UNQUALIFIED
Wickens NestleBrazilIoni Bowcher NEGOTIATION
Maisha RulapaughJapanIvan Magalhaes UNQUALIFIED
Aditya KuskoIndiaIvan Magalhaes PROPOSAL
Octavia MaletJapanBernardo Dominic QUALIFIED
Aika InouyeItalyIoni Bowcher QUALIFIED
Isabel BowleyCanadaIvan Magalhaes QUALIFIED
Stacey MacleadIndiaXuxue Feng UNQUALIFIED
Munro FerenczItalyIoni Bowcher NEGOTIATION
Ivar PaprockiCanadaStephen Shaw QUALIFIED
Antonio CaudyArgentinaXuxue Feng NEGOTIATION
Jeanfrancois VenereBrazilBernardo Dominic PROPOSAL
Silvio SlusarskiFranceXuxue Feng NEGOTIATION
Greenwood BologniaFranceIoni Bowcher NEGOTIATION
Mujtaba NickaAustraliaOnyama Limba PROPOSAL
Kadeem FlosiJapanAmy Elsner UNQUALIFIED
Ashley DoeGermanyOnyama Limba 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>