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
Kaitlin OstroskyBrazilXuxue Feng PROPOSAL
Kadeem FlosiGermanyOnyama Limba NEGOTIATION
Leja CaldareraSpainIvan Magalhaes QUALIFIED
Julie StensethRussiaBernardo Dominic NEW
Kaitlin OstroskyAustraliaAmy Elsner PROPOSAL
Aruna FigeroaAustraliaOnyama Limba NEW
Cody SaylorsSpainIoni Bowcher QUALIFIED
Aika InouyeGermanyAnna Fali NEW
Isabel BowleyAustraliaElwin Sharvill NEW
Costa DilliardGermanyAnna Fali QUALIFIED
Costa DilliardBrazilAmy Elsner NEW
Francesco ShinkoIndiaBernardo Dominic NEGOTIATION
Morrow RutaAustraliaIvan Magalhaes PROPOSAL
Aika InouyeFranceBernardo Dominic NEGOTIATION
Adams MorascaCanadaElwin Sharvill PROPOSAL
Julie StensethGermanyAmy Elsner RENEWAL
Alejandro PerinGermanyIoni Bowcher NEW
Francesco ShinkoCanadaBernardo Dominic UNQUALIFIED
Smith GlickItalyXuxue Feng UNQUALIFIED
Murillo MaletUnited KingdomBernardo Dominic RENEWAL
Johnson SergiIndiaIoni Bowcher NEW
Deepesh ChuiAustraliaAmy Elsner NEW
Jefferson SchemmerAustraliaOnyama Limba QUALIFIED
Salvatore StockhamGermanyStephen Shaw RENEWAL
Greenwood BologniaGermanyIoni Bowcher NEGOTIATION
Isabel BowleyUnited KingdomOnyama Limba PROPOSAL
Arvin AlbaresSpainXuxue Feng NEGOTIATION
David DarakjyFranceAnna Fali NEGOTIATION
Murillo MaletAustraliaAnna Fali PROPOSAL
Ashley DoeCanadaStephen Shaw PROPOSAL
Aruna FigeroaItalyAmy Elsner NEW
Emily WhobreyArgentinaOnyama Limba UNQUALIFIED
Ricardo GauchoAustraliaElwin Sharvill QUALIFIED
Kadeem FlosiAustraliaAsiya Javayant PROPOSAL
Claire TollnerFranceIvan Magalhaes QUALIFIED
Jennifer AmigonArgentinaStephen Shaw PROPOSAL
Aika InouyeFranceStephen Shaw UNQUALIFIED
Jefferson SchemmerItalyAmy Elsner UNQUALIFIED
Munro FerenczArgentinaAmy Elsner QUALIFIED
David DarakjyAustraliaAsiya Javayant NEGOTIATION
Aditya KuskoRussiaAmy Elsner PROPOSAL
Murillo MaletJapanStephen Shaw NEW
Jennifer AmigonAustraliaOnyama Limba NEW
Adams MorascaJapanIoni Bowcher PROPOSAL
Emily WhobreyUnited KingdomBernardo Dominic UNQUALIFIED
Maisha RulapaughCanadaIoni Bowcher QUALIFIED
Claire TollnerRussiaOnyama Limba UNQUALIFIED
Octavia MaletArgentinaAnna Fali UNQUALIFIED
Antonio CaudySpainElwin Sharvill NEGOTIATION
James ButtGermanyIvan Magalhaes UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Chavez BriddickGermanyOnyama Limba NEGOTIATION
Silvio SlusarskiFranceIoni Bowcher QUALIFIED
Alejandro PerinItalyAnna Fali PROPOSAL
Adams MorascaSpainIvan Magalhaes UNQUALIFIED
Nicolas IturbideRussiaAmy Elsner PROPOSAL
Arvin AlbaresRussiaAnna Fali UNQUALIFIED
Tony FollerFranceAsiya Javayant QUALIFIED
Emily WhobreyRussiaStephen Shaw UNQUALIFIED
Aditya KuskoArgentinaIoni Bowcher NEW
Antonio CaudySpainXuxue Feng NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Johnson SergiAustralia2025-09-30Printing Dimensions RENEWAL11Stephen Shaw
1001Kadeem FlosiGermany2025-10-09Chanay, Jeffrey A Esq RENEWAL53Amy Elsner
1002Silvio SlusarskiJapan2025-10-09Chanay, Jeffrey A Esq NEGOTIATION46Bernardo Dominic
1003Arvin AlbaresUnited Kingdom2025-09-27Rousseaux, Michael Esq NEGOTIATION17Anna Fali
1004Morrow RutaUnited Kingdom2025-10-01Benton, John B Jr RENEWAL57Bernardo Dominic
1005Darci PoquetteRussia2025-09-20King, Christopher A Esq NEGOTIATION41Xuxue Feng
1006Murillo MaletBrazil2025-09-25Truhlar And Truhlar Attys RENEWAL12Onyama Limba
1007Sinclair WaycottFrance2025-10-08Dorl, James J Esq NEW67Ivan Magalhaes
1008Maisha RulapaughCanada2025-10-11Rangoni Of Florence RENEWAL80Ioni Bowcher
1009Claire TollnerRussia2025-09-28Rangoni Of Florence NEW27Ivan Magalhaes
1010Costa DilliardArgentina2025-09-17Chemel, James L Cpa UNQUALIFIED28Xuxue Feng
1011Nicolas IturbideIndia2025-09-29Buckley Miller Wright QUALIFIED91Elwin Sharvill
1012Maisha RulapaughItaly2025-10-09Benton, John B Jr QUALIFIED95Ioni Bowcher
1013Smith GlickJapan2025-09-21Rousseaux, Michael Esq RENEWAL49Stephen Shaw
1014Aika InouyeArgentina2025-09-16Feltz Printing Service RENEWAL99Ivan Magalhaes
1015Mayumi KolmetzAustralia2025-09-24Feiner Bros UNQUALIFIED58Onyama Limba
1016David DarakjyIndia2025-10-12Chanay, Jeffrey A Esq NEGOTIATION73Ivan Magalhaes
1017Murillo MaletRussia2025-09-19Morlong Associates RENEWAL59Stephen Shaw
1018Arvin AlbaresSpain2025-09-21Benton, John B Jr NEW12Bernardo Dominic
1019Sinclair WaycottBrazil2025-09-14Chemel, James L Cpa QUALIFIED94Amy Elsner
1020Alejandro PerinFrance2025-09-25King, Christopher A Esq NEGOTIATION55Asiya Javayant
1021Ricardo GauchoArgentina2025-10-11Morlong Associates QUALIFIED12Ioni Bowcher
1022Emily WhobreyIndia2025-10-12Rousseaux, Michael Esq NEGOTIATION66Xuxue Feng
1023Costa DilliardUnited Kingdom2025-09-21Dorl, James J Esq RENEWAL86Asiya Javayant
1024Jefferson SchemmerUnited Kingdom2025-10-06Commercial Press PROPOSAL1Elwin Sharvill
1025Mayumi KolmetzBrazil2025-10-03Dorl, James J Esq QUALIFIED4Amy Elsner
1026Clifford RimIndia2025-09-29Rangoni Of Florence NEGOTIATION61Ioni Bowcher
1027Kaitlin OstroskyArgentina2025-09-21Rousseaux, Michael Esq NEW64Elwin Sharvill
1028Adams MorascaGermany2025-09-15Morlong Associates NEW69Ivan Magalhaes
1029Costa DilliardJapan2025-09-14Rangoni Of Florence PROPOSAL0Xuxue Feng
1030Murillo MaletIndia2025-09-15Truhlar And Truhlar Attys QUALIFIED79Stephen Shaw
1031Jefferson SchemmerGermany2025-09-19Morlong Associates NEGOTIATION46Amy Elsner
1032Ricardo GauchoSpain2025-09-14Rangoni Of Florence PROPOSAL36Asiya Javayant
1033Juan WieserJapan2025-09-27Benton, John B Jr RENEWAL67Stephen Shaw
1034Greenwood BologniaSpain2025-10-12Rousseaux, Michael Esq UNQUALIFIED64Elwin Sharvill
1035Misaki RoysterIndia2025-09-23Rangoni Of Florence PROPOSAL47Onyama Limba
1036Misaki RoysterGermany2025-09-21Rangoni Of Florence NEGOTIATION69Xuxue Feng
1037Isabel BowleyCanada2025-09-24Morlong Associates QUALIFIED17Onyama Limba
1038Stacey MacleadUnited Kingdom2025-09-16Chemel, James L Cpa PROPOSAL38Bernardo Dominic
1039Izzy GarufiFrance2025-10-12Benton, John B Jr QUALIFIED52Amy Elsner
1040Misaki RoysterItaly2025-10-06Morlong Associates PROPOSAL2Asiya Javayant
1041Aruna FigeroaSpain2025-10-07Truhlar And Truhlar Attys NEGOTIATION15Anna Fali
1042Smith GlickGermany2025-09-19Chapman, Ross E Esq PROPOSAL3Anna Fali
1043Jefferson SchemmerFrance2025-10-06Rousseaux, Michael Esq NEGOTIATION39Asiya Javayant
1044David DarakjyGermany2025-10-11Rangoni Of Florence PROPOSAL2Onyama Limba
1045Ricardo GauchoItaly2025-09-16Feltz Printing Service QUALIFIED26Elwin Sharvill
1046Aditya KuskoItaly2025-09-26Rangoni Of Florence NEGOTIATION51Elwin Sharvill
1047Misaki RoysterIndia2025-10-09Truhlar And Truhlar Attys RENEWAL91Stephen Shaw
1048Jones VocelkaIndia2025-10-08Chanay, Jeffrey A Esq QUALIFIED10Anna Fali
1049Maisha RulapaughJapan2025-09-14Morlong Associates NEW1Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Antonio CaudyArgentinaBernardo Dominic PROPOSAL
Jennifer AmigonGermanyAsiya Javayant RENEWAL
Jones VocelkaFranceStephen Shaw RENEWAL
Clifford RimBrazilAnna Fali NEGOTIATION
Tony FollerBrazilIoni Bowcher RENEWAL
Claire TollnerJapanStephen Shaw NEW
Johnson SergiGermanyBernardo Dominic QUALIFIED
Emily WhobreyUnited KingdomXuxue Feng PROPOSAL
Arvin AlbaresFranceIoni Bowcher NEGOTIATION
Leja CaldareraAustraliaElwin Sharvill NEGOTIATION
Costa DilliardSpainIvan Magalhaes UNQUALIFIED
Silvio SlusarskiGermanyXuxue Feng QUALIFIED
Misaki RoysterCanadaXuxue Feng QUALIFIED
Claire TollnerBrazilStephen Shaw PROPOSAL
Kaitlin OstroskyJapanStephen Shaw NEGOTIATION
Stacey MacleadItalyIvan Magalhaes QUALIFIED
Leon OldroydCanadaElwin Sharvill NEW
Stacey MacleadBrazilBernardo Dominic PROPOSAL
Munro FerenczItalyIoni Bowcher RENEWAL
Aditya KuskoBrazilAnna Fali QUALIFIED
Murillo MaletIndiaElwin Sharvill RENEWAL
Julie StensethUnited KingdomAmy Elsner QUALIFIED
Ricardo GauchoJapanIoni Bowcher UNQUALIFIED
Alejandro PerinUnited KingdomAsiya Javayant UNQUALIFIED
Ivar PaprockiArgentinaXuxue Feng PROPOSAL
Kadeem FlosiItalyBernardo Dominic QUALIFIED
Aruna FigeroaItalyStephen Shaw NEW
James ButtJapanElwin Sharvill PROPOSAL
James ButtGermanyAsiya Javayant RENEWAL
Faith GillianJapanIoni Bowcher NEW
Stacey MacleadRussiaIvan Magalhaes UNQUALIFIED
Julie StensethIndiaAsiya Javayant PROPOSAL
Clifford RimArgentinaElwin Sharvill NEW
Clifford RimUnited KingdomAsiya Javayant PROPOSAL
Jones VocelkaRussiaIvan Magalhaes UNQUALIFIED
Deepesh ChuiFranceElwin Sharvill NEGOTIATION
Isabel BowleyArgentinaElwin Sharvill QUALIFIED
Clifford RimIndiaAsiya Javayant UNQUALIFIED
Johnson SergiRussiaXuxue Feng QUALIFIED
Kadeem FlosiItalyIvan Magalhaes RENEWAL
Sinclair WaycottCanadaIvan Magalhaes NEW
Adams MorascaGermanyElwin Sharvill UNQUALIFIED
Mayumi KolmetzJapanAsiya Javayant PROPOSAL
Aditya KuskoAustraliaElwin Sharvill UNQUALIFIED
Darci PoquetteUnited KingdomIvan Magalhaes NEGOTIATION
Aika InouyeBrazilAmy Elsner NEGOTIATION
Jeanfrancois VenereGermanyStephen Shaw QUALIFIED
Chavez BriddickArgentinaAsiya Javayant RENEWAL
Leja CaldareraGermanyIoni Bowcher NEGOTIATION
Stacey MacleadArgentinaAnna Fali NEGOTIATION
Frozen Columns
Name
Antonio Caudy
Juan Wieser
Leon Oldroyd
Cody Saylors
Misaki Royster
Munro Ferencz
Costa Dilliard
Ivar Paprocki
Deepesh Chui
Emily Whobrey
Mujtaba Nicka
Alejandro Perin
Aruna Figeroa
Greenwood Bolognia
Tony Foller
Faith Gillian
Aika Inouye
Antonio Caudy
Mujtaba Nicka
Salvatore Stockham
Murillo Malet
Jones Vocelka
Juan Wieser
Salvatore Stockham
Jones Vocelka
Maisha Rulapaugh
Adams Morasca
Wickens Nestle
Misaki Royster
Jefferson Schemmer
Ashley Doe
Antonio Caudy
Izzy Garufi
Ricardo Gaucho
Aruna Figeroa
Leon Oldroyd
Greenwood Bolognia
Aika Inouye
Nicolas Iturbide
Clifford Rim
James Butt
Francesco Shinko
Morrow Ruta
Tony Foller
Chavez Briddick
Julie Stenseth
Maria Marrier
Morrow Ruta
Julie Stenseth
James Butt
IdCountryDate
1000Australia2025-09-23
1001Spain2025-10-12
1002Australia2025-10-07
1003Italy2025-10-11
1004Argentina2025-10-01
1005India2025-09-29
1006Spain2025-10-06
1007Germany2025-09-15
1008Germany2025-09-29
1009United Kingdom2025-09-16
1010Spain2025-09-30
1011Canada2025-10-06
1012United Kingdom2025-09-15
1013Japan2025-10-08
1014India2025-09-29
1015Russia2025-10-03
1016Australia2025-09-15
1017Australia2025-09-18
1018Argentina2025-10-08
1019India2025-10-08
1020France2025-10-09
1021Russia2025-10-05
1022France2025-10-03
1023Brazil2025-09-25
1024Russia2025-10-07
1025Argentina2025-09-26
1026Germany2025-10-02
1027Brazil2025-09-30
1028Japan2025-09-22
1029Italy2025-10-11
1030France2025-09-24
1031France2025-09-21
1032Argentina2025-09-30
1033Spain2025-09-18
1034India2025-10-01
1035Italy2025-10-04
1036France2025-10-08
1037Spain2025-10-02
1038Italy2025-09-24
1039Japan2025-10-11
1040Italy2025-09-14
1041Germany2025-09-19
1042Japan2025-09-26
1043Russia2025-09-18
1044India2025-09-26
1045Germany2025-10-01
1046Australia2025-09-28
1047France2025-09-21
1048Canada2025-09-21
1049Italy2025-09-20

