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
Leja CaldareraBrazilElwin Sharvill PROPOSAL
Alejandro PerinBrazilStephen Shaw NEGOTIATION
Nicolas IturbideJapanOnyama Limba PROPOSAL
Deepesh ChuiJapanXuxue Feng NEGOTIATION
Kadeem FlosiAustraliaElwin Sharvill NEW
Chavez BriddickItalyOnyama Limba NEW
Salvatore StockhamArgentinaAmy Elsner NEW
Maria MarrierCanadaOnyama Limba PROPOSAL
Tony FollerSpainXuxue Feng NEW
Salvatore StockhamIndiaBernardo Dominic UNQUALIFIED
Julie StensethItalyIoni Bowcher NEGOTIATION
Maria MarrierRussiaIvan Magalhaes NEGOTIATION
Jefferson SchemmerRussiaAnna Fali NEGOTIATION
Smith GlickFranceStephen Shaw PROPOSAL
James ButtAustraliaStephen Shaw RENEWAL
Mujtaba NickaSpainAnna Fali NEW
Deepesh ChuiCanadaElwin Sharvill QUALIFIED
Faith GillianUnited KingdomIvan Magalhaes UNQUALIFIED
Darci PoquetteIndiaAsiya Javayant NEW
Sinclair WaycottUnited KingdomIvan Magalhaes RENEWAL
Stacey MacleadIndiaElwin Sharvill QUALIFIED
Aruna FigeroaUnited KingdomStephen Shaw RENEWAL
Faith GillianJapanIoni Bowcher PROPOSAL
Octavia MaletItalyXuxue Feng PROPOSAL
Kaitlin OstroskyRussiaAmy Elsner NEGOTIATION
Isabel BowleyItalyBernardo Dominic UNQUALIFIED
Greenwood BologniaRussiaBernardo Dominic RENEWAL
Isabel BowleyUnited KingdomXuxue Feng PROPOSAL
Aditya KuskoArgentinaIoni Bowcher QUALIFIED
Stacey MacleadBrazilOnyama Limba PROPOSAL
Faith GillianArgentinaAsiya Javayant NEW
Rodrigues CampainItalyIvan Magalhaes NEW
Clifford RimJapanXuxue Feng PROPOSAL
Kaitlin OstroskySpainAmy Elsner NEGOTIATION
Arvin AlbaresUnited KingdomXuxue Feng NEGOTIATION
Aditya KuskoItalyBernardo Dominic PROPOSAL
Ashley DoeCanadaAsiya Javayant UNQUALIFIED
Maria MarrierIndiaOnyama Limba UNQUALIFIED
Leon OldroydBrazilStephen Shaw RENEWAL
Costa DilliardJapanAmy Elsner NEW
Francesco ShinkoBrazilXuxue Feng NEW
Sinclair WaycottIndiaIoni Bowcher QUALIFIED
Jeanfrancois VenereBrazilStephen Shaw QUALIFIED
Deepesh ChuiRussiaIvan Magalhaes QUALIFIED
Arvin AlbaresFranceAsiya Javayant UNQUALIFIED
Ivar PaprockiUnited KingdomStephen Shaw UNQUALIFIED
Costa DilliardGermanyAsiya Javayant NEGOTIATION
Stacey MacleadArgentinaAmy Elsner QUALIFIED
Mujtaba NickaIndiaIoni Bowcher PROPOSAL
Murillo MaletFranceXuxue Feng QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Deepesh ChuiFranceElwin Sharvill NEGOTIATION
Smith GlickCanadaIoni Bowcher RENEWAL
Claire TollnerRussiaStephen Shaw QUALIFIED
Juan WieserBrazilAsiya Javayant NEW
Jennifer AmigonUnited KingdomAsiya Javayant UNQUALIFIED
Morrow RutaArgentinaAmy Elsner UNQUALIFIED
Adams MorascaCanadaIoni Bowcher RENEWAL
Salvatore StockhamRussiaBernardo Dominic RENEWAL
Misaki RoysterCanadaOnyama Limba PROPOSAL
Adams MorascaAustraliaAsiya Javayant PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mayumi KolmetzSpain2026-06-03Commercial Press UNQUALIFIED11Bernardo Dominic
1001Morrow RutaFrance2026-05-14King, Christopher A Esq NEGOTIATION95Onyama Limba
1002Faith GillianFrance2026-05-19Dorl, James J Esq UNQUALIFIED82Anna Fali
1003Claire TollnerCanada2026-05-25Benton, John B Jr PROPOSAL2Asiya Javayant
1004Rodrigues CampainUnited Kingdom2026-05-10Dorl, James J Esq NEW79Xuxue Feng
1005Emily WhobreyAustralia2026-05-18Feiner Bros PROPOSAL78Ioni Bowcher
1006Kadeem FlosiRussia2026-05-10Morlong Associates UNQUALIFIED13Onyama Limba
1007David DarakjyCanada2026-06-02Buckley Miller Wright RENEWAL90Stephen Shaw
1008Mujtaba NickaSpain2026-05-05Commercial Press PROPOSAL17Elwin Sharvill
1009Ivar PaprockiGermany2026-05-07Feltz Printing Service QUALIFIED91Amy Elsner
1010Darci PoquetteUnited Kingdom2026-05-14Chapman, Ross E Esq UNQUALIFIED13Onyama Limba
1011Leja CaldareraAustralia2026-05-20Printing Dimensions NEGOTIATION17Asiya Javayant
1012Stacey MacleadRussia2026-05-26Rousseaux, Michael Esq QUALIFIED18Bernardo Dominic
1013Isabel BowleyFrance2026-06-03Benton, John B Jr UNQUALIFIED49Anna Fali
1014Leon OldroydAustralia2026-06-01Benton, John B Jr NEW18Xuxue Feng
1015Isabel BowleyCanada2026-05-06Feltz Printing Service NEW35Ioni Bowcher
1016Cody SaylorsIndia2026-06-03Dorl, James J Esq UNQUALIFIED38Onyama Limba
1017Misaki RoysterUnited Kingdom2026-05-07Chapman, Ross E Esq UNQUALIFIED18Onyama Limba
1018Alejandro PerinRussia2026-05-06Chapman, Ross E Esq NEW79Elwin Sharvill
1019Maria MarrierCanada2026-05-27Commercial Press NEW55Stephen Shaw
1020Munro FerenczAustralia2026-05-22Commercial Press QUALIFIED66Anna Fali
1021Jennifer AmigonFrance2026-05-07Chanay, Jeffrey A Esq RENEWAL35Anna Fali
1022Ivar PaprockiUnited Kingdom2026-05-09Feiner Bros NEGOTIATION81Ivan Magalhaes
1023Darci PoquetteFrance2026-05-22Rousseaux, Michael Esq UNQUALIFIED59Asiya Javayant
1024James ButtGermany2026-05-18Buckley Miller Wright RENEWAL38Asiya Javayant
1025Francesco ShinkoItaly2026-05-12Rangoni Of Florence NEW71Stephen Shaw
1026Sinclair WaycottArgentina2026-05-15Feiner Bros PROPOSAL80Stephen Shaw
1027Juan WieserIndia2026-05-29Buckley Miller Wright NEGOTIATION43Xuxue Feng
1028Smith GlickFrance2026-05-22King, Christopher A Esq PROPOSAL14Stephen Shaw
1029Wickens NestleArgentina2026-05-25Printing Dimensions NEGOTIATION82Ioni Bowcher
1030Wickens NestleAustralia2026-05-14Buckley Miller Wright PROPOSAL20Stephen Shaw
1031Chavez BriddickAustralia2026-05-12Commercial Press NEGOTIATION23Onyama Limba
1032Nicolas IturbideGermany2026-05-18Dorl, James J Esq RENEWAL59Asiya Javayant
1033Tony FollerFrance2026-05-17Commercial Press UNQUALIFIED49Anna Fali
1034Greenwood BologniaGermany2026-05-27Dorl, James J Esq RENEWAL2Ioni Bowcher
1035Arvin AlbaresItaly2026-05-14Buckley Miller Wright NEGOTIATION98Amy Elsner
1036Greenwood BologniaBrazil2026-05-26Chemel, James L Cpa NEGOTIATION45Bernardo Dominic
1037Tony FollerArgentina2026-05-11Chemel, James L Cpa RENEWAL70Ioni Bowcher
1038Juan WieserArgentina2026-05-30Chapman, Ross E Esq PROPOSAL99Amy Elsner
1039Mayumi KolmetzBrazil2026-05-23Dorl, James J Esq RENEWAL63Onyama Limba
1040Aruna FigeroaArgentina2026-05-28Commercial Press RENEWAL90Anna Fali
1041Isabel BowleyCanada2026-05-13Truhlar And Truhlar Attys UNQUALIFIED48Stephen Shaw
1042Juan WieserIndia2026-05-11Chanay, Jeffrey A Esq UNQUALIFIED46Anna Fali
1043David DarakjyUnited Kingdom2026-05-14King, Christopher A Esq NEGOTIATION28Elwin Sharvill
1044Alejandro PerinArgentina2026-05-06Feltz Printing Service NEW86Elwin Sharvill
1045Aditya KuskoUnited Kingdom2026-05-06Feltz Printing Service RENEWAL75Amy Elsner
1046Kadeem FlosiSpain2026-05-09Feltz Printing Service NEW25Xuxue Feng
1047Clifford RimArgentina2026-05-06Printing Dimensions QUALIFIED11Anna Fali
1048Sinclair WaycottSpain2026-05-31Morlong Associates NEW94Onyama Limba
1049Misaki RoysterSpain2026-05-17Feiner Bros PROPOSAL17Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Mujtaba NickaBrazilXuxue Feng NEW
Aruna FigeroaJapanIoni Bowcher PROPOSAL
Murillo MaletSpainXuxue Feng UNQUALIFIED
Rodrigues CampainGermanyElwin Sharvill RENEWAL
Rodrigues CampainBrazilXuxue Feng RENEWAL
Wickens NestleIndiaXuxue Feng RENEWAL
Smith GlickCanadaOnyama Limba PROPOSAL
Aditya KuskoArgentinaStephen Shaw RENEWAL
Jeanfrancois VenereUnited KingdomIoni Bowcher NEW
Sinclair WaycottAustraliaIvan Magalhaes RENEWAL
Arvin AlbaresItalyIoni Bowcher PROPOSAL
Silvio SlusarskiFranceOnyama Limba NEGOTIATION
Wickens NestleRussiaElwin Sharvill RENEWAL
Clifford RimUnited KingdomOnyama Limba RENEWAL
Wickens NestleFranceElwin Sharvill UNQUALIFIED
Maisha RulapaughRussiaOnyama Limba PROPOSAL
Mayumi KolmetzJapanIvan Magalhaes RENEWAL
Aruna FigeroaRussiaBernardo Dominic UNQUALIFIED
Ivar PaprockiGermanyAnna Fali NEW
Aruna FigeroaAustraliaAnna Fali RENEWAL
Julie StensethFranceAmy Elsner PROPOSAL
Morrow RutaCanadaStephen Shaw PROPOSAL
Emily WhobreyGermanyBernardo Dominic QUALIFIED
Aruna FigeroaArgentinaIoni Bowcher QUALIFIED
Maisha RulapaughItalyAnna Fali PROPOSAL
Jennifer AmigonAustraliaAmy Elsner NEW
Greenwood BologniaIndiaBernardo Dominic UNQUALIFIED
Rodrigues CampainIndiaOnyama Limba NEGOTIATION
Leja CaldareraUnited KingdomOnyama Limba RENEWAL
Adams MorascaGermanyStephen Shaw UNQUALIFIED
Smith GlickArgentinaElwin Sharvill UNQUALIFIED
Ivar PaprockiIndiaAmy Elsner UNQUALIFIED
Jennifer AmigonUnited KingdomOnyama Limba PROPOSAL
Claire TollnerIndiaBernardo Dominic RENEWAL
Munro FerenczAustraliaIvan Magalhaes NEW
James ButtJapanAnna Fali QUALIFIED
Emily WhobreyUnited KingdomAnna Fali PROPOSAL
Johnson SergiCanadaAnna Fali PROPOSAL
Kaitlin OstroskyUnited KingdomXuxue Feng UNQUALIFIED
Tony FollerBrazilIvan Magalhaes UNQUALIFIED
Maisha RulapaughCanadaAnna Fali QUALIFIED
Misaki RoysterSpainBernardo Dominic PROPOSAL
Juan WieserFranceOnyama Limba PROPOSAL
Emily WhobreyAustraliaAsiya Javayant NEW
Francesco ShinkoArgentinaStephen Shaw PROPOSAL
James ButtGermanyIoni Bowcher NEW
Smith GlickJapanAmy Elsner UNQUALIFIED
Kadeem FlosiJapanAmy Elsner RENEWAL
Leja CaldareraSpainAmy Elsner UNQUALIFIED
Smith GlickCanadaBernardo Dominic UNQUALIFIED
Frozen Columns
Name
Ricardo Gaucho
Julie Stenseth
Mayumi Kolmetz
Claire Tollner
Jones Vocelka
Darci Poquette
Stacey Maclead
Leja Caldarera
Leon Oldroyd
Jones Vocelka
Ricardo Gaucho
David Darakjy
Juan Wieser
Aditya Kusko
Aruna Figeroa
Wickens Nestle
Kadeem Flosi
Jones Vocelka
Sinclair Waycott
Cody Saylors
Jefferson Schemmer
Faith Gillian
Jefferson Schemmer
Claire Tollner
Maria Marrier
Kaitlin Ostrosky
Deepesh Chui
Silvio Slusarski
Adams Morasca
James Butt
Mujtaba Nicka
Murillo Malet
Clifford Rim
Chavez Briddick
Kadeem Flosi
Jeanfrancois Venere
Silvio Slusarski
Smith Glick
Emily Whobrey
Mayumi Kolmetz
Jennifer Amigon
Adams Morasca
Clifford Rim
Costa Dilliard
Antonio Caudy
Chavez Briddick
Nicolas Iturbide
David Darakjy
Mayumi Kolmetz
Wickens Nestle
IdCountryDate
1000Russia2026-05-05
1001Canada2026-05-31
1002Argentina2026-05-16
1003Argentina2026-05-12
1004Russia2026-05-15
1005Australia2026-05-11
1006Italy2026-05-18
1007United Kingdom2026-05-31
1008Spain2026-05-05
1009Argentina2026-06-01
1010Germany2026-05-22
1011Brazil2026-05-23
1012France2026-05-23
1013Canada2026-05-19
1014France2026-05-28
1015France2026-06-01
1016Spain2026-05-19
1017Spain2026-06-01
1018Brazil2026-05-17
1019Spain2026-05-21
1020United Kingdom2026-05-31
1021Brazil2026-06-03
1022Canada2026-05-07
1023Japan2026-06-02
1024India2026-05-27
1025United Kingdom2026-05-05
1026Germany2026-05-13
1027Japan2026-05-27
1028Germany2026-05-16
1029United Kingdom2026-05-16
1030India2026-05-31
1031Canada2026-05-11
1032India2026-05-24
1033Spain2026-05-24
1034Brazil2026-05-27
1035Brazil2026-05-14
1036Spain2026-05-14
1037Spain2026-05-19
1038Brazil2026-05-08
1039Australia2026-05-30
1040India2026-05-18
1041Brazil2026-05-23
1042France2026-05-06
1043France2026-05-18
1044Australia2026-05-25
1045Canada2026-05-15
1046Germany2026-05-07
1047United Kingdom2026-05-23
1048Germany2026-05-28
1049Spain2026-05-24

