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
Faith GillianRussiaElwin Sharvill UNQUALIFIED
Chavez BriddickUnited KingdomOnyama Limba QUALIFIED
Kaitlin OstroskyAustraliaIvan Magalhaes RENEWAL
Jeanfrancois VenereFranceAmy Elsner NEGOTIATION
Francesco ShinkoUnited KingdomXuxue Feng RENEWAL
Emily WhobreyJapanOnyama Limba PROPOSAL
James ButtGermanyXuxue Feng NEGOTIATION
Jennifer AmigonAustraliaXuxue Feng RENEWAL
Aditya KuskoFranceAmy Elsner QUALIFIED
Jones VocelkaGermanyIvan Magalhaes QUALIFIED
Francesco ShinkoGermanyIvan Magalhaes NEW
Deepesh ChuiItalyIoni Bowcher NEW
Faith GillianUnited KingdomIoni Bowcher NEGOTIATION
Izzy GarufiRussiaAsiya Javayant PROPOSAL
Wickens NestleJapanAnna Fali NEGOTIATION
Julie StensethJapanOnyama Limba UNQUALIFIED
Juan WieserSpainAsiya Javayant RENEWAL
Arvin AlbaresCanadaAmy Elsner NEGOTIATION
Aditya KuskoIndiaAsiya Javayant PROPOSAL
Misaki RoysterUnited KingdomIoni Bowcher QUALIFIED
Kaitlin OstroskyRussiaOnyama Limba RENEWAL
Jefferson SchemmerFranceBernardo Dominic NEW
Alejandro PerinUnited KingdomAnna Fali RENEWAL
Murillo MaletAustraliaElwin Sharvill PROPOSAL
Misaki RoysterCanadaAsiya Javayant RENEWAL
Leja CaldareraArgentinaIvan Magalhaes NEGOTIATION
Aruna FigeroaGermanyOnyama Limba UNQUALIFIED
Aditya KuskoCanadaIoni Bowcher UNQUALIFIED
Maisha RulapaughSpainStephen Shaw NEW
Arvin AlbaresAustraliaStephen Shaw QUALIFIED
Deepesh ChuiJapanElwin Sharvill PROPOSAL
Adams MorascaCanadaOnyama Limba NEW
Juan WieserItalyStephen Shaw QUALIFIED
Deepesh ChuiFranceAnna Fali UNQUALIFIED
Alejandro PerinUnited KingdomAmy Elsner RENEWAL
Deepesh ChuiRussiaXuxue Feng NEGOTIATION
Stacey MacleadGermanyStephen Shaw UNQUALIFIED
Smith GlickRussiaAnna Fali NEW
Murillo MaletRussiaAmy Elsner PROPOSAL
Jennifer AmigonGermanyIvan Magalhaes QUALIFIED
Greenwood BologniaAustraliaElwin Sharvill QUALIFIED
Julie StensethSpainXuxue Feng QUALIFIED
Maisha RulapaughGermanyAmy Elsner PROPOSAL
Ivar PaprockiAustraliaStephen Shaw RENEWAL
Juan WieserUnited KingdomElwin Sharvill NEGOTIATION
Leja CaldareraRussiaStephen Shaw PROPOSAL
Misaki RoysterGermanyIvan Magalhaes NEW
Ashley DoeJapanElwin Sharvill NEGOTIATION
Aditya KuskoCanadaXuxue Feng QUALIFIED
Darci PoquetteJapanIoni Bowcher RENEWAL
Horizontal
NameCountryRepresentativeStatus
Leja CaldareraJapanAmy Elsner RENEWAL
Faith GillianGermanyAsiya Javayant NEW
Ricardo GauchoArgentinaIvan Magalhaes UNQUALIFIED
Claire TollnerAustraliaAnna Fali PROPOSAL
Julie StensethCanadaIoni Bowcher NEW
Jennifer AmigonArgentinaElwin Sharvill RENEWAL
Claire TollnerUnited KingdomStephen Shaw RENEWAL
Johnson SergiArgentinaAmy Elsner UNQUALIFIED
Mujtaba NickaIndiaElwin Sharvill NEGOTIATION
Jefferson SchemmerIndiaXuxue Feng NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Arvin AlbaresJapan2025-08-06Rousseaux, Michael Esq UNQUALIFIED11Ioni Bowcher
1001Morrow RutaGermany2025-08-12Rangoni Of Florence NEW66Bernardo Dominic
1002Aruna FigeroaIndia2025-08-12Feiner Bros NEGOTIATION27Elwin Sharvill
1003Ricardo GauchoIndia2025-08-06Rangoni Of Florence PROPOSAL76Elwin Sharvill
1004Isabel BowleyArgentina2025-08-05Rangoni Of Florence RENEWAL77Asiya Javayant
1005Emily WhobreyJapan2025-08-13Feltz Printing Service UNQUALIFIED67Stephen Shaw
1006Maisha RulapaughCanada2025-08-19Truhlar And Truhlar Attys PROPOSAL82Elwin Sharvill
1007Aruna FigeroaFrance2025-08-27Dorl, James J Esq NEW38Xuxue Feng
1008Emily WhobreyGermany2025-08-21Buckley Miller Wright NEW70Ioni Bowcher
1009James ButtItaly2025-08-14Rangoni Of Florence NEW74Xuxue Feng
1010Kaitlin OstroskyIndia2025-08-31Dorl, James J Esq NEW59Amy Elsner
1011Kadeem FlosiBrazil2025-08-28Morlong Associates QUALIFIED81Stephen Shaw
1012Maisha RulapaughArgentina2025-08-18Buckley Miller Wright QUALIFIED1Xuxue Feng
1013Faith GillianUnited Kingdom2025-08-16Benton, John B Jr PROPOSAL21Elwin Sharvill
1014Claire TollnerFrance2025-08-10Rangoni Of Florence PROPOSAL8Elwin Sharvill
1015Misaki RoysterItaly2025-08-10Truhlar And Truhlar Attys QUALIFIED57Amy Elsner
1016Salvatore StockhamBrazil2025-08-21Chemel, James L Cpa NEW90Asiya Javayant
1017Wickens NestleSpain2025-08-28Truhlar And Truhlar Attys UNQUALIFIED20Ioni Bowcher
1018Clifford RimArgentina2025-08-13Benton, John B Jr QUALIFIED12Elwin Sharvill
1019Jefferson SchemmerSpain2025-08-08Rousseaux, Michael Esq NEW41Amy Elsner
1020Chavez BriddickBrazil2025-08-11Commercial Press NEGOTIATION82Stephen Shaw
1021Ricardo GauchoUnited Kingdom2025-08-30Feltz Printing Service QUALIFIED20Asiya Javayant
1022Tony FollerGermany2025-08-17Truhlar And Truhlar Attys RENEWAL45Stephen Shaw
1023Murillo MaletAustralia2025-08-24Commercial Press RENEWAL47Bernardo Dominic
1024Emily WhobreyIndia2025-08-04King, Christopher A Esq QUALIFIED55Ioni Bowcher
1025Arvin AlbaresUnited Kingdom2025-08-12Printing Dimensions PROPOSAL24Asiya Javayant
1026Maisha RulapaughIndia2025-08-15Truhlar And Truhlar Attys UNQUALIFIED1Ivan Magalhaes
1027Jeanfrancois VenereRussia2025-08-17Benton, John B Jr UNQUALIFIED60Bernardo Dominic
1028Antonio CaudyAustralia2025-08-11Buckley Miller Wright NEGOTIATION72Xuxue Feng
1029Juan WieserBrazil2025-08-18Commercial Press UNQUALIFIED48Onyama Limba
1030Adams MorascaUnited Kingdom2025-08-19Chapman, Ross E Esq PROPOSAL88Elwin Sharvill
1031Nicolas IturbideJapan2025-08-30Commercial Press RENEWAL74Xuxue Feng
1032Kaitlin OstroskyGermany2025-08-25Buckley Miller Wright QUALIFIED44Amy Elsner
1033Claire TollnerAustralia2025-08-17Feltz Printing Service NEW87Xuxue Feng
1034Maisha RulapaughJapan2025-08-17Feiner Bros PROPOSAL7Amy Elsner
1035Maisha RulapaughIndia2025-08-18Printing Dimensions QUALIFIED71Amy Elsner
1036Aditya KuskoArgentina2025-08-22Chapman, Ross E Esq PROPOSAL78Ivan Magalhaes
1037Mayumi KolmetzSpain2025-08-13Benton, John B Jr PROPOSAL11Ioni Bowcher
1038Greenwood BologniaRussia2025-08-17Feltz Printing Service PROPOSAL76Onyama Limba
1039Leon OldroydSpain2025-08-13Printing Dimensions RENEWAL33Elwin Sharvill
1040Sinclair WaycottSpain2025-08-07Rousseaux, Michael Esq NEW46Amy Elsner
1041Mayumi KolmetzIndia2025-08-05Chapman, Ross E Esq PROPOSAL29Ioni Bowcher
1042Antonio CaudySpain2025-08-29Rangoni Of Florence QUALIFIED88Anna Fali
1043Julie StensethFrance2025-08-05Chanay, Jeffrey A Esq UNQUALIFIED44Ivan Magalhaes
1044Rodrigues CampainSpain2025-08-26King, Christopher A Esq NEGOTIATION3Stephen Shaw
1045Julie StensethGermany2025-08-11Chanay, Jeffrey A Esq NEW88Stephen Shaw
1046Ricardo GauchoCanada2025-08-08Benton, John B Jr QUALIFIED62Elwin Sharvill
1047Francesco ShinkoJapan2025-08-06Truhlar And Truhlar Attys PROPOSAL73Asiya Javayant
1048Deepesh ChuiGermany2025-08-30Chanay, Jeffrey A Esq NEGOTIATION44Ivan Magalhaes
1049Aruna FigeroaIndia2025-08-15Chemel, James L Cpa NEGOTIATION56Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Cody SaylorsCanadaBernardo Dominic NEGOTIATION
Maisha RulapaughIndiaIoni Bowcher NEGOTIATION
Silvio SlusarskiRussiaIvan Magalhaes QUALIFIED
Ricardo GauchoJapanXuxue Feng QUALIFIED
Darci PoquetteUnited KingdomElwin Sharvill NEGOTIATION
Aika InouyeItalyAsiya Javayant NEGOTIATION
Clifford RimIndiaIvan Magalhaes UNQUALIFIED
Antonio CaudyIndiaAmy Elsner QUALIFIED
Jeanfrancois VenereSpainIvan Magalhaes QUALIFIED
Antonio CaudyIndiaBernardo Dominic RENEWAL
Greenwood BologniaGermanyElwin Sharvill PROPOSAL
Jennifer AmigonUnited KingdomAsiya Javayant PROPOSAL
Jennifer AmigonJapanAmy Elsner PROPOSAL
Stacey MacleadSpainStephen Shaw UNQUALIFIED
Maria MarrierUnited KingdomAmy Elsner NEW
Emily WhobreySpainAsiya Javayant QUALIFIED
Arvin AlbaresUnited KingdomAmy Elsner UNQUALIFIED
Mujtaba NickaFranceAmy Elsner UNQUALIFIED
Salvatore StockhamArgentinaElwin Sharvill NEW
Rodrigues CampainFranceAsiya Javayant PROPOSAL
Darci PoquetteBrazilOnyama Limba UNQUALIFIED
Kadeem FlosiJapanBernardo Dominic NEW
Rodrigues CampainArgentinaBernardo Dominic NEW
Aika InouyeCanadaXuxue Feng QUALIFIED
Izzy GarufiItalyStephen Shaw RENEWAL
Greenwood BologniaBrazilIvan Magalhaes NEGOTIATION
Maria MarrierGermanyAnna Fali UNQUALIFIED
Claire TollnerArgentinaElwin Sharvill UNQUALIFIED
Ashley DoeArgentinaAnna Fali PROPOSAL
Silvio SlusarskiCanadaXuxue Feng PROPOSAL
Chavez BriddickRussiaAnna Fali QUALIFIED
Francesco ShinkoSpainBernardo Dominic NEGOTIATION
Ricardo GauchoGermanyIvan Magalhaes UNQUALIFIED
Mujtaba NickaCanadaOnyama Limba UNQUALIFIED
Darci PoquetteUnited KingdomIoni Bowcher PROPOSAL
Nicolas IturbideRussiaStephen Shaw NEGOTIATION
Aruna FigeroaIndiaAnna Fali NEW
Chavez BriddickArgentinaXuxue Feng UNQUALIFIED
Costa DilliardCanadaIoni Bowcher PROPOSAL
Morrow RutaGermanyXuxue Feng RENEWAL
Juan WieserSpainIoni Bowcher UNQUALIFIED
Costa DilliardArgentinaElwin Sharvill UNQUALIFIED
Claire TollnerRussiaStephen Shaw NEW
Nicolas IturbideJapanAsiya Javayant NEW
Rodrigues CampainSpainAmy Elsner NEW
Aika InouyeAustraliaBernardo Dominic RENEWAL
Antonio CaudyJapanXuxue Feng PROPOSAL
Misaki RoysterSpainElwin Sharvill UNQUALIFIED
Sinclair WaycottBrazilAmy Elsner NEGOTIATION
Smith GlickBrazilAnna Fali NEW
Frozen Columns
Name
Izzy Garufi
Jefferson Schemmer
Munro Ferencz
Jones Vocelka
Cody Saylors
Sinclair Waycott
Juan Wieser
Stacey Maclead
Rodrigues Campain
Emily Whobrey
Jennifer Amigon
Chavez Briddick
Aditya Kusko
Costa Dilliard
Maria Marrier
Chavez Briddick
Cody Saylors
Stacey Maclead
Cody Saylors
Mayumi Kolmetz
Claire Tollner
Mujtaba Nicka
Aditya Kusko
James Butt
Emily Whobrey
Isabel Bowley
Deepesh Chui
Johnson Sergi
Salvatore Stockham
Tony Foller
Maria Marrier
Jefferson Schemmer
Aditya Kusko
Julie Stenseth
Ashley Doe
Clifford Rim
Misaki Royster
Ivar Paprocki
Adams Morasca
Ricardo Gaucho
Ricardo Gaucho
Costa Dilliard
Chavez Briddick
Mayumi Kolmetz
Darci Poquette
Isabel Bowley
Octavia Malet
Aika Inouye
Deepesh Chui
Emily Whobrey
IdCountryDate
1000Russia2025-08-20
1001Australia2025-08-27
1002India2025-09-01
1003Australia2025-08-07
1004Japan2025-08-17
1005Italy2025-08-25
1006Spain2025-08-24
1007France2025-08-19
1008Canada2025-08-21
1009India2025-08-12
1010Russia2025-08-17
1011Japan2025-08-23
1012Canada2025-08-12
1013Japan2025-08-06
1014India2025-08-27
1015Argentina2025-08-13
1016Russia2025-08-25
1017Australia2025-08-20
1018Russia2025-08-05
1019Canada2025-08-07
1020Italy2025-08-18
1021United Kingdom2025-08-31
1022Japan2025-08-07
1023Australia2025-08-19
1024Brazil2025-08-12
1025Australia2025-08-08
1026United Kingdom2025-08-11
1027Russia2025-08-23
1028United Kingdom2025-08-23
1029Italy2025-08-22
1030Australia2025-08-08
1031Russia2025-08-19
1032France2025-08-29
1033United Kingdom2025-08-29
1034Canada2025-08-05
1035Japan2025-08-11
1036Australia2025-08-22
1037France2025-08-30
1038Spain2025-08-29
1039Canada2025-08-23
1040India2025-09-01
1041Spain2025-08-09
1042Australia2025-08-28
1043India2025-08-19
1044Argentina2025-08-13
1045Australia2025-08-05
1046Japan2025-08-16
1047Argentina2025-08-20
1048Canada2025-08-09
1049Russia2025-08-26

On-Demand Data

NameIdCountryDate
Octavia Malet1000Canada2025-08-09
Adams Morasca1001United Kingdom2025-08-12
Kaitlin Ostrosky1002Russia2025-08-20
Murillo Malet1003United Kingdom2025-08-07
Ivar Paprocki1004France2025-08-07
Greenwood Bolognia1005Australia2025-08-30
Izzy Garufi1006India2025-08-18
Aika Inouye1007India2025-08-11
Antonio Caudy1008Spain2025-08-21
Deepesh Chui1009Spain2025-08-31
Deepesh Chui1010Brazil2025-08-21
Johnson Sergi1011United Kingdom2025-08-17
Emily Whobrey1012Spain2025-08-31
Maria Marrier1013Brazil2025-08-07
Misaki Royster1014United Kingdom2025-08-13
Aika Inouye1015Italy2025-08-28
Murillo Malet1016Spain2025-08-09
Darci Poquette1017Russia2025-08-21
Johnson Sergi1018India2025-08-28
Greenwood Bolognia1019Argentina2025-08-03
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Maria MarrierFranceAsiya Javayant NEGOTIATION
Greenwood BologniaIndiaAnna Fali NEGOTIATION
Rodrigues CampainSpainElwin Sharvill PROPOSAL
Salvatore StockhamUnited KingdomIoni Bowcher NEGOTIATION
Claire TollnerCanadaOnyama Limba PROPOSAL
Octavia MaletFranceIoni Bowcher RENEWAL
Jeanfrancois VenereItalyIvan Magalhaes PROPOSAL
Clifford RimUnited KingdomXuxue Feng PROPOSAL
Francesco ShinkoAustraliaOnyama Limba PROPOSAL
Cody SaylorsUnited KingdomAsiya Javayant NEW
Darci PoquetteJapanBernardo Dominic QUALIFIED
Deepesh ChuiCanadaAnna Fali PROPOSAL
Antonio CaudyJapanAmy Elsner UNQUALIFIED
Juan WieserIndiaIoni Bowcher NEGOTIATION
Murillo MaletUnited KingdomElwin Sharvill RENEWAL
Julie StensethJapanXuxue Feng QUALIFIED
Antonio CaudyItalyAmy Elsner PROPOSAL
Arvin AlbaresGermanyIoni Bowcher RENEWAL
Chavez BriddickJapanOnyama Limba NEW
Costa DilliardArgentinaElwin Sharvill NEW
Juan WieserAustraliaElwin Sharvill UNQUALIFIED
Deepesh ChuiUnited KingdomAmy Elsner NEW
Munro FerenczGermanyXuxue Feng RENEWAL
Costa DilliardRussiaXuxue Feng NEGOTIATION
Antonio CaudyFranceAnna Fali PROPOSAL
Antonio CaudySpainStephen Shaw NEGOTIATION
Jefferson SchemmerJapanElwin Sharvill NEW
Sinclair WaycottItalyIoni Bowcher QUALIFIED
Johnson SergiFranceXuxue Feng NEGOTIATION
Smith GlickJapanAsiya Javayant QUALIFIED
Misaki RoysterSpainAnna Fali NEW
Faith GillianFranceXuxue Feng PROPOSAL
Mujtaba NickaIndiaIoni Bowcher UNQUALIFIED
Clifford RimJapanIvan Magalhaes NEW
Isabel BowleyRussiaAmy Elsner QUALIFIED
Leja CaldareraSpainAsiya Javayant RENEWAL
Ricardo GauchoSpainIoni Bowcher QUALIFIED
Mayumi KolmetzGermanyIvan Magalhaes NEW
Faith GillianFranceIoni Bowcher NEGOTIATION
Silvio SlusarskiBrazilAsiya Javayant UNQUALIFIED

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