On-Demand Data

NameIdCountryDate
David Darakjy1000Russia2025-09-28
Izzy Garufi1001France2025-09-16
Ivar Paprocki1002Australia2025-10-02
Octavia Malet1003Argentina2025-10-11
David Darakjy1004Germany2025-09-28
Julie Stenseth1005Japan2025-09-16
Wickens Nestle1006Germany2025-10-11
Clifford Rim1007Spain2025-10-02
Emily Whobrey1008India2025-10-08
Munro Ferencz1009Argentina2025-09-26
Nicolas Iturbide1010France2025-09-15
Jefferson Schemmer1011Germany2025-09-23
David Darakjy1012Germany2025-10-03
Julie Stenseth1013Argentina2025-10-09
Deepesh Chui1014Australia2025-10-11
Sinclair Waycott1015United Kingdom2025-10-05
Wickens Nestle1016Japan2025-09-20
Murillo Malet1017Spain2025-09-17
Cody Saylors1018Brazil2025-09-28
Ivar Paprocki1019Australia2025-10-12
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Wickens NestleIndiaXuxue Feng QUALIFIED
Arvin AlbaresArgentinaIvan Magalhaes RENEWAL
Chavez BriddickBrazilElwin Sharvill NEGOTIATION
Claire TollnerRussiaAsiya Javayant QUALIFIED
Juan WieserRussiaAnna Fali PROPOSAL
Clifford RimAustraliaAnna Fali UNQUALIFIED
Aruna FigeroaUnited KingdomAmy Elsner UNQUALIFIED
David DarakjyItalyAsiya Javayant PROPOSAL
Julie StensethGermanyStephen Shaw NEGOTIATION
Wickens NestleGermanyBernardo Dominic UNQUALIFIED
Isabel BowleyJapanElwin Sharvill NEW
Morrow RutaSpainAmy Elsner NEW
Sinclair WaycottBrazilStephen Shaw NEW
Aika InouyeFranceStephen Shaw UNQUALIFIED
Deepesh ChuiCanadaBernardo Dominic NEW
Maisha RulapaughBrazilAmy Elsner QUALIFIED
Aruna FigeroaSpainElwin Sharvill UNQUALIFIED
Munro FerenczIndiaIoni Bowcher NEGOTIATION
Jeanfrancois VenereFranceAnna Fali RENEWAL
Aruna FigeroaGermanyAnna Fali QUALIFIED
Jennifer AmigonSpainOnyama Limba RENEWAL
James ButtJapanOnyama Limba UNQUALIFIED
Antonio CaudyItalyAmy Elsner PROPOSAL
Sinclair WaycottJapanAsiya Javayant QUALIFIED
Smith GlickBrazilAmy Elsner PROPOSAL
Jennifer AmigonIndiaStephen Shaw UNQUALIFIED
Leon OldroydJapanStephen Shaw UNQUALIFIED
Darci PoquetteRussiaIvan Magalhaes UNQUALIFIED
Aika InouyeJapanElwin Sharvill NEW
Darci PoquetteFranceAnna Fali NEW
Emily WhobreyAustraliaOnyama Limba RENEWAL
Kadeem FlosiJapanIoni Bowcher NEGOTIATION
Ivar PaprockiGermanyIvan Magalhaes PROPOSAL
Morrow RutaCanadaXuxue Feng QUALIFIED
Munro FerenczAustraliaAsiya Javayant NEGOTIATION
Octavia MaletCanadaBernardo Dominic NEW
Tony FollerItalyXuxue Feng PROPOSAL
Jennifer AmigonAustraliaStephen Shaw RENEWAL
Ashley DoeAustraliaAmy Elsner RENEWAL
David DarakjyAustraliaStephen Shaw 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>