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
Ashley DoeUnited KingdomBernardo Dominic NEGOTIATION
Aruna FigeroaRussiaAnna Fali NEW
Ashley DoeBrazilXuxue Feng QUALIFIED
Deepesh ChuiItalyIoni Bowcher NEGOTIATION
Arvin AlbaresAustraliaXuxue Feng PROPOSAL
Cody SaylorsItalyIvan Magalhaes RENEWAL
Deepesh ChuiFranceIvan Magalhaes NEW
Aruna FigeroaBrazilIvan Magalhaes NEW
James ButtGermanyElwin Sharvill NEGOTIATION
Wickens NestleFranceAnna Fali NEGOTIATION
Faith GillianBrazilIoni Bowcher NEW
Aruna FigeroaBrazilOnyama Limba QUALIFIED
Francesco ShinkoArgentinaAmy Elsner PROPOSAL
Deepesh ChuiFranceStephen Shaw PROPOSAL
Clifford RimGermanyBernardo Dominic NEGOTIATION
Aika InouyeBrazilBernardo Dominic RENEWAL
Mayumi KolmetzJapanIvan Magalhaes NEW
Munro FerenczSpainElwin Sharvill NEW
Stacey MacleadCanadaAsiya Javayant RENEWAL
Adams MorascaIndiaXuxue Feng PROPOSAL
Kaitlin OstroskyIndiaAsiya Javayant NEGOTIATION
Izzy GarufiUnited KingdomAsiya Javayant UNQUALIFIED
Clifford RimArgentinaXuxue Feng NEW
Faith GillianSpainIvan Magalhaes RENEWAL
James ButtFranceIvan Magalhaes PROPOSAL
Aditya KuskoCanadaElwin Sharvill RENEWAL
Leon OldroydBrazilStephen Shaw QUALIFIED
Alejandro PerinJapanOnyama Limba NEW
Leja CaldareraGermanyIoni Bowcher QUALIFIED
Murillo MaletJapanAsiya Javayant UNQUALIFIED
Arvin AlbaresBrazilXuxue Feng PROPOSAL
Morrow RutaUnited KingdomAsiya Javayant QUALIFIED
Leon OldroydAustraliaIvan Magalhaes UNQUALIFIED
Faith GillianJapanOnyama Limba QUALIFIED
Ricardo GauchoCanadaIoni Bowcher NEGOTIATION
Julie StensethBrazilAnna Fali NEW
Jefferson SchemmerJapanBernardo Dominic RENEWAL
Morrow RutaJapanAmy Elsner UNQUALIFIED
Chavez BriddickItalyBernardo Dominic QUALIFIED
Aruna FigeroaJapanElwin Sharvill UNQUALIFIED
Jeanfrancois VenereItalyAnna Fali UNQUALIFIED
Aditya KuskoAustraliaIoni Bowcher RENEWAL
Aditya KuskoJapanOnyama Limba NEGOTIATION
Deepesh ChuiAustraliaAmy Elsner QUALIFIED
Aruna FigeroaRussiaAnna Fali NEGOTIATION
Julie StensethJapanElwin Sharvill NEW
Tony FollerIndiaXuxue Feng RENEWAL
Maria MarrierSpainStephen Shaw RENEWAL
Morrow RutaJapanAnna Fali NEGOTIATION
Izzy GarufiCanadaElwin Sharvill QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Aika InouyeJapanAsiya Javayant UNQUALIFIED
Aika InouyeGermanyElwin Sharvill UNQUALIFIED
Faith GillianIndiaIoni Bowcher RENEWAL
Cody SaylorsGermanyOnyama Limba NEGOTIATION
Wickens NestleSpainOnyama Limba NEW
Leon OldroydBrazilAsiya Javayant UNQUALIFIED
Kaitlin OstroskyJapanIvan Magalhaes QUALIFIED
Salvatore StockhamIndiaElwin Sharvill RENEWAL
Ricardo GauchoJapanOnyama Limba NEGOTIATION
Julie StensethSpainElwin Sharvill QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Cody SaylorsGermany2025-08-07Chemel, James L Cpa RENEWAL18Asiya Javayant
1001Clifford RimAustralia2025-08-04Benton, John B Jr PROPOSAL31Amy Elsner
1002Alejandro PerinAustralia2025-07-21Morlong Associates RENEWAL96Amy Elsner
1003Johnson SergiItaly2025-07-24Chemel, James L Cpa UNQUALIFIED31Ivan Magalhaes
1004Ivar PaprockiIndia2025-07-20Printing Dimensions UNQUALIFIED62Elwin Sharvill
1005Salvatore StockhamFrance2025-07-24Dorl, James J Esq NEGOTIATION39Anna Fali
1006Jefferson SchemmerItaly2025-07-20Dorl, James J Esq RENEWAL98Elwin Sharvill
1007Kadeem FlosiFrance2025-08-09Feltz Printing Service UNQUALIFIED14Stephen Shaw
1008Adams MorascaFrance2025-07-16Chapman, Ross E Esq UNQUALIFIED25Elwin Sharvill
1009Jones VocelkaIndia2025-08-02Printing Dimensions UNQUALIFIED81Asiya Javayant
1010Aditya KuskoArgentina2025-07-29Printing Dimensions NEGOTIATION12Xuxue Feng
1011Mujtaba NickaSpain2025-07-19Printing Dimensions NEGOTIATION54Ivan Magalhaes
1012Julie StensethSpain2025-07-21Feiner Bros NEGOTIATION75Ivan Magalhaes
1013Jefferson SchemmerArgentina2025-07-28Dorl, James J Esq NEGOTIATION91Bernardo Dominic
1014Mujtaba NickaArgentina2025-08-01King, Christopher A Esq QUALIFIED36Asiya Javayant
1015Adams MorascaRussia2025-07-24Chanay, Jeffrey A Esq NEW48Onyama Limba
1016Faith GillianFrance2025-07-23Rousseaux, Michael Esq NEGOTIATION81Onyama Limba
1017Emily WhobreyJapan2025-07-23Truhlar And Truhlar Attys RENEWAL45Bernardo Dominic
1018Arvin AlbaresRussia2025-07-20Chemel, James L Cpa NEW4Amy Elsner
1019Deepesh ChuiCanada2025-07-21Chemel, James L Cpa NEW35Bernardo Dominic
1020Francesco ShinkoGermany2025-07-27Rousseaux, Michael Esq QUALIFIED88Amy Elsner
1021Nicolas IturbideItaly2025-07-18Morlong Associates UNQUALIFIED78Amy Elsner
1022Smith GlickArgentina2025-07-12Benton, John B Jr UNQUALIFIED27Stephen Shaw
1023Salvatore StockhamGermany2025-07-15Chanay, Jeffrey A Esq UNQUALIFIED31Ioni Bowcher
1024Francesco ShinkoArgentina2025-08-06Chemel, James L Cpa PROPOSAL5Xuxue Feng
1025Deepesh ChuiCanada2025-07-13Chanay, Jeffrey A Esq QUALIFIED0Ioni Bowcher
1026Stacey MacleadCanada2025-07-18Printing Dimensions RENEWAL79Stephen Shaw
1027Kadeem FlosiGermany2025-07-14Feltz Printing Service NEGOTIATION43Anna Fali
1028Johnson SergiRussia2025-08-09Feiner Bros NEGOTIATION68Asiya Javayant
1029Aruna FigeroaAustralia2025-07-23Buckley Miller Wright RENEWAL62Amy Elsner
1030Adams MorascaCanada2025-07-13Rangoni Of Florence QUALIFIED97Anna Fali
1031Juan WieserItaly2025-07-30Chapman, Ross E Esq PROPOSAL98Onyama Limba
1032Cody SaylorsFrance2025-07-26Chanay, Jeffrey A Esq RENEWAL90Bernardo Dominic
1033David DarakjyBrazil2025-08-01Chanay, Jeffrey A Esq NEGOTIATION27Ivan Magalhaes
1034Maisha RulapaughUnited Kingdom2025-08-09Benton, John B Jr NEGOTIATION93Stephen Shaw
1035Salvatore StockhamBrazil2025-08-01Buckley Miller Wright UNQUALIFIED75Anna Fali
1036Morrow RutaAustralia2025-08-06Printing Dimensions RENEWAL39Ivan Magalhaes
1037James ButtBrazil2025-07-14Buckley Miller Wright NEGOTIATION6Bernardo Dominic
1038Murillo MaletBrazil2025-07-18Rousseaux, Michael Esq PROPOSAL90Ivan Magalhaes
1039Chavez BriddickSpain2025-07-26Rangoni Of Florence UNQUALIFIED85Ivan Magalhaes
1040Maisha RulapaughAustralia2025-08-04Printing Dimensions RENEWAL40Ioni Bowcher
1041Clifford RimItaly2025-08-08King, Christopher A Esq QUALIFIED88Stephen Shaw
1042Jennifer AmigonUnited Kingdom2025-07-26Feiner Bros QUALIFIED2Elwin Sharvill
1043Johnson SergiIndia2025-07-21Morlong Associates UNQUALIFIED20Stephen Shaw
1044Silvio SlusarskiUnited Kingdom2025-08-03Benton, John B Jr RENEWAL84Ioni Bowcher
1045Ricardo GauchoAustralia2025-08-02Printing Dimensions RENEWAL76Stephen Shaw
1046Misaki RoysterJapan2025-07-17Dorl, James J Esq PROPOSAL13Stephen Shaw
1047Jefferson SchemmerArgentina2025-07-11Rousseaux, Michael Esq UNQUALIFIED83Ioni Bowcher
1048Claire TollnerFrance2025-07-25Chanay, Jeffrey A Esq RENEWAL69Onyama Limba
1049Cody SaylorsCanada2025-07-15Commercial Press RENEWAL63Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Salvatore StockhamUnited KingdomStephen Shaw RENEWAL
Darci PoquetteArgentinaElwin Sharvill NEW
David DarakjyGermanyIvan Magalhaes NEGOTIATION
Nicolas IturbideIndiaStephen Shaw UNQUALIFIED
Salvatore StockhamGermanyOnyama Limba NEGOTIATION
Kadeem FlosiArgentinaXuxue Feng RENEWAL
Clifford RimSpainIvan Magalhaes QUALIFIED
Kaitlin OstroskyIndiaStephen Shaw RENEWAL
Cody SaylorsUnited KingdomIvan Magalhaes NEW
Misaki RoysterGermanyAnna Fali UNQUALIFIED
Greenwood BologniaIndiaAmy Elsner QUALIFIED
Ivar PaprockiJapanIvan Magalhaes QUALIFIED
Jeanfrancois VenereCanadaAmy Elsner NEGOTIATION
Deepesh ChuiArgentinaOnyama Limba NEGOTIATION
Rodrigues CampainIndiaAsiya Javayant RENEWAL
Greenwood BologniaFranceIvan Magalhaes RENEWAL
Julie StensethGermanyXuxue Feng NEW
Maisha RulapaughSpainXuxue Feng PROPOSAL
Julie StensethJapanAsiya Javayant RENEWAL
Adams MorascaSpainIoni Bowcher NEW
Octavia MaletBrazilOnyama Limba UNQUALIFIED
Jennifer AmigonGermanyBernardo Dominic PROPOSAL
Jefferson SchemmerBrazilStephen Shaw NEW
Nicolas IturbideFranceElwin Sharvill NEW
Arvin AlbaresArgentinaIvan Magalhaes NEW
Ricardo GauchoRussiaAsiya Javayant QUALIFIED
Maria MarrierIndiaBernardo Dominic NEGOTIATION
Mayumi KolmetzGermanyBernardo Dominic NEW
Munro FerenczRussiaAmy Elsner NEW
Munro FerenczBrazilAsiya Javayant PROPOSAL
Aika InouyeItalyXuxue Feng QUALIFIED
Francesco ShinkoItalyOnyama Limba RENEWAL
Leja CaldareraAustraliaAnna Fali PROPOSAL
Clifford RimGermanyAsiya Javayant RENEWAL
Greenwood BologniaSpainBernardo Dominic NEW
Misaki RoysterRussiaStephen Shaw UNQUALIFIED
Alejandro PerinFranceAnna Fali UNQUALIFIED
Rodrigues CampainRussiaAsiya Javayant PROPOSAL
Deepesh ChuiJapanBernardo Dominic PROPOSAL
Deepesh ChuiJapanBernardo Dominic RENEWAL
Francesco ShinkoSpainIvan Magalhaes RENEWAL
Morrow RutaSpainBernardo Dominic NEW
Stacey MacleadItalyBernardo Dominic NEW
Jones VocelkaGermanyIvan Magalhaes PROPOSAL
Greenwood BologniaJapanStephen Shaw QUALIFIED
Misaki RoysterFranceIvan Magalhaes RENEWAL
Julie StensethSpainIvan Magalhaes QUALIFIED
Maisha RulapaughAustraliaBernardo Dominic PROPOSAL
Mayumi KolmetzCanadaBernardo Dominic NEGOTIATION
Antonio CaudyItalyOnyama Limba RENEWAL
Frozen Columns
Name
Sinclair Waycott
Leja Caldarera
Adams Morasca
Mujtaba Nicka
Mayumi Kolmetz
Cody Saylors
Jones Vocelka
Emily Whobrey
Antonio Caudy
Aika Inouye
Aditya Kusko
Leon Oldroyd
Jones Vocelka
Faith Gillian
Salvatore Stockham
Kaitlin Ostrosky
Cody Saylors
Alejandro Perin
Kaitlin Ostrosky
Smith Glick
Antonio Caudy
Julie Stenseth
Claire Tollner
Ashley Doe
Costa Dilliard
Chavez Briddick
Julie Stenseth
Johnson Sergi
Silvio Slusarski
Maisha Rulapaugh
Ricardo Gaucho
Jeanfrancois Venere
Juan Wieser
Chavez Briddick
Deepesh Chui
Costa Dilliard
Claire Tollner
Johnson Sergi
Wickens Nestle
Juan Wieser
Mujtaba Nicka
Smith Glick
Leon Oldroyd
Deepesh Chui
Kaitlin Ostrosky
Jones Vocelka
Leja Caldarera
Jones Vocelka
Chavez Briddick
Leon Oldroyd
IdCountryDate
1000Spain2025-07-27
1001Germany2025-07-13
1002India2025-07-15
1003Germany2025-07-24
1004Russia2025-08-02
1005United Kingdom2025-07-31
1006Germany2025-08-09
1007Italy2025-07-30
1008Spain2025-08-04
1009Russia2025-07-13
1010Spain2025-08-02
1011Germany2025-07-26
1012Argentina2025-07-15
1013Argentina2025-08-04
1014Brazil2025-07-29
1015Japan2025-07-23
1016Italy2025-07-28
1017Italy2025-07-30
1018Argentina2025-07-18
1019Germany2025-08-07
1020France2025-07-28
1021Italy2025-07-31
1022India2025-07-17
1023Spain2025-08-03
1024Italy2025-07-24
1025Brazil2025-07-16
1026Australia2025-07-15
1027Brazil2025-07-27
1028United Kingdom2025-07-15
1029Italy2025-07-30
1030Argentina2025-08-06
1031Japan2025-08-01
1032Spain2025-08-02
1033Australia2025-08-08
1034Brazil2025-07-30
1035Japan2025-08-03
1036Australia2025-08-02
1037Germany2025-08-01
1038India2025-08-04
1039Australia2025-08-09
1040United Kingdom2025-07-11
1041Brazil2025-07-21
1042Australia2025-07-20
1043Canada2025-08-04
1044United Kingdom2025-08-02
1045Spain2025-07-19
1046Australia2025-07-27
1047Brazil2025-07-15
1048France2025-08-06
1049Canada2025-07-30

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000Italy2025-07-29
David Darakjy1001Argentina2025-08-08
Maria Marrier1002India2025-08-06
Jones Vocelka1003France2025-07-30
Stacey Maclead1004Japan2025-08-09
Antonio Caudy1005France2025-07-24
Julie Stenseth1006Italy2025-07-16
Isabel Bowley1007Italy2025-07-16
Jennifer Amigon1008Italy2025-07-27
Mayumi Kolmetz1009India2025-07-21
Jefferson Schemmer1010Canada2025-07-25
Darci Poquette1011Japan2025-07-21
Emily Whobrey1012Spain2025-07-27
Costa Dilliard1013Italy2025-07-12
Rodrigues Campain1014Japan2025-07-22
Darci Poquette1015Russia2025-08-06
Stacey Maclead1016Canada2025-08-09
Isabel Bowley1017Italy2025-08-06
Izzy Garufi1018Canada2025-07-24
Nicolas Iturbide1019Brazil2025-08-05
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Stacey MacleadSpainAmy Elsner QUALIFIED
Francesco ShinkoArgentinaXuxue Feng PROPOSAL
Costa DilliardItalyAnna Fali NEGOTIATION
Misaki RoysterCanadaBernardo Dominic PROPOSAL
Jefferson SchemmerJapanAsiya Javayant NEW
Leon OldroydAustraliaAsiya Javayant RENEWAL
Kadeem FlosiFranceAmy Elsner NEGOTIATION
Aruna FigeroaItalyAsiya Javayant PROPOSAL
Murillo MaletIndiaOnyama Limba NEW
Kadeem FlosiArgentinaIvan Magalhaes PROPOSAL
Kadeem FlosiAustraliaStephen Shaw QUALIFIED
Ashley DoeBrazilAsiya Javayant UNQUALIFIED
David DarakjyArgentinaAnna Fali NEGOTIATION
Adams MorascaRussiaStephen Shaw QUALIFIED
Juan WieserJapanOnyama Limba NEW
Tony FollerCanadaAsiya Javayant QUALIFIED
Darci PoquetteBrazilIoni Bowcher NEW
Rodrigues CampainSpainXuxue Feng UNQUALIFIED
Mayumi KolmetzCanadaStephen Shaw NEGOTIATION
Murillo MaletJapanAsiya Javayant NEGOTIATION
Isabel BowleyJapanBernardo Dominic RENEWAL
Nicolas IturbideCanadaIvan Magalhaes PROPOSAL
Salvatore StockhamBrazilAmy Elsner NEGOTIATION
Sinclair WaycottGermanyAmy Elsner NEGOTIATION
Juan WieserArgentinaAmy Elsner NEGOTIATION
Ashley DoeArgentinaElwin Sharvill PROPOSAL
Kaitlin OstroskyUnited KingdomStephen Shaw NEGOTIATION
Murillo MaletSpainOnyama Limba UNQUALIFIED
Deepesh ChuiBrazilBernardo Dominic PROPOSAL
Deepesh ChuiSpainXuxue Feng NEW
Rodrigues CampainBrazilIoni Bowcher QUALIFIED
Stacey MacleadArgentinaAnna Fali UNQUALIFIED
Mujtaba NickaJapanOnyama Limba PROPOSAL
Smith GlickAustraliaAmy Elsner RENEWAL
Mujtaba NickaUnited KingdomAnna Fali NEGOTIATION
Kaitlin OstroskyUnited KingdomAmy Elsner QUALIFIED
Leja CaldareraIndiaOnyama Limba PROPOSAL
Mayumi KolmetzIndiaIvan Magalhaes NEGOTIATION
Maria MarrierItalyElwin Sharvill UNQUALIFIED
James ButtSpainElwin Sharvill 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>