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
Misaki RoysterJapanElwin Sharvill PROPOSAL
Alejandro PerinGermanyAsiya Javayant RENEWAL
Julie StensethRussiaAnna Fali UNQUALIFIED
Kaitlin OstroskyJapanAnna Fali NEGOTIATION
Jones VocelkaItalyOnyama Limba UNQUALIFIED
Cody SaylorsBrazilBernardo Dominic PROPOSAL
Maisha RulapaughUnited KingdomIoni Bowcher NEGOTIATION
Sinclair WaycottUnited KingdomElwin Sharvill UNQUALIFIED
Murillo MaletJapanIvan Magalhaes UNQUALIFIED
Faith GillianUnited KingdomXuxue Feng UNQUALIFIED
Clifford RimIndiaIvan Magalhaes NEGOTIATION
Murillo MaletItalyAsiya Javayant QUALIFIED
Emily WhobreyJapanAmy Elsner QUALIFIED
Jefferson SchemmerSpainIoni Bowcher UNQUALIFIED
Murillo MaletIndiaXuxue Feng RENEWAL
Wickens NestleCanadaAsiya Javayant QUALIFIED
Deepesh ChuiGermanyStephen Shaw NEW
Smith GlickFranceBernardo Dominic UNQUALIFIED
Deepesh ChuiGermanyAsiya Javayant NEGOTIATION
Munro FerenczUnited KingdomAsiya Javayant NEW
Jennifer AmigonAustraliaBernardo Dominic PROPOSAL
Rodrigues CampainRussiaXuxue Feng QUALIFIED
Claire TollnerIndiaXuxue Feng QUALIFIED
Morrow RutaFranceBernardo Dominic QUALIFIED
Darci PoquetteCanadaIoni Bowcher QUALIFIED
Kadeem FlosiFranceXuxue Feng RENEWAL
Smith GlickCanadaBernardo Dominic NEGOTIATION
Claire TollnerItalyAsiya Javayant NEW
Johnson SergiIndiaElwin Sharvill NEW
Emily WhobreyIndiaIoni Bowcher RENEWAL
Clifford RimBrazilElwin Sharvill RENEWAL
Izzy GarufiItalyXuxue Feng UNQUALIFIED
Ricardo GauchoIndiaXuxue Feng RENEWAL
Wickens NestleUnited KingdomXuxue Feng QUALIFIED
Aruna FigeroaGermanyXuxue Feng NEGOTIATION
Izzy GarufiArgentinaIoni Bowcher UNQUALIFIED
Chavez BriddickItalyIvan Magalhaes UNQUALIFIED
Wickens NestleBrazilOnyama Limba RENEWAL
Octavia MaletGermanyOnyama Limba RENEWAL
Francesco ShinkoIndiaIoni Bowcher PROPOSAL
Izzy GarufiArgentinaElwin Sharvill NEGOTIATION
Jennifer AmigonJapanElwin Sharvill NEGOTIATION
Salvatore StockhamBrazilIvan Magalhaes PROPOSAL
Johnson SergiArgentinaAmy Elsner NEW
Isabel BowleyJapanAmy Elsner PROPOSAL
Ashley DoeFranceAnna Fali NEGOTIATION
Emily WhobreyIndiaAnna Fali QUALIFIED
Francesco ShinkoRussiaBernardo Dominic NEW
Costa DilliardUnited KingdomXuxue Feng PROPOSAL
Misaki RoysterCanadaBernardo Dominic UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Smith GlickSpainAmy Elsner PROPOSAL
Deepesh ChuiItalyStephen Shaw PROPOSAL
Stacey MacleadItalyAsiya Javayant UNQUALIFIED
Johnson SergiItalyAnna Fali NEGOTIATION
Octavia MaletItalyXuxue Feng UNQUALIFIED
Sinclair WaycottGermanyAsiya Javayant NEW
Cody SaylorsItalyBernardo Dominic PROPOSAL
Deepesh ChuiItalyAmy Elsner QUALIFIED
Adams MorascaCanadaStephen Shaw UNQUALIFIED
Leon OldroydBrazilIvan Magalhaes QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aika InouyeUnited Kingdom2025-09-10Truhlar And Truhlar Attys PROPOSAL78Elwin Sharvill
1001Emily WhobreyFrance2025-09-10Commercial Press NEGOTIATION94Asiya Javayant
1002Jefferson SchemmerItaly2025-09-28King, Christopher A Esq UNQUALIFIED12Bernardo Dominic
1003Cody SaylorsBrazil2025-09-30Feiner Bros QUALIFIED29Stephen Shaw
1004Deepesh ChuiItaly2025-09-15Chemel, James L Cpa QUALIFIED88Onyama Limba
1005Julie StensethRussia2025-09-30Commercial Press QUALIFIED16Elwin Sharvill
1006Munro FerenczBrazil2025-09-10Truhlar And Truhlar Attys RENEWAL31Amy Elsner
1007Jones VocelkaRussia2025-09-20Chapman, Ross E Esq QUALIFIED39Anna Fali
1008Claire TollnerSpain2025-09-19Feltz Printing Service UNQUALIFIED23Onyama Limba
1009Murillo MaletFrance2025-09-11Rangoni Of Florence UNQUALIFIED20Onyama Limba
1010David DarakjyItaly2025-09-19Buckley Miller Wright QUALIFIED10Ivan Magalhaes
1011Alejandro PerinArgentina2025-09-15Rangoni Of Florence PROPOSAL85Amy Elsner
1012Murillo MaletFrance2025-09-02Feiner Bros NEW44Anna Fali
1013Ivar PaprockiCanada2025-09-27Morlong Associates NEW53Anna Fali
1014Silvio SlusarskiIndia2025-09-02Rousseaux, Michael Esq PROPOSAL32Xuxue Feng
1015Costa DilliardRussia2025-09-05Printing Dimensions NEW68Anna Fali
1016Alejandro PerinGermany2025-09-26Rangoni Of Florence NEGOTIATION65Elwin Sharvill
1017Octavia MaletIndia2025-09-27King, Christopher A Esq PROPOSAL18Xuxue Feng
1018Julie StensethItaly2025-09-22Chapman, Ross E Esq UNQUALIFIED44Onyama Limba
1019Wickens NestleBrazil2025-09-19Chemel, James L Cpa NEW60Stephen Shaw
1020Maria MarrierAustralia2025-09-16Chanay, Jeffrey A Esq QUALIFIED39Ioni Bowcher
1021Sinclair WaycottItaly2025-09-08Chemel, James L Cpa NEW93Stephen Shaw
1022Maria MarrierUnited Kingdom2025-09-03Truhlar And Truhlar Attys PROPOSAL56Ioni Bowcher
1023Emily WhobreyIndia2025-09-06Printing Dimensions NEGOTIATION50Stephen Shaw
1024Ashley DoeGermany2025-09-03Commercial Press NEW66Elwin Sharvill
1025Leja CaldareraRussia2025-09-16Chanay, Jeffrey A Esq PROPOSAL30Anna Fali
1026Jones VocelkaBrazil2025-10-01Feiner Bros NEGOTIATION98Amy Elsner
1027Mayumi KolmetzSpain2025-09-08Chanay, Jeffrey A Esq UNQUALIFIED4Asiya Javayant
1028Stacey MacleadIndia2025-10-01Chemel, James L Cpa RENEWAL68Elwin Sharvill
1029Morrow RutaGermany2025-09-30Printing Dimensions UNQUALIFIED57Amy Elsner
1030Misaki RoysterUnited Kingdom2025-09-03Rangoni Of Florence PROPOSAL61Ioni Bowcher
1031Maria MarrierAustralia2025-09-08Buckley Miller Wright RENEWAL15Xuxue Feng
1032David DarakjyBrazil2025-10-01Rangoni Of Florence RENEWAL9Amy Elsner
1033Morrow RutaJapan2025-09-07Benton, John B Jr UNQUALIFIED91Onyama Limba
1034Aika InouyeJapan2025-09-25Morlong Associates QUALIFIED17Asiya Javayant
1035Kaitlin OstroskyRussia2025-09-07Rangoni Of Florence NEW35Anna Fali
1036Nicolas IturbideUnited Kingdom2025-09-05Chemel, James L Cpa RENEWAL73Anna Fali
1037Stacey MacleadUnited Kingdom2025-09-28Truhlar And Truhlar Attys NEGOTIATION18Onyama Limba
1038Jones VocelkaUnited Kingdom2025-09-14Rangoni Of Florence PROPOSAL47Asiya Javayant
1039Juan WieserBrazil2025-09-09Commercial Press QUALIFIED68Ivan Magalhaes
1040Clifford RimSpain2025-09-30Benton, John B Jr NEGOTIATION12Amy Elsner
1041Clifford RimIndia2025-09-23Benton, John B Jr NEGOTIATION82Stephen Shaw
1042Mujtaba NickaRussia2025-09-30Commercial Press NEGOTIATION26Asiya Javayant
1043Darci PoquetteRussia2025-09-17Printing Dimensions NEGOTIATION13Ivan Magalhaes
1044Ashley DoeBrazil2025-09-11Printing Dimensions NEGOTIATION6Onyama Limba
1045Morrow RutaUnited Kingdom2025-09-20Buckley Miller Wright RENEWAL42Ivan Magalhaes
1046Darci PoquetteArgentina2025-09-09Commercial Press PROPOSAL91Xuxue Feng
1047Julie StensethUnited Kingdom2025-09-16Commercial Press QUALIFIED93Xuxue Feng
1048David DarakjySpain2025-09-16Feiner Bros QUALIFIED16Elwin Sharvill
1049Cody SaylorsJapan2025-09-27Rangoni Of Florence UNQUALIFIED29Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Ivar PaprockiJapanIvan Magalhaes UNQUALIFIED
Leja CaldareraSpainElwin Sharvill PROPOSAL
Ashley DoeSpainAsiya Javayant UNQUALIFIED
Jeanfrancois VenereItalyIvan Magalhaes NEGOTIATION
Aruna FigeroaCanadaIvan Magalhaes UNQUALIFIED
Mujtaba NickaBrazilAmy Elsner RENEWAL
Wickens NestleUnited KingdomAsiya Javayant UNQUALIFIED
Jennifer AmigonUnited KingdomIvan Magalhaes PROPOSAL
Aruna FigeroaRussiaBernardo Dominic QUALIFIED
Izzy GarufiSpainAnna Fali UNQUALIFIED
Cody SaylorsFranceElwin Sharvill UNQUALIFIED
James ButtArgentinaStephen Shaw RENEWAL
Deepesh ChuiSpainBernardo Dominic QUALIFIED
Claire TollnerSpainAnna Fali RENEWAL
Ivar PaprockiAustraliaOnyama Limba NEGOTIATION
Izzy GarufiUnited KingdomAmy Elsner UNQUALIFIED
Faith GillianJapanAnna Fali NEW
Adams MorascaCanadaOnyama Limba NEGOTIATION
Aika InouyeAustraliaAmy Elsner QUALIFIED
David DarakjyIndiaElwin Sharvill UNQUALIFIED
Nicolas IturbideArgentinaAmy Elsner NEGOTIATION
Maria MarrierGermanyXuxue Feng RENEWAL
Maria MarrierItalyAnna Fali UNQUALIFIED
Deepesh ChuiBrazilAsiya Javayant NEGOTIATION
Ivar PaprockiItalyOnyama Limba NEW
Mujtaba NickaFranceIvan Magalhaes NEGOTIATION
Alejandro PerinFranceElwin Sharvill NEW
Octavia MaletUnited KingdomAnna Fali PROPOSAL
Clifford RimUnited KingdomXuxue Feng NEW
Costa DilliardGermanyAnna Fali PROPOSAL
Smith GlickBrazilIoni Bowcher NEW
Ashley DoeBrazilElwin Sharvill QUALIFIED
Cody SaylorsBrazilAsiya Javayant NEW
Francesco ShinkoAustraliaIoni Bowcher QUALIFIED
Alejandro PerinUnited KingdomAsiya Javayant RENEWAL
Morrow RutaAustraliaAsiya Javayant RENEWAL
Aditya KuskoItalyXuxue Feng PROPOSAL
Julie StensethCanadaIvan Magalhaes NEGOTIATION
Chavez BriddickCanadaElwin Sharvill NEGOTIATION
Sinclair WaycottArgentinaAsiya Javayant NEGOTIATION
Chavez BriddickJapanXuxue Feng UNQUALIFIED
Clifford RimUnited KingdomOnyama Limba UNQUALIFIED
Octavia MaletFranceIoni Bowcher NEW
Antonio CaudyBrazilOnyama Limba RENEWAL
Rodrigues CampainBrazilIoni Bowcher NEGOTIATION
Leon OldroydArgentinaAsiya Javayant QUALIFIED
Costa DilliardRussiaXuxue Feng RENEWAL
Maria MarrierIndiaIoni Bowcher PROPOSAL
Costa DilliardGermanyOnyama Limba QUALIFIED
Kadeem FlosiBrazilXuxue Feng NEW
Frozen Columns
Name
Adams Morasca
Greenwood Bolognia
Jennifer Amigon
Costa Dilliard
Smith Glick
Francesco Shinko
Wickens Nestle
Jennifer Amigon
Deepesh Chui
Smith Glick
Octavia Malet
Jefferson Schemmer
Costa Dilliard
Nicolas Iturbide
Clifford Rim
Cody Saylors
Chavez Briddick
David Darakjy
Morrow Ruta
Rodrigues Campain
Deepesh Chui
Deepesh Chui
Tony Foller
Mujtaba Nicka
Ashley Doe
Sinclair Waycott
Kaitlin Ostrosky
Faith Gillian
Ricardo Gaucho
Ivar Paprocki
Maria Marrier
Jones Vocelka
Ricardo Gaucho
Leon Oldroyd
Antonio Caudy
Jeanfrancois Venere
Claire Tollner
Sinclair Waycott
Tony Foller
Tony Foller
Isabel Bowley
Silvio Slusarski
Alejandro Perin
Mayumi Kolmetz
Ivar Paprocki
Jefferson Schemmer
Claire Tollner
Silvio Slusarski
Rodrigues Campain
Deepesh Chui
IdCountryDate
1000United Kingdom2025-09-08
1001Brazil2025-09-19
1002Germany2025-09-28
1003Italy2025-09-06
1004United Kingdom2025-09-25
1005Canada2025-09-13
1006Brazil2025-09-04
1007Japan2025-09-07
1008Canada2025-09-11
1009France2025-09-04
1010United Kingdom2025-09-04
1011France2025-09-15
1012Spain2025-09-02
1013Russia2025-09-08
1014Germany2025-09-10
1015Russia2025-09-02
1016Brazil2025-09-08
1017Spain2025-09-04
1018Russia2025-09-24
1019India2025-10-01
1020France2025-10-01
1021Japan2025-09-25
1022Brazil2025-09-10
1023Japan2025-09-25
1024India2025-09-29
1025Italy2025-09-10
1026Russia2025-09-10
1027United Kingdom2025-09-04
1028Brazil2025-09-28
1029United Kingdom2025-09-21
1030Germany2025-09-06
1031United Kingdom2025-09-10
1032Australia2025-10-01
1033Russia2025-09-24
1034Canada2025-09-14
1035Japan2025-09-27
1036Spain2025-09-07
1037Brazil2025-09-20
1038Argentina2025-09-20
1039Germany2025-09-11
1040Brazil2025-09-11
1041Germany2025-09-09
1042India2025-09-08
1043Germany2025-09-24
1044Germany2025-09-28
1045Germany2025-09-25
1046Russia2025-09-13
1047Australia2025-09-11
1048India2025-09-09
1049Spain2025-09-12

On-Demand Data

NameIdCountryDate
Maria Marrier1000Brazil2025-09-28
Octavia Malet1001Japan2025-10-01
Jeanfrancois Venere1002Spain2025-09-19
Julie Stenseth1003Brazil2025-10-01
James Butt1004France2025-09-25
Maria Marrier1005Australia2025-09-09
Greenwood Bolognia1006United Kingdom2025-09-04
Costa Dilliard1007Italy2025-09-13
Emily Whobrey1008United Kingdom2025-09-12
Morrow Ruta1009Italy2025-09-15
Alejandro Perin1010Spain2025-09-15
Maria Marrier1011United Kingdom2025-09-06
Leja Caldarera1012Australia2025-09-23
Stacey Maclead1013Italy2025-09-13
Morrow Ruta1014Argentina2025-09-02
Julie Stenseth1015Japan2025-10-01
Aditya Kusko1016Spain2025-09-18
Francesco Shinko1017Russia2025-09-18
Alejandro Perin1018United Kingdom2025-09-05
Sinclair Waycott1019Brazil2025-09-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Alejandro PerinGermanyXuxue Feng UNQUALIFIED
Jeanfrancois VenereGermanyOnyama Limba PROPOSAL
Clifford RimAustraliaIoni Bowcher QUALIFIED
Wickens NestleItalyBernardo Dominic QUALIFIED
James ButtBrazilStephen Shaw UNQUALIFIED
Morrow RutaCanadaAmy Elsner QUALIFIED
Ivar PaprockiJapanOnyama Limba NEW
Julie StensethItalyElwin Sharvill QUALIFIED
Deepesh ChuiCanadaIvan Magalhaes NEW
Mayumi KolmetzCanadaBernardo Dominic PROPOSAL
Juan WieserJapanStephen Shaw PROPOSAL
Maisha RulapaughArgentinaIvan Magalhaes PROPOSAL
Tony FollerIndiaAsiya Javayant QUALIFIED
Alejandro PerinUnited KingdomXuxue Feng NEGOTIATION
Costa DilliardAustraliaOnyama Limba NEW
James ButtArgentinaStephen Shaw QUALIFIED
Claire TollnerAustraliaAmy Elsner NEW
Smith GlickRussiaAmy Elsner RENEWAL
Julie StensethRussiaXuxue Feng UNQUALIFIED
Ashley DoeArgentinaBernardo Dominic QUALIFIED
Sinclair WaycottIndiaAmy Elsner UNQUALIFIED
Greenwood BologniaFranceAmy Elsner QUALIFIED
Sinclair WaycottJapanAnna Fali QUALIFIED
Mayumi KolmetzGermanyBernardo Dominic NEW
Leon OldroydJapanOnyama Limba NEGOTIATION
Salvatore StockhamAustraliaOnyama Limba NEGOTIATION
Jennifer AmigonFranceBernardo Dominic PROPOSAL
Arvin AlbaresBrazilXuxue Feng RENEWAL
Faith GillianRussiaAmy Elsner QUALIFIED
Aditya KuskoGermanyElwin Sharvill RENEWAL
Jones VocelkaArgentinaOnyama Limba NEGOTIATION
Ivar PaprockiJapanOnyama Limba RENEWAL
Arvin AlbaresAustraliaOnyama Limba UNQUALIFIED
Clifford RimJapanAsiya Javayant NEGOTIATION
Ricardo GauchoRussiaStephen Shaw RENEWAL
Juan WieserUnited KingdomIoni Bowcher RENEWAL
Costa DilliardFranceAmy Elsner NEW
Silvio SlusarskiSpainAsiya Javayant PROPOSAL
Darci PoquetteBrazilStephen Shaw PROPOSAL
Leon OldroydAustraliaIvan 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>