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
Jefferson SchemmerUnited KingdomBernardo Dominic NEW
Morrow RutaFranceStephen Shaw NEGOTIATION
Emily WhobreyGermanyOnyama Limba NEGOTIATION
Jones VocelkaSpainIvan Magalhaes NEW
Isabel BowleyItalyXuxue Feng NEW
Wickens NestleAustraliaBernardo Dominic RENEWAL
Greenwood BologniaBrazilXuxue Feng PROPOSAL
Alejandro PerinRussiaBernardo Dominic QUALIFIED
Salvatore StockhamGermanyAmy Elsner NEW
Rodrigues CampainUnited KingdomXuxue Feng PROPOSAL
Claire TollnerSpainAsiya Javayant PROPOSAL
Juan WieserBrazilAnna Fali UNQUALIFIED
Cody SaylorsItalyIoni Bowcher PROPOSAL
Faith GillianCanadaIoni Bowcher RENEWAL
Octavia MaletBrazilIoni Bowcher UNQUALIFIED
Claire TollnerRussiaXuxue Feng NEGOTIATION
Juan WieserRussiaStephen Shaw NEGOTIATION
Kaitlin OstroskyArgentinaIoni Bowcher NEW
Jennifer AmigonFranceIvan Magalhaes QUALIFIED
Juan WieserIndiaStephen Shaw QUALIFIED
Smith GlickIndiaElwin Sharvill PROPOSAL
Ashley DoeUnited KingdomOnyama Limba QUALIFIED
Arvin AlbaresUnited KingdomBernardo Dominic RENEWAL
Wickens NestleJapanXuxue Feng QUALIFIED
Ricardo GauchoIndiaStephen Shaw NEGOTIATION
David DarakjyUnited KingdomOnyama Limba NEGOTIATION
Darci PoquetteJapanXuxue Feng RENEWAL
Munro FerenczArgentinaElwin Sharvill PROPOSAL
Smith GlickAustraliaOnyama Limba QUALIFIED
Chavez BriddickAustraliaIvan Magalhaes RENEWAL
Kaitlin OstroskyGermanyIvan Magalhaes UNQUALIFIED
Juan WieserUnited KingdomAnna Fali PROPOSAL
Darci PoquetteArgentinaAsiya Javayant QUALIFIED
Chavez BriddickSpainXuxue Feng QUALIFIED
Jones VocelkaRussiaStephen Shaw RENEWAL
Leja CaldareraIndiaAmy Elsner NEW
Ricardo GauchoItalyElwin Sharvill NEW
Leja CaldareraFranceXuxue Feng UNQUALIFIED
Mayumi KolmetzIndiaXuxue Feng NEW
Kadeem FlosiBrazilAsiya Javayant QUALIFIED
Deepesh ChuiJapanStephen Shaw UNQUALIFIED
Morrow RutaSpainIoni Bowcher PROPOSAL
Jeanfrancois VenereItalyAsiya Javayant NEW
Antonio CaudyItalyAnna Fali NEW
James ButtRussiaStephen Shaw PROPOSAL
James ButtGermanyBernardo Dominic RENEWAL
Francesco ShinkoJapanStephen Shaw RENEWAL
Aditya KuskoArgentinaStephen Shaw RENEWAL
Salvatore StockhamIndiaOnyama Limba NEGOTIATION
Claire TollnerBrazilAsiya Javayant UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Alejandro PerinArgentinaAnna Fali NEW
Aruna FigeroaUnited KingdomAnna Fali RENEWAL
Faith GillianRussiaIvan Magalhaes QUALIFIED
Francesco ShinkoJapanIoni Bowcher NEGOTIATION
Rodrigues CampainBrazilIoni Bowcher NEGOTIATION
Chavez BriddickCanadaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiUnited KingdomIvan Magalhaes RENEWAL
Jennifer AmigonRussiaElwin Sharvill PROPOSAL
Jennifer AmigonBrazilAsiya Javayant UNQUALIFIED
Jefferson SchemmerCanadaIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ricardo GauchoArgentina2026-05-08Morlong Associates NEGOTIATION80Amy Elsner
1001Murillo MaletGermany2026-05-12Morlong Associates PROPOSAL33Amy Elsner
1002Ashley DoeSpain2026-05-12Rangoni Of Florence UNQUALIFIED5Anna Fali
1003Alejandro PerinIndia2026-05-02Benton, John B Jr PROPOSAL83Amy Elsner
1004Mujtaba NickaSpain2026-05-11Dorl, James J Esq PROPOSAL74Elwin Sharvill
1005Mujtaba NickaFrance2026-05-10Dorl, James J Esq PROPOSAL59Elwin Sharvill
1006Adams MorascaItaly2026-05-15Chemel, James L Cpa RENEWAL51Asiya Javayant
1007Isabel BowleyIndia2026-05-04Morlong Associates UNQUALIFIED17Anna Fali
1008Munro FerenczGermany2026-05-09Benton, John B Jr RENEWAL64Amy Elsner
1009Deepesh ChuiBrazil2026-05-14Commercial Press QUALIFIED45Onyama Limba
1010Kaitlin OstroskyCanada2026-05-04Commercial Press UNQUALIFIED35Ivan Magalhaes
1011Ivar PaprockiArgentina2026-04-26Morlong Associates UNQUALIFIED6Ioni Bowcher
1012Kaitlin OstroskyBrazil2026-05-06Benton, John B Jr RENEWAL49Stephen Shaw
1013Maria MarrierIndia2026-05-05Chapman, Ross E Esq UNQUALIFIED38Elwin Sharvill
1014Clifford RimBrazil2026-04-30Dorl, James J Esq QUALIFIED27Xuxue Feng
1015Leja CaldareraBrazil2026-05-08Feiner Bros QUALIFIED77Anna Fali
1016Deepesh ChuiJapan2026-05-08Chemel, James L Cpa NEW2Ioni Bowcher
1017Ivar PaprockiCanada2026-05-13Rousseaux, Michael Esq UNQUALIFIED76Amy Elsner
1018Stacey MacleadItaly2026-05-13Feltz Printing Service PROPOSAL29Amy Elsner
1019Aika InouyeArgentina2026-05-10Chapman, Ross E Esq QUALIFIED3Ivan Magalhaes
1020Stacey MacleadAustralia2026-05-16Chemel, James L Cpa NEGOTIATION37Onyama Limba
1021Jefferson SchemmerRussia2026-04-30Morlong Associates RENEWAL52Onyama Limba
1022Izzy GarufiGermany2026-05-16Feiner Bros RENEWAL67Ivan Magalhaes
1023Emily WhobreyRussia2026-05-10Feiner Bros QUALIFIED77Bernardo Dominic
1024Juan WieserIndia2026-05-12Rousseaux, Michael Esq NEGOTIATION1Stephen Shaw
1025Chavez BriddickUnited Kingdom2026-05-14Chanay, Jeffrey A Esq PROPOSAL5Asiya Javayant
1026Aditya KuskoArgentina2026-05-21Commercial Press QUALIFIED42Anna Fali
1027Smith GlickGermany2026-04-24Feiner Bros PROPOSAL82Elwin Sharvill
1028Misaki RoysterIndia2026-05-22Benton, John B Jr QUALIFIED18Ivan Magalhaes
1029Morrow RutaSpain2026-04-23Chapman, Ross E Esq QUALIFIED5Amy Elsner
1030Clifford RimAustralia2026-05-13Feiner Bros UNQUALIFIED79Asiya Javayant
1031Murillo MaletJapan2026-05-05Chapman, Ross E Esq NEW54Amy Elsner
1032Izzy GarufiFrance2026-04-29Truhlar And Truhlar Attys UNQUALIFIED64Anna Fali
1033Claire TollnerGermany2026-05-02Chemel, James L Cpa QUALIFIED99Xuxue Feng
1034Jeanfrancois VenereSpain2026-05-06Dorl, James J Esq QUALIFIED50Anna Fali
1035Stacey MacleadAustralia2026-05-19Feiner Bros QUALIFIED16Elwin Sharvill
1036Adams MorascaBrazil2026-05-12Chapman, Ross E Esq NEW46Stephen Shaw
1037Leja CaldareraJapan2026-04-28Chapman, Ross E Esq QUALIFIED58Onyama Limba
1038Leja CaldareraAustralia2026-04-25Feltz Printing Service RENEWAL17Onyama Limba
1039Aika InouyeFrance2026-05-16Dorl, James J Esq UNQUALIFIED6Elwin Sharvill
1040Wickens NestleSpain2026-04-25King, Christopher A Esq QUALIFIED20Ioni Bowcher
1041Nicolas IturbideItaly2026-05-09King, Christopher A Esq UNQUALIFIED46Elwin Sharvill
1042Francesco ShinkoCanada2026-05-21Chapman, Ross E Esq UNQUALIFIED36Anna Fali
1043Leon OldroydGermany2026-04-27King, Christopher A Esq NEGOTIATION80Xuxue Feng
1044Aika InouyeFrance2026-05-22Feltz Printing Service NEGOTIATION95Amy Elsner
1045James ButtSpain2026-05-04Printing Dimensions PROPOSAL49Ioni Bowcher
1046Isabel BowleyBrazil2026-04-26Feiner Bros RENEWAL61Anna Fali
1047Greenwood BologniaAustralia2026-05-19Commercial Press QUALIFIED49Anna Fali
1048Sinclair WaycottItaly2026-04-30Morlong Associates NEW15Stephen Shaw
1049Antonio CaudyBrazil2026-04-26Feiner Bros NEW24Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoIndiaBernardo Dominic PROPOSAL
Aruna FigeroaGermanyIvan Magalhaes RENEWAL
Nicolas IturbideUnited KingdomAmy Elsner NEGOTIATION
Jefferson SchemmerFranceBernardo Dominic NEGOTIATION
Mujtaba NickaAustraliaBernardo Dominic PROPOSAL
Kaitlin OstroskyJapanElwin Sharvill NEGOTIATION
Antonio CaudyAustraliaBernardo Dominic NEGOTIATION
Octavia MaletCanadaOnyama Limba NEGOTIATION
Maisha RulapaughUnited KingdomStephen Shaw PROPOSAL
Arvin AlbaresSpainAsiya Javayant PROPOSAL
Misaki RoysterAustraliaAnna Fali PROPOSAL
Silvio SlusarskiGermanyStephen Shaw UNQUALIFIED
Silvio SlusarskiIndiaOnyama Limba NEGOTIATION
Misaki RoysterGermanyOnyama Limba RENEWAL
Alejandro PerinCanadaElwin Sharvill UNQUALIFIED
David DarakjyJapanXuxue Feng UNQUALIFIED
Munro FerenczBrazilOnyama Limba RENEWAL
Munro FerenczAustraliaAsiya Javayant PROPOSAL
Johnson SergiGermanyOnyama Limba NEGOTIATION
Juan WieserItalyIvan Magalhaes NEW
Nicolas IturbideSpainXuxue Feng RENEWAL
Jennifer AmigonAustraliaStephen Shaw QUALIFIED
Deepesh ChuiJapanAsiya Javayant QUALIFIED
Rodrigues CampainAustraliaXuxue Feng NEGOTIATION
James ButtCanadaBernardo Dominic NEGOTIATION
Jones VocelkaFranceIvan Magalhaes UNQUALIFIED
Munro FerenczAustraliaStephen Shaw PROPOSAL
Johnson SergiJapanStephen Shaw RENEWAL
Mujtaba NickaSpainStephen Shaw PROPOSAL
Izzy GarufiRussiaAmy Elsner NEGOTIATION
Arvin AlbaresCanadaStephen Shaw UNQUALIFIED
Tony FollerItalyIvan Magalhaes UNQUALIFIED
Sinclair WaycottSpainAsiya Javayant QUALIFIED
Julie StensethItalyAsiya Javayant RENEWAL
Maisha RulapaughGermanyIoni Bowcher PROPOSAL
Leja CaldareraFranceAsiya Javayant NEW
Adams MorascaGermanyOnyama Limba NEGOTIATION
Jones VocelkaAustraliaIvan Magalhaes QUALIFIED
Salvatore StockhamItalyAmy Elsner RENEWAL
Izzy GarufiGermanyXuxue Feng PROPOSAL
Chavez BriddickItalyXuxue Feng NEW
Ricardo GauchoFranceStephen Shaw RENEWAL
Clifford RimUnited KingdomXuxue Feng NEGOTIATION
David DarakjyIndiaBernardo Dominic PROPOSAL
Kadeem FlosiSpainAnna Fali UNQUALIFIED
Murillo MaletRussiaBernardo Dominic UNQUALIFIED
Johnson SergiFranceAmy Elsner PROPOSAL
Misaki RoysterIndiaOnyama Limba NEGOTIATION
Costa DilliardGermanyXuxue Feng NEW
Kadeem FlosiArgentinaXuxue Feng UNQUALIFIED
Frozen Columns
Name
Jennifer Amigon
Juan Wieser
Jennifer Amigon
Johnson Sergi
Jennifer Amigon
Maria Marrier
Aika Inouye
Adams Morasca
Greenwood Bolognia
Ashley Doe
Claire Tollner
Sinclair Waycott
Antonio Caudy
Deepesh Chui
Claire Tollner
Sinclair Waycott
Maisha Rulapaugh
Smith Glick
Wickens Nestle
Greenwood Bolognia
Mujtaba Nicka
Misaki Royster
Mayumi Kolmetz
Julie Stenseth
Ricardo Gaucho
Tony Foller
Clifford Rim
Kadeem Flosi
Alejandro Perin
Wickens Nestle
Faith Gillian
Jefferson Schemmer
Aruna Figeroa
Antonio Caudy
Morrow Ruta
Faith Gillian
Julie Stenseth
Ashley Doe
Jeanfrancois Venere
Greenwood Bolognia
Rodrigues Campain
Octavia Malet
James Butt
Alejandro Perin
Silvio Slusarski
Greenwood Bolognia
Salvatore Stockham
Wickens Nestle
Emily Whobrey
Izzy Garufi
IdCountryDate
1000United Kingdom2026-04-30
1001United Kingdom2026-05-05
1002Australia2026-05-22
1003Spain2026-05-03
1004Argentina2026-05-06
1005France2026-05-08
1006Spain2026-04-26
1007India2026-05-18
1008Spain2026-05-04
1009Argentina2026-05-18
1010Canada2026-05-22
1011Russia2026-05-08
1012Brazil2026-05-07
1013Japan2026-05-21
1014Italy2026-05-22
1015India2026-05-20
1016Spain2026-05-18
1017Brazil2026-05-16
1018Russia2026-05-02
1019Argentina2026-05-21
1020Italy2026-05-15
1021India2026-05-05
1022Brazil2026-04-29
1023Brazil2026-05-09
1024Brazil2026-05-22
1025Australia2026-04-27
1026Canada2026-04-28
1027Italy2026-05-06
1028Japan2026-04-30
1029Italy2026-05-14
1030Australia2026-05-12
1031Germany2026-04-23
1032India2026-05-08
1033Italy2026-04-27
1034Australia2026-05-22
1035United Kingdom2026-05-02
1036Spain2026-05-21
1037Spain2026-04-24
1038Germany2026-05-21
1039Brazil2026-05-16
1040India2026-05-16
1041France2026-05-20
1042Japan2026-04-25
1043Russia2026-04-25
1044Brazil2026-05-18
1045Spain2026-05-11
1046Spain2026-05-16
1047Spain2026-05-19
1048Russia2026-05-17
1049Japan2026-05-19

