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
Salvatore StockhamJapanAmy Elsner QUALIFIED
Emily WhobreyUnited KingdomStephen Shaw UNQUALIFIED
Faith GillianJapanBernardo Dominic NEW
Faith GillianJapanXuxue Feng NEW
Stacey MacleadJapanAmy Elsner QUALIFIED
Aditya KuskoUnited KingdomAmy Elsner RENEWAL
Clifford RimSpainIoni Bowcher QUALIFIED
Chavez BriddickRussiaStephen Shaw NEW
Greenwood BologniaRussiaIvan Magalhaes QUALIFIED
Juan WieserCanadaXuxue Feng NEGOTIATION
Jones VocelkaItalyXuxue Feng QUALIFIED
Claire TollnerJapanIvan Magalhaes PROPOSAL
James ButtFranceAsiya Javayant NEGOTIATION
Deepesh ChuiFranceElwin Sharvill NEW
Leon OldroydBrazilAnna Fali NEW
Jones VocelkaItalyAsiya Javayant UNQUALIFIED
Cody SaylorsSpainXuxue Feng UNQUALIFIED
Isabel BowleyArgentinaElwin Sharvill QUALIFIED
Cody SaylorsIndiaAmy Elsner NEW
Munro FerenczJapanIvan Magalhaes QUALIFIED
Francesco ShinkoItalyAnna Fali RENEWAL
Emily WhobreyGermanyIoni Bowcher NEGOTIATION
Jones VocelkaIndiaBernardo Dominic UNQUALIFIED
Emily WhobreyUnited KingdomAnna Fali NEGOTIATION
David DarakjyAustraliaElwin Sharvill UNQUALIFIED
Kadeem FlosiArgentinaStephen Shaw PROPOSAL
Ivar PaprockiSpainAmy Elsner PROPOSAL
Ashley DoeCanadaAnna Fali PROPOSAL
Morrow RutaCanadaXuxue Feng NEGOTIATION
Sinclair WaycottUnited KingdomElwin Sharvill NEW
Morrow RutaUnited KingdomIvan Magalhaes QUALIFIED
Jones VocelkaBrazilIoni Bowcher UNQUALIFIED
Leja CaldareraFranceIoni Bowcher QUALIFIED
Costa DilliardAustraliaIoni Bowcher PROPOSAL
Kaitlin OstroskyFranceXuxue Feng RENEWAL
Octavia MaletGermanyIoni Bowcher NEGOTIATION
Julie StensethItalyIoni Bowcher NEGOTIATION
Kadeem FlosiGermanyAnna Fali QUALIFIED
James ButtFranceAmy Elsner QUALIFIED
Jones VocelkaSpainOnyama Limba NEGOTIATION
Wickens NestleCanadaStephen Shaw NEGOTIATION
Kadeem FlosiCanadaIoni Bowcher NEGOTIATION
Leon OldroydGermanyAsiya Javayant NEW
Maisha RulapaughIndiaIvan Magalhaes QUALIFIED
Smith GlickBrazilAmy Elsner RENEWAL
Leja CaldareraFranceStephen Shaw NEW
Alejandro PerinUnited KingdomBernardo Dominic RENEWAL
James ButtJapanIvan Magalhaes NEW
Stacey MacleadItalyElwin Sharvill QUALIFIED
Adams MorascaCanadaBernardo Dominic PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Alejandro PerinJapanAmy Elsner NEGOTIATION
Julie StensethItalyStephen Shaw UNQUALIFIED
Murillo MaletBrazilAnna Fali QUALIFIED
Nicolas IturbideGermanyIvan Magalhaes UNQUALIFIED
Kadeem FlosiFranceIoni Bowcher NEW
Maria MarrierJapanOnyama Limba PROPOSAL
Leja CaldareraRussiaXuxue Feng NEW
Isabel BowleyJapanIoni Bowcher UNQUALIFIED
Jeanfrancois VenereGermanyIoni Bowcher RENEWAL
Nicolas IturbideGermanyStephen Shaw QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ricardo GauchoRussia2026-04-24Buckley Miller Wright QUALIFIED73Bernardo Dominic
1001Rodrigues CampainRussia2026-04-28Rousseaux, Michael Esq PROPOSAL23Elwin Sharvill
1002Maria MarrierFrance2026-05-15Chemel, James L Cpa UNQUALIFIED11Ivan Magalhaes
1003Chavez BriddickRussia2026-05-08Dorl, James J Esq PROPOSAL17Elwin Sharvill
1004Emily WhobreyArgentina2026-04-30Printing Dimensions NEW36Onyama Limba
1005David DarakjyArgentina2026-05-01Chemel, James L Cpa RENEWAL90Ioni Bowcher
1006Octavia MaletFrance2026-04-23Commercial Press NEGOTIATION91Elwin Sharvill
1007Jones VocelkaSpain2026-04-17Benton, John B Jr UNQUALIFIED11Bernardo Dominic
1008Mayumi KolmetzAustralia2026-05-13Feltz Printing Service PROPOSAL97Amy Elsner
1009Isabel BowleyJapan2026-05-15Dorl, James J Esq NEW46Ioni Bowcher
1010Chavez BriddickItaly2026-04-21Truhlar And Truhlar Attys RENEWAL25Ioni Bowcher
1011James ButtItaly2026-05-10Morlong Associates QUALIFIED95Ivan Magalhaes
1012Arvin AlbaresBrazil2026-05-16Chemel, James L Cpa PROPOSAL24Asiya Javayant
1013Wickens NestleItaly2026-04-29Feiner Bros UNQUALIFIED53Stephen Shaw
1014Silvio SlusarskiSpain2026-05-14Feltz Printing Service NEGOTIATION43Onyama Limba
1015Stacey MacleadUnited Kingdom2026-05-10Chemel, James L Cpa UNQUALIFIED95Bernardo Dominic
1016Arvin AlbaresGermany2026-04-28Chemel, James L Cpa NEGOTIATION67Bernardo Dominic
1017Kadeem FlosiGermany2026-04-17Printing Dimensions NEW76Onyama Limba
1018Maria MarrierIndia2026-05-01Buckley Miller Wright PROPOSAL64Asiya Javayant
1019Francesco ShinkoArgentina2026-04-26Printing Dimensions QUALIFIED96Onyama Limba
1020Adams MorascaArgentina2026-04-18Truhlar And Truhlar Attys QUALIFIED70Ioni Bowcher
1021Jones VocelkaItaly2026-05-06Rangoni Of Florence NEGOTIATION99Elwin Sharvill
1022Tony FollerRussia2026-05-12Commercial Press NEW21Elwin Sharvill
1023Chavez BriddickIndia2026-04-26Buckley Miller Wright QUALIFIED75Ivan Magalhaes
1024Leon OldroydJapan2026-04-22Benton, John B Jr NEW53Onyama Limba
1025Nicolas IturbideIndia2026-05-04Morlong Associates UNQUALIFIED79Anna Fali
1026Greenwood BologniaJapan2026-04-30Feiner Bros PROPOSAL53Bernardo Dominic
1027Deepesh ChuiCanada2026-04-25Feiner Bros NEGOTIATION19Stephen Shaw
1028Aditya KuskoIndia2026-04-21Feltz Printing Service UNQUALIFIED79Elwin Sharvill
1029Kadeem FlosiCanada2026-05-10Dorl, James J Esq UNQUALIFIED47Ivan Magalhaes
1030Aditya KuskoUnited Kingdom2026-05-13Feltz Printing Service RENEWAL67Anna Fali
1031Emily WhobreyIndia2026-05-07Buckley Miller Wright RENEWAL25Elwin Sharvill
1032Ashley DoeSpain2026-04-24Chemel, James L Cpa RENEWAL57Anna Fali
1033Costa DilliardItaly2026-05-01Buckley Miller Wright RENEWAL96Bernardo Dominic
1034Jennifer AmigonFrance2026-05-01Buckley Miller Wright QUALIFIED24Elwin Sharvill
1035Wickens NestleCanada2026-04-26Feiner Bros RENEWAL92Anna Fali
1036Leon OldroydJapan2026-04-29Chemel, James L Cpa NEGOTIATION63Xuxue Feng
1037Aditya KuskoGermany2026-05-13Dorl, James J Esq NEGOTIATION32Onyama Limba
1038Deepesh ChuiItaly2026-04-24Printing Dimensions RENEWAL45Amy Elsner
1039Francesco ShinkoFrance2026-05-13Rangoni Of Florence NEGOTIATION2Stephen Shaw
1040Salvatore StockhamCanada2026-05-10Chemel, James L Cpa NEW52Anna Fali
1041Mujtaba NickaFrance2026-05-11Rousseaux, Michael Esq UNQUALIFIED50Asiya Javayant
1042Kadeem FlosiFrance2026-05-16Feltz Printing Service NEW71Anna Fali
1043Claire TollnerIndia2026-05-16Feltz Printing Service UNQUALIFIED90Stephen Shaw
1044Nicolas IturbideSpain2026-04-24Buckley Miller Wright PROPOSAL81Onyama Limba
1045Greenwood BologniaArgentina2026-05-16Chapman, Ross E Esq NEW99Anna Fali
1046Ashley DoeUnited Kingdom2026-05-10Benton, John B Jr NEW46Anna Fali
1047Deepesh ChuiIndia2026-05-10Chanay, Jeffrey A Esq PROPOSAL78Ivan Magalhaes
1048Rodrigues CampainBrazil2026-05-06Feiner Bros PROPOSAL91Bernardo Dominic
1049Clifford RimIndia2026-05-07Feiner Bros NEW5Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
David DarakjyCanadaBernardo Dominic QUALIFIED
Deepesh ChuiJapanIvan Magalhaes PROPOSAL
Greenwood BologniaRussiaAsiya Javayant PROPOSAL
Adams MorascaJapanAsiya Javayant NEGOTIATION
James ButtArgentinaElwin Sharvill NEGOTIATION
Darci PoquetteItalyAsiya Javayant NEGOTIATION
Chavez BriddickArgentinaXuxue Feng PROPOSAL
Jefferson SchemmerIndiaAsiya Javayant PROPOSAL
Mayumi KolmetzCanadaAsiya Javayant QUALIFIED
Antonio CaudyCanadaBernardo Dominic NEW
Aruna FigeroaArgentinaXuxue Feng PROPOSAL
Maisha RulapaughUnited KingdomAmy Elsner RENEWAL
Ivar PaprockiIndiaIoni Bowcher RENEWAL
Izzy GarufiUnited KingdomBernardo Dominic RENEWAL
Munro FerenczSpainAmy Elsner NEGOTIATION
Ashley DoeUnited KingdomXuxue Feng NEGOTIATION
Antonio CaudyBrazilAmy Elsner NEGOTIATION
Arvin AlbaresIndiaBernardo Dominic UNQUALIFIED
Costa DilliardIndiaElwin Sharvill QUALIFIED
Johnson SergiUnited KingdomBernardo Dominic PROPOSAL
Jefferson SchemmerJapanStephen Shaw NEGOTIATION
Rodrigues CampainItalyXuxue Feng UNQUALIFIED
Murillo MaletRussiaAnna Fali QUALIFIED
Antonio CaudyRussiaAsiya Javayant RENEWAL
Darci PoquetteFranceBernardo Dominic UNQUALIFIED
Juan WieserBrazilBernardo Dominic QUALIFIED
Darci PoquetteFranceOnyama Limba NEGOTIATION
Chavez BriddickCanadaBernardo Dominic QUALIFIED
Aruna FigeroaUnited KingdomStephen Shaw NEW
Morrow RutaFranceStephen Shaw QUALIFIED
Faith GillianIndiaAsiya Javayant NEW
Mujtaba NickaArgentinaBernardo Dominic NEGOTIATION
Claire TollnerSpainBernardo Dominic NEW
Isabel BowleyArgentinaBernardo Dominic UNQUALIFIED
Silvio SlusarskiCanadaAnna Fali NEGOTIATION
Arvin AlbaresAustraliaAsiya Javayant NEGOTIATION
Tony FollerFranceElwin Sharvill RENEWAL
Smith GlickJapanAsiya Javayant NEGOTIATION
Maria MarrierCanadaIoni Bowcher PROPOSAL
Munro FerenczIndiaAnna Fali UNQUALIFIED
Chavez BriddickGermanyStephen Shaw NEW
Jones VocelkaJapanBernardo Dominic NEGOTIATION
Aika InouyeItalyIvan Magalhaes RENEWAL
Mujtaba NickaArgentinaOnyama Limba UNQUALIFIED
Chavez BriddickRussiaXuxue Feng UNQUALIFIED
Ashley DoeBrazilAnna Fali NEGOTIATION
Isabel BowleyBrazilOnyama Limba RENEWAL
Rodrigues CampainBrazilBernardo Dominic UNQUALIFIED
Aruna FigeroaCanadaElwin Sharvill NEGOTIATION
Aruna FigeroaIndiaStephen Shaw UNQUALIFIED
Frozen Columns
Name
Juan Wieser
Salvatore Stockham
Aruna Figeroa
Ivar Paprocki
Darci Poquette
Claire Tollner
Antonio Caudy
Isabel Bowley
Murillo Malet
Alejandro Perin
Aruna Figeroa
Mujtaba Nicka
Aditya Kusko
Maisha Rulapaugh
Mayumi Kolmetz
Alejandro Perin
Francesco Shinko
Leon Oldroyd
Rodrigues Campain
Smith Glick
Octavia Malet
Maisha Rulapaugh
Kadeem Flosi
Ivar Paprocki
Mayumi Kolmetz
Nicolas Iturbide
Clifford Rim
Tony Foller
Darci Poquette
Aditya Kusko
Johnson Sergi
Jefferson Schemmer
Maisha Rulapaugh
Francesco Shinko
Faith Gillian
Maria Marrier
Darci Poquette
Jones Vocelka
Antonio Caudy
Aika Inouye
Tony Foller
Rodrigues Campain
Juan Wieser
Kaitlin Ostrosky
Kadeem Flosi
Leon Oldroyd
David Darakjy
Kaitlin Ostrosky
Jennifer Amigon
Deepesh Chui
IdCountryDate
1000Argentina2026-05-11
1001Argentina2026-05-10
1002United Kingdom2026-05-16
1003Russia2026-05-03
1004Japan2026-05-14
1005Canada2026-04-29
1006Australia2026-05-07
1007Spain2026-04-29
1008Japan2026-04-21
1009Canada2026-05-11
1010Spain2026-05-15
1011Italy2026-05-03
1012Argentina2026-05-11
1013Argentina2026-05-10
1014Russia2026-05-08
1015Argentina2026-05-05
1016France2026-04-20
1017Canada2026-04-21
1018India2026-04-22
1019Brazil2026-04-25
1020Japan2026-05-13
1021Spain2026-05-05
1022France2026-05-12
1023Germany2026-04-26
1024Spain2026-04-18
1025Brazil2026-05-16
1026Brazil2026-05-07
1027Germany2026-04-17
1028Canada2026-04-20
1029Canada2026-05-13
1030Canada2026-05-08
1031Canada2026-04-28
1032India2026-05-03
1033France2026-05-01
1034India2026-04-25
1035United Kingdom2026-05-12
1036France2026-05-06
1037Italy2026-05-10
1038Italy2026-05-03
1039Japan2026-05-02
1040Brazil2026-04-24
1041India2026-05-14
1042France2026-05-15
1043Germany2026-05-06
1044Italy2026-05-06
1045Spain2026-04-30
1046Canada2026-04-29
1047Italy2026-04-17
1048Brazil2026-05-14
1049Germany2026-04-17

