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
Octavia MaletIndiaAmy Elsner NEGOTIATION
Chavez BriddickCanadaAnna Fali NEW
Adams MorascaSpainXuxue Feng QUALIFIED
Munro FerenczUnited KingdomAnna Fali RENEWAL
Ivar PaprockiAustraliaStephen Shaw UNQUALIFIED
Claire TollnerSpainElwin Sharvill RENEWAL
Clifford RimArgentinaAmy Elsner PROPOSAL
Smith GlickUnited KingdomAsiya Javayant UNQUALIFIED
Ivar PaprockiArgentinaStephen Shaw NEW
Kadeem FlosiAustraliaAnna Fali QUALIFIED
Francesco ShinkoIndiaIvan Magalhaes NEW
Izzy GarufiCanadaAmy Elsner NEW
Izzy GarufiUnited KingdomOnyama Limba NEGOTIATION
Silvio SlusarskiCanadaBernardo Dominic PROPOSAL
Mayumi KolmetzGermanyIoni Bowcher NEW
Salvatore StockhamGermanyIoni Bowcher RENEWAL
Aditya KuskoGermanyAsiya Javayant QUALIFIED
Wickens NestleUnited KingdomAsiya Javayant QUALIFIED
Aruna FigeroaSpainBernardo Dominic UNQUALIFIED
Kaitlin OstroskyUnited KingdomElwin Sharvill RENEWAL
Ivar PaprockiUnited KingdomIoni Bowcher NEW
Jeanfrancois VenereArgentinaIoni Bowcher PROPOSAL
Antonio CaudyJapanAnna Fali QUALIFIED
Maisha RulapaughUnited KingdomAnna Fali RENEWAL
Mujtaba NickaFranceStephen Shaw NEGOTIATION
Arvin AlbaresCanadaAnna Fali UNQUALIFIED
Adams MorascaJapanIoni Bowcher NEGOTIATION
Antonio CaudyJapanAsiya Javayant NEW
Mujtaba NickaFranceXuxue Feng PROPOSAL
Salvatore StockhamFranceAnna Fali NEGOTIATION
Kaitlin OstroskyFranceElwin Sharvill NEW
Darci PoquetteIndiaAmy Elsner RENEWAL
Sinclair WaycottGermanyIoni Bowcher RENEWAL
Ivar PaprockiIndiaAnna Fali RENEWAL
Ricardo GauchoBrazilAsiya Javayant NEW
Munro FerenczFranceIvan Magalhaes PROPOSAL
Octavia MaletAustraliaAmy Elsner NEGOTIATION
Nicolas IturbideUnited KingdomElwin Sharvill NEGOTIATION
Ricardo GauchoItalyAnna Fali UNQUALIFIED
Deepesh ChuiIndiaIoni Bowcher NEW
Nicolas IturbideFranceElwin Sharvill QUALIFIED
Jones VocelkaRussiaXuxue Feng RENEWAL
Arvin AlbaresJapanIoni Bowcher RENEWAL
Rodrigues CampainBrazilAsiya Javayant PROPOSAL
Arvin AlbaresSpainAmy Elsner NEGOTIATION
Adams MorascaJapanAnna Fali NEW
Emily WhobreyAustraliaAsiya Javayant UNQUALIFIED
Misaki RoysterItalyOnyama Limba RENEWAL
Kaitlin OstroskyItalyXuxue Feng NEGOTIATION
Julie StensethItalyIoni Bowcher NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Izzy GarufiCanadaBernardo Dominic QUALIFIED
Nicolas IturbideItalyAsiya Javayant PROPOSAL
Leon OldroydCanadaIoni Bowcher UNQUALIFIED
James ButtBrazilAnna Fali PROPOSAL
Costa DilliardFranceXuxue Feng QUALIFIED
Rodrigues CampainRussiaStephen Shaw QUALIFIED
Julie StensethRussiaXuxue Feng NEW
Ashley DoeSpainStephen Shaw UNQUALIFIED
Leon OldroydRussiaAsiya Javayant NEW
Antonio CaudyJapanIoni Bowcher QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Alejandro PerinUnited Kingdom2026-05-25King, Christopher A Esq UNQUALIFIED85Amy Elsner
1001Jeanfrancois VenereArgentina2026-05-06Chemel, James L Cpa QUALIFIED96Anna Fali
1002Leja CaldareraJapan2026-05-23Dorl, James J Esq RENEWAL39Elwin Sharvill
1003Misaki RoysterBrazil2026-05-07Chemel, James L Cpa PROPOSAL6Anna Fali
1004Smith GlickFrance2026-05-24Chemel, James L Cpa QUALIFIED23Asiya Javayant
1005Tony FollerSpain2026-05-17Truhlar And Truhlar Attys PROPOSAL61Elwin Sharvill
1006Rodrigues CampainIndia2026-05-16Feltz Printing Service RENEWAL4Ioni Bowcher
1007David DarakjyJapan2026-05-06Commercial Press NEGOTIATION4Stephen Shaw
1008Sinclair WaycottJapan2026-05-26Chapman, Ross E Esq RENEWAL96Ivan Magalhaes
1009Morrow RutaGermany2026-05-17Chapman, Ross E Esq QUALIFIED8Xuxue Feng
1010James ButtBrazil2026-05-21Buckley Miller Wright NEW50Asiya Javayant
1011Clifford RimGermany2026-06-04Feltz Printing Service UNQUALIFIED72Bernardo Dominic
1012Francesco ShinkoIndia2026-05-08Chanay, Jeffrey A Esq NEW84Ioni Bowcher
1013Nicolas IturbideIndia2026-05-28Dorl, James J Esq RENEWAL19Ivan Magalhaes
1014Aika InouyeSpain2026-05-11Rousseaux, Michael Esq PROPOSAL32Onyama Limba
1015Francesco ShinkoSpain2026-05-15Feltz Printing Service RENEWAL79Ioni Bowcher
1016Antonio CaudyCanada2026-05-19Dorl, James J Esq NEGOTIATION54Onyama Limba
1017Ricardo GauchoIndia2026-05-17Dorl, James J Esq NEW84Onyama Limba
1018Faith GillianFrance2026-05-15King, Christopher A Esq UNQUALIFIED61Elwin Sharvill
1019Murillo MaletSpain2026-05-21Chapman, Ross E Esq UNQUALIFIED92Stephen Shaw
1020Francesco ShinkoItaly2026-05-31Chapman, Ross E Esq NEGOTIATION56Bernardo Dominic
1021Julie StensethCanada2026-05-17Morlong Associates NEGOTIATION53Onyama Limba
1022Jeanfrancois VenereGermany2026-05-12Dorl, James J Esq NEW99Amy Elsner
1023Costa DilliardSpain2026-06-01Chapman, Ross E Esq NEW35Amy Elsner
1024Greenwood BologniaRussia2026-05-25Buckley Miller Wright QUALIFIED6Xuxue Feng
1025Emily WhobreyAustralia2026-05-26Commercial Press PROPOSAL95Ivan Magalhaes
1026Ricardo GauchoItaly2026-05-20Feltz Printing Service QUALIFIED64Anna Fali
1027Jefferson SchemmerIndia2026-05-31Chapman, Ross E Esq UNQUALIFIED9Ioni Bowcher
1028Maria MarrierGermany2026-05-13Dorl, James J Esq UNQUALIFIED51Amy Elsner
1029Chavez BriddickUnited Kingdom2026-06-01Feiner Bros UNQUALIFIED14Amy Elsner
1030Leja CaldareraGermany2026-05-21Buckley Miller Wright NEGOTIATION21Asiya Javayant
1031Aditya KuskoIndia2026-05-29Chemel, James L Cpa NEW3Ivan Magalhaes
1032Sinclair WaycottRussia2026-06-02Chanay, Jeffrey A Esq RENEWAL68Stephen Shaw
1033Munro FerenczIndia2026-05-27Morlong Associates PROPOSAL71Amy Elsner
1034Nicolas IturbideArgentina2026-05-26Buckley Miller Wright NEW75Asiya Javayant
1035Cody SaylorsAustralia2026-06-02Dorl, James J Esq NEGOTIATION75Stephen Shaw
1036Smith GlickCanada2026-05-11Chemel, James L Cpa NEGOTIATION40Onyama Limba
1037Mujtaba NickaFrance2026-05-24Buckley Miller Wright NEW66Amy Elsner
1038Faith GillianBrazil2026-05-30Printing Dimensions NEGOTIATION29Ioni Bowcher
1039Octavia MaletFrance2026-05-26Truhlar And Truhlar Attys PROPOSAL8Onyama Limba
1040Emily WhobreySpain2026-05-19Truhlar And Truhlar Attys PROPOSAL67Ivan Magalhaes
1041Leon OldroydArgentina2026-06-02Buckley Miller Wright QUALIFIED22Asiya Javayant
1042Emily WhobreyRussia2026-05-15Chanay, Jeffrey A Esq PROPOSAL8Anna Fali
1043Maisha RulapaughJapan2026-06-03Commercial Press QUALIFIED16Stephen Shaw
1044Jennifer AmigonIndia2026-05-22Rousseaux, Michael Esq PROPOSAL26Stephen Shaw
1045Salvatore StockhamCanada2026-05-22Feiner Bros NEW40Stephen Shaw
1046Izzy GarufiUnited Kingdom2026-05-17Commercial Press QUALIFIED25Xuxue Feng
1047Leja CaldareraFrance2026-05-11Benton, John B Jr QUALIFIED67Stephen Shaw
1048Salvatore StockhamBrazil2026-06-01Printing Dimensions NEW59Stephen Shaw
1049Salvatore StockhamSpain2026-05-12Feltz Printing Service NEW92Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Ivar PaprockiCanadaAsiya Javayant UNQUALIFIED
Aruna FigeroaAustraliaStephen Shaw PROPOSAL
Kaitlin OstroskyIndiaIvan Magalhaes NEW
Arvin AlbaresJapanXuxue Feng PROPOSAL
Silvio SlusarskiSpainBernardo Dominic QUALIFIED
Adams MorascaFranceAnna Fali NEGOTIATION
Munro FerenczUnited KingdomXuxue Feng QUALIFIED
Jefferson SchemmerFranceOnyama Limba NEW
Juan WieserUnited KingdomAsiya Javayant PROPOSAL
Maria MarrierItalyAsiya Javayant RENEWAL
Francesco ShinkoItalyIoni Bowcher UNQUALIFIED
James ButtJapanElwin Sharvill NEGOTIATION
Aika InouyeBrazilOnyama Limba QUALIFIED
Maisha RulapaughRussiaElwin Sharvill UNQUALIFIED
Octavia MaletGermanyElwin Sharvill NEGOTIATION
Arvin AlbaresBrazilXuxue Feng QUALIFIED
Stacey MacleadCanadaIvan Magalhaes NEGOTIATION
Kaitlin OstroskyCanadaStephen Shaw PROPOSAL
Kaitlin OstroskyRussiaBernardo Dominic NEW
Murillo MaletRussiaElwin Sharvill UNQUALIFIED
Nicolas IturbideCanadaAmy Elsner NEW
David DarakjyGermanyIoni Bowcher NEW
Maisha RulapaughBrazilAsiya Javayant NEW
Arvin AlbaresFranceAsiya Javayant RENEWAL
Nicolas IturbideGermanyOnyama Limba RENEWAL
Salvatore StockhamCanadaBernardo Dominic NEGOTIATION
Leon OldroydJapanElwin Sharvill RENEWAL
Rodrigues CampainBrazilXuxue Feng UNQUALIFIED
Aditya KuskoAustraliaStephen Shaw NEGOTIATION
Munro FerenczBrazilStephen Shaw PROPOSAL
Greenwood BologniaBrazilAnna Fali NEGOTIATION
Greenwood BologniaFranceAsiya Javayant QUALIFIED
Mayumi KolmetzAustraliaBernardo Dominic PROPOSAL
Rodrigues CampainGermanyAsiya Javayant UNQUALIFIED
Jefferson SchemmerGermanyIvan Magalhaes RENEWAL
Jennifer AmigonAustraliaStephen Shaw PROPOSAL
Darci PoquetteSpainXuxue Feng QUALIFIED
Salvatore StockhamAustraliaBernardo Dominic QUALIFIED
Claire TollnerBrazilElwin Sharvill RENEWAL
Misaki RoysterIndiaOnyama Limba NEW
Adams MorascaCanadaOnyama Limba PROPOSAL
Faith GillianAustraliaIoni Bowcher NEW
Chavez BriddickArgentinaOnyama Limba QUALIFIED
Faith GillianArgentinaElwin Sharvill NEW
James ButtSpainBernardo Dominic NEGOTIATION
Jones VocelkaCanadaXuxue Feng QUALIFIED
Juan WieserItalyXuxue Feng QUALIFIED
Francesco ShinkoIndiaAnna Fali NEGOTIATION
Stacey MacleadAustraliaIvan Magalhaes PROPOSAL
Leon OldroydUnited KingdomElwin Sharvill PROPOSAL
Frozen Columns
Name
Misaki Royster
Claire Tollner
Jennifer Amigon
Francesco Shinko
Stacey Maclead
Aditya Kusko
David Darakjy
Mujtaba Nicka
Darci Poquette
Octavia Malet
Johnson Sergi
Jefferson Schemmer
Jefferson Schemmer
Tony Foller
Mayumi Kolmetz
Emily Whobrey
Antonio Caudy
Murillo Malet
Kadeem Flosi
Jennifer Amigon
Jones Vocelka
Deepesh Chui
Juan Wieser
Salvatore Stockham
Maisha Rulapaugh
Morrow Ruta
Misaki Royster
Aruna Figeroa
Juan Wieser
Sinclair Waycott
Kadeem Flosi
Juan Wieser
Wickens Nestle
Ivar Paprocki
Kadeem Flosi
Sinclair Waycott
James Butt
Sinclair Waycott
Sinclair Waycott
Aika Inouye
Deepesh Chui
Claire Tollner
Deepesh Chui
Julie Stenseth
Julie Stenseth
Kadeem Flosi
Ashley Doe
Faith Gillian
Jefferson Schemmer
Alejandro Perin
IdCountryDate
1000Canada2026-05-06
1001Spain2026-05-31
1002Japan2026-05-27
1003Brazil2026-05-29
1004United Kingdom2026-05-10
1005Japan2026-05-28
1006Brazil2026-05-13
1007Russia2026-05-16
1008Germany2026-05-20
1009Russia2026-05-31
1010Australia2026-05-10
1011Brazil2026-05-06
1012India2026-05-08
1013Japan2026-05-22
1014India2026-05-23
1015France2026-05-27
1016Brazil2026-05-26
1017Canada2026-06-01
1018Japan2026-05-20
1019Italy2026-05-16
1020Canada2026-05-28
1021Germany2026-05-20
1022Brazil2026-05-25
1023Japan2026-05-30
1024Italy2026-05-15
1025United Kingdom2026-05-16
1026India2026-05-26
1027Russia2026-05-23
1028United Kingdom2026-05-31
1029France2026-05-14
1030Germany2026-05-12
1031Brazil2026-05-09
1032Spain2026-06-04
1033France2026-05-19
1034Russia2026-05-17
1035Germany2026-05-09
1036Australia2026-05-18
1037Argentina2026-05-16
1038India2026-05-12
1039Argentina2026-05-07
1040Japan2026-05-15
1041United Kingdom2026-05-09
1042Brazil2026-06-02
1043Argentina2026-05-17
1044Australia2026-05-07
1045Brazil2026-05-20
1046United Kingdom2026-05-10
1047United Kingdom2026-05-12
1048Brazil2026-05-26
1049Argentina2026-05-20

On-Demand Data

NameIdCountryDate
Leja Caldarera1000Germany2026-05-09
Francesco Shinko1001India2026-05-27
Jefferson Schemmer1002Spain2026-05-10
Aika Inouye1003France2026-05-26
Adams Morasca1004Brazil2026-06-04
Kaitlin Ostrosky1005Brazil2026-05-20
Aditya Kusko1006Japan2026-06-04
Costa Dilliard1007Russia2026-05-18
Maria Marrier1008Brazil2026-05-19
James Butt1009Russia2026-05-29
Arvin Albares1010Australia2026-05-11
Darci Poquette1011Brazil2026-05-21
Leon Oldroyd1012India2026-05-11
Arvin Albares1013Russia2026-05-22
Isabel Bowley1014Russia2026-05-21
Adams Morasca1015Brazil2026-05-09
Juan Wieser1016Germany2026-05-17
Jones Vocelka1017Spain2026-05-18
Maisha Rulapaugh1018United Kingdom2026-05-06
Tony Foller1019Australia2026-05-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Silvio SlusarskiFranceIvan Magalhaes RENEWAL
Deepesh ChuiRussiaAmy Elsner NEW
Maria MarrierJapanXuxue Feng NEW
Emily WhobreyUnited KingdomBernardo Dominic QUALIFIED
Wickens NestleIndiaElwin Sharvill QUALIFIED
Ricardo GauchoFranceIvan Magalhaes NEW
Aika InouyeBrazilXuxue Feng NEW
Jennifer AmigonRussiaIoni Bowcher NEW
Deepesh ChuiIndiaBernardo Dominic NEGOTIATION
Smith GlickJapanBernardo Dominic NEGOTIATION
Aruna FigeroaIndiaElwin Sharvill NEGOTIATION
Costa DilliardGermanyAsiya Javayant UNQUALIFIED
Leon OldroydGermanyAsiya Javayant QUALIFIED
Claire TollnerCanadaIvan Magalhaes NEGOTIATION
Nicolas IturbideRussiaBernardo Dominic PROPOSAL
Izzy GarufiSpainIoni Bowcher UNQUALIFIED
James ButtJapanOnyama Limba QUALIFIED
David DarakjyJapanAmy Elsner RENEWAL
Faith GillianGermanyOnyama Limba UNQUALIFIED
Arvin AlbaresSpainBernardo Dominic NEGOTIATION
Nicolas IturbideSpainOnyama Limba PROPOSAL
Leja CaldareraBrazilBernardo Dominic QUALIFIED
Octavia MaletSpainBernardo Dominic RENEWAL
Emily WhobreyJapanStephen Shaw PROPOSAL
Jennifer AmigonGermanyElwin Sharvill NEGOTIATION
Leon OldroydRussiaXuxue Feng UNQUALIFIED
Isabel BowleyRussiaOnyama Limba UNQUALIFIED
Leon OldroydGermanyIvan Magalhaes RENEWAL
Arvin AlbaresAustraliaXuxue Feng UNQUALIFIED
Johnson SergiItalyIvan Magalhaes RENEWAL
Jennifer AmigonUnited KingdomAsiya Javayant QUALIFIED
Munro FerenczIndiaOnyama Limba RENEWAL
Octavia MaletUnited KingdomStephen Shaw NEGOTIATION
Murillo MaletGermanyStephen Shaw PROPOSAL
Mayumi KolmetzFranceIvan Magalhaes PROPOSAL
Nicolas IturbideAustraliaOnyama Limba NEGOTIATION
Nicolas IturbideUnited KingdomAsiya Javayant NEGOTIATION
Nicolas IturbideJapanAnna Fali QUALIFIED
Costa DilliardGermanyAmy Elsner NEGOTIATION
Izzy GarufiRussiaStephen 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>