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
Arvin AlbaresGermanyIvan Magalhaes RENEWAL
Arvin AlbaresBrazilOnyama Limba NEGOTIATION
Cody SaylorsIndiaOnyama Limba NEGOTIATION
Izzy GarufiAustraliaAnna Fali RENEWAL
Nicolas IturbideArgentinaOnyama Limba NEW
Kaitlin OstroskyCanadaStephen Shaw UNQUALIFIED
Misaki RoysterArgentinaAsiya Javayant NEGOTIATION
Morrow RutaIndiaElwin Sharvill NEW
Misaki RoysterArgentinaBernardo Dominic UNQUALIFIED
Chavez BriddickArgentinaAsiya Javayant RENEWAL
Sinclair WaycottUnited KingdomXuxue Feng UNQUALIFIED
Ashley DoeBrazilStephen Shaw UNQUALIFIED
Isabel BowleyFranceXuxue Feng NEGOTIATION
Aika InouyeUnited KingdomAmy Elsner NEGOTIATION
Mayumi KolmetzRussiaElwin Sharvill QUALIFIED
Jennifer AmigonRussiaIoni Bowcher QUALIFIED
Claire TollnerFranceAsiya Javayant PROPOSAL
Johnson SergiFranceAsiya Javayant UNQUALIFIED
Alejandro PerinItalyXuxue Feng NEGOTIATION
Morrow RutaFranceElwin Sharvill PROPOSAL
Mujtaba NickaSpainAsiya Javayant PROPOSAL
Stacey MacleadIndiaAmy Elsner NEW
Jefferson SchemmerIndiaAnna Fali RENEWAL
Greenwood BologniaUnited KingdomAsiya Javayant UNQUALIFIED
Izzy GarufiSpainBernardo Dominic NEW
Octavia MaletFranceAmy Elsner QUALIFIED
Izzy GarufiAustraliaElwin Sharvill UNQUALIFIED
Rodrigues CampainGermanyAsiya Javayant NEGOTIATION
Maria MarrierIndiaIvan Magalhaes PROPOSAL
Emily WhobreyCanadaBernardo Dominic RENEWAL
Adams MorascaGermanyStephen Shaw QUALIFIED
Juan WieserBrazilIoni Bowcher NEW
Jefferson SchemmerFranceIvan Magalhaes NEW
Aruna FigeroaItalyStephen Shaw PROPOSAL
Costa DilliardItalyStephen Shaw NEGOTIATION
Chavez BriddickArgentinaXuxue Feng PROPOSAL
Kaitlin OstroskyCanadaStephen Shaw UNQUALIFIED
Jones VocelkaJapanIvan Magalhaes UNQUALIFIED
Ivar PaprockiItalyIvan Magalhaes NEW
Octavia MaletBrazilIvan Magalhaes NEW
Leja CaldareraRussiaAmy Elsner NEGOTIATION
Greenwood BologniaAustraliaBernardo Dominic RENEWAL
Juan WieserAustraliaAsiya Javayant RENEWAL
Alejandro PerinUnited KingdomIoni Bowcher RENEWAL
Costa DilliardSpainOnyama Limba UNQUALIFIED
Misaki RoysterUnited KingdomStephen Shaw UNQUALIFIED
Jefferson SchemmerSpainBernardo Dominic PROPOSAL
Claire TollnerGermanyBernardo Dominic UNQUALIFIED
Francesco ShinkoRussiaXuxue Feng NEGOTIATION
James ButtItalyElwin Sharvill NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Faith GillianSpainAmy Elsner RENEWAL
Rodrigues CampainFranceAnna Fali PROPOSAL
Kadeem FlosiIndiaElwin Sharvill RENEWAL
Ashley DoeBrazilAnna Fali PROPOSAL
Aika InouyeGermanyAnna Fali QUALIFIED
Juan WieserFranceIvan Magalhaes UNQUALIFIED
Deepesh ChuiAustraliaAmy Elsner NEGOTIATION
Arvin AlbaresUnited KingdomXuxue Feng RENEWAL
Salvatore StockhamSpainBernardo Dominic PROPOSAL
Jennifer AmigonCanadaStephen Shaw UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Cody SaylorsBrazil2025-07-20Benton, John B Jr PROPOSAL80Elwin Sharvill
1001Cody SaylorsItaly2025-07-12Dorl, James J Esq NEW96Xuxue Feng
1002James ButtFrance2025-07-07Truhlar And Truhlar Attys NEGOTIATION25Ivan Magalhaes
1003Cody SaylorsBrazil2025-07-11Rousseaux, Michael Esq RENEWAL29Asiya Javayant
1004Ivar PaprockiRussia2025-07-12Morlong Associates RENEWAL26Asiya Javayant
1005Misaki RoysterAustralia2025-08-01Feltz Printing Service NEW81Elwin Sharvill
1006Ivar PaprockiFrance2025-08-03Printing Dimensions PROPOSAL95Asiya Javayant
1007Jennifer AmigonAustralia2025-08-03Truhlar And Truhlar Attys QUALIFIED11Amy Elsner
1008Emily WhobreyGermany2025-07-15Rangoni Of Florence NEGOTIATION5Anna Fali
1009Clifford RimBrazil2025-07-26Dorl, James J Esq PROPOSAL61Ioni Bowcher
1010Ricardo GauchoFrance2025-07-08King, Christopher A Esq NEW82Xuxue Feng
1011Faith GillianIndia2025-07-15Chapman, Ross E Esq RENEWAL33Onyama Limba
1012Leja CaldareraArgentina2025-07-18King, Christopher A Esq NEW60Xuxue Feng
1013Wickens NestleFrance2025-07-14Rousseaux, Michael Esq PROPOSAL56Anna Fali
1014Sinclair WaycottGermany2025-07-30Printing Dimensions NEW63Asiya Javayant
1015Aditya KuskoCanada2025-07-22King, Christopher A Esq RENEWAL8Onyama Limba
1016Aruna FigeroaFrance2025-07-09Printing Dimensions QUALIFIED11Xuxue Feng
1017Costa DilliardSpain2025-07-30Feltz Printing Service PROPOSAL43Bernardo Dominic
1018Sinclair WaycottSpain2025-07-12Chanay, Jeffrey A Esq QUALIFIED67Xuxue Feng
1019Maisha RulapaughRussia2025-07-07Printing Dimensions RENEWAL58Amy Elsner
1020Julie StensethRussia2025-08-01Benton, John B Jr NEW54Xuxue Feng
1021Costa DilliardSpain2025-07-10Buckley Miller Wright NEGOTIATION66Xuxue Feng
1022Faith GillianRussia2025-07-09Rangoni Of Florence NEW96Anna Fali
1023Juan WieserFrance2025-07-14Rangoni Of Florence UNQUALIFIED74Amy Elsner
1024Aditya KuskoItaly2025-07-28Dorl, James J Esq NEGOTIATION65Asiya Javayant
1025Izzy GarufiRussia2025-07-13Printing Dimensions QUALIFIED47Ioni Bowcher
1026Alejandro PerinItaly2025-08-04Truhlar And Truhlar Attys PROPOSAL13Anna Fali
1027Octavia MaletAustralia2025-07-21King, Christopher A Esq NEW79Amy Elsner
1028Deepesh ChuiIndia2025-07-11Chapman, Ross E Esq PROPOSAL29Ioni Bowcher
1029Arvin AlbaresBrazil2025-07-21Feltz Printing Service PROPOSAL64Bernardo Dominic
1030Jennifer AmigonGermany2025-07-08Rousseaux, Michael Esq NEW10Anna Fali
1031Ashley DoeJapan2025-08-02Chanay, Jeffrey A Esq NEW0Xuxue Feng
1032David DarakjyBrazil2025-07-17Feltz Printing Service RENEWAL87Bernardo Dominic
1033Arvin AlbaresJapan2025-07-21Commercial Press UNQUALIFIED35Bernardo Dominic
1034Mayumi KolmetzJapan2025-07-09Chemel, James L Cpa NEW26Xuxue Feng
1035Maisha RulapaughJapan2025-07-13Printing Dimensions RENEWAL8Ioni Bowcher
1036Arvin AlbaresSpain2025-07-07Commercial Press NEGOTIATION97Anna Fali
1037Chavez BriddickCanada2025-07-18Printing Dimensions NEGOTIATION42Onyama Limba
1038Deepesh ChuiBrazil2025-07-15Rousseaux, Michael Esq UNQUALIFIED90Bernardo Dominic
1039Wickens NestleFrance2025-07-28Feltz Printing Service NEW46Asiya Javayant
1040Munro FerenczArgentina2025-07-22Truhlar And Truhlar Attys RENEWAL97Asiya Javayant
1041Smith GlickBrazil2025-07-07Benton, John B Jr RENEWAL60Stephen Shaw
1042Leja CaldareraJapan2025-07-29Feltz Printing Service UNQUALIFIED51Elwin Sharvill
1043Stacey MacleadArgentina2025-08-02Rangoni Of Florence UNQUALIFIED40Xuxue Feng
1044Isabel BowleyFrance2025-08-01Commercial Press RENEWAL99Anna Fali
1045Silvio SlusarskiUnited Kingdom2025-07-12Truhlar And Truhlar Attys NEW56Onyama Limba
1046Ricardo GauchoIndia2025-08-01Truhlar And Truhlar Attys UNQUALIFIED92Anna Fali
1047Mayumi KolmetzJapan2025-07-24King, Christopher A Esq QUALIFIED53Anna Fali
1048Rodrigues CampainCanada2025-07-31Chapman, Ross E Esq NEGOTIATION69Stephen Shaw
1049Isabel BowleyIndia2025-07-30Morlong Associates NEGOTIATION23Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Mayumi KolmetzAustraliaBernardo Dominic NEGOTIATION
Munro FerenczIndiaStephen Shaw NEW
Darci PoquetteSpainElwin Sharvill UNQUALIFIED
James ButtCanadaIoni Bowcher NEW
Munro FerenczGermanyIvan Magalhaes NEGOTIATION
Octavia MaletIndiaStephen Shaw PROPOSAL
Mujtaba NickaAustraliaBernardo Dominic PROPOSAL
Jeanfrancois VenereFranceOnyama Limba RENEWAL
Aika InouyeJapanIoni Bowcher NEW
Ivar PaprockiUnited KingdomElwin Sharvill QUALIFIED
Clifford RimArgentinaAnna Fali PROPOSAL
Jones VocelkaIndiaAmy Elsner UNQUALIFIED
Ivar PaprockiUnited KingdomStephen Shaw NEGOTIATION
Nicolas IturbideCanadaAsiya Javayant RENEWAL
Emily WhobreySpainBernardo Dominic QUALIFIED
Salvatore StockhamGermanyElwin Sharvill QUALIFIED
Jones VocelkaCanadaIoni Bowcher QUALIFIED
Cody SaylorsCanadaStephen Shaw NEW
Ricardo GauchoArgentinaIoni Bowcher PROPOSAL
Maria MarrierRussiaElwin Sharvill QUALIFIED
Aditya KuskoCanadaElwin Sharvill NEGOTIATION
Wickens NestleJapanStephen Shaw NEGOTIATION
Ricardo GauchoIndiaStephen Shaw NEGOTIATION
Jefferson SchemmerJapanIoni Bowcher RENEWAL
Aditya KuskoItalyAsiya Javayant NEGOTIATION
Aika InouyeSpainOnyama Limba NEW
Adams MorascaBrazilAnna Fali RENEWAL
Smith GlickIndiaXuxue Feng UNQUALIFIED
Aruna FigeroaCanadaBernardo Dominic UNQUALIFIED
Jones VocelkaJapanAsiya Javayant QUALIFIED
Antonio CaudyAustraliaOnyama Limba RENEWAL
Maria MarrierIndiaElwin Sharvill UNQUALIFIED
Kaitlin OstroskyArgentinaIoni Bowcher RENEWAL
Morrow RutaUnited KingdomAsiya Javayant UNQUALIFIED
Mayumi KolmetzUnited KingdomStephen Shaw NEGOTIATION
Sinclair WaycottUnited KingdomIvan Magalhaes QUALIFIED
Maria MarrierAustraliaAsiya Javayant QUALIFIED
Ashley DoeRussiaIvan Magalhaes QUALIFIED
Kadeem FlosiArgentinaIoni Bowcher QUALIFIED
Izzy GarufiJapanElwin Sharvill NEW
Clifford RimAustraliaStephen Shaw RENEWAL
Leja CaldareraFranceIvan Magalhaes PROPOSAL
Johnson SergiItalyAsiya Javayant QUALIFIED
Emily WhobreyBrazilXuxue Feng PROPOSAL
Silvio SlusarskiFranceElwin Sharvill NEGOTIATION
Rodrigues CampainFranceAsiya Javayant NEGOTIATION
Emily WhobreyIndiaIoni Bowcher NEGOTIATION
Francesco ShinkoFranceIoni Bowcher NEW
Silvio SlusarskiAustraliaXuxue Feng NEGOTIATION
Ivar PaprockiUnited KingdomIoni Bowcher RENEWAL
Frozen Columns
Name
Deepesh Chui
Murillo Malet
Maisha Rulapaugh
Rodrigues Campain
Munro Ferencz
Wickens Nestle
Adams Morasca
Jones Vocelka
Claire Tollner
Murillo Malet
Silvio Slusarski
Rodrigues Campain
Kaitlin Ostrosky
Deepesh Chui
Emily Whobrey
Kaitlin Ostrosky
Smith Glick
James Butt
Deepesh Chui
Johnson Sergi
Chavez Briddick
Maisha Rulapaugh
Alejandro Perin
Alejandro Perin
Greenwood Bolognia
Octavia Malet
Rodrigues Campain
Johnson Sergi
Isabel Bowley
Johnson Sergi
Chavez Briddick
Adams Morasca
Ricardo Gaucho
Francesco Shinko
David Darakjy
Munro Ferencz
Sinclair Waycott
Johnson Sergi
Ricardo Gaucho
Stacey Maclead
David Darakjy
Claire Tollner
Ivar Paprocki
Jones Vocelka
Darci Poquette
Juan Wieser
Munro Ferencz
Maisha Rulapaugh
Clifford Rim
Francesco Shinko
IdCountryDate
1000Italy2025-07-15
1001Russia2025-07-24
1002Brazil2025-08-03
1003United Kingdom2025-07-18
1004India2025-08-02
1005Italy2025-08-04
1006Germany2025-07-24
1007Russia2025-07-15
1008Argentina2025-07-27
1009Australia2025-07-06
1010Germany2025-07-11
1011United Kingdom2025-07-17
1012Japan2025-07-07
1013Italy2025-07-28
1014France2025-07-29
1015Spain2025-07-24
1016Brazil2025-08-03
1017France2025-07-20
1018Canada2025-07-16
1019Italy2025-07-20
1020Brazil2025-07-29
1021France2025-07-31
1022Spain2025-07-26
1023Argentina2025-07-17
1024Russia2025-07-27
1025Spain2025-07-20
1026Spain2025-07-26
1027Germany2025-07-16
1028Germany2025-07-23
1029Japan2025-07-27
1030United Kingdom2025-07-22
1031Japan2025-07-06
1032France2025-08-02
1033Italy2025-07-27
1034Spain2025-07-14
1035Japan2025-07-07
1036France2025-07-10
1037United Kingdom2025-07-08
1038Germany2025-07-10
1039Australia2025-07-25
1040Brazil2025-07-19
1041Brazil2025-07-11
1042Russia2025-07-12
1043Argentina2025-07-20
1044India2025-08-03
1045India2025-07-26
1046Canada2025-07-07
1047Japan2025-08-01
1048Brazil2025-07-30
1049India2025-08-01

