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
Francesco ShinkoCanadaBernardo Dominic NEGOTIATION
Faith GillianArgentinaOnyama Limba PROPOSAL
Antonio CaudyCanadaAnna Fali NEW
Maisha RulapaughArgentinaXuxue Feng PROPOSAL
Arvin AlbaresArgentinaAsiya Javayant NEGOTIATION
Jeanfrancois VenereJapanBernardo Dominic RENEWAL
Julie StensethFranceIoni Bowcher QUALIFIED
Misaki RoysterCanadaBernardo Dominic UNQUALIFIED
Rodrigues CampainGermanyStephen Shaw UNQUALIFIED
Misaki RoysterBrazilBernardo Dominic UNQUALIFIED
Ricardo GauchoSpainElwin Sharvill RENEWAL
Wickens NestleIndiaStephen Shaw NEGOTIATION
Darci PoquetteArgentinaElwin Sharvill QUALIFIED
David DarakjyRussiaOnyama Limba QUALIFIED
Antonio CaudyItalyStephen Shaw NEW
Faith GillianJapanAsiya Javayant NEW
Alejandro PerinUnited KingdomAsiya Javayant NEGOTIATION
Clifford RimAustraliaStephen Shaw QUALIFIED
Johnson SergiCanadaElwin Sharvill QUALIFIED
Antonio CaudyIndiaOnyama Limba UNQUALIFIED
Claire TollnerItalyAmy Elsner PROPOSAL
Emily WhobreyFranceIvan Magalhaes PROPOSAL
Mayumi KolmetzSpainBernardo Dominic NEGOTIATION
Jefferson SchemmerBrazilAsiya Javayant RENEWAL
David DarakjyCanadaIvan Magalhaes PROPOSAL
Clifford RimSpainOnyama Limba NEGOTIATION
Aika InouyeSpainStephen Shaw RENEWAL
Tony FollerJapanBernardo Dominic UNQUALIFIED
Juan WieserItalyAnna Fali RENEWAL
Ivar PaprockiBrazilStephen Shaw PROPOSAL
James ButtRussiaXuxue Feng NEGOTIATION
Alejandro PerinFranceOnyama Limba RENEWAL
Sinclair WaycottGermanyIoni Bowcher UNQUALIFIED
Darci PoquetteArgentinaAnna Fali UNQUALIFIED
Silvio SlusarskiJapanAmy Elsner RENEWAL
Stacey MacleadIndiaElwin Sharvill NEGOTIATION
Smith GlickUnited KingdomIvan Magalhaes UNQUALIFIED
Clifford RimItalyElwin Sharvill RENEWAL
Kadeem FlosiGermanyAnna Fali NEW
Tony FollerItalyAmy Elsner RENEWAL
Adams MorascaUnited KingdomAmy Elsner QUALIFIED
Salvatore StockhamAustraliaAnna Fali UNQUALIFIED
Octavia MaletGermanyAsiya Javayant UNQUALIFIED
Julie StensethAustraliaIvan Magalhaes RENEWAL
David DarakjyCanadaOnyama Limba RENEWAL
Julie StensethGermanyBernardo Dominic NEW
Costa DilliardRussiaElwin Sharvill NEGOTIATION
Leja CaldareraIndiaBernardo Dominic PROPOSAL
Mayumi KolmetzFranceIvan Magalhaes QUALIFIED
Silvio SlusarskiItalyBernardo Dominic NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Costa DilliardSpainIoni Bowcher NEGOTIATION
Munro FerenczIndiaStephen Shaw NEGOTIATION
Chavez BriddickCanadaOnyama Limba NEW
Jefferson SchemmerIndiaElwin Sharvill UNQUALIFIED
Emily WhobreyArgentinaIvan Magalhaes NEW
Octavia MaletItalyOnyama Limba NEGOTIATION
Morrow RutaFranceXuxue Feng UNQUALIFIED
Ivar PaprockiJapanBernardo Dominic NEW
Clifford RimIndiaIoni Bowcher UNQUALIFIED
Darci PoquetteRussiaAmy Elsner UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickArgentina2025-06-06Benton, John B Jr NEW30Asiya Javayant
1001Aika InouyeIndia2025-06-25Feltz Printing Service NEGOTIATION11Ivan Magalhaes
1002Salvatore StockhamBrazil2025-06-11Feltz Printing Service NEW68Ioni Bowcher
1003Ashley DoeRussia2025-06-12Feiner Bros UNQUALIFIED14Ivan Magalhaes
1004Deepesh ChuiJapan2025-06-24Rangoni Of Florence RENEWAL26Amy Elsner
1005Mayumi KolmetzFrance2025-06-01Feiner Bros UNQUALIFIED37Elwin Sharvill
1006Smith GlickIndia2025-06-28Chanay, Jeffrey A Esq PROPOSAL22Stephen Shaw
1007Murillo MaletSpain2025-06-26Truhlar And Truhlar Attys NEGOTIATION22Anna Fali
1008Deepesh ChuiSpain2025-06-10Dorl, James J Esq NEGOTIATION51Xuxue Feng
1009Greenwood BologniaArgentina2025-06-21Chapman, Ross E Esq NEW81Elwin Sharvill
1010Silvio SlusarskiGermany2025-06-30Feiner Bros NEGOTIATION93Onyama Limba
1011Darci PoquetteItaly2025-06-05Dorl, James J Esq RENEWAL80Xuxue Feng
1012Stacey MacleadArgentina2025-06-18Morlong Associates NEGOTIATION5Ivan Magalhaes
1013Emily WhobreyAustralia2025-06-05Rousseaux, Michael Esq RENEWAL98Bernardo Dominic
1014Maria MarrierFrance2025-06-24Chemel, James L Cpa QUALIFIED48Amy Elsner
1015Wickens NestleAustralia2025-06-13Printing Dimensions UNQUALIFIED42Asiya Javayant
1016Darci PoquetteAustralia2025-06-02Morlong Associates PROPOSAL0Stephen Shaw
1017Antonio CaudyJapan2025-06-08Feiner Bros PROPOSAL0Xuxue Feng
1018Juan WieserArgentina2025-06-09Chapman, Ross E Esq NEGOTIATION29Anna Fali
1019Leja CaldareraFrance2025-06-02Benton, John B Jr QUALIFIED37Ivan Magalhaes
1020Munro FerenczSpain2025-06-06Chanay, Jeffrey A Esq UNQUALIFIED55Anna Fali
1021James ButtSpain2025-06-26Truhlar And Truhlar Attys RENEWAL9Ivan Magalhaes
1022Claire TollnerGermany2025-06-15Printing Dimensions PROPOSAL29Onyama Limba
1023Francesco ShinkoRussia2025-06-15Rousseaux, Michael Esq RENEWAL62Anna Fali
1024Aika InouyeIndia2025-06-11Chanay, Jeffrey A Esq RENEWAL24Ivan Magalhaes
1025Tony FollerJapan2025-06-16Feltz Printing Service QUALIFIED59Onyama Limba
1026Sinclair WaycottCanada2025-06-12Rousseaux, Michael Esq NEW37Xuxue Feng
1027Jefferson SchemmerIndia2025-06-18Truhlar And Truhlar Attys NEW78Onyama Limba
1028Greenwood BologniaJapan2025-06-25Chanay, Jeffrey A Esq QUALIFIED17Bernardo Dominic
1029Maria MarrierFrance2025-06-02Benton, John B Jr NEGOTIATION67Amy Elsner
1030Munro FerenczGermany2025-06-04Rousseaux, Michael Esq UNQUALIFIED3Bernardo Dominic
1031Stacey MacleadBrazil2025-06-19Dorl, James J Esq RENEWAL3Stephen Shaw
1032Francesco ShinkoArgentina2025-06-30Rousseaux, Michael Esq NEW4Elwin Sharvill
1033Rodrigues CampainSpain2025-06-30Chapman, Ross E Esq NEW32Xuxue Feng
1034Cody SaylorsIndia2025-06-25Benton, John B Jr QUALIFIED32Ioni Bowcher
1035Chavez BriddickJapan2025-06-10Printing Dimensions NEGOTIATION36Elwin Sharvill
1036Jefferson SchemmerCanada2025-06-28Benton, John B Jr PROPOSAL54Stephen Shaw
1037Jennifer AmigonAustralia2025-06-07Printing Dimensions RENEWAL72Onyama Limba
1038Costa DilliardItaly2025-06-16Printing Dimensions QUALIFIED92Elwin Sharvill
1039Kaitlin OstroskyGermany2025-06-19Commercial Press QUALIFIED44Asiya Javayant
1040Jefferson SchemmerItaly2025-06-18Chemel, James L Cpa QUALIFIED69Ioni Bowcher
1041Salvatore StockhamGermany2025-06-30Chapman, Ross E Esq QUALIFIED88Asiya Javayant
1042Aditya KuskoCanada2025-06-13Dorl, James J Esq NEGOTIATION20Onyama Limba
1043Izzy GarufiGermany2025-06-10Truhlar And Truhlar Attys PROPOSAL77Bernardo Dominic
1044Munro FerenczCanada2025-06-27Feiner Bros NEGOTIATION1Anna Fali
1045Emily WhobreyArgentina2025-06-25Dorl, James J Esq NEGOTIATION2Asiya Javayant
1046Aditya KuskoGermany2025-06-04Chemel, James L Cpa PROPOSAL27Elwin Sharvill
1047Izzy GarufiItaly2025-06-05Commercial Press UNQUALIFIED25Asiya Javayant
1048Jennifer AmigonIndia2025-06-12Chanay, Jeffrey A Esq NEW27Asiya Javayant
1049Mayumi KolmetzCanada2025-06-05Chemel, James L Cpa PROPOSAL73Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Aika InouyeArgentinaBernardo Dominic PROPOSAL
Tony FollerFranceAsiya Javayant NEW
Tony FollerUnited KingdomAmy Elsner PROPOSAL
Tony FollerIndiaIvan Magalhaes QUALIFIED
Claire TollnerGermanyAsiya Javayant RENEWAL
Cody SaylorsItalyIoni Bowcher PROPOSAL
Aruna FigeroaGermanyElwin Sharvill RENEWAL
Emily WhobreyAustraliaIvan Magalhaes UNQUALIFIED
Julie StensethRussiaAnna Fali QUALIFIED
Emily WhobreyJapanBernardo Dominic RENEWAL
Clifford RimBrazilStephen Shaw NEW
Leja CaldareraCanadaAsiya Javayant UNQUALIFIED
Jennifer AmigonUnited KingdomIoni Bowcher PROPOSAL
Leja CaldareraJapanBernardo Dominic PROPOSAL
Juan WieserBrazilOnyama Limba RENEWAL
Arvin AlbaresJapanXuxue Feng RENEWAL
Octavia MaletSpainBernardo Dominic PROPOSAL
Jones VocelkaFranceAsiya Javayant UNQUALIFIED
Faith GillianCanadaBernardo Dominic NEGOTIATION
Kaitlin OstroskyJapanXuxue Feng UNQUALIFIED
Maisha RulapaughIndiaBernardo Dominic PROPOSAL
Sinclair WaycottUnited KingdomAmy Elsner PROPOSAL
Munro FerenczJapanElwin Sharvill RENEWAL
Sinclair WaycottBrazilAsiya Javayant NEGOTIATION
Clifford RimUnited KingdomXuxue Feng NEW
Aruna FigeroaRussiaXuxue Feng UNQUALIFIED
Mujtaba NickaItalyElwin Sharvill RENEWAL
Smith GlickRussiaIoni Bowcher NEW
Octavia MaletAustraliaAmy Elsner RENEWAL
Alejandro PerinUnited KingdomIvan Magalhaes QUALIFIED
Aika InouyeArgentinaElwin Sharvill UNQUALIFIED
Jennifer AmigonAustraliaIvan Magalhaes PROPOSAL
Kadeem FlosiFranceOnyama Limba QUALIFIED
Salvatore StockhamBrazilBernardo Dominic NEGOTIATION
Chavez BriddickIndiaAmy Elsner RENEWAL
Maria MarrierGermanyXuxue Feng QUALIFIED
Johnson SergiCanadaAnna Fali PROPOSAL
Isabel BowleyJapanXuxue Feng NEW
Faith GillianIndiaAmy Elsner QUALIFIED
David DarakjyItalyIoni Bowcher UNQUALIFIED
Leja CaldareraJapanAmy Elsner NEW
Isabel BowleyJapanAsiya Javayant PROPOSAL
Costa DilliardIndiaStephen Shaw NEW
Faith GillianCanadaIvan Magalhaes QUALIFIED
Antonio CaudyAustraliaXuxue Feng QUALIFIED
Octavia MaletIndiaAsiya Javayant NEW
Maisha RulapaughCanadaAmy Elsner PROPOSAL
Clifford RimSpainStephen Shaw UNQUALIFIED
Jefferson SchemmerJapanAsiya Javayant RENEWAL
Sinclair WaycottGermanyElwin Sharvill NEGOTIATION
Frozen Columns
Name
Darci Poquette
Faith Gillian
David Darakjy
Chavez Briddick
Nicolas Iturbide
Maria Marrier
Darci Poquette
Antonio Caudy
Arvin Albares
Alejandro Perin
Leon Oldroyd
Jeanfrancois Venere
Wickens Nestle
Mujtaba Nicka
Kadeem Flosi
Julie Stenseth
Costa Dilliard
Cody Saylors
Jones Vocelka
Jefferson Schemmer
Jones Vocelka
Julie Stenseth
Mayumi Kolmetz
Maisha Rulapaugh
Murillo Malet
Maisha Rulapaugh
Smith Glick
Julie Stenseth
Johnson Sergi
Faith Gillian
Ashley Doe
Morrow Ruta
Leon Oldroyd
Aditya Kusko
Jennifer Amigon
Munro Ferencz
Clifford Rim
Darci Poquette
Mayumi Kolmetz
Wickens Nestle
Claire Tollner
Leja Caldarera
Juan Wieser
Cody Saylors
Misaki Royster
Mujtaba Nicka
Ivar Paprocki
Kadeem Flosi
Costa Dilliard
Francesco Shinko
IdCountryDate
1000India2025-06-16
1001Spain2025-06-16
1002Australia2025-06-04
1003United Kingdom2025-06-15
1004France2025-06-24
1005India2025-06-20
1006Spain2025-06-11
1007Spain2025-06-21
1008Argentina2025-06-10
1009Canada2025-06-21
1010Brazil2025-06-30
1011Canada2025-06-23
1012India2025-06-04
1013United Kingdom2025-06-06
1014United Kingdom2025-06-01
1015Canada2025-06-26
1016Spain2025-06-04
1017India2025-06-15
1018France2025-06-02
1019Argentina2025-06-24
1020Canada2025-06-13
1021Canada2025-06-18
1022Australia2025-06-04
1023Brazil2025-06-18
1024India2025-06-08
1025India2025-06-03
1026United Kingdom2025-06-15
1027Germany2025-06-29
1028Australia2025-06-07
1029Italy2025-06-11
1030Brazil2025-06-05
1031Brazil2025-06-22
1032Germany2025-06-01
1033Canada2025-06-23
1034Brazil2025-06-10
1035Japan2025-06-04
1036France2025-06-22
1037France2025-06-24
1038Germany2025-06-27
1039Japan2025-06-12
1040Canada2025-06-14
1041Argentina2025-06-13
1042Brazil2025-06-03
1043Russia2025-06-20
1044Germany2025-06-16
1045Argentina2025-06-27
1046India2025-06-09
1047Brazil2025-06-19
1048Japan2025-06-01
1049United Kingdom2025-06-02

