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 NestleRussiaBernardo Dominic RENEWAL
Munro FerenczCanadaAsiya Javayant UNQUALIFIED
Rodrigues CampainJapanOnyama Limba UNQUALIFIED
Deepesh ChuiAustraliaElwin Sharvill NEW
Emily WhobreyGermanyXuxue Feng RENEWAL
Deepesh ChuiGermanyAmy Elsner PROPOSAL
Greenwood BologniaIndiaAnna Fali UNQUALIFIED
David DarakjyJapanIvan Magalhaes RENEWAL
David DarakjyFranceXuxue Feng NEW
Stacey MacleadRussiaAmy Elsner PROPOSAL
Greenwood BologniaItalyXuxue Feng NEW
Stacey MacleadUnited KingdomBernardo Dominic UNQUALIFIED
Ivar PaprockiRussiaIvan Magalhaes NEGOTIATION
Johnson SergiIndiaAsiya Javayant PROPOSAL
Leja CaldareraItalyBernardo Dominic PROPOSAL
Aika InouyeBrazilIvan Magalhaes NEW
Johnson SergiSpainIvan Magalhaes NEW
Salvatore StockhamGermanyElwin Sharvill RENEWAL
James ButtArgentinaElwin Sharvill UNQUALIFIED
Ivar PaprockiRussiaElwin Sharvill RENEWAL
Leja CaldareraCanadaStephen Shaw QUALIFIED
Johnson SergiGermanyBernardo Dominic NEW
Octavia MaletArgentinaAnna Fali NEGOTIATION
Izzy GarufiFranceAmy Elsner NEGOTIATION
Aruna FigeroaSpainAmy Elsner RENEWAL
Leon OldroydJapanStephen Shaw QUALIFIED
Octavia MaletGermanyAmy Elsner RENEWAL
Leja CaldareraUnited KingdomXuxue Feng NEW
Mujtaba NickaCanadaStephen Shaw UNQUALIFIED
Morrow RutaCanadaStephen Shaw RENEWAL
Mayumi KolmetzIndiaStephen Shaw NEW
Misaki RoysterItalyAsiya Javayant NEW
Clifford RimItalyAnna Fali QUALIFIED
Francesco ShinkoJapanBernardo Dominic NEW
Aruna FigeroaGermanyAnna Fali NEGOTIATION
Alejandro PerinJapanIoni Bowcher NEGOTIATION
Ricardo GauchoCanadaAmy Elsner PROPOSAL
Aditya KuskoItalyIoni Bowcher RENEWAL
Clifford RimItalyElwin Sharvill RENEWAL
Maisha RulapaughItalyStephen Shaw PROPOSAL
Stacey MacleadItalyBernardo Dominic UNQUALIFIED
Munro FerenczArgentinaIvan Magalhaes NEGOTIATION
Aditya KuskoGermanyIoni Bowcher RENEWAL
Greenwood BologniaSpainOnyama Limba RENEWAL
Leon OldroydBrazilAsiya Javayant UNQUALIFIED
Salvatore StockhamBrazilIoni Bowcher QUALIFIED
Izzy GarufiSpainOnyama Limba QUALIFIED
Salvatore StockhamSpainStephen Shaw NEGOTIATION
Aika InouyeFranceStephen Shaw QUALIFIED
Clifford RimBrazilAsiya Javayant NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Jones VocelkaRussiaStephen Shaw QUALIFIED
Morrow RutaIndiaBernardo Dominic NEW
Wickens NestleIndiaXuxue Feng UNQUALIFIED
Adams MorascaIndiaAnna Fali NEGOTIATION
Morrow RutaIndiaAmy Elsner NEGOTIATION
Leja CaldareraJapanBernardo Dominic PROPOSAL
Silvio SlusarskiJapanAmy Elsner NEGOTIATION
Kadeem FlosiJapanAnna Fali UNQUALIFIED
Francesco ShinkoFranceAmy Elsner RENEWAL
Rodrigues CampainBrazilAnna Fali PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mujtaba NickaRussia2025-08-10Chemel, James L Cpa NEGOTIATION81Anna Fali
1001Octavia MaletBrazil2025-08-06Feltz Printing Service RENEWAL58Elwin Sharvill
1002Julie StensethUnited Kingdom2025-08-08Printing Dimensions NEW2Onyama Limba
1003Greenwood BologniaItaly2025-08-19Commercial Press NEGOTIATION54Onyama Limba
1004Nicolas IturbideBrazil2025-08-08King, Christopher A Esq NEGOTIATION32Stephen Shaw
1005Salvatore StockhamAustralia2025-08-22Truhlar And Truhlar Attys QUALIFIED14Elwin Sharvill
1006Jeanfrancois VenereArgentina2025-08-02Morlong Associates UNQUALIFIED78Xuxue Feng
1007Mujtaba NickaCanada2025-08-27Feltz Printing Service RENEWAL80Amy Elsner
1008Deepesh ChuiArgentina2025-08-03Dorl, James J Esq NEW73Ioni Bowcher
1009Julie StensethUnited Kingdom2025-08-19Benton, John B Jr QUALIFIED12Asiya Javayant
1010Rodrigues CampainBrazil2025-08-01Chanay, Jeffrey A Esq UNQUALIFIED62Amy Elsner
1011Maisha RulapaughJapan2025-08-16Benton, John B Jr NEW56Stephen Shaw
1012Maria MarrierItaly2025-08-07Chapman, Ross E Esq QUALIFIED91Xuxue Feng
1013Claire TollnerJapan2025-08-08King, Christopher A Esq NEW46Elwin Sharvill
1014Mujtaba NickaUnited Kingdom2025-08-15Rangoni Of Florence RENEWAL44Onyama Limba
1015Darci PoquetteArgentina2025-08-27Feltz Printing Service UNQUALIFIED58Bernardo Dominic
1016Ricardo GauchoSpain2025-08-11Printing Dimensions NEW17Stephen Shaw
1017Sinclair WaycottSpain2025-08-12Printing Dimensions NEW99Stephen Shaw
1018Johnson SergiUnited Kingdom2025-08-16Benton, John B Jr UNQUALIFIED2Anna Fali
1019Faith GillianItaly2025-08-13Commercial Press PROPOSAL70Stephen Shaw
1020Claire TollnerGermany2025-08-03Chapman, Ross E Esq PROPOSAL70Onyama Limba
1021Sinclair WaycottBrazil2025-08-14Benton, John B Jr PROPOSAL97Anna Fali
1022Salvatore StockhamCanada2025-08-21Chanay, Jeffrey A Esq PROPOSAL72Anna Fali
1023Octavia MaletGermany2025-08-12Chanay, Jeffrey A Esq UNQUALIFIED17Onyama Limba
1024Clifford RimBrazil2025-08-04Feltz Printing Service RENEWAL59Asiya Javayant
1025Julie StensethSpain2025-08-17Commercial Press UNQUALIFIED83Ioni Bowcher
1026Ricardo GauchoBrazil2025-08-09Rangoni Of Florence NEGOTIATION23Ivan Magalhaes
1027Jeanfrancois VenereAustralia2025-08-23Truhlar And Truhlar Attys PROPOSAL91Ioni Bowcher
1028Sinclair WaycottIndia2025-08-30Rousseaux, Michael Esq RENEWAL57Onyama Limba
1029Antonio CaudyCanada2025-08-02King, Christopher A Esq NEW90Elwin Sharvill
1030Jefferson SchemmerJapan2025-08-02Chemel, James L Cpa RENEWAL85Bernardo Dominic
1031Faith GillianFrance2025-08-07Commercial Press RENEWAL55Ivan Magalhaes
1032Misaki RoysterJapan2025-08-30Truhlar And Truhlar Attys QUALIFIED91Stephen Shaw
1033Claire TollnerIndia2025-08-16Rangoni Of Florence QUALIFIED18Elwin Sharvill
1034Murillo MaletArgentina2025-08-20King, Christopher A Esq PROPOSAL43Anna Fali
1035Faith GillianSpain2025-08-22Feltz Printing Service QUALIFIED58Asiya Javayant
1036Jefferson SchemmerIndia2025-08-16Chemel, James L Cpa NEGOTIATION66Ivan Magalhaes
1037Tony FollerAustralia2025-08-25Feltz Printing Service NEW62Ioni Bowcher
1038Isabel BowleyItaly2025-08-04Chapman, Ross E Esq UNQUALIFIED91Bernardo Dominic
1039Arvin AlbaresAustralia2025-08-05King, Christopher A Esq NEW53Ivan Magalhaes
1040Octavia MaletRussia2025-08-05Benton, John B Jr QUALIFIED98Anna Fali
1041Kadeem FlosiBrazil2025-08-01Dorl, James J Esq QUALIFIED18Stephen Shaw
1042Isabel BowleyJapan2025-08-21Morlong Associates NEW16Ivan Magalhaes
1043Aruna FigeroaIndia2025-08-10King, Christopher A Esq UNQUALIFIED17Bernardo Dominic
1044David DarakjyGermany2025-08-03Rangoni Of Florence UNQUALIFIED35Ioni Bowcher
1045Jennifer AmigonFrance2025-08-01Dorl, James J Esq RENEWAL63Ivan Magalhaes
1046Ricardo GauchoFrance2025-08-14King, Christopher A Esq QUALIFIED88Ioni Bowcher
1047Alejandro PerinJapan2025-08-15Rousseaux, Michael Esq QUALIFIED94Asiya Javayant
1048Silvio SlusarskiFrance2025-08-18Chemel, James L Cpa RENEWAL62Onyama Limba
1049Aditya KuskoItaly2025-08-26Buckley Miller Wright PROPOSAL80Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Johnson SergiGermanyElwin Sharvill RENEWAL
Ivar PaprockiArgentinaOnyama Limba NEW
Clifford RimCanadaOnyama Limba UNQUALIFIED
Silvio SlusarskiFranceElwin Sharvill NEGOTIATION
Maisha RulapaughCanadaIvan Magalhaes QUALIFIED
Darci PoquetteArgentinaBernardo Dominic QUALIFIED
James ButtUnited KingdomAmy Elsner UNQUALIFIED
Juan WieserJapanStephen Shaw UNQUALIFIED
Jones VocelkaArgentinaAsiya Javayant UNQUALIFIED
Maisha RulapaughIndiaXuxue Feng UNQUALIFIED
Julie StensethBrazilAnna Fali RENEWAL
Murillo MaletAustraliaIoni Bowcher PROPOSAL
Ricardo GauchoArgentinaIvan Magalhaes RENEWAL
Izzy GarufiCanadaOnyama Limba QUALIFIED
Jones VocelkaJapanElwin Sharvill QUALIFIED
James ButtAustraliaElwin Sharvill QUALIFIED
Murillo MaletJapanXuxue Feng RENEWAL
Ivar PaprockiGermanyAsiya Javayant NEGOTIATION
Morrow RutaArgentinaIoni Bowcher NEW
Jennifer AmigonIndiaAnna Fali QUALIFIED
Chavez BriddickArgentinaAsiya Javayant PROPOSAL
Salvatore StockhamFranceAsiya Javayant UNQUALIFIED
Leon OldroydCanadaAmy Elsner NEW
Juan WieserAustraliaIvan Magalhaes UNQUALIFIED
Jennifer AmigonJapanAsiya Javayant QUALIFIED
Mujtaba NickaIndiaAsiya Javayant UNQUALIFIED
Isabel BowleyItalyIvan Magalhaes QUALIFIED
Smith GlickCanadaAsiya Javayant NEW
Sinclair WaycottRussiaStephen Shaw NEGOTIATION
Antonio CaudyFranceAsiya Javayant PROPOSAL
Jennifer AmigonFranceAnna Fali UNQUALIFIED
David DarakjyCanadaAsiya Javayant NEGOTIATION
Stacey MacleadArgentinaIvan Magalhaes NEGOTIATION
Arvin AlbaresIndiaAmy Elsner PROPOSAL
Jefferson SchemmerFranceStephen Shaw QUALIFIED
Francesco ShinkoCanadaIvan Magalhaes QUALIFIED
Aditya KuskoIndiaAnna Fali RENEWAL
Sinclair WaycottItalyAsiya Javayant QUALIFIED
Morrow RutaJapanAsiya Javayant QUALIFIED
Stacey MacleadSpainElwin Sharvill PROPOSAL
David DarakjyIndiaXuxue Feng QUALIFIED
Munro FerenczIndiaAnna Fali PROPOSAL
Misaki RoysterBrazilStephen Shaw NEGOTIATION
James ButtGermanyAnna Fali RENEWAL
Jones VocelkaRussiaIoni Bowcher RENEWAL
Francesco ShinkoJapanOnyama Limba QUALIFIED
Juan WieserBrazilAnna Fali PROPOSAL
Misaki RoysterBrazilAmy Elsner PROPOSAL
Ricardo GauchoFranceStephen Shaw RENEWAL
Aruna FigeroaAustraliaXuxue Feng RENEWAL
Frozen Columns
Name
Chavez Briddick
Francesco Shinko
Faith Gillian
Wickens Nestle
Johnson Sergi
Ricardo Gaucho
Jefferson Schemmer
Francesco Shinko
Leja Caldarera
Mayumi Kolmetz
Misaki Royster
Mujtaba Nicka
Stacey Maclead
Ivar Paprocki
Aditya Kusko
Morrow Ruta
Maisha Rulapaugh
Ashley Doe
Chavez Briddick
Chavez Briddick
Rodrigues Campain
Leon Oldroyd
Misaki Royster
Jones Vocelka
Claire Tollner
Morrow Ruta
Alejandro Perin
Sinclair Waycott
Isabel Bowley
Maria Marrier
Jones Vocelka
Juan Wieser
Aika Inouye
Maisha Rulapaugh
Darci Poquette
Deepesh Chui
Alejandro Perin
Maria Marrier
Isabel Bowley
Sinclair Waycott
Ricardo Gaucho
Ricardo Gaucho
Chavez Briddick
Leja Caldarera
Julie Stenseth
Clifford Rim
Ricardo Gaucho
James Butt
Juan Wieser
Claire Tollner
IdCountryDate
1000Canada2025-08-15
1001Japan2025-08-30
1002Canada2025-08-30
1003Argentina2025-08-30
1004Spain2025-08-06
1005Australia2025-08-01
1006France2025-08-27
1007Brazil2025-08-27
1008Canada2025-08-15
1009Japan2025-08-01
1010Spain2025-08-15
1011Argentina2025-08-12
1012Brazil2025-08-29
1013Spain2025-08-03
1014Argentina2025-08-20
1015United Kingdom2025-08-07
1016France2025-08-10
1017France2025-08-21
1018Germany2025-08-27
1019Australia2025-08-10
1020Brazil2025-08-28
1021Germany2025-08-25
1022Spain2025-08-16
1023Japan2025-08-05
1024Australia2025-08-19
1025Canada2025-08-10
1026Italy2025-08-15
1027India2025-08-03
1028Germany2025-08-30
1029Australia2025-08-23
1030India2025-08-08
1031Italy2025-08-20
1032Australia2025-08-15
1033Argentina2025-08-24
1034India2025-08-04
1035Argentina2025-08-05
1036India2025-08-10
1037Russia2025-08-24
1038Australia2025-08-14
1039Japan2025-08-11
1040Spain2025-08-09
1041Italy2025-08-13
1042Italy2025-08-15
1043Germany2025-08-21
1044Canada2025-08-12
1045Japan2025-08-22
1046Germany2025-08-27
1047Italy2025-08-09
1048France2025-08-16
1049Australia2025-08-29

On-Demand Data

NameIdCountryDate
David Darakjy1000Germany2025-08-27
Jones Vocelka1001India2025-08-14
Salvatore Stockham1002Russia2025-08-28
Greenwood Bolognia1003United Kingdom2025-08-18
Rodrigues Campain1004Russia2025-08-17
Julie Stenseth1005United Kingdom2025-08-16
Kadeem Flosi1006Italy2025-08-28
Claire Tollner1007Argentina2025-08-27
Morrow Ruta1008Italy2025-08-21
Mayumi Kolmetz1009Spain2025-08-23
Stacey Maclead1010France2025-08-03
Sinclair Waycott1011Japan2025-08-21
Francesco Shinko1012Italy2025-08-15
Misaki Royster1013United Kingdom2025-08-02
Adams Morasca1014Canada2025-08-13
Jeanfrancois Venere1015India2025-08-10
James Butt1016Argentina2025-08-04
Octavia Malet1017Japan2025-08-11
Octavia Malet1018United Kingdom2025-08-03
Wickens Nestle1019Germany2025-08-07
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Misaki RoysterSpainIvan Magalhaes PROPOSAL
Rodrigues CampainJapanIvan Magalhaes NEW
Maisha RulapaughRussiaOnyama Limba QUALIFIED
Jefferson SchemmerSpainStephen Shaw UNQUALIFIED
Julie StensethGermanyAsiya Javayant PROPOSAL
Mayumi KolmetzSpainAnna Fali UNQUALIFIED
Aika InouyeUnited KingdomIoni Bowcher NEW
Nicolas IturbideAustraliaBernardo Dominic NEW
Stacey MacleadJapanOnyama Limba RENEWAL
Cody SaylorsRussiaBernardo Dominic UNQUALIFIED
Julie StensethIndiaIoni Bowcher QUALIFIED
Chavez BriddickGermanyElwin Sharvill NEW
Munro FerenczJapanOnyama Limba RENEWAL
Jeanfrancois VenereJapanXuxue Feng RENEWAL
Wickens NestleCanadaAmy Elsner NEW
Wickens NestleArgentinaBernardo Dominic UNQUALIFIED
David DarakjyFranceIoni Bowcher NEW
Wickens NestleSpainIvan Magalhaes PROPOSAL
Morrow RutaItalyOnyama Limba NEGOTIATION
Emily WhobreyUnited KingdomAsiya Javayant RENEWAL
Costa DilliardRussiaAsiya Javayant UNQUALIFIED
Nicolas IturbideIndiaIvan Magalhaes UNQUALIFIED
Ricardo GauchoRussiaElwin Sharvill QUALIFIED
Smith GlickBrazilAnna Fali NEW
Maisha RulapaughFranceAnna Fali NEW
Jeanfrancois VenereItalyXuxue Feng PROPOSAL
Mujtaba NickaRussiaAnna Fali NEW
Isabel BowleyUnited KingdomBernardo Dominic NEGOTIATION
Jefferson SchemmerArgentinaStephen Shaw RENEWAL
Antonio CaudyIndiaXuxue Feng UNQUALIFIED
Arvin AlbaresAustraliaBernardo Dominic UNQUALIFIED
Morrow RutaIndiaStephen Shaw PROPOSAL
Ricardo GauchoCanadaAsiya Javayant PROPOSAL
Salvatore StockhamBrazilIoni Bowcher NEW
James ButtArgentinaElwin Sharvill PROPOSAL
Izzy GarufiUnited KingdomXuxue Feng QUALIFIED
Alejandro PerinJapanElwin Sharvill NEW
Isabel BowleyRussiaAsiya Javayant NEGOTIATION
Jones VocelkaJapanIoni Bowcher UNQUALIFIED
Nicolas IturbideBrazilStephen Shaw 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>