On-Demand Data

NameIdCountryDate
Misaki Royster1000Brazil2026-04-28
Leon Oldroyd1001United Kingdom2026-05-09
Jefferson Schemmer1002India2026-04-24
Leon Oldroyd1003Brazil2026-05-13
Tony Foller1004Germany2026-05-16
Aika Inouye1005Canada2026-05-02
Nicolas Iturbide1006Italy2026-05-07
Emily Whobrey1007Italy2026-04-29
Cody Saylors1008Italy2026-05-03
Juan Wieser1009Australia2026-04-26
Emily Whobrey1010Argentina2026-05-10
Rodrigues Campain1011Spain2026-04-30
Smith Glick1012Germany2026-05-16
Jefferson Schemmer1013India2026-05-16
Kadeem Flosi1014Italy2026-05-10
Greenwood Bolognia1015France2026-05-05
Ivar Paprocki1016Japan2026-04-27
Rodrigues Campain1017Canada2026-05-18
Nicolas Iturbide1018Japan2026-05-14
Alejandro Perin1019Brazil2026-05-12
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jennifer AmigonSpainBernardo Dominic NEW
Ashley DoeItalyIvan Magalhaes QUALIFIED
Jones VocelkaFranceAmy Elsner PROPOSAL
Wickens NestleGermanyAsiya Javayant QUALIFIED
Deepesh ChuiFranceBernardo Dominic QUALIFIED
Deepesh ChuiFranceAsiya Javayant PROPOSAL
Munro FerenczJapanElwin Sharvill NEW
Maisha RulapaughSpainBernardo Dominic NEGOTIATION
Adams MorascaJapanOnyama Limba NEGOTIATION
James ButtFranceStephen Shaw NEGOTIATION
Darci PoquetteSpainXuxue Feng UNQUALIFIED
Chavez BriddickJapanIoni Bowcher NEGOTIATION
Stacey MacleadBrazilAnna Fali RENEWAL
Darci PoquetteAustraliaOnyama Limba QUALIFIED
Jefferson SchemmerSpainIvan Magalhaes QUALIFIED
Isabel BowleyCanadaAmy Elsner NEGOTIATION
Sinclair WaycottGermanyStephen Shaw NEW
Jennifer AmigonRussiaAnna Fali PROPOSAL
Mujtaba NickaFranceAsiya Javayant NEGOTIATION
Adams MorascaItalyElwin Sharvill PROPOSAL
Misaki RoysterBrazilStephen Shaw NEGOTIATION
Mayumi KolmetzJapanAsiya Javayant NEGOTIATION
Arvin AlbaresArgentinaIvan Magalhaes PROPOSAL
Francesco ShinkoBrazilAmy Elsner PROPOSAL
Maisha RulapaughArgentinaStephen Shaw QUALIFIED
Misaki RoysterRussiaBernardo Dominic NEGOTIATION
Munro FerenczJapanIvan Magalhaes PROPOSAL
Kaitlin OstroskyRussiaXuxue Feng NEW
Julie StensethSpainOnyama Limba NEGOTIATION
Julie StensethIndiaAmy Elsner UNQUALIFIED
Juan WieserIndiaIoni Bowcher PROPOSAL
Munro FerenczGermanyIoni Bowcher NEW
Rodrigues CampainUnited KingdomAnna Fali NEGOTIATION
Clifford RimBrazilAnna Fali UNQUALIFIED
Arvin AlbaresAustraliaOnyama Limba NEW
Leja CaldareraCanadaIvan Magalhaes NEGOTIATION
Rodrigues CampainGermanyIvan Magalhaes NEW
Leja CaldareraItalyIvan Magalhaes PROPOSAL
Claire TollnerIndiaStephen Shaw RENEWAL
Smith GlickCanadaIoni Bowcher NEW

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