On-Demand Data

NameIdCountryDate
Adams Morasca1000India2025-06-15
Deepesh Chui1001Argentina2025-06-30
Chavez Briddick1002Italy2025-06-26
Jefferson Schemmer1003Australia2025-06-02
Faith Gillian1004France2025-06-13
Alejandro Perin1005United Kingdom2025-06-29
Francesco Shinko1006Spain2025-06-30
Ivar Paprocki1007Russia2025-06-24
Silvio Slusarski1008Canada2025-06-25
Emily Whobrey1009France2025-06-27
Stacey Maclead1010United Kingdom2025-06-25
Aika Inouye1011India2025-06-18
Kaitlin Ostrosky1012Brazil2025-06-09
Kadeem Flosi1013Germany2025-06-30
Costa Dilliard1014Japan2025-06-28
Tony Foller1015Argentina2025-06-02
Alejandro Perin1016Argentina2025-06-05
Julie Stenseth1017France2025-06-03
Francesco Shinko1018Russia2025-06-27
Juan Wieser1019Japan2025-06-02
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jefferson SchemmerArgentinaBernardo Dominic PROPOSAL
Murillo MaletJapanStephen Shaw PROPOSAL
Costa DilliardGermanyIvan Magalhaes NEW
Aruna FigeroaBrazilIvan Magalhaes PROPOSAL
Julie StensethUnited KingdomAsiya Javayant NEGOTIATION
Jones VocelkaRussiaAsiya Javayant NEW
Sinclair WaycottGermanyElwin Sharvill QUALIFIED
Emily WhobreyItalyIoni Bowcher QUALIFIED
James ButtBrazilIoni Bowcher NEGOTIATION
Tony FollerAustraliaOnyama Limba NEGOTIATION
Ivar PaprockiIndiaAmy Elsner RENEWAL
Mayumi KolmetzUnited KingdomBernardo Dominic RENEWAL
Alejandro PerinItalyAmy Elsner NEW
Julie StensethFranceAmy Elsner NEGOTIATION
Cody SaylorsItalyAnna Fali NEW
Salvatore StockhamJapanAmy Elsner QUALIFIED
Aruna FigeroaRussiaOnyama Limba UNQUALIFIED
Mujtaba NickaCanadaOnyama Limba NEW
Silvio SlusarskiItalyAnna Fali NEW
Isabel BowleyArgentinaOnyama Limba PROPOSAL
Claire TollnerGermanyOnyama Limba PROPOSAL
Aruna FigeroaGermanyAsiya Javayant QUALIFIED
Claire TollnerRussiaAsiya Javayant NEW
Rodrigues CampainGermanyAmy Elsner NEW
Alejandro PerinIndiaIoni Bowcher NEW
Murillo MaletUnited KingdomXuxue Feng NEGOTIATION
Morrow RutaAustraliaStephen Shaw QUALIFIED
Antonio CaudyGermanyStephen Shaw QUALIFIED
Greenwood BologniaArgentinaAsiya Javayant UNQUALIFIED
Morrow RutaAustraliaIvan Magalhaes RENEWAL
James ButtAustraliaAsiya Javayant RENEWAL
Johnson SergiSpainIvan Magalhaes NEW
Antonio CaudyRussiaStephen Shaw RENEWAL
Maria MarrierItalyAsiya Javayant QUALIFIED
Aruna FigeroaFranceIoni Bowcher NEGOTIATION
Faith GillianItalyAsiya Javayant UNQUALIFIED
Smith GlickAustraliaAmy Elsner RENEWAL
Francesco ShinkoItalyStephen Shaw RENEWAL
Deepesh ChuiJapanBernardo Dominic PROPOSAL
James ButtUnited KingdomXuxue Feng 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>