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
Maria MarrierJapanBernardo Dominic NEGOTIATION
Smith GlickBrazilElwin Sharvill NEW
Smith GlickGermanyIvan Magalhaes QUALIFIED
Wickens NestleItalyOnyama Limba UNQUALIFIED
Jefferson SchemmerGermanyStephen Shaw RENEWAL
Julie StensethJapanIoni Bowcher NEW
Juan WieserAustraliaIoni Bowcher QUALIFIED
Aditya KuskoJapanAmy Elsner QUALIFIED
Claire TollnerGermanyBernardo Dominic UNQUALIFIED
Nicolas IturbideRussiaStephen Shaw NEGOTIATION
Jennifer AmigonIndiaBernardo Dominic NEGOTIATION
Nicolas IturbideJapanAmy Elsner UNQUALIFIED
Aika InouyeAustraliaElwin Sharvill NEGOTIATION
Salvatore StockhamItalyBernardo Dominic NEW
Octavia MaletJapanStephen Shaw RENEWAL
Faith GillianIndiaXuxue Feng NEGOTIATION
Stacey MacleadIndiaIvan Magalhaes NEW
Mayumi KolmetzUnited KingdomXuxue Feng UNQUALIFIED
David DarakjySpainXuxue Feng NEGOTIATION
Alejandro PerinAustraliaBernardo Dominic QUALIFIED
Claire TollnerRussiaStephen Shaw QUALIFIED
Izzy GarufiUnited KingdomXuxue Feng NEGOTIATION
Kaitlin OstroskyUnited KingdomAmy Elsner NEGOTIATION
Emily WhobreyUnited KingdomAnna Fali QUALIFIED
Leja CaldareraUnited KingdomElwin Sharvill NEGOTIATION
Francesco ShinkoJapanAsiya Javayant UNQUALIFIED
Sinclair WaycottFranceIvan Magalhaes PROPOSAL
Greenwood BologniaArgentinaElwin Sharvill UNQUALIFIED
Francesco ShinkoFranceElwin Sharvill UNQUALIFIED
Leon OldroydSpainAsiya Javayant PROPOSAL
Jennifer AmigonBrazilAnna Fali NEW
Wickens NestleArgentinaElwin Sharvill NEW
Emily WhobreyGermanyAmy Elsner RENEWAL
Wickens NestleItalyOnyama Limba PROPOSAL
Kaitlin OstroskyBrazilIvan Magalhaes UNQUALIFIED
Leja CaldareraGermanyAnna Fali NEW
Chavez BriddickIndiaBernardo Dominic NEGOTIATION
Darci PoquetteJapanAnna Fali NEW
Faith GillianUnited KingdomAsiya Javayant QUALIFIED
Jones VocelkaAustraliaXuxue Feng RENEWAL
Octavia MaletFranceIvan Magalhaes UNQUALIFIED
Adams MorascaSpainXuxue Feng RENEWAL
Morrow RutaAustraliaIoni Bowcher NEW
Leon OldroydSpainXuxue Feng UNQUALIFIED
Octavia MaletArgentinaAsiya Javayant QUALIFIED
Silvio SlusarskiUnited KingdomElwin Sharvill RENEWAL
Francesco ShinkoIndiaAsiya Javayant UNQUALIFIED
David DarakjyGermanyStephen Shaw QUALIFIED
Morrow RutaFranceAmy Elsner QUALIFIED
Jennifer AmigonItalyAmy Elsner NEW
Horizontal
NameCountryRepresentativeStatus
Aika InouyeAustraliaElwin Sharvill PROPOSAL
Misaki RoysterIndiaIvan Magalhaes NEGOTIATION
Aditya KuskoArgentinaIoni Bowcher QUALIFIED
Misaki RoysterSpainOnyama Limba RENEWAL
Cody SaylorsSpainAmy Elsner QUALIFIED
Nicolas IturbideIndiaAmy Elsner QUALIFIED
Aditya KuskoFranceStephen Shaw QUALIFIED
Mujtaba NickaJapanAmy Elsner NEW
Aruna FigeroaFranceIoni Bowcher PROPOSAL
Francesco ShinkoAustraliaXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Cody SaylorsGermany2026-05-28Rousseaux, Michael Esq NEGOTIATION31Ivan Magalhaes
1001Kadeem FlosiIndia2026-05-19Chanay, Jeffrey A Esq UNQUALIFIED7Ivan Magalhaes
1002Alejandro PerinSpain2026-06-08Rangoni Of Florence RENEWAL25Elwin Sharvill
1003Maria MarrierGermany2026-06-08Chapman, Ross E Esq QUALIFIED97Bernardo Dominic
1004Kadeem FlosiAustralia2026-06-11Printing Dimensions UNQUALIFIED32Amy Elsner
1005Mayumi KolmetzUnited Kingdom2026-05-24Feltz Printing Service NEW59Elwin Sharvill
1006Maria MarrierCanada2026-05-31Feltz Printing Service RENEWAL57Elwin Sharvill
1007Deepesh ChuiArgentina2026-06-02Printing Dimensions QUALIFIED28Stephen Shaw
1008Greenwood BologniaCanada2026-05-25Buckley Miller Wright UNQUALIFIED80Anna Fali
1009Darci PoquetteBrazil2026-06-05King, Christopher A Esq RENEWAL32Anna Fali
1010Arvin AlbaresSpain2026-06-04Chapman, Ross E Esq PROPOSAL64Stephen Shaw
1011Isabel BowleyFrance2026-06-14Buckley Miller Wright NEGOTIATION21Ivan Magalhaes
1012Jones VocelkaUnited Kingdom2026-06-01King, Christopher A Esq QUALIFIED37Ivan Magalhaes
1013Francesco ShinkoFrance2026-05-29King, Christopher A Esq QUALIFIED55Anna Fali
1014Darci PoquetteIndia2026-06-07Buckley Miller Wright NEGOTIATION10Anna Fali
1015Ashley DoeCanada2026-06-10Truhlar And Truhlar Attys NEW51Ioni Bowcher
1016Maria MarrierIndia2026-05-18Buckley Miller Wright QUALIFIED46Anna Fali
1017Costa DilliardArgentina2026-05-23Feiner Bros NEW61Amy Elsner
1018Ashley DoeRussia2026-06-01Chanay, Jeffrey A Esq RENEWAL33Amy Elsner
1019Costa DilliardAustralia2026-05-28Chapman, Ross E Esq QUALIFIED74Onyama Limba
1020Julie StensethAustralia2026-06-05Commercial Press PROPOSAL19Amy Elsner
1021Leon OldroydCanada2026-06-04Printing Dimensions NEGOTIATION16Onyama Limba
1022Deepesh ChuiJapan2026-06-13Feltz Printing Service NEGOTIATION67Ioni Bowcher
1023Tony FollerGermany2026-06-09Feiner Bros NEGOTIATION53Ioni Bowcher
1024Jones VocelkaUnited Kingdom2026-06-06Chemel, James L Cpa NEW1Xuxue Feng
1025Kadeem FlosiCanada2026-05-29Feiner Bros UNQUALIFIED98Ivan Magalhaes
1026Aika InouyeItaly2026-05-20Chemel, James L Cpa NEW39Ivan Magalhaes
1027Jones VocelkaSpain2026-06-01Feltz Printing Service UNQUALIFIED91Amy Elsner
1028Darci PoquetteAustralia2026-06-11Chanay, Jeffrey A Esq QUALIFIED97Ivan Magalhaes
1029Nicolas IturbideBrazil2026-05-28Printing Dimensions PROPOSAL83Bernardo Dominic
1030James ButtBrazil2026-05-24Morlong Associates NEW74Stephen Shaw
1031Julie StensethJapan2026-06-15King, Christopher A Esq UNQUALIFIED70Ioni Bowcher
1032Jefferson SchemmerGermany2026-06-12Morlong Associates NEW52Ivan Magalhaes
1033David DarakjyFrance2026-05-30Dorl, James J Esq UNQUALIFIED41Asiya Javayant
1034Faith GillianArgentina2026-05-25Commercial Press UNQUALIFIED85Amy Elsner
1035Morrow RutaArgentina2026-06-08Buckley Miller Wright UNQUALIFIED65Amy Elsner
1036Juan WieserRussia2026-05-18Chanay, Jeffrey A Esq PROPOSAL5Onyama Limba
1037Faith GillianJapan2026-05-28Benton, John B Jr RENEWAL13Asiya Javayant
1038Ivar PaprockiCanada2026-05-18Printing Dimensions UNQUALIFIED85Asiya Javayant
1039Jones VocelkaJapan2026-06-06Commercial Press QUALIFIED69Ivan Magalhaes
1040James ButtGermany2026-06-12Printing Dimensions NEGOTIATION35Elwin Sharvill
1041Silvio SlusarskiUnited Kingdom2026-05-23Chapman, Ross E Esq QUALIFIED77Ioni Bowcher
1042Leja CaldareraCanada2026-06-09Morlong Associates NEW89Amy Elsner
1043Claire TollnerCanada2026-06-03Feiner Bros RENEWAL2Asiya Javayant
1044Stacey MacleadGermany2026-06-09Commercial Press NEGOTIATION50Asiya Javayant
1045Kaitlin OstroskyFrance2026-06-01Chapman, Ross E Esq PROPOSAL2Onyama Limba
1046Maisha RulapaughCanada2026-05-23Benton, John B Jr NEW76Ioni Bowcher
1047Darci PoquetteAustralia2026-06-09Chemel, James L Cpa PROPOSAL63Ivan Magalhaes
1048Izzy GarufiBrazil2026-06-11Chanay, Jeffrey A Esq NEGOTIATION81Asiya Javayant
1049Kadeem FlosiSpain2026-05-23Feltz Printing Service NEGOTIATION15Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Smith GlickJapanBernardo Dominic NEW
Leja CaldareraArgentinaOnyama Limba NEW
Murillo MaletIndiaAsiya Javayant QUALIFIED
Alejandro PerinSpainElwin Sharvill NEGOTIATION
Julie StensethBrazilBernardo Dominic QUALIFIED
Jennifer AmigonGermanyXuxue Feng NEGOTIATION
Nicolas IturbideAustraliaIoni Bowcher UNQUALIFIED
Ricardo GauchoBrazilAsiya Javayant QUALIFIED
Ashley DoeGermanyXuxue Feng RENEWAL
Wickens NestleCanadaAsiya Javayant NEW
Darci PoquetteGermanyXuxue Feng NEGOTIATION
Francesco ShinkoJapanBernardo Dominic RENEWAL
Claire TollnerGermanyAsiya Javayant NEW
Silvio SlusarskiBrazilIoni Bowcher NEGOTIATION
Sinclair WaycottRussiaXuxue Feng QUALIFIED
Juan WieserRussiaIoni Bowcher NEW
Francesco ShinkoUnited KingdomAmy Elsner UNQUALIFIED
Darci PoquetteCanadaAmy Elsner NEGOTIATION
Mujtaba NickaRussiaBernardo Dominic PROPOSAL
Clifford RimUnited KingdomXuxue Feng UNQUALIFIED
Kaitlin OstroskyArgentinaAnna Fali PROPOSAL
Juan WieserSpainIvan Magalhaes RENEWAL
Leja CaldareraJapanElwin Sharvill NEW
Adams MorascaRussiaAsiya Javayant NEGOTIATION
Leon OldroydFranceAsiya Javayant RENEWAL
Francesco ShinkoIndiaAmy Elsner UNQUALIFIED
Salvatore StockhamJapanElwin Sharvill NEGOTIATION
Francesco ShinkoBrazilElwin Sharvill RENEWAL
Stacey MacleadArgentinaIoni Bowcher UNQUALIFIED
Mujtaba NickaAustraliaOnyama Limba NEGOTIATION
Ricardo GauchoJapanXuxue Feng NEGOTIATION
Jennifer AmigonCanadaStephen Shaw NEW
Francesco ShinkoItalyElwin Sharvill RENEWAL
David DarakjyRussiaAmy Elsner NEGOTIATION
Misaki RoysterArgentinaAnna Fali NEGOTIATION
Ivar PaprockiItalyIoni Bowcher RENEWAL
Salvatore StockhamBrazilStephen Shaw NEW
Tony FollerGermanyIoni Bowcher NEGOTIATION
Juan WieserRussiaIoni Bowcher UNQUALIFIED
Julie StensethJapanAmy Elsner QUALIFIED
Antonio CaudyUnited KingdomBernardo Dominic RENEWAL
Emily WhobreyRussiaAsiya Javayant PROPOSAL
David DarakjyRussiaXuxue Feng NEGOTIATION
David DarakjyCanadaXuxue Feng QUALIFIED
Claire TollnerFranceStephen Shaw QUALIFIED
Mayumi KolmetzArgentinaBernardo Dominic PROPOSAL
Jennifer AmigonRussiaElwin Sharvill QUALIFIED
Johnson SergiFranceAmy Elsner RENEWAL
Adams MorascaItalyOnyama Limba PROPOSAL
Aika InouyeRussiaStephen Shaw QUALIFIED
Frozen Columns
Name
Morrow Ruta
James Butt
Ivar Paprocki
Mayumi Kolmetz
Leja Caldarera
Wickens Nestle
Aika Inouye
Francesco Shinko
Salvatore Stockham
Isabel Bowley
Claire Tollner
Tony Foller
Jefferson Schemmer
Ashley Doe
Mayumi Kolmetz
Francesco Shinko
Wickens Nestle
Stacey Maclead
Aditya Kusko
David Darakjy
Adams Morasca
Ricardo Gaucho
Aika Inouye
Aika Inouye
Jennifer Amigon
Greenwood Bolognia
Rodrigues Campain
Ashley Doe
Mayumi Kolmetz
Kadeem Flosi
Aditya Kusko
Leja Caldarera
Maria Marrier
Cody Saylors
Clifford Rim
Cody Saylors
Smith Glick
Leon Oldroyd
Salvatore Stockham
Jennifer Amigon
Chavez Briddick
Chavez Briddick
Deepesh Chui
Johnson Sergi
Mujtaba Nicka
Aditya Kusko
Julie Stenseth
Jones Vocelka
Aditya Kusko
Chavez Briddick
IdCountryDate
1000India2026-06-07
1001Canada2026-06-05
1002United Kingdom2026-05-27
1003Australia2026-06-06
1004Australia2026-06-10
1005United Kingdom2026-06-02
1006India2026-06-15
1007Canada2026-05-25
1008India2026-06-14
1009United Kingdom2026-05-27
1010Russia2026-06-01
1011Italy2026-05-29
1012Japan2026-05-23
1013Italy2026-05-18
1014Brazil2026-05-18
1015United Kingdom2026-05-22
1016Germany2026-05-19
1017Australia2026-06-06
1018France2026-06-02
1019Argentina2026-05-17
1020France2026-06-08
1021France2026-06-15
1022Japan2026-06-11
1023France2026-05-30
1024Canada2026-06-01
1025Germany2026-05-31
1026Brazil2026-05-25
1027Russia2026-05-27
1028Argentina2026-05-26
1029Spain2026-05-19
1030Australia2026-06-06
1031France2026-05-17
1032Italy2026-05-21
1033United Kingdom2026-06-14
1034Canada2026-06-01
1035Australia2026-05-19
1036Japan2026-06-07
1037Spain2026-05-20
1038United Kingdom2026-05-28
1039Spain2026-05-30
1040Australia2026-05-26
1041Germany2026-06-06
1042Russia2026-05-24
1043Argentina2026-06-03
1044Italy2026-05-18
1045Canada2026-06-10
1046Spain2026-05-27
1047India2026-06-05
1048Brazil2026-05-17
1049United Kingdom2026-05-22