On-Demand Data

NameIdCountryDate
Kaitlin Ostrosky1000Argentina2026-04-20
Leja Caldarera1001Brazil2026-04-24
Aruna Figeroa1002Spain2026-04-24
Claire Tollner1003United Kingdom2026-04-22
Francesco Shinko1004Canada2026-05-04
Wickens Nestle1005Germany2026-05-08
Tony Foller1006Germany2026-05-01
Jennifer Amigon1007United Kingdom2026-05-03
Munro Ferencz1008Italy2026-04-30
Francesco Shinko1009India2026-05-05
Alejandro Perin1010Spain2026-05-09
Arvin Albares1011Argentina2026-05-02
Munro Ferencz1012Argentina2026-04-20
Smith Glick1013Spain2026-04-20
Silvio Slusarski1014India2026-04-25
Francesco Shinko1015Japan2026-04-25
Greenwood Bolognia1016Japan2026-04-20
Jefferson Schemmer1017Germany2026-05-04
Morrow Ruta1018Australia2026-05-03
Izzy Garufi1019France2026-04-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyJapanAmy Elsner QUALIFIED
Salvatore StockhamIndiaAmy Elsner NEW
Cody SaylorsCanadaXuxue Feng NEGOTIATION
Jones VocelkaItalyOnyama Limba NEGOTIATION
Juan WieserItalyElwin Sharvill PROPOSAL
David DarakjySpainAnna Fali QUALIFIED
Misaki RoysterIndiaAmy Elsner NEW
Faith GillianJapanStephen Shaw QUALIFIED
Leon OldroydRussiaIoni Bowcher NEGOTIATION
Kadeem FlosiSpainOnyama Limba NEGOTIATION
Kadeem FlosiSpainAnna Fali NEW
Claire TollnerSpainIoni Bowcher PROPOSAL
Mujtaba NickaBrazilAsiya Javayant NEGOTIATION
Tony FollerItalyOnyama Limba NEGOTIATION
Emily WhobreyUnited KingdomOnyama Limba RENEWAL
Leja CaldareraBrazilIvan Magalhaes RENEWAL
Tony FollerUnited KingdomOnyama Limba UNQUALIFIED
Leon OldroydSpainStephen Shaw NEW
Misaki RoysterIndiaAnna Fali PROPOSAL
Jones VocelkaJapanIvan Magalhaes NEW
Smith GlickItalyXuxue Feng UNQUALIFIED
Ashley DoeUnited KingdomXuxue Feng PROPOSAL
Claire TollnerBrazilStephen Shaw NEGOTIATION
Alejandro PerinIndiaAmy Elsner QUALIFIED
Antonio CaudyRussiaElwin Sharvill NEGOTIATION
Leja CaldareraBrazilIoni Bowcher PROPOSAL
Ivar PaprockiJapanAmy Elsner UNQUALIFIED
David DarakjyAustraliaAsiya Javayant NEGOTIATION
Darci PoquetteJapanXuxue Feng RENEWAL
Alejandro PerinCanadaIoni Bowcher UNQUALIFIED
Kaitlin OstroskyGermanyAmy Elsner UNQUALIFIED
Darci PoquetteIndiaIoni Bowcher NEGOTIATION
Stacey MacleadCanadaAnna Fali NEGOTIATION
Mayumi KolmetzSpainStephen Shaw PROPOSAL
Rodrigues CampainFranceAmy Elsner PROPOSAL
Johnson SergiItalyIvan Magalhaes UNQUALIFIED
Chavez BriddickFranceStephen Shaw NEW
Kadeem FlosiSpainElwin Sharvill PROPOSAL
Izzy GarufiIndiaIoni Bowcher PROPOSAL
Juan WieserCanadaIvan Magalhaes 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>