On-Demand Data

NameIdCountryDate
Munro Ferencz1000Spain2026-05-20
Jefferson Schemmer1001Russia2026-05-20
Tony Foller1002Germany2026-05-14
Salvatore Stockham1003Japan2026-05-05
David Darakjy1004France2026-05-29
Rodrigues Campain1005Spain2026-05-05
Murillo Malet1006United Kingdom2026-05-21
Clifford Rim1007Australia2026-05-13
Tony Foller1008United Kingdom2026-05-06
Cody Saylors1009Argentina2026-06-01
Octavia Malet1010Argentina2026-05-31
Mujtaba Nicka1011Italy2026-05-23
Jeanfrancois Venere1012Russia2026-06-01
Isabel Bowley1013Canada2026-05-22
Wickens Nestle1014Argentina2026-05-22
Tony Foller1015Germany2026-05-26
Faith Gillian1016Italy2026-05-24
Jeanfrancois Venere1017Argentina2026-05-24
Leja Caldarera1018Russia2026-05-30
Faith Gillian1019Italy2026-05-09
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jennifer AmigonItalyXuxue Feng PROPOSAL
Isabel BowleyAustraliaIoni Bowcher QUALIFIED
Julie StensethAustraliaXuxue Feng NEGOTIATION
Arvin AlbaresAustraliaElwin Sharvill NEW
Adams MorascaRussiaElwin Sharvill PROPOSAL
Arvin AlbaresSpainBernardo Dominic QUALIFIED
Emily WhobreyItalyAsiya Javayant UNQUALIFIED
James ButtFranceBernardo Dominic RENEWAL
Costa DilliardBrazilIvan Magalhaes PROPOSAL
Leon OldroydArgentinaAmy Elsner RENEWAL
Cody SaylorsJapanOnyama Limba QUALIFIED
Aika InouyeUnited KingdomBernardo Dominic QUALIFIED
Ashley DoeArgentinaElwin Sharvill QUALIFIED
Maisha RulapaughIndiaStephen Shaw NEGOTIATION
Johnson SergiCanadaAnna Fali NEW
Francesco ShinkoJapanAsiya Javayant UNQUALIFIED
Maisha RulapaughSpainXuxue Feng RENEWAL
Darci PoquetteRussiaAsiya Javayant NEW
Maria MarrierItalyStephen Shaw RENEWAL
Sinclair WaycottAustraliaAsiya Javayant QUALIFIED
Jennifer AmigonGermanyIoni Bowcher UNQUALIFIED
Octavia MaletAustraliaElwin Sharvill PROPOSAL
Arvin AlbaresIndiaAnna Fali QUALIFIED
Aditya KuskoBrazilBernardo Dominic NEGOTIATION
Costa DilliardUnited KingdomIvan Magalhaes RENEWAL
Ashley DoeUnited KingdomAnna Fali NEGOTIATION
Jeanfrancois VenereFranceAnna Fali NEW
Leja CaldareraArgentinaXuxue Feng NEW
Deepesh ChuiAustraliaElwin Sharvill QUALIFIED
Ricardo GauchoCanadaElwin Sharvill NEGOTIATION
Deepesh ChuiUnited KingdomBernardo Dominic QUALIFIED
Jones VocelkaUnited KingdomOnyama Limba PROPOSAL
Maria MarrierJapanStephen Shaw QUALIFIED
Aika InouyeGermanyStephen Shaw NEW
Clifford RimIndiaAsiya Javayant QUALIFIED
Kadeem FlosiItalyElwin Sharvill NEGOTIATION
Leon OldroydItalyAnna Fali NEW
Aruna FigeroaSpainAmy Elsner NEGOTIATION
Maria MarrierFranceAsiya Javayant UNQUALIFIED
Aika InouyeIndiaIvan Magalhaes 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>