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
Cody SaylorsAustraliaStephen Shaw NEGOTIATION
Maisha RulapaughAustraliaIoni Bowcher NEW
Jefferson SchemmerCanadaIoni Bowcher QUALIFIED
Juan WieserJapanIvan Magalhaes UNQUALIFIED
Mujtaba NickaArgentinaIoni Bowcher QUALIFIED
Juan WieserArgentinaAsiya Javayant QUALIFIED
Clifford RimSpainAnna Fali NEW
Smith GlickGermanyAmy Elsner RENEWAL
Izzy GarufiGermanyOnyama Limba NEGOTIATION
Deepesh ChuiUnited KingdomStephen Shaw UNQUALIFIED
Mayumi KolmetzUnited KingdomAsiya Javayant UNQUALIFIED
Aruna FigeroaGermanyOnyama Limba NEGOTIATION
Ivar PaprockiArgentinaAsiya Javayant NEW
Johnson SergiItalyBernardo Dominic PROPOSAL
Deepesh ChuiArgentinaAsiya Javayant QUALIFIED
Jefferson SchemmerRussiaStephen Shaw UNQUALIFIED
Maria MarrierIndiaAsiya Javayant NEW
Aruna FigeroaGermanyIvan Magalhaes RENEWAL
Alejandro PerinRussiaAsiya Javayant PROPOSAL
Juan WieserItalyIoni Bowcher PROPOSAL
Izzy GarufiRussiaXuxue Feng RENEWAL
Ashley DoeIndiaAsiya Javayant RENEWAL
Misaki RoysterSpainBernardo Dominic UNQUALIFIED
Ivar PaprockiAustraliaAnna Fali RENEWAL
Nicolas IturbideRussiaIvan Magalhaes QUALIFIED
Maisha RulapaughGermanyOnyama Limba RENEWAL
Misaki RoysterIndiaStephen Shaw QUALIFIED
Johnson SergiUnited KingdomXuxue Feng NEW
Jones VocelkaSpainElwin Sharvill RENEWAL
Antonio CaudyUnited KingdomElwin Sharvill RENEWAL
Jefferson SchemmerIndiaOnyama Limba PROPOSAL
Deepesh ChuiSpainXuxue Feng NEW
Julie StensethSpainIoni Bowcher UNQUALIFIED
Chavez BriddickSpainIoni Bowcher UNQUALIFIED
Chavez BriddickItalyAnna Fali QUALIFIED
Isabel BowleyCanadaOnyama Limba QUALIFIED
Aditya KuskoAustraliaIvan Magalhaes UNQUALIFIED
Aditya KuskoCanadaIvan Magalhaes RENEWAL
Clifford RimBrazilStephen Shaw PROPOSAL
Isabel BowleyAustraliaAsiya Javayant NEGOTIATION
Adams MorascaItalyOnyama Limba RENEWAL
Octavia MaletCanadaOnyama Limba PROPOSAL
Costa DilliardUnited KingdomAnna Fali UNQUALIFIED
Juan WieserCanadaOnyama Limba NEGOTIATION
Claire TollnerCanadaOnyama Limba NEW
Leja CaldareraBrazilStephen Shaw NEW
Tony FollerJapanAnna Fali NEW
Chavez BriddickIndiaElwin Sharvill QUALIFIED
Stacey MacleadBrazilIoni Bowcher NEGOTIATION
Darci PoquetteItalyElwin Sharvill QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Ricardo GauchoBrazilAsiya Javayant RENEWAL
Ashley DoeArgentinaOnyama Limba NEW
Leon OldroydItalyElwin Sharvill UNQUALIFIED
Leon OldroydJapanBernardo Dominic NEW
Juan WieserJapanBernardo Dominic QUALIFIED
Kadeem FlosiBrazilElwin Sharvill RENEWAL
Deepesh ChuiItalyElwin Sharvill UNQUALIFIED
Greenwood BologniaGermanyIvan Magalhaes NEGOTIATION
Jefferson SchemmerSpainAnna Fali QUALIFIED
Adams MorascaArgentinaAsiya Javayant NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Tony FollerUnited Kingdom2026-05-24Benton, John B Jr NEGOTIATION94Onyama Limba
1001Rodrigues CampainAustralia2026-05-02Truhlar And Truhlar Attys QUALIFIED50Elwin Sharvill
1002Rodrigues CampainCanada2026-05-04Printing Dimensions QUALIFIED3Onyama Limba
1003Aditya KuskoArgentina2026-05-17Feiner Bros RENEWAL55Amy Elsner
1004Claire TollnerCanada2026-05-21Feltz Printing Service QUALIFIED90Xuxue Feng
1005Greenwood BologniaGermany2026-05-01Dorl, James J Esq UNQUALIFIED65Asiya Javayant
1006Emily WhobreyIndia2026-04-27Feltz Printing Service NEGOTIATION62Asiya Javayant
1007David DarakjyJapan2026-05-25King, Christopher A Esq NEGOTIATION1Bernardo Dominic
1008Julie StensethAustralia2026-05-22Feltz Printing Service QUALIFIED50Anna Fali
1009Tony FollerFrance2026-05-12Morlong Associates UNQUALIFIED39Xuxue Feng
1010Darci PoquetteGermany2026-05-08King, Christopher A Esq QUALIFIED96Xuxue Feng
1011David DarakjyUnited Kingdom2026-05-14Buckley Miller Wright QUALIFIED64Bernardo Dominic
1012Costa DilliardCanada2026-05-12Feltz Printing Service UNQUALIFIED75Ioni Bowcher
1013Leon OldroydSpain2026-05-03Buckley Miller Wright NEW15Bernardo Dominic
1014Octavia MaletRussia2026-05-15Printing Dimensions PROPOSAL13Elwin Sharvill
1015David DarakjyGermany2026-05-03Rousseaux, Michael Esq UNQUALIFIED66Stephen Shaw
1016Clifford RimUnited Kingdom2026-04-29Printing Dimensions QUALIFIED32Stephen Shaw
1017Julie StensethFrance2026-05-20Rangoni Of Florence PROPOSAL14Asiya Javayant
1018Deepesh ChuiIndia2026-04-26Commercial Press NEW82Ivan Magalhaes
1019Maisha RulapaughArgentina2026-05-24Feiner Bros PROPOSAL23Ivan Magalhaes
1020Alejandro PerinFrance2026-05-25Truhlar And Truhlar Attys PROPOSAL25Ioni Bowcher
1021Ricardo GauchoGermany2026-05-19Printing Dimensions QUALIFIED35Bernardo Dominic
1022Chavez BriddickCanada2026-05-17Printing Dimensions NEW8Elwin Sharvill
1023James ButtGermany2026-04-29Feltz Printing Service NEGOTIATION18Ioni Bowcher
1024Alejandro PerinIndia2026-05-12Truhlar And Truhlar Attys NEW4Onyama Limba
1025Morrow RutaIndia2026-05-04Printing Dimensions NEW4Ioni Bowcher
1026Smith GlickGermany2026-05-04King, Christopher A Esq QUALIFIED47Elwin Sharvill
1027Misaki RoysterUnited Kingdom2026-05-22Truhlar And Truhlar Attys NEGOTIATION80Amy Elsner
1028Juan WieserIndia2026-05-07Rangoni Of Florence NEW41Stephen Shaw
1029Leon OldroydJapan2026-05-02Feiner Bros NEGOTIATION47Asiya Javayant
1030Jefferson SchemmerUnited Kingdom2026-05-25Printing Dimensions QUALIFIED22Xuxue Feng
1031Isabel BowleyBrazil2026-05-15Feltz Printing Service RENEWAL14Ioni Bowcher
1032Darci PoquetteBrazil2026-05-02Rousseaux, Michael Esq QUALIFIED94Stephen Shaw
1033Maria MarrierCanada2026-04-26Feltz Printing Service NEW29Onyama Limba
1034Adams MorascaAustralia2026-05-25King, Christopher A Esq NEW82Bernardo Dominic
1035Darci PoquetteArgentina2026-04-29Morlong Associates PROPOSAL96Stephen Shaw
1036Chavez BriddickItaly2026-05-10Feltz Printing Service NEGOTIATION98Ivan Magalhaes
1037Darci PoquetteSpain2026-05-13Rousseaux, Michael Esq QUALIFIED48Anna Fali
1038Sinclair WaycottUnited Kingdom2026-05-13Commercial Press NEGOTIATION25Anna Fali
1039Misaki RoysterJapan2026-05-11Commercial Press RENEWAL30Ioni Bowcher
1040Julie StensethJapan2026-05-21Chemel, James L Cpa QUALIFIED17Ioni Bowcher
1041Aditya KuskoCanada2026-05-17Rangoni Of Florence NEGOTIATION25Bernardo Dominic
1042Ivar PaprockiArgentina2026-05-14Feiner Bros QUALIFIED98Ivan Magalhaes
1043Mujtaba NickaAustralia2026-05-09Benton, John B Jr UNQUALIFIED12Xuxue Feng
1044Morrow RutaCanada2026-05-16King, Christopher A Esq QUALIFIED31Anna Fali
1045Johnson SergiArgentina2026-05-14Chanay, Jeffrey A Esq NEGOTIATION95Ioni Bowcher
1046Antonio CaudySpain2026-05-15Chemel, James L Cpa PROPOSAL42Amy Elsner
1047Kaitlin OstroskyBrazil2026-05-02Dorl, James J Esq PROPOSAL22Stephen Shaw
1048Jefferson SchemmerGermany2026-05-16Benton, John B Jr NEGOTIATION79Stephen Shaw
1049Wickens NestleSpain2026-05-07Chemel, James L Cpa PROPOSAL53Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
David DarakjyGermanyXuxue Feng PROPOSAL
Kadeem FlosiRussiaXuxue Feng UNQUALIFIED
Izzy GarufiArgentinaAnna Fali NEGOTIATION
Wickens NestleJapanElwin Sharvill NEGOTIATION
Francesco ShinkoArgentinaAsiya Javayant QUALIFIED
Sinclair WaycottGermanyOnyama Limba UNQUALIFIED
Tony FollerGermanyAmy Elsner QUALIFIED
Chavez BriddickItalyOnyama Limba QUALIFIED
Darci PoquetteIndiaElwin Sharvill PROPOSAL
Jeanfrancois VenereBrazilOnyama Limba QUALIFIED
Ashley DoeGermanyOnyama Limba RENEWAL
Arvin AlbaresGermanyIvan Magalhaes UNQUALIFIED
Misaki RoysterJapanOnyama Limba RENEWAL
Faith GillianGermanyXuxue Feng UNQUALIFIED
Ashley DoeJapanIvan Magalhaes QUALIFIED
Maisha RulapaughIndiaBernardo Dominic NEW
Emily WhobreySpainBernardo Dominic PROPOSAL
Maisha RulapaughCanadaBernardo Dominic NEGOTIATION
Silvio SlusarskiSpainIvan Magalhaes QUALIFIED
Salvatore StockhamJapanIoni Bowcher QUALIFIED
Kadeem FlosiSpainStephen Shaw NEW
Murillo MaletBrazilXuxue Feng NEW
Jeanfrancois VenereCanadaXuxue Feng PROPOSAL
Jeanfrancois VenereRussiaIvan Magalhaes NEGOTIATION
Johnson SergiRussiaElwin Sharvill NEGOTIATION
Jennifer AmigonUnited KingdomAnna Fali NEGOTIATION
James ButtArgentinaIvan Magalhaes QUALIFIED
David DarakjyArgentinaOnyama Limba PROPOSAL
Arvin AlbaresCanadaStephen Shaw RENEWAL
Alejandro PerinBrazilElwin Sharvill UNQUALIFIED
Kadeem FlosiArgentinaOnyama Limba UNQUALIFIED
Claire TollnerBrazilIvan Magalhaes NEW
Maria MarrierUnited KingdomIoni Bowcher UNQUALIFIED
Chavez BriddickArgentinaAnna Fali PROPOSAL
Aditya KuskoRussiaStephen Shaw UNQUALIFIED
Maisha RulapaughUnited KingdomAnna Fali NEGOTIATION
Mayumi KolmetzItalyAsiya Javayant NEGOTIATION
Sinclair WaycottAustraliaXuxue Feng RENEWAL
Smith GlickIndiaAsiya Javayant NEGOTIATION
Maria MarrierArgentinaXuxue Feng QUALIFIED
Aika InouyeUnited KingdomAmy Elsner NEW
Sinclair WaycottCanadaIoni Bowcher QUALIFIED
Maria MarrierFranceBernardo Dominic RENEWAL
Wickens NestleIndiaIoni Bowcher RENEWAL
Aruna FigeroaJapanBernardo Dominic RENEWAL
Stacey MacleadIndiaOnyama Limba PROPOSAL
Clifford RimJapanAnna Fali UNQUALIFIED
Julie StensethUnited KingdomAmy Elsner NEW
Kadeem FlosiBrazilAsiya Javayant QUALIFIED
Maria MarrierSpainAnna Fali UNQUALIFIED
Frozen Columns
Name
Kadeem Flosi
Darci Poquette
Leja Caldarera
Munro Ferencz
Nicolas Iturbide
Jeanfrancois Venere
Ricardo Gaucho
Cody Saylors
Morrow Ruta
Julie Stenseth
Ivar Paprocki
Arvin Albares
Rodrigues Campain
Rodrigues Campain
Jennifer Amigon
James Butt
Morrow Ruta
Wickens Nestle
Murillo Malet
Stacey Maclead
Wickens Nestle
Julie Stenseth
Claire Tollner
Silvio Slusarski
Smith Glick
Deepesh Chui
Chavez Briddick
Munro Ferencz
Octavia Malet
Wickens Nestle
Greenwood Bolognia
Antonio Caudy
Jefferson Schemmer
Jefferson Schemmer
Kadeem Flosi
Claire Tollner
Mayumi Kolmetz
Jones Vocelka
Julie Stenseth
Smith Glick
Faith Gillian
Jones Vocelka
Ricardo Gaucho
Aditya Kusko
Jones Vocelka
Juan Wieser
Antonio Caudy
Mayumi Kolmetz
Julie Stenseth
Aika Inouye
IdCountryDate
1000Canada2026-04-26
1001France2026-04-29
1002Spain2026-05-05
1003Canada2026-05-11
1004Russia2026-05-09
1005Russia2026-05-04
1006Spain2026-05-12
1007Italy2026-05-07
1008Canada2026-04-28
1009India2026-05-13
1010Spain2026-05-12
1011Italy2026-05-16
1012India2026-04-29
1013Russia2026-05-02
1014Italy2026-05-10
1015Japan2026-05-05
1016Spain2026-05-22
1017Brazil2026-05-06
1018Spain2026-05-04
1019Argentina2026-05-08
1020Russia2026-05-02
1021Argentina2026-05-05
1022Italy2026-04-29
1023Italy2026-05-01
1024France2026-05-16
1025Spain2026-05-19
1026Brazil2026-05-20
1027Argentina2026-05-21
1028Australia2026-05-19
1029Canada2026-05-03
1030Germany2026-05-12
1031Argentina2026-05-20
1032Brazil2026-05-19
1033Brazil2026-05-11
1034Germany2026-05-10
1035Germany2026-05-17
1036Russia2026-05-11
1037Canada2026-05-16
1038Canada2026-04-29
1039Spain2026-05-13
1040Spain2026-05-13
1041Canada2026-04-27
1042France2026-04-27
1043France2026-05-04
1044Spain2026-05-07
1045United Kingdom2026-05-18
1046Italy2026-05-24
1047Brazil2026-04-28
1048Spain2026-05-06
1049Australia2026-05-23

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000Brazil2026-04-28
Maisha Rulapaugh1001Germany2026-05-10
Rodrigues Campain1002France2026-04-27
Maria Marrier1003Spain2026-05-18
Salvatore Stockham1004Spain2026-04-29
Francesco Shinko1005Germany2026-05-09
Morrow Ruta1006France2026-05-12
Cody Saylors1007France2026-05-21
David Darakjy1008Brazil2026-05-13
Jefferson Schemmer1009Canada2026-05-10
Isabel Bowley1010France2026-05-25
Stacey Maclead1011Brazil2026-05-11
David Darakjy1012Brazil2026-05-25
Chavez Briddick1013Argentina2026-05-11
Kaitlin Ostrosky1014Italy2026-04-28
Mayumi Kolmetz1015Russia2026-05-10
Sinclair Waycott1016United Kingdom2026-05-07
Kaitlin Ostrosky1017Russia2026-05-18
Izzy Garufi1018Italy2026-05-21
Jefferson Schemmer1019Russia2026-05-22
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Wickens NestleGermanyIoni Bowcher UNQUALIFIED
Greenwood BologniaAustraliaElwin Sharvill QUALIFIED
Kadeem FlosiBrazilIvan Magalhaes RENEWAL
Jefferson SchemmerJapanIoni Bowcher PROPOSAL
Arvin AlbaresIndiaIoni Bowcher QUALIFIED
Ashley DoeJapanXuxue Feng QUALIFIED
Darci PoquetteGermanyOnyama Limba NEGOTIATION
Salvatore StockhamArgentinaOnyama Limba RENEWAL
Johnson SergiItalyStephen Shaw PROPOSAL
Jones VocelkaFranceIvan Magalhaes NEGOTIATION
Jeanfrancois VenereBrazilAmy Elsner NEW
Arvin AlbaresSpainAsiya Javayant NEW
Wickens NestleBrazilXuxue Feng PROPOSAL
Johnson SergiGermanyIoni Bowcher RENEWAL
Claire TollnerArgentinaBernardo Dominic NEGOTIATION
Juan WieserCanadaOnyama Limba NEW
Morrow RutaGermanyStephen Shaw NEGOTIATION
Salvatore StockhamSpainAmy Elsner QUALIFIED
Tony FollerArgentinaOnyama Limba NEW
Tony FollerUnited KingdomAnna Fali NEGOTIATION
Maisha RulapaughAustraliaStephen Shaw PROPOSAL
Maria MarrierIndiaOnyama Limba NEW
Jeanfrancois VenereAustraliaBernardo Dominic QUALIFIED
Jeanfrancois VenereGermanyAnna Fali PROPOSAL
Maria MarrierJapanBernardo Dominic RENEWAL
Mujtaba NickaSpainOnyama Limba QUALIFIED
Mayumi KolmetzJapanIvan Magalhaes NEGOTIATION
Arvin AlbaresIndiaElwin Sharvill UNQUALIFIED
Faith GillianBrazilElwin Sharvill NEGOTIATION
Greenwood BologniaRussiaStephen Shaw PROPOSAL
Rodrigues CampainUnited KingdomXuxue Feng NEW
Wickens NestleRussiaAnna Fali QUALIFIED
Murillo MaletIndiaAsiya Javayant NEGOTIATION
Izzy GarufiJapanIoni Bowcher UNQUALIFIED
Claire TollnerFranceAsiya Javayant PROPOSAL
Jeanfrancois VenereJapanAsiya Javayant QUALIFIED
Octavia MaletCanadaAsiya Javayant UNQUALIFIED
Silvio SlusarskiFranceXuxue Feng QUALIFIED
Clifford RimFranceIvan Magalhaes QUALIFIED
Sinclair WaycottFranceElwin Sharvill PROPOSAL

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