On-Demand Data

NameIdCountryDate
James Butt1000Japan2026-06-06
Johnson Sergi1001Italy2026-06-11
Nicolas Iturbide1002Italy2026-05-31
Mujtaba Nicka1003Canada2026-05-25
Ivar Paprocki1004United Kingdom2026-05-21
Silvio Slusarski1005France2026-05-21
Silvio Slusarski1006Australia2026-06-04
Francesco Shinko1007Australia2026-05-23
David Darakjy1008Russia2026-06-10
Jennifer Amigon1009Brazil2026-05-29
Deepesh Chui1010Russia2026-05-31
Wickens Nestle1011Argentina2026-06-05
Darci Poquette1012Germany2026-05-24
Ricardo Gaucho1013France2026-05-25
Ashley Doe1014Spain2026-05-20
Morrow Ruta1015Germany2026-06-07
Jefferson Schemmer1016United Kingdom2026-05-19
Tony Foller1017Australia2026-05-31
Alejandro Perin1018Brazil2026-06-09
Smith Glick1019Russia2026-05-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Deepesh ChuiCanadaXuxue Feng QUALIFIED
Antonio CaudyBrazilElwin Sharvill PROPOSAL
Jeanfrancois VenereGermanyXuxue Feng NEW
James ButtJapanAmy Elsner NEGOTIATION
Octavia MaletFranceElwin Sharvill PROPOSAL
Isabel BowleyAustraliaElwin Sharvill NEGOTIATION
Aditya KuskoIndiaAsiya Javayant NEW
Misaki RoysterCanadaAsiya Javayant NEGOTIATION
Aditya KuskoUnited KingdomAmy Elsner PROPOSAL
Murillo MaletJapanXuxue Feng QUALIFIED
Misaki RoysterRussiaElwin Sharvill PROPOSAL
Alejandro PerinCanadaAmy Elsner QUALIFIED
Jones VocelkaFranceIoni Bowcher NEW
Arvin AlbaresBrazilElwin Sharvill NEGOTIATION
Izzy GarufiArgentinaAmy Elsner UNQUALIFIED
Cody SaylorsAustraliaOnyama Limba PROPOSAL
Aika InouyeRussiaStephen Shaw NEW
Nicolas IturbideCanadaIvan Magalhaes NEW
Juan WieserAustraliaAsiya Javayant UNQUALIFIED
Sinclair WaycottArgentinaAmy Elsner NEW
Ivar PaprockiIndiaIoni Bowcher NEW
Munro FerenczFranceBernardo Dominic NEW
Stacey MacleadFranceXuxue Feng RENEWAL
Misaki RoysterFranceIvan Magalhaes NEGOTIATION
Wickens NestleAustraliaIvan Magalhaes NEGOTIATION
David DarakjyArgentinaBernardo Dominic RENEWAL
Costa DilliardUnited KingdomIvan Magalhaes RENEWAL
Smith GlickBrazilStephen Shaw NEW
Maisha RulapaughRussiaAsiya Javayant NEW
Emily WhobreyFranceStephen Shaw PROPOSAL
Emily WhobreyFranceOnyama Limba NEW
Ricardo GauchoAustraliaAmy Elsner NEGOTIATION
Ivar PaprockiGermanyIvan Magalhaes QUALIFIED
Aika InouyeRussiaBernardo Dominic RENEWAL
Kadeem FlosiRussiaXuxue Feng RENEWAL
Faith GillianCanadaOnyama Limba PROPOSAL
Arvin AlbaresArgentinaXuxue Feng UNQUALIFIED
Misaki RoysterRussiaIvan Magalhaes NEW
Munro FerenczUnited KingdomAsiya Javayant NEW
Arvin AlbaresSpainIvan Magalhaes NEGOTIATION

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