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
Aditya KuskoJapanElwin Sharvill RENEWAL
Aika InouyeItalyAmy Elsner PROPOSAL
Silvio SlusarskiSpainElwin Sharvill NEW
Murillo MaletRussiaAmy Elsner QUALIFIED
Nicolas IturbideJapanStephen Shaw PROPOSAL
Juan WieserJapanAmy Elsner NEW
Emily WhobreyGermanyElwin Sharvill NEGOTIATION
Deepesh ChuiJapanBernardo Dominic UNQUALIFIED
Darci PoquetteAustraliaBernardo Dominic QUALIFIED
Jeanfrancois VenereArgentinaIvan Magalhaes PROPOSAL
Munro FerenczFranceIoni Bowcher PROPOSAL
Nicolas IturbideBrazilAnna Fali PROPOSAL
Murillo MaletGermanyXuxue Feng NEGOTIATION
Cody SaylorsCanadaAmy Elsner RENEWAL
Aika InouyeJapanOnyama Limba PROPOSAL
Julie StensethGermanyAnna Fali NEW
Salvatore StockhamCanadaAsiya Javayant NEGOTIATION
Smith GlickItalyAsiya Javayant PROPOSAL
Alejandro PerinCanadaBernardo Dominic QUALIFIED
Arvin AlbaresUnited KingdomIoni Bowcher UNQUALIFIED
Johnson SergiIndiaElwin Sharvill NEW
Morrow RutaRussiaElwin Sharvill NEW
David DarakjyJapanAmy Elsner PROPOSAL
Isabel BowleySpainXuxue Feng PROPOSAL
Jones VocelkaBrazilBernardo Dominic PROPOSAL
Johnson SergiUnited KingdomAmy Elsner NEW
Jones VocelkaFranceOnyama Limba NEW
Maisha RulapaughIndiaOnyama Limba NEGOTIATION
Emily WhobreyArgentinaOnyama Limba UNQUALIFIED
Costa DilliardArgentinaOnyama Limba RENEWAL
Ivar PaprockiAustraliaElwin Sharvill NEW
Misaki RoysterFranceStephen Shaw UNQUALIFIED
Stacey MacleadIndiaIoni Bowcher UNQUALIFIED
Isabel BowleyArgentinaStephen Shaw PROPOSAL
Wickens NestleSpainAsiya Javayant QUALIFIED
Juan WieserGermanyOnyama Limba UNQUALIFIED
Izzy GarufiBrazilElwin Sharvill QUALIFIED
Faith GillianUnited KingdomIoni Bowcher UNQUALIFIED
Juan WieserBrazilAnna Fali UNQUALIFIED
Maisha RulapaughIndiaXuxue Feng QUALIFIED
Kadeem FlosiSpainAnna Fali QUALIFIED
Antonio CaudyJapanIvan Magalhaes RENEWAL
Johnson SergiIndiaElwin Sharvill RENEWAL
Alejandro PerinAustraliaAnna Fali NEW
Wickens NestleBrazilStephen Shaw RENEWAL
Aika InouyeItalyStephen Shaw NEGOTIATION
Ricardo GauchoIndiaBernardo Dominic UNQUALIFIED
Deepesh ChuiJapanAsiya Javayant NEW
Mayumi KolmetzSpainIoni Bowcher QUALIFIED
Sinclair WaycottBrazilOnyama Limba UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Leja CaldareraItalyBernardo Dominic UNQUALIFIED
Deepesh ChuiFranceOnyama Limba UNQUALIFIED
Silvio SlusarskiFranceOnyama Limba NEW
Cody SaylorsRussiaBernardo Dominic QUALIFIED
Costa DilliardArgentinaAmy Elsner RENEWAL
Morrow RutaArgentinaOnyama Limba NEGOTIATION
Kaitlin OstroskyFranceAnna Fali NEW
Sinclair WaycottJapanIvan Magalhaes QUALIFIED
Darci PoquetteSpainIoni Bowcher RENEWAL
Misaki RoysterGermanyIvan Magalhaes NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Cody SaylorsArgentina2025-09-03Rousseaux, Michael Esq PROPOSAL35Stephen Shaw
1001Antonio CaudyBrazil2025-08-14Chapman, Ross E Esq NEGOTIATION32Onyama Limba
1002Leon OldroydArgentina2025-08-27Truhlar And Truhlar Attys NEW80Asiya Javayant
1003Juan WieserJapan2025-09-06Benton, John B Jr PROPOSAL14Anna Fali
1004Isabel BowleyAustralia2025-08-29Benton, John B Jr NEW49Ioni Bowcher
1005Johnson SergiRussia2025-09-03Chemel, James L Cpa QUALIFIED39Bernardo Dominic
1006Francesco ShinkoBrazil2025-08-29Feiner Bros UNQUALIFIED23Bernardo Dominic
1007Leon OldroydAustralia2025-08-21Chapman, Ross E Esq NEW98Elwin Sharvill
1008Izzy GarufiIndia2025-08-29Feiner Bros PROPOSAL8Ivan Magalhaes
1009Rodrigues CampainJapan2025-08-31Chapman, Ross E Esq QUALIFIED54Elwin Sharvill
1010Emily WhobreyArgentina2025-08-22Printing Dimensions PROPOSAL9Ioni Bowcher
1011Ashley DoeItaly2025-08-24Rousseaux, Michael Esq QUALIFIED98Stephen Shaw
1012Morrow RutaArgentina2025-09-06Dorl, James J Esq RENEWAL73Stephen Shaw
1013Murillo MaletIndia2025-09-05Commercial Press NEGOTIATION48Anna Fali
1014Leon OldroydBrazil2025-08-11Rangoni Of Florence QUALIFIED61Onyama Limba
1015Jeanfrancois VenereRussia2025-08-23Chanay, Jeffrey A Esq NEW75Bernardo Dominic
1016Salvatore StockhamSpain2025-08-31King, Christopher A Esq RENEWAL89Asiya Javayant
1017Ashley DoeSpain2025-08-11Buckley Miller Wright RENEWAL9Anna Fali
1018Francesco ShinkoItaly2025-09-02Feiner Bros RENEWAL82Anna Fali
1019Claire TollnerRussia2025-08-28Buckley Miller Wright QUALIFIED98Amy Elsner
1020Alejandro PerinIndia2025-08-23Dorl, James J Esq UNQUALIFIED50Xuxue Feng
1021Munro FerenczSpain2025-08-20Chemel, James L Cpa UNQUALIFIED7Bernardo Dominic
1022Alejandro PerinIndia2025-09-02Truhlar And Truhlar Attys NEW15Ivan Magalhaes
1023Aruna FigeroaItaly2025-08-30Commercial Press PROPOSAL59Bernardo Dominic
1024Nicolas IturbideFrance2025-08-18King, Christopher A Esq UNQUALIFIED92Asiya Javayant
1025Munro FerenczFrance2025-09-07Benton, John B Jr NEW28Elwin Sharvill
1026Smith GlickItaly2025-08-24Chapman, Ross E Esq NEW7Stephen Shaw
1027Silvio SlusarskiArgentina2025-08-25Commercial Press RENEWAL16Onyama Limba
1028Jennifer AmigonJapan2025-08-16Rangoni Of Florence QUALIFIED87Stephen Shaw
1029Ivar PaprockiAustralia2025-08-26Chemel, James L Cpa NEGOTIATION64Onyama Limba
1030Chavez BriddickSpain2025-08-22Printing Dimensions QUALIFIED11Stephen Shaw
1031Misaki RoysterAustralia2025-08-16Morlong Associates PROPOSAL6Anna Fali
1032Ricardo GauchoIndia2025-08-29Chanay, Jeffrey A Esq RENEWAL2Amy Elsner
1033Darci PoquetteRussia2025-08-24Truhlar And Truhlar Attys NEW35Xuxue Feng
1034Maisha RulapaughBrazil2025-09-07Buckley Miller Wright UNQUALIFIED85Stephen Shaw
1035Leja CaldareraSpain2025-08-12Commercial Press UNQUALIFIED12Asiya Javayant
1036Kadeem FlosiGermany2025-08-26Buckley Miller Wright RENEWAL23Amy Elsner
1037Jones VocelkaAustralia2025-09-06Chapman, Ross E Esq RENEWAL34Elwin Sharvill
1038Faith GillianIndia2025-08-12Chemel, James L Cpa UNQUALIFIED16Xuxue Feng
1039Salvatore StockhamGermany2025-08-21Morlong Associates QUALIFIED4Asiya Javayant
1040Kaitlin OstroskyArgentina2025-09-08Rousseaux, Michael Esq UNQUALIFIED5Ivan Magalhaes
1041Murillo MaletArgentina2025-08-24Printing Dimensions NEGOTIATION64Elwin Sharvill
1042Octavia MaletCanada2025-09-01Chemel, James L Cpa NEW47Stephen Shaw
1043Aruna FigeroaJapan2025-08-31Buckley Miller Wright QUALIFIED96Xuxue Feng
1044Jones VocelkaUnited Kingdom2025-09-09Rangoni Of Florence UNQUALIFIED32Xuxue Feng
1045Isabel BowleyIndia2025-09-05King, Christopher A Esq NEW22Amy Elsner
1046Darci PoquetteArgentina2025-09-04Printing Dimensions NEGOTIATION62Bernardo Dominic
1047Stacey MacleadAustralia2025-08-26Chemel, James L Cpa NEW67Xuxue Feng
1048Ivar PaprockiUnited Kingdom2025-08-20Rousseaux, Michael Esq QUALIFIED95Xuxue Feng
1049Jennifer AmigonCanada2025-08-15Feiner Bros NEW60Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Aruna FigeroaArgentinaBernardo Dominic NEGOTIATION
Alejandro PerinSpainOnyama Limba NEGOTIATION
Aika InouyeJapanBernardo Dominic RENEWAL
Aika InouyeIndiaIvan Magalhaes NEW
Mujtaba NickaIndiaXuxue Feng PROPOSAL
James ButtCanadaXuxue Feng UNQUALIFIED
Morrow RutaCanadaAnna Fali PROPOSAL
Octavia MaletUnited KingdomAnna Fali QUALIFIED
Sinclair WaycottAustraliaIoni Bowcher NEGOTIATION
Jones VocelkaCanadaIvan Magalhaes QUALIFIED
Aditya KuskoRussiaElwin Sharvill QUALIFIED
Maisha RulapaughGermanyOnyama Limba QUALIFIED
Mujtaba NickaJapanAmy Elsner NEW
Izzy GarufiBrazilXuxue Feng RENEWAL
Jeanfrancois VenereUnited KingdomIvan Magalhaes UNQUALIFIED
Mujtaba NickaItalyIvan Magalhaes NEW
Salvatore StockhamItalyXuxue Feng NEGOTIATION
Leja CaldareraRussiaOnyama Limba NEW
Jones VocelkaRussiaIvan Magalhaes QUALIFIED
Kaitlin OstroskyUnited KingdomBernardo Dominic RENEWAL
Antonio CaudyItalyIvan Magalhaes NEW
Kaitlin OstroskyCanadaIvan Magalhaes RENEWAL
Wickens NestleCanadaElwin Sharvill NEGOTIATION
Rodrigues CampainGermanyXuxue Feng NEW
Clifford RimJapanAmy Elsner NEW
Ivar PaprockiBrazilAnna Fali QUALIFIED
Antonio CaudyArgentinaAnna Fali NEW
Francesco ShinkoRussiaElwin Sharvill UNQUALIFIED
Murillo MaletRussiaAsiya Javayant UNQUALIFIED
Greenwood BologniaCanadaAmy Elsner PROPOSAL
Ricardo GauchoGermanyIoni Bowcher NEGOTIATION
Ricardo GauchoSpainIoni Bowcher RENEWAL
Emily WhobreyRussiaIoni Bowcher NEW
Aruna FigeroaItalyBernardo Dominic NEGOTIATION
David DarakjyUnited KingdomXuxue Feng RENEWAL
Maria MarrierUnited KingdomStephen Shaw QUALIFIED
Misaki RoysterFranceOnyama Limba QUALIFIED
Emily WhobreyItalyXuxue Feng QUALIFIED
Jeanfrancois VenereJapanIvan Magalhaes QUALIFIED
Sinclair WaycottBrazilAnna Fali PROPOSAL
Sinclair WaycottUnited KingdomBernardo Dominic NEGOTIATION
Aruna FigeroaJapanIoni Bowcher NEGOTIATION
Isabel BowleyRussiaElwin Sharvill NEW
Costa DilliardItalyStephen Shaw NEW
Alejandro PerinBrazilAsiya Javayant UNQUALIFIED
Jennifer AmigonItalyOnyama Limba NEW
Adams MorascaFranceElwin Sharvill RENEWAL
James ButtBrazilStephen Shaw NEGOTIATION
Arvin AlbaresJapanAsiya Javayant PROPOSAL
James ButtSpainXuxue Feng NEW
Frozen Columns
Name
Octavia Malet
Adams Morasca
Isabel Bowley
Nicolas Iturbide
Arvin Albares
Ivar Paprocki
Izzy Garufi
Rodrigues Campain
Munro Ferencz
Morrow Ruta
David Darakjy
Silvio Slusarski
Francesco Shinko
Mayumi Kolmetz
Francesco Shinko
Deepesh Chui
David Darakjy
Clifford Rim
Mayumi Kolmetz
Ashley Doe
Morrow Ruta
Maisha Rulapaugh
Wickens Nestle
Octavia Malet
Aika Inouye
Mayumi Kolmetz
Alejandro Perin
Murillo Malet
Mujtaba Nicka
Salvatore Stockham
Mujtaba Nicka
Mujtaba Nicka
Morrow Ruta
Morrow Ruta
Munro Ferencz
Maisha Rulapaugh
Murillo Malet
Sinclair Waycott
Silvio Slusarski
Mujtaba Nicka
Costa Dilliard
Alejandro Perin
Aruna Figeroa
Munro Ferencz
Deepesh Chui
Kaitlin Ostrosky
Maisha Rulapaugh
Faith Gillian
Misaki Royster
Arvin Albares
IdCountryDate
1000Italy2025-08-17
1001Canada2025-08-25
1002Argentina2025-09-01
1003Russia2025-08-26
1004Germany2025-08-19
1005Canada2025-08-18
1006India2025-08-18
1007Russia2025-08-20
1008India2025-08-16
1009Japan2025-09-01
1010Japan2025-08-31
1011United Kingdom2025-08-30
1012Argentina2025-08-16
1013India2025-08-26
1014United Kingdom2025-08-25
1015Brazil2025-09-06
1016Argentina2025-08-11
1017Russia2025-09-03
1018Australia2025-08-31
1019Russia2025-09-09
1020Argentina2025-09-01
1021Germany2025-09-03
1022Australia2025-08-17
1023United Kingdom2025-08-27
1024France2025-08-26
1025Argentina2025-08-13
1026Brazil2025-09-05
1027Japan2025-08-17
1028United Kingdom2025-08-11
1029Japan2025-08-29
1030Canada2025-08-19
1031Australia2025-09-01
1032Germany2025-08-22
1033Italy2025-09-07
1034India2025-08-29
1035Japan2025-08-19
1036France2025-08-20
1037Russia2025-08-16
1038Brazil2025-08-22
1039Italy2025-09-07
1040Brazil2025-08-25
1041India2025-08-29
1042India2025-08-18
1043Spain2025-08-20
1044United Kingdom2025-08-21
1045Germany2025-09-01
1046Germany2025-08-31
1047Spain2025-08-29
1048United Kingdom2025-09-06
1049Australia2025-09-07

On-Demand Data

NameIdCountryDate
Misaki Royster1000Italy2025-08-12
Aika Inouye1001Japan2025-09-04
Claire Tollner1002Italy2025-09-01
Jeanfrancois Venere1003Argentina2025-08-16
Maisha Rulapaugh1004Germany2025-08-30
Aditya Kusko1005Australia2025-08-20
Salvatore Stockham1006India2025-08-24
Claire Tollner1007Canada2025-08-31
Morrow Ruta1008Spain2025-09-04
Mayumi Kolmetz1009Russia2025-08-14
Wickens Nestle1010France2025-08-24
Cody Saylors1011Spain2025-08-29
Faith Gillian1012Argentina2025-08-27
Ivar Paprocki1013Canada2025-08-11
Sinclair Waycott1014Italy2025-08-30
Antonio Caudy1015United Kingdom2025-09-05
Claire Tollner1016Japan2025-08-16
Mayumi Kolmetz1017Brazil2025-08-28
Clifford Rim1018Germany2025-08-11
Arvin Albares1019Canada2025-09-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Stacey MacleadSpainStephen Shaw UNQUALIFIED
Stacey MacleadGermanyXuxue Feng RENEWAL
Smith GlickUnited KingdomAnna Fali NEW
Arvin AlbaresBrazilAnna Fali NEGOTIATION
Johnson SergiRussiaIoni Bowcher QUALIFIED
Octavia MaletSpainStephen Shaw UNQUALIFIED
Silvio SlusarskiGermanyAnna Fali NEW
Leja CaldareraCanadaElwin Sharvill NEGOTIATION
Ricardo GauchoBrazilIvan Magalhaes UNQUALIFIED
Julie StensethGermanyBernardo Dominic QUALIFIED
Deepesh ChuiRussiaStephen Shaw NEW
Jennifer AmigonItalyAsiya Javayant RENEWAL
Ashley DoeUnited KingdomStephen Shaw QUALIFIED
Ivar PaprockiFranceOnyama Limba RENEWAL
Adams MorascaSpainIvan Magalhaes RENEWAL
David DarakjyUnited KingdomBernardo Dominic QUALIFIED
Ricardo GauchoSpainElwin Sharvill RENEWAL
Juan WieserBrazilAmy Elsner UNQUALIFIED
Mujtaba NickaItalyStephen Shaw RENEWAL
Isabel BowleyRussiaStephen Shaw NEW
Isabel BowleySpainOnyama Limba QUALIFIED
Clifford RimArgentinaOnyama Limba NEW
Chavez BriddickGermanyAnna Fali NEGOTIATION
Maria MarrierCanadaIoni Bowcher NEW
Francesco ShinkoFranceStephen Shaw NEW
Murillo MaletItalyBernardo Dominic NEGOTIATION
Ashley DoeArgentinaStephen Shaw RENEWAL
Ashley DoeFranceOnyama Limba RENEWAL
Silvio SlusarskiSpainAmy Elsner PROPOSAL
Octavia MaletCanadaAnna Fali RENEWAL
Ashley DoeAustraliaAsiya Javayant QUALIFIED
Cody SaylorsGermanyIvan Magalhaes QUALIFIED
Jones VocelkaUnited KingdomElwin Sharvill UNQUALIFIED
Juan WieserUnited KingdomAnna Fali QUALIFIED
Silvio SlusarskiFranceAmy Elsner QUALIFIED
Leon OldroydFranceIvan Magalhaes NEW
Francesco ShinkoBrazilAsiya Javayant PROPOSAL
Alejandro PerinAustraliaElwin Sharvill NEGOTIATION
Deepesh ChuiGermanyElwin Sharvill UNQUALIFIED
Mujtaba NickaSpainAmy Elsner PROPOSAL

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