On-Demand Data

NameIdCountryDate
Darci Poquette1000United Kingdom2025-07-09
Antonio Caudy1001Italy2025-07-16
Darci Poquette1002France2025-07-14
Isabel Bowley1003Australia2025-07-06
Johnson Sergi1004Australia2025-07-29
Murillo Malet1005Germany2025-08-01
David Darakjy1006Argentina2025-08-03
Octavia Malet1007India2025-08-02
Tony Foller1008Argentina2025-07-08
Salvatore Stockham1009Argentina2025-07-14
Greenwood Bolognia1010United Kingdom2025-07-18
Silvio Slusarski1011Canada2025-07-08
Nicolas Iturbide1012Brazil2025-07-10
Maisha Rulapaugh1013Australia2025-07-26
Stacey Maclead1014Japan2025-07-29
Sinclair Waycott1015India2025-07-24
Maisha Rulapaugh1016United Kingdom2025-07-08
Jones Vocelka1017Australia2025-07-25
Costa Dilliard1018Russia2025-07-09
Ivar Paprocki1019Spain2025-07-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci PoquetteAustraliaElwin Sharvill RENEWAL
Ricardo GauchoGermanyAnna Fali RENEWAL
Leon OldroydCanadaAmy Elsner QUALIFIED
Arvin AlbaresBrazilElwin Sharvill NEW
Munro FerenczSpainIoni Bowcher UNQUALIFIED
Maria MarrierBrazilIvan Magalhaes RENEWAL
Smith GlickFranceElwin Sharvill RENEWAL
Arvin AlbaresGermanyBernardo Dominic PROPOSAL
Maisha RulapaughRussiaAnna Fali UNQUALIFIED
Jennifer AmigonItalyIoni Bowcher QUALIFIED
Nicolas IturbideFranceElwin Sharvill QUALIFIED
Murillo MaletItalyBernardo Dominic QUALIFIED
Sinclair WaycottFranceOnyama Limba NEGOTIATION
Francesco ShinkoCanadaElwin Sharvill PROPOSAL
Antonio CaudyRussiaElwin Sharvill NEW
Octavia MaletUnited KingdomIoni Bowcher RENEWAL
Silvio SlusarskiArgentinaXuxue Feng UNQUALIFIED
Ricardo GauchoFranceAmy Elsner QUALIFIED
Nicolas IturbideArgentinaOnyama Limba PROPOSAL
Ricardo GauchoFranceElwin Sharvill NEGOTIATION
Misaki RoysterGermanyIvan Magalhaes NEW
Claire TollnerItalyOnyama Limba PROPOSAL
Octavia MaletGermanyIoni Bowcher NEGOTIATION
James ButtItalyIoni Bowcher QUALIFIED
Munro FerenczGermanyXuxue Feng PROPOSAL
Izzy GarufiBrazilStephen Shaw PROPOSAL
Johnson SergiGermanyStephen Shaw NEW
Morrow RutaArgentinaStephen Shaw QUALIFIED
Jefferson SchemmerSpainIvan Magalhaes RENEWAL
Francesco ShinkoCanadaStephen Shaw NEGOTIATION
Wickens NestleBrazilStephen Shaw QUALIFIED
Leon OldroydFranceBernardo Dominic NEW
Leja CaldareraGermanyAsiya Javayant NEGOTIATION
Greenwood BologniaGermanyOnyama Limba RENEWAL
Arvin AlbaresGermanyAsiya Javayant NEGOTIATION
Kaitlin OstroskyItalyOnyama Limba UNQUALIFIED
Munro FerenczJapanOnyama Limba UNQUALIFIED
Leon OldroydItalyAsiya Javayant QUALIFIED
Aika InouyeSpainAmy Elsner RENEWAL
Juan WieserIndiaIvan 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>