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
Jones VocelkaAustraliaOnyama Limba PROPOSAL
Emily WhobreyUnited KingdomXuxue Feng UNQUALIFIED
Greenwood BologniaBrazilBernardo Dominic UNQUALIFIED
Deepesh ChuiBrazilOnyama Limba QUALIFIED
Ivar PaprockiUnited KingdomBernardo Dominic RENEWAL
Ricardo GauchoJapanXuxue Feng NEGOTIATION
Jefferson SchemmerGermanyXuxue Feng NEW
Darci PoquetteItalyStephen Shaw NEW
Clifford RimCanadaAmy Elsner RENEWAL
Alejandro PerinItalyIvan Magalhaes QUALIFIED
Alejandro PerinIndiaIvan Magalhaes PROPOSAL
Mujtaba NickaSpainOnyama Limba NEGOTIATION
Emily WhobreyIndiaIvan Magalhaes NEGOTIATION
Jones VocelkaCanadaElwin Sharvill NEGOTIATION
Stacey MacleadItalyXuxue Feng NEW
Jones VocelkaBrazilBernardo Dominic UNQUALIFIED
Antonio CaudyArgentinaOnyama Limba QUALIFIED
James ButtUnited KingdomBernardo Dominic NEGOTIATION
Faith GillianBrazilStephen Shaw QUALIFIED
Cody SaylorsRussiaIoni Bowcher UNQUALIFIED
Faith GillianJapanAnna Fali RENEWAL
Misaki RoysterRussiaXuxue Feng RENEWAL
Jones VocelkaFranceAmy Elsner QUALIFIED
Emily WhobreyIndiaElwin Sharvill UNQUALIFIED
Aruna FigeroaSpainIvan Magalhaes NEGOTIATION
Costa DilliardGermanyBernardo Dominic PROPOSAL
Cody SaylorsItalyAmy Elsner QUALIFIED
Ashley DoeIndiaBernardo Dominic RENEWAL
Aika InouyeCanadaAmy Elsner NEW
Francesco ShinkoSpainElwin Sharvill QUALIFIED
Cody SaylorsGermanyStephen Shaw QUALIFIED
Darci PoquetteArgentinaIoni Bowcher NEGOTIATION
Arvin AlbaresItalyElwin Sharvill RENEWAL
Jefferson SchemmerFranceIvan Magalhaes RENEWAL
Jennifer AmigonIndiaAmy Elsner RENEWAL
Francesco ShinkoJapanAmy Elsner RENEWAL
Ivar PaprockiArgentinaOnyama Limba NEW
Aika InouyeAustraliaAnna Fali PROPOSAL
Mayumi KolmetzAustraliaOnyama Limba PROPOSAL
Aditya KuskoJapanAnna Fali UNQUALIFIED
Sinclair WaycottFranceAsiya Javayant UNQUALIFIED
Octavia MaletJapanXuxue Feng RENEWAL
Ricardo GauchoItalyAnna Fali PROPOSAL
Darci PoquetteJapanXuxue Feng QUALIFIED
Julie StensethUnited KingdomElwin Sharvill PROPOSAL
Tony FollerUnited KingdomIvan Magalhaes NEGOTIATION
Jefferson SchemmerCanadaStephen Shaw NEW
Clifford RimSpainIvan Magalhaes UNQUALIFIED
David DarakjyItalyOnyama Limba NEGOTIATION
Kaitlin OstroskyBrazilAmy Elsner QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Deepesh ChuiCanadaXuxue Feng UNQUALIFIED
Leja CaldareraArgentinaIvan Magalhaes QUALIFIED
Munro FerenczIndiaStephen Shaw RENEWAL
Cody SaylorsFranceOnyama Limba NEGOTIATION
Murillo MaletGermanyBernardo Dominic UNQUALIFIED
Deepesh ChuiBrazilAnna Fali PROPOSAL
Smith GlickFranceAnna Fali PROPOSAL
Chavez BriddickJapanElwin Sharvill NEGOTIATION
Francesco ShinkoItalyAsiya Javayant NEGOTIATION
Ricardo GauchoUnited KingdomElwin Sharvill QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Murillo MaletItaly2025-07-24Feltz Printing Service NEW94Asiya Javayant
1001Tony FollerArgentina2025-07-25Dorl, James J Esq NEW35Elwin Sharvill
1002Antonio CaudyFrance2025-07-12Chanay, Jeffrey A Esq UNQUALIFIED29Ivan Magalhaes
1003Silvio SlusarskiFrance2025-07-23Dorl, James J Esq NEGOTIATION57Onyama Limba
1004Ashley DoeSpain2025-08-07Dorl, James J Esq RENEWAL34Anna Fali
1005Mujtaba NickaBrazil2025-08-04Feiner Bros UNQUALIFIED25Anna Fali
1006Darci PoquetteItaly2025-07-25Truhlar And Truhlar Attys UNQUALIFIED34Elwin Sharvill
1007Mujtaba NickaArgentina2025-07-13Chemel, James L Cpa RENEWAL39Bernardo Dominic
1008Aditya KuskoIndia2025-08-02Printing Dimensions NEGOTIATION30Stephen Shaw
1009Jefferson SchemmerGermany2025-08-05Feltz Printing Service NEW23Stephen Shaw
1010Clifford RimSpain2025-07-31Chemel, James L Cpa NEW46Elwin Sharvill
1011Adams MorascaFrance2025-08-04Rangoni Of Florence NEGOTIATION26Xuxue Feng
1012Julie StensethRussia2025-07-19Truhlar And Truhlar Attys UNQUALIFIED36Ioni Bowcher
1013Antonio CaudyUnited Kingdom2025-07-31Rangoni Of Florence QUALIFIED47Elwin Sharvill
1014Costa DilliardUnited Kingdom2025-07-24Buckley Miller Wright NEGOTIATION96Onyama Limba
1015Francesco ShinkoArgentina2025-08-05Dorl, James J Esq NEGOTIATION99Onyama Limba
1016Darci PoquetteBrazil2025-07-16Truhlar And Truhlar Attys RENEWAL95Anna Fali
1017Salvatore StockhamUnited Kingdom2025-07-21King, Christopher A Esq QUALIFIED49Anna Fali
1018Stacey MacleadFrance2025-07-26King, Christopher A Esq QUALIFIED82Asiya Javayant
1019Kaitlin OstroskySpain2025-07-24Rousseaux, Michael Esq PROPOSAL86Amy Elsner
1020Sinclair WaycottIndia2025-07-10Commercial Press NEGOTIATION17Ivan Magalhaes
1021Ivar PaprockiRussia2025-07-10Chemel, James L Cpa PROPOSAL5Amy Elsner
1022Cody SaylorsAustralia2025-08-04Rangoni Of Florence NEGOTIATION49Ioni Bowcher
1023Antonio CaudyAustralia2025-07-22Printing Dimensions NEW98Bernardo Dominic
1024Claire TollnerBrazil2025-07-11Rangoni Of Florence NEGOTIATION17Anna Fali
1025Wickens NestleJapan2025-07-13Commercial Press QUALIFIED46Onyama Limba
1026Jeanfrancois VenereUnited Kingdom2025-07-24Chanay, Jeffrey A Esq NEW14Xuxue Feng
1027Jeanfrancois VenereCanada2025-07-30Rangoni Of Florence RENEWAL40Asiya Javayant
1028Jefferson SchemmerIndia2025-07-31Benton, John B Jr UNQUALIFIED90Stephen Shaw
1029Salvatore StockhamUnited Kingdom2025-07-31Dorl, James J Esq PROPOSAL30Ivan Magalhaes
1030Morrow RutaSpain2025-07-10Rousseaux, Michael Esq NEGOTIATION68Elwin Sharvill
1031Salvatore StockhamRussia2025-07-19Chemel, James L Cpa NEGOTIATION61Bernardo Dominic
1032Salvatore StockhamArgentina2025-07-17Morlong Associates UNQUALIFIED4Xuxue Feng
1033Jefferson SchemmerRussia2025-07-25Feltz Printing Service RENEWAL98Elwin Sharvill
1034Clifford RimUnited Kingdom2025-07-18Benton, John B Jr PROPOSAL36Bernardo Dominic
1035Leon OldroydItaly2025-07-18Printing Dimensions NEW53Elwin Sharvill
1036Emily WhobreySpain2025-07-27Dorl, James J Esq NEGOTIATION65Stephen Shaw
1037Greenwood BologniaRussia2025-07-24Chemel, James L Cpa QUALIFIED6Anna Fali
1038Maria MarrierArgentina2025-07-15King, Christopher A Esq UNQUALIFIED90Amy Elsner
1039Aditya KuskoFrance2025-07-28Dorl, James J Esq RENEWAL63Elwin Sharvill
1040Julie StensethSpain2025-07-25Feiner Bros NEW96Stephen Shaw
1041Faith GillianItaly2025-07-21Chapman, Ross E Esq RENEWAL81Elwin Sharvill
1042Francesco ShinkoGermany2025-07-10Benton, John B Jr NEGOTIATION82Onyama Limba
1043David DarakjyArgentina2025-07-17Printing Dimensions PROPOSAL72Stephen Shaw
1044Alejandro PerinFrance2025-08-01Buckley Miller Wright NEGOTIATION0Onyama Limba
1045Aditya KuskoCanada2025-07-30Truhlar And Truhlar Attys QUALIFIED18Xuxue Feng
1046Morrow RutaBrazil2025-08-06Buckley Miller Wright NEGOTIATION46Elwin Sharvill
1047Adams MorascaAustralia2025-07-14Chapman, Ross E Esq RENEWAL97Bernardo Dominic
1048Clifford RimCanada2025-07-31Rousseaux, Michael Esq RENEWAL82Amy Elsner
1049Johnson SergiFrance2025-07-30Chanay, Jeffrey A Esq UNQUALIFIED40Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Chavez BriddickArgentinaOnyama Limba NEGOTIATION
Ashley DoeBrazilXuxue Feng UNQUALIFIED
Munro FerenczRussiaIoni Bowcher QUALIFIED
Isabel BowleyItalyAmy Elsner UNQUALIFIED
Ivar PaprockiUnited KingdomXuxue Feng UNQUALIFIED
Isabel BowleyUnited KingdomIoni Bowcher PROPOSAL
Costa DilliardCanadaAnna Fali QUALIFIED
Aruna FigeroaRussiaAsiya Javayant QUALIFIED
Francesco ShinkoGermanyStephen Shaw NEW
Maisha RulapaughGermanyAsiya Javayant NEGOTIATION
Munro FerenczGermanyAsiya Javayant NEW
Claire TollnerAustraliaAnna Fali UNQUALIFIED
Isabel BowleyItalyXuxue Feng NEGOTIATION
Rodrigues CampainCanadaOnyama Limba NEW
Ivar PaprockiSpainAmy Elsner NEW
Izzy GarufiFranceStephen Shaw QUALIFIED
Munro FerenczRussiaAsiya Javayant NEGOTIATION
Mujtaba NickaItalyIvan Magalhaes NEW
Wickens NestleFranceIoni Bowcher UNQUALIFIED
Costa DilliardArgentinaStephen Shaw NEW
Jefferson SchemmerCanadaIoni Bowcher UNQUALIFIED
Aditya KuskoJapanAsiya Javayant PROPOSAL
Ricardo GauchoUnited KingdomAmy Elsner NEGOTIATION
Julie StensethGermanyAsiya Javayant NEGOTIATION
Kaitlin OstroskyJapanAmy Elsner NEW
Sinclair WaycottAustraliaXuxue Feng UNQUALIFIED
Francesco ShinkoItalyAnna Fali RENEWAL
Claire TollnerArgentinaIoni Bowcher NEW
Mayumi KolmetzArgentinaAnna Fali UNQUALIFIED
Faith GillianIndiaIoni Bowcher PROPOSAL
Leja CaldareraJapanElwin Sharvill UNQUALIFIED
Greenwood BologniaGermanyIoni Bowcher NEGOTIATION
Juan WieserItalyBernardo Dominic UNQUALIFIED
Jennifer AmigonFranceStephen Shaw QUALIFIED
Wickens NestleAustraliaAsiya Javayant RENEWAL
Ashley DoeSpainIoni Bowcher UNQUALIFIED
David DarakjyItalyBernardo Dominic QUALIFIED
Rodrigues CampainArgentinaIvan Magalhaes PROPOSAL
Jones VocelkaUnited KingdomAnna Fali QUALIFIED
James ButtSpainXuxue Feng PROPOSAL
Stacey MacleadArgentinaIoni Bowcher NEGOTIATION
Aditya KuskoIndiaAmy Elsner QUALIFIED
Adams MorascaGermanyIoni Bowcher QUALIFIED
Maria MarrierJapanIvan Magalhaes NEGOTIATION
Francesco ShinkoUnited KingdomStephen Shaw NEGOTIATION
Juan WieserBrazilBernardo Dominic QUALIFIED
Leja CaldareraAustraliaAmy Elsner RENEWAL
Leja CaldareraIndiaXuxue Feng UNQUALIFIED
Leon OldroydArgentinaXuxue Feng UNQUALIFIED
Johnson SergiArgentinaOnyama Limba NEGOTIATION
Frozen Columns
Name
Darci Poquette
Costa Dilliard
Rodrigues Campain
Stacey Maclead
Claire Tollner
Maisha Rulapaugh
David Darakjy
Silvio Slusarski
Stacey Maclead
Aditya Kusko
Ricardo Gaucho
Morrow Ruta
Mayumi Kolmetz
Wickens Nestle
David Darakjy
Stacey Maclead
Octavia Malet
Julie Stenseth
Ivar Paprocki
Deepesh Chui
Alejandro Perin
Johnson Sergi
James Butt
Antonio Caudy
Morrow Ruta
Jennifer Amigon
Jones Vocelka
Mayumi Kolmetz
Francesco Shinko
Deepesh Chui
Aditya Kusko
Arvin Albares
Jefferson Schemmer
Stacey Maclead
Clifford Rim
Mayumi Kolmetz
Aditya Kusko
Leon Oldroyd
Alejandro Perin
Adams Morasca
Johnson Sergi
Emily Whobrey
Leon Oldroyd
Aruna Figeroa
Juan Wieser
Aika Inouye
Leja Caldarera
Maisha Rulapaugh
Isabel Bowley
Tony Foller
IdCountryDate
1000Russia2025-07-29
1001Argentina2025-07-24
1002Australia2025-07-14
1003Germany2025-08-05
1004India2025-07-10
1005Italy2025-07-21
1006Canada2025-07-19
1007Australia2025-07-21
1008Spain2025-08-07
1009Italy2025-07-15
1010Russia2025-08-05
1011France2025-08-04
1012Australia2025-07-27
1013Germany2025-07-20
1014Australia2025-07-20
1015United Kingdom2025-07-18
1016India2025-07-23
1017Italy2025-08-05
1018Germany2025-07-10
1019United Kingdom2025-07-20
1020India2025-08-05
1021Brazil2025-07-29
1022Australia2025-07-18
1023Germany2025-07-30
1024Italy2025-08-05
1025Italy2025-08-03
1026Italy2025-07-14
1027Germany2025-07-15
1028Germany2025-07-28
1029Japan2025-08-02
1030Australia2025-07-24
1031Canada2025-08-04
1032United Kingdom2025-07-28
1033Russia2025-07-19
1034France2025-07-24
1035Brazil2025-07-27
1036India2025-08-08
1037Brazil2025-07-31
1038Germany2025-07-14
1039Argentina2025-07-10
1040India2025-07-22
1041Russia2025-08-06
1042Russia2025-08-07
1043Canada2025-07-11
1044India2025-07-19
1045France2025-07-12
1046Brazil2025-08-04
1047Germany2025-07-25
1048Canada2025-07-31
1049Italy2025-07-30

On-Demand Data

NameIdCountryDate
Aditya Kusko1000India2025-07-10
Kadeem Flosi1001Argentina2025-08-07
Kaitlin Ostrosky1002United Kingdom2025-08-04
Costa Dilliard1003Russia2025-07-31
Kaitlin Ostrosky1004India2025-08-06
James Butt1005Argentina2025-07-18
Leon Oldroyd1006Brazil2025-07-28
Arvin Albares1007India2025-07-22
Leja Caldarera1008France2025-07-27
Munro Ferencz1009Japan2025-08-02
Tony Foller1010United Kingdom2025-07-31
Chavez Briddick1011Brazil2025-07-17
Faith Gillian1012India2025-07-21
Deepesh Chui1013Argentina2025-07-20
Izzy Garufi1014India2025-07-16
Kadeem Flosi1015United Kingdom2025-07-12
Leja Caldarera1016Japan2025-07-31
Kadeem Flosi1017Germany2025-07-18
Jeanfrancois Venere1018Australia2025-07-23
Aika Inouye1019Australia2025-07-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereUnited KingdomAnna Fali NEGOTIATION
Kadeem FlosiUnited KingdomOnyama Limba NEGOTIATION
Salvatore StockhamJapanStephen Shaw RENEWAL
Jeanfrancois VenereUnited KingdomIvan Magalhaes UNQUALIFIED
Maisha RulapaughFranceIoni Bowcher NEGOTIATION
Rodrigues CampainArgentinaAmy Elsner NEW
Murillo MaletJapanBernardo Dominic NEW
Aika InouyeBrazilAsiya Javayant QUALIFIED
Chavez BriddickBrazilAmy Elsner RENEWAL
Maisha RulapaughAustraliaAmy Elsner QUALIFIED
Cody SaylorsArgentinaOnyama Limba RENEWAL
Salvatore StockhamSpainBernardo Dominic PROPOSAL
Isabel BowleySpainStephen Shaw QUALIFIED
Leon OldroydSpainAsiya Javayant NEW
Emily WhobreyAustraliaElwin Sharvill UNQUALIFIED
Adams MorascaArgentinaXuxue Feng NEW
Ashley DoeIndiaAmy Elsner RENEWAL
Jennifer AmigonItalyAsiya Javayant NEW
Johnson SergiSpainAmy Elsner NEW
James ButtJapanXuxue Feng PROPOSAL
Clifford RimAustraliaAnna Fali RENEWAL
David DarakjyCanadaIvan Magalhaes PROPOSAL
Jones VocelkaFranceIvan Magalhaes RENEWAL
Deepesh ChuiUnited KingdomAnna Fali NEW
Sinclair WaycottBrazilAmy Elsner PROPOSAL
Wickens NestleUnited KingdomXuxue Feng NEW
Arvin AlbaresBrazilBernardo Dominic NEGOTIATION
Kaitlin OstroskyBrazilAnna Fali RENEWAL
Murillo MaletUnited KingdomAmy Elsner NEGOTIATION
Faith GillianJapanIvan Magalhaes PROPOSAL
Murillo MaletFranceAsiya Javayant RENEWAL
Jefferson SchemmerUnited KingdomStephen Shaw PROPOSAL
Aditya KuskoArgentinaXuxue Feng RENEWAL
Claire TollnerFranceAsiya Javayant NEGOTIATION
Kadeem FlosiAustraliaXuxue Feng QUALIFIED
Alejandro PerinSpainStephen Shaw NEGOTIATION
Aditya KuskoAustraliaOnyama Limba PROPOSAL
James ButtCanadaBernardo Dominic PROPOSAL
Emily WhobreyFranceIoni Bowcher NEW
Ivar PaprockiArgentinaIoni Bowcher RENEWAL

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