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
Antonio CaudyBrazilIvan Magalhaes NEGOTIATION
Jones VocelkaJapanAnna Fali PROPOSAL
Jefferson SchemmerJapanAsiya Javayant RENEWAL
Silvio SlusarskiBrazilIvan Magalhaes NEGOTIATION
Rodrigues CampainGermanyElwin Sharvill NEGOTIATION
James ButtArgentinaAsiya Javayant RENEWAL
Aika InouyeJapanBernardo Dominic NEW
Claire TollnerIndiaIvan Magalhaes UNQUALIFIED
Aruna FigeroaIndiaStephen Shaw PROPOSAL
Aruna FigeroaSpainStephen Shaw QUALIFIED
Arvin AlbaresArgentinaOnyama Limba QUALIFIED
Rodrigues CampainBrazilAmy Elsner NEW
Sinclair WaycottCanadaOnyama Limba PROPOSAL
Emily WhobreySpainAmy Elsner NEW
Tony FollerSpainBernardo Dominic NEW
Mujtaba NickaBrazilOnyama Limba PROPOSAL
Sinclair WaycottAustraliaAmy Elsner UNQUALIFIED
Mujtaba NickaGermanyStephen Shaw PROPOSAL
Mujtaba NickaUnited KingdomAsiya Javayant NEGOTIATION
Ivar PaprockiCanadaStephen Shaw PROPOSAL
Jones VocelkaItalyIoni Bowcher NEGOTIATION
Jefferson SchemmerUnited KingdomAmy Elsner PROPOSAL
Stacey MacleadCanadaAmy Elsner NEW
Aruna FigeroaBrazilIoni Bowcher NEGOTIATION
Antonio CaudyCanadaOnyama Limba RENEWAL
Maria MarrierBrazilAsiya Javayant QUALIFIED
Greenwood BologniaUnited KingdomElwin Sharvill NEW
Adams MorascaItalyXuxue Feng UNQUALIFIED
Julie StensethItalyAnna Fali NEW
Arvin AlbaresRussiaBernardo Dominic PROPOSAL
Emily WhobreyAustraliaXuxue Feng RENEWAL
Alejandro PerinGermanyBernardo Dominic UNQUALIFIED
David DarakjySpainIoni Bowcher NEW
Julie StensethCanadaAmy Elsner NEW
Aruna FigeroaGermanyXuxue Feng NEW
Ivar PaprockiBrazilAnna Fali RENEWAL
Juan WieserIndiaOnyama Limba QUALIFIED
Stacey MacleadSpainElwin Sharvill PROPOSAL
Faith GillianUnited KingdomAsiya Javayant RENEWAL
Darci PoquetteSpainIoni Bowcher PROPOSAL
Chavez BriddickFranceStephen Shaw NEW
Morrow RutaItalyAnna Fali PROPOSAL
Nicolas IturbideUnited KingdomAsiya Javayant UNQUALIFIED
Darci PoquetteSpainElwin Sharvill UNQUALIFIED
Octavia MaletSpainIvan Magalhaes UNQUALIFIED
Jennifer AmigonJapanIvan Magalhaes RENEWAL
Jennifer AmigonFranceElwin Sharvill NEGOTIATION
Munro FerenczArgentinaXuxue Feng QUALIFIED
Kaitlin OstroskySpainAsiya Javayant QUALIFIED
Costa DilliardItalyAsiya Javayant UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Aruna FigeroaIndiaAmy Elsner PROPOSAL
Jefferson SchemmerCanadaAsiya Javayant NEW
Smith GlickFranceBernardo Dominic NEW
Munro FerenczCanadaXuxue Feng PROPOSAL
Wickens NestleJapanXuxue Feng UNQUALIFIED
Maisha RulapaughItalyIoni Bowcher PROPOSAL
Antonio CaudyIndiaXuxue Feng QUALIFIED
Mayumi KolmetzArgentinaElwin Sharvill PROPOSAL
Misaki RoysterAustraliaAsiya Javayant NEGOTIATION
Maisha RulapaughGermanyXuxue Feng NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Wickens NestleArgentina2026-04-20Feltz Printing Service PROPOSAL16Xuxue Feng
1001Silvio SlusarskiGermany2026-05-05Dorl, James J Esq QUALIFIED47Stephen Shaw
1002Morrow RutaCanada2026-05-09Commercial Press NEGOTIATION52Ivan Magalhaes
1003Ricardo GauchoGermany2026-04-17Feiner Bros NEW69Asiya Javayant
1004Faith GillianRussia2026-05-11Printing Dimensions QUALIFIED69Stephen Shaw
1005Darci PoquetteFrance2026-04-15Truhlar And Truhlar Attys NEW32Stephen Shaw
1006Clifford RimSpain2026-05-09Chapman, Ross E Esq RENEWAL17Elwin Sharvill
1007Johnson SergiJapan2026-04-15Rangoni Of Florence RENEWAL30Elwin Sharvill
1008Ashley DoeFrance2026-04-17Feltz Printing Service RENEWAL72Stephen Shaw
1009Silvio SlusarskiRussia2026-05-01Truhlar And Truhlar Attys NEGOTIATION76Ioni Bowcher
1010Arvin AlbaresAustralia2026-04-20Chapman, Ross E Esq UNQUALIFIED81Onyama Limba
1011Ricardo GauchoItaly2026-05-08Morlong Associates NEGOTIATION49Ivan Magalhaes
1012Greenwood BologniaArgentina2026-05-10Feiner Bros UNQUALIFIED17Anna Fali
1013Tony FollerBrazil2026-04-27Truhlar And Truhlar Attys UNQUALIFIED82Anna Fali
1014Cody SaylorsGermany2026-04-13Truhlar And Truhlar Attys NEW92Bernardo Dominic
1015James ButtCanada2026-04-24Rangoni Of Florence PROPOSAL13Asiya Javayant
1016Ricardo GauchoAustralia2026-04-28Truhlar And Truhlar Attys PROPOSAL59Anna Fali
1017Tony FollerGermany2026-04-21Rangoni Of Florence UNQUALIFIED79Stephen Shaw
1018Aruna FigeroaFrance2026-05-01Chapman, Ross E Esq QUALIFIED87Bernardo Dominic
1019David DarakjyArgentina2026-05-12Feiner Bros QUALIFIED1Xuxue Feng
1020Maisha RulapaughJapan2026-04-13King, Christopher A Esq NEW82Amy Elsner
1021Kaitlin OstroskyJapan2026-05-02Printing Dimensions NEGOTIATION40Ivan Magalhaes
1022Francesco ShinkoRussia2026-05-12Feiner Bros NEW22Stephen Shaw
1023Ashley DoeGermany2026-05-01Benton, John B Jr NEGOTIATION1Stephen Shaw
1024Adams MorascaItaly2026-04-18Commercial Press RENEWAL83Ivan Magalhaes
1025Ashley DoeSpain2026-04-17Dorl, James J Esq RENEWAL91Asiya Javayant
1026Costa DilliardArgentina2026-04-14Truhlar And Truhlar Attys QUALIFIED74Anna Fali
1027Claire TollnerRussia2026-05-10Chemel, James L Cpa PROPOSAL54Ivan Magalhaes
1028Jeanfrancois VenereArgentina2026-04-21Commercial Press UNQUALIFIED91Anna Fali
1029Nicolas IturbideFrance2026-05-02Feiner Bros QUALIFIED76Ivan Magalhaes
1030Silvio SlusarskiGermany2026-04-22Benton, John B Jr NEW31Stephen Shaw
1031Maria MarrierIndia2026-05-03Feltz Printing Service RENEWAL95Ioni Bowcher
1032James ButtRussia2026-05-08Benton, John B Jr UNQUALIFIED20Asiya Javayant
1033Jeanfrancois VenereArgentina2026-04-16Buckley Miller Wright UNQUALIFIED94Xuxue Feng
1034James ButtFrance2026-04-26Buckley Miller Wright QUALIFIED25Elwin Sharvill
1035Nicolas IturbideCanada2026-04-13Buckley Miller Wright UNQUALIFIED41Amy Elsner
1036Maisha RulapaughBrazil2026-04-19Printing Dimensions NEW57Amy Elsner
1037Adams MorascaGermany2026-05-06Benton, John B Jr NEGOTIATION47Amy Elsner
1038Sinclair WaycottGermany2026-04-15Buckley Miller Wright NEW89Ivan Magalhaes
1039Maria MarrierBrazil2026-04-17Truhlar And Truhlar Attys NEW30Onyama Limba
1040Ivar PaprockiUnited Kingdom2026-05-09Printing Dimensions PROPOSAL2Ivan Magalhaes
1041Salvatore StockhamSpain2026-04-21Chanay, Jeffrey A Esq NEGOTIATION21Stephen Shaw
1042Stacey MacleadJapan2026-05-02Chemel, James L Cpa RENEWAL1Amy Elsner
1043Clifford RimIndia2026-04-19Benton, John B Jr RENEWAL97Xuxue Feng
1044Chavez BriddickAustralia2026-05-04King, Christopher A Esq NEW54Asiya Javayant
1045Ricardo GauchoArgentina2026-04-28Feltz Printing Service NEGOTIATION24Stephen Shaw
1046Aika InouyeSpain2026-05-04Commercial Press QUALIFIED57Bernardo Dominic
1047Aika InouyeIndia2026-05-11Buckley Miller Wright NEW33Asiya Javayant
1048Jennifer AmigonItaly2026-04-24Printing Dimensions RENEWAL95Amy Elsner
1049Jeanfrancois VenereAustralia2026-04-22Truhlar And Truhlar Attys NEGOTIATION88Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Julie StensethCanadaIoni Bowcher NEW
Misaki RoysterRussiaXuxue Feng PROPOSAL
Aruna FigeroaJapanIoni Bowcher PROPOSAL
Deepesh ChuiAustraliaXuxue Feng PROPOSAL
David DarakjyRussiaAnna Fali RENEWAL
Misaki RoysterIndiaAmy Elsner NEW
Darci PoquetteJapanIoni Bowcher NEW
Adams MorascaItalyAsiya Javayant NEGOTIATION
Clifford RimBrazilIoni Bowcher UNQUALIFIED
Nicolas IturbideRussiaElwin Sharvill NEGOTIATION
Deepesh ChuiUnited KingdomElwin Sharvill NEW
Jones VocelkaGermanyAsiya Javayant PROPOSAL
Francesco ShinkoItalyBernardo Dominic NEGOTIATION
Tony FollerCanadaStephen Shaw NEW
Munro FerenczSpainIoni Bowcher QUALIFIED
Maisha RulapaughFranceIoni Bowcher UNQUALIFIED
Johnson SergiUnited KingdomStephen Shaw NEW
Kaitlin OstroskyAustraliaIoni Bowcher RENEWAL
Izzy GarufiArgentinaBernardo Dominic PROPOSAL
Claire TollnerArgentinaIvan Magalhaes PROPOSAL
Silvio SlusarskiBrazilStephen Shaw PROPOSAL
Johnson SergiGermanyAsiya Javayant PROPOSAL
Munro FerenczIndiaAsiya Javayant UNQUALIFIED
Ashley DoeFranceStephen Shaw UNQUALIFIED
Smith GlickItalyStephen Shaw PROPOSAL
Izzy GarufiGermanyXuxue Feng PROPOSAL
Julie StensethIndiaAsiya Javayant PROPOSAL
Aruna FigeroaFranceAnna Fali PROPOSAL
Ivar PaprockiGermanyBernardo Dominic QUALIFIED
James ButtAustraliaIoni Bowcher QUALIFIED
Chavez BriddickFranceXuxue Feng QUALIFIED
Claire TollnerFranceIvan Magalhaes QUALIFIED
Kaitlin OstroskyIndiaAnna Fali NEW
Mujtaba NickaUnited KingdomAnna Fali UNQUALIFIED
Aika InouyeCanadaAmy Elsner QUALIFIED
Kadeem FlosiFranceStephen Shaw NEGOTIATION
Octavia MaletGermanyXuxue Feng UNQUALIFIED
Adams MorascaSpainBernardo Dominic PROPOSAL
Deepesh ChuiArgentinaAsiya Javayant NEGOTIATION
Aika InouyeSpainAsiya Javayant NEGOTIATION
Salvatore StockhamRussiaIvan Magalhaes NEGOTIATION
Mujtaba NickaItalyOnyama Limba RENEWAL
Tony FollerAustraliaStephen Shaw UNQUALIFIED
Kadeem FlosiSpainIoni Bowcher NEGOTIATION
Nicolas IturbideAustraliaIoni Bowcher NEGOTIATION
Darci PoquetteSpainIvan Magalhaes QUALIFIED
Mujtaba NickaFranceIoni Bowcher RENEWAL
Jefferson SchemmerFranceIvan Magalhaes PROPOSAL
Kadeem FlosiRussiaAnna Fali NEGOTIATION
David DarakjyRussiaStephen Shaw NEGOTIATION
Frozen Columns
Name
Adams Morasca
Costa Dilliard
David Darakjy
Aditya Kusko
Misaki Royster
Isabel Bowley
Cody Saylors
Faith Gillian
Ivar Paprocki
Smith Glick
Greenwood Bolognia
Mujtaba Nicka
Misaki Royster
James Butt
James Butt
Jones Vocelka
Costa Dilliard
Octavia Malet
Arvin Albares
Izzy Garufi
Wickens Nestle
Adams Morasca
Johnson Sergi
Jones Vocelka
Jeanfrancois Venere
Aika Inouye
Aika Inouye
Johnson Sergi
Francesco Shinko
Costa Dilliard
Wickens Nestle
Deepesh Chui
Ivar Paprocki
Greenwood Bolognia
Deepesh Chui
Mayumi Kolmetz
Darci Poquette
Darci Poquette
Adams Morasca
Maisha Rulapaugh
Murillo Malet
Kaitlin Ostrosky
Stacey Maclead
Murillo Malet
Aditya Kusko
Izzy Garufi
Leja Caldarera
Ashley Doe
Maisha Rulapaugh
Faith Gillian
IdCountryDate
1000United Kingdom2026-04-21
1001Australia2026-04-25
1002Italy2026-05-12
1003Argentina2026-04-17
1004Argentina2026-04-16
1005Canada2026-04-30
1006France2026-05-09
1007India2026-05-09
1008Russia2026-04-13
1009France2026-05-07
1010Brazil2026-04-21
1011Germany2026-04-29
1012Brazil2026-04-14
1013Brazil2026-04-27
1014Argentina2026-04-15
1015United Kingdom2026-04-14
1016India2026-04-19
1017France2026-05-02
1018Brazil2026-04-26
1019Canada2026-04-15
1020United Kingdom2026-04-29
1021Australia2026-04-20
1022Spain2026-04-23
1023Canada2026-05-07
1024Brazil2026-05-06
1025Italy2026-04-23
1026Brazil2026-04-14
1027Spain2026-04-16
1028Germany2026-04-20
1029Canada2026-04-14
1030Spain2026-05-11
1031Brazil2026-05-07
1032Spain2026-04-18
1033Argentina2026-04-13
1034Russia2026-05-02
1035Canada2026-05-01
1036Spain2026-04-27
1037Australia2026-04-30
1038Spain2026-04-19
1039Brazil2026-04-20
1040Spain2026-05-09
1041Canada2026-04-30
1042France2026-05-09
1043Russia2026-05-09
1044Italy2026-05-02
1045United Kingdom2026-04-19
1046Argentina2026-05-07
1047Argentina2026-05-10
1048Japan2026-04-23
1049Australia2026-04-20

On-Demand Data

NameIdCountryDate
Munro Ferencz1000Canada2026-05-03
Adams Morasca1001Japan2026-05-11
Aruna Figeroa1002India2026-05-05
Jennifer Amigon1003France2026-04-14
Aika Inouye1004Spain2026-04-16
Faith Gillian1005Japan2026-04-17
Smith Glick1006Argentina2026-04-29
Chavez Briddick1007Canada2026-04-29
Arvin Albares1008Australia2026-05-10
Tony Foller1009Italy2026-04-18
Alejandro Perin1010Canada2026-05-07
Nicolas Iturbide1011United Kingdom2026-04-18
Maria Marrier1012Italy2026-05-10
Johnson Sergi1013Spain2026-04-25
Emily Whobrey1014Germany2026-05-08
Wickens Nestle1015Australia2026-04-22
Rodrigues Campain1016Japan2026-05-06
Murillo Malet1017Canada2026-05-01
Antonio Caudy1018Argentina2026-04-19
Ashley Doe1019Germany2026-05-06
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Cody SaylorsUnited KingdomStephen Shaw NEW
Leja CaldareraFranceElwin Sharvill NEGOTIATION
Juan WieserRussiaIvan Magalhaes PROPOSAL
Sinclair WaycottGermanyIvan Magalhaes UNQUALIFIED
Chavez BriddickGermanyAmy Elsner PROPOSAL
Morrow RutaArgentinaElwin Sharvill PROPOSAL
Isabel BowleyAustraliaIvan Magalhaes UNQUALIFIED
Leon OldroydIndiaStephen Shaw NEW
Nicolas IturbideCanadaOnyama Limba NEGOTIATION
Munro FerenczGermanyOnyama Limba PROPOSAL
Cody SaylorsArgentinaStephen Shaw PROPOSAL
Stacey MacleadUnited KingdomBernardo Dominic QUALIFIED
Adams MorascaArgentinaOnyama Limba UNQUALIFIED
Misaki RoysterBrazilAnna Fali NEW
Greenwood BologniaItalyIvan Magalhaes NEGOTIATION
Murillo MaletAustraliaStephen Shaw NEGOTIATION
Octavia MaletCanadaIoni Bowcher UNQUALIFIED
Deepesh ChuiCanadaIoni Bowcher NEW
Kaitlin OstroskyItalyIvan Magalhaes RENEWAL
Kadeem FlosiCanadaStephen Shaw UNQUALIFIED
Wickens NestleGermanyAmy Elsner RENEWAL
Silvio SlusarskiArgentinaXuxue Feng QUALIFIED
Wickens NestleIndiaOnyama Limba UNQUALIFIED
Adams MorascaUnited KingdomXuxue Feng NEGOTIATION
Johnson SergiSpainOnyama Limba RENEWAL
Arvin AlbaresFranceOnyama Limba NEW
Maria MarrierJapanAnna Fali QUALIFIED
James ButtJapanAmy Elsner NEW
Stacey MacleadJapanXuxue Feng RENEWAL
Emily WhobreyBrazilAnna Fali NEGOTIATION
David DarakjyUnited KingdomIvan Magalhaes PROPOSAL
Rodrigues CampainAustraliaXuxue Feng QUALIFIED
Emily WhobreyIndiaBernardo Dominic PROPOSAL
Nicolas IturbideAustraliaXuxue Feng RENEWAL
Deepesh ChuiAustraliaOnyama Limba QUALIFIED
Ricardo GauchoFranceIvan Magalhaes NEW
Silvio SlusarskiUnited KingdomIoni Bowcher UNQUALIFIED
Smith GlickJapanStephen Shaw QUALIFIED
Wickens NestleSpainAsiya Javayant PROPOSAL
Arvin AlbaresUnited KingdomStephen Shaw UNQUALIFIED

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