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
Clifford RimItalyAnna Fali UNQUALIFIED
Morrow RutaIndiaAmy Elsner RENEWAL
Francesco ShinkoUnited KingdomXuxue Feng NEW
Mayumi KolmetzRussiaAnna Fali QUALIFIED
Costa DilliardGermanyAnna Fali RENEWAL
Salvatore StockhamArgentinaOnyama Limba PROPOSAL
Jennifer AmigonCanadaAnna Fali RENEWAL
Johnson SergiRussiaOnyama Limba UNQUALIFIED
Antonio CaudyUnited KingdomBernardo Dominic NEW
Nicolas IturbideFranceOnyama Limba PROPOSAL
Mayumi KolmetzGermanyBernardo Dominic NEW
Murillo MaletJapanXuxue Feng NEGOTIATION
Ashley DoeSpainBernardo Dominic NEW
Jennifer AmigonGermanyOnyama Limba QUALIFIED
Wickens NestleRussiaAsiya Javayant QUALIFIED
David DarakjyUnited KingdomXuxue Feng NEGOTIATION
Tony FollerRussiaBernardo Dominic RENEWAL
Mujtaba NickaJapanElwin Sharvill PROPOSAL
David DarakjyGermanyAmy Elsner NEW
Clifford RimRussiaAmy Elsner PROPOSAL
Jefferson SchemmerArgentinaXuxue Feng QUALIFIED
Munro FerenczArgentinaElwin Sharvill PROPOSAL
David DarakjyFranceIvan Magalhaes NEGOTIATION
Julie StensethUnited KingdomAnna Fali PROPOSAL
Clifford RimItalyBernardo Dominic RENEWAL
Kaitlin OstroskyBrazilStephen Shaw NEW
Johnson SergiCanadaIoni Bowcher QUALIFIED
Sinclair WaycottJapanIvan Magalhaes QUALIFIED
Jones VocelkaSpainIoni Bowcher UNQUALIFIED
Ashley DoeArgentinaOnyama Limba NEW
Deepesh ChuiRussiaXuxue Feng UNQUALIFIED
Chavez BriddickItalyBernardo Dominic UNQUALIFIED
Ricardo GauchoGermanyAsiya Javayant QUALIFIED
Maisha RulapaughBrazilIvan Magalhaes NEGOTIATION
Kadeem FlosiArgentinaAsiya Javayant PROPOSAL
Deepesh ChuiJapanStephen Shaw UNQUALIFIED
Mayumi KolmetzRussiaIvan Magalhaes PROPOSAL
Emily WhobreyBrazilAmy Elsner PROPOSAL
Aika InouyeSpainAsiya Javayant QUALIFIED
Aika InouyeAustraliaOnyama Limba PROPOSAL
Juan WieserJapanIvan Magalhaes QUALIFIED
Arvin AlbaresUnited KingdomAnna Fali UNQUALIFIED
Francesco ShinkoCanadaAmy Elsner PROPOSAL
Alejandro PerinJapanAmy Elsner NEW
Munro FerenczSpainIoni Bowcher NEGOTIATION
Leon OldroydAustraliaBernardo Dominic UNQUALIFIED
Darci PoquetteSpainAnna Fali PROPOSAL
Ashley DoeUnited KingdomIvan Magalhaes QUALIFIED
Cody SaylorsCanadaOnyama Limba NEGOTIATION
Maisha RulapaughRussiaAnna Fali PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Julie StensethIndiaIvan Magalhaes QUALIFIED
Costa DilliardAustraliaXuxue Feng NEGOTIATION
Mayumi KolmetzIndiaXuxue Feng NEGOTIATION
Costa DilliardGermanyIvan Magalhaes QUALIFIED
Misaki RoysterSpainAnna Fali RENEWAL
Stacey MacleadItalyXuxue Feng QUALIFIED
Arvin AlbaresCanadaIoni Bowcher UNQUALIFIED
Smith GlickRussiaIoni Bowcher PROPOSAL
Antonio CaudyBrazilElwin Sharvill PROPOSAL
Chavez BriddickAustraliaAmy Elsner UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Arvin AlbaresCanada2025-07-31Printing Dimensions QUALIFIED46Elwin Sharvill
1001Juan WieserSpain2025-08-08Rangoni Of Florence NEGOTIATION72Ioni Bowcher
1002Munro FerenczBrazil2025-07-24Commercial Press QUALIFIED52Amy Elsner
1003Deepesh ChuiFrance2025-07-12Benton, John B Jr NEW29Ioni Bowcher
1004Stacey MacleadIndia2025-08-02Rousseaux, Michael Esq NEGOTIATION73Anna Fali
1005Munro FerenczRussia2025-08-01Benton, John B Jr UNQUALIFIED15Amy Elsner
1006James ButtCanada2025-07-18Rangoni Of Florence PROPOSAL25Xuxue Feng
1007Izzy GarufiArgentina2025-07-18Rousseaux, Michael Esq QUALIFIED56Asiya Javayant
1008Jones VocelkaUnited Kingdom2025-08-01Chemel, James L Cpa NEW30Onyama Limba
1009Julie StensethBrazil2025-07-27Rousseaux, Michael Esq NEGOTIATION54Anna Fali
1010Munro FerenczFrance2025-08-04Chanay, Jeffrey A Esq NEGOTIATION12Elwin Sharvill
1011Alejandro PerinItaly2025-07-15Rangoni Of Florence RENEWAL79Elwin Sharvill
1012Kaitlin OstroskyRussia2025-08-02Benton, John B Jr UNQUALIFIED59Ioni Bowcher
1013Octavia MaletCanada2025-07-10Rangoni Of Florence NEW67Elwin Sharvill
1014Salvatore StockhamBrazil2025-07-28Morlong Associates UNQUALIFIED92Ivan Magalhaes
1015Nicolas IturbideGermany2025-08-04Buckley Miller Wright NEW85Amy Elsner
1016Nicolas IturbideJapan2025-07-24Feltz Printing Service NEW2Asiya Javayant
1017Faith GillianFrance2025-08-07Chanay, Jeffrey A Esq PROPOSAL92Anna Fali
1018Aruna FigeroaJapan2025-07-28Printing Dimensions UNQUALIFIED87Xuxue Feng
1019David DarakjyUnited Kingdom2025-07-13Chapman, Ross E Esq QUALIFIED21Asiya Javayant
1020Isabel BowleyIndia2025-08-08Printing Dimensions UNQUALIFIED52Asiya Javayant
1021Sinclair WaycottArgentina2025-08-07King, Christopher A Esq QUALIFIED93Stephen Shaw
1022Octavia MaletIndia2025-07-17Feltz Printing Service NEGOTIATION21Bernardo Dominic
1023Aruna FigeroaGermany2025-07-21Rousseaux, Michael Esq NEGOTIATION40Ivan Magalhaes
1024Kadeem FlosiUnited Kingdom2025-08-02Dorl, James J Esq UNQUALIFIED7Xuxue Feng
1025Johnson SergiFrance2025-07-26Dorl, James J Esq NEW18Ivan Magalhaes
1026Juan WieserJapan2025-07-19Rangoni Of Florence PROPOSAL70Elwin Sharvill
1027Salvatore StockhamItaly2025-08-08Rousseaux, Michael Esq NEGOTIATION71Bernardo Dominic
1028Aditya KuskoArgentina2025-07-12Buckley Miller Wright PROPOSAL94Amy Elsner
1029Smith GlickArgentina2025-08-08Rangoni Of Florence PROPOSAL26Ioni Bowcher
1030Salvatore StockhamArgentina2025-07-20Chapman, Ross E Esq UNQUALIFIED50Onyama Limba
1031Leon OldroydRussia2025-07-10Printing Dimensions PROPOSAL70Amy Elsner
1032Darci PoquetteGermany2025-07-28Commercial Press NEGOTIATION71Onyama Limba
1033Stacey MacleadArgentina2025-07-31King, Christopher A Esq QUALIFIED60Asiya Javayant
1034Kaitlin OstroskyBrazil2025-07-11Dorl, James J Esq NEW38Asiya Javayant
1035Deepesh ChuiIndia2025-07-11Benton, John B Jr RENEWAL48Ivan Magalhaes
1036Deepesh ChuiUnited Kingdom2025-07-11Rangoni Of Florence NEGOTIATION77Anna Fali
1037Nicolas IturbideFrance2025-07-11Benton, John B Jr NEW76Bernardo Dominic
1038James ButtItaly2025-07-25Chapman, Ross E Esq QUALIFIED87Ioni Bowcher
1039Rodrigues CampainCanada2025-08-05Truhlar And Truhlar Attys NEW17Ivan Magalhaes
1040Isabel BowleyBrazil2025-07-20Buckley Miller Wright UNQUALIFIED82Xuxue Feng
1041Smith GlickFrance2025-07-16Chapman, Ross E Esq QUALIFIED62Ioni Bowcher
1042Clifford RimFrance2025-08-08Buckley Miller Wright NEW19Amy Elsner
1043Munro FerenczFrance2025-08-08Rousseaux, Michael Esq QUALIFIED77Ivan Magalhaes
1044Greenwood BologniaItaly2025-07-14Buckley Miller Wright PROPOSAL87Xuxue Feng
1045Arvin AlbaresBrazil2025-07-22Truhlar And Truhlar Attys QUALIFIED87Ivan Magalhaes
1046Salvatore StockhamFrance2025-07-11Benton, John B Jr RENEWAL21Xuxue Feng
1047Smith GlickArgentina2025-07-22Feltz Printing Service PROPOSAL20Onyama Limba
1048Murillo MaletArgentina2025-07-30Buckley Miller Wright UNQUALIFIED53Bernardo Dominic
1049Ricardo GauchoArgentina2025-07-22Morlong Associates PROPOSAL37Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Smith GlickGermanyStephen Shaw PROPOSAL
Juan WieserItalyElwin Sharvill PROPOSAL
Adams MorascaItalyAmy Elsner UNQUALIFIED
Faith GillianAustraliaAnna Fali QUALIFIED
Aditya KuskoAustraliaAsiya Javayant PROPOSAL
Izzy GarufiUnited KingdomAmy Elsner PROPOSAL
David DarakjyAustraliaIoni Bowcher UNQUALIFIED
Julie StensethRussiaXuxue Feng NEGOTIATION
Salvatore StockhamFranceIvan Magalhaes UNQUALIFIED
Julie StensethBrazilAmy Elsner NEW
Murillo MaletJapanAsiya Javayant UNQUALIFIED
Aditya KuskoUnited KingdomBernardo Dominic NEW
Adams MorascaJapanStephen Shaw NEW
Kadeem FlosiCanadaAnna Fali NEGOTIATION
Jennifer AmigonArgentinaXuxue Feng UNQUALIFIED
Julie StensethIndiaAmy Elsner PROPOSAL
Emily WhobreyUnited KingdomAsiya Javayant NEW
Faith GillianFranceAnna Fali NEW
Maria MarrierItalyOnyama Limba PROPOSAL
Darci PoquetteJapanStephen Shaw RENEWAL
Mujtaba NickaGermanyOnyama Limba NEGOTIATION
Aditya KuskoSpainStephen Shaw PROPOSAL
Jefferson SchemmerRussiaIvan Magalhaes RENEWAL
Francesco ShinkoCanadaAnna Fali RENEWAL
Juan WieserArgentinaBernardo Dominic PROPOSAL
Johnson SergiArgentinaIoni Bowcher UNQUALIFIED
Munro FerenczJapanElwin Sharvill QUALIFIED
Aditya KuskoCanadaAnna Fali RENEWAL
Misaki RoysterBrazilAsiya Javayant QUALIFIED
Stacey MacleadSpainIoni Bowcher NEW
Leja CaldareraFranceAmy Elsner UNQUALIFIED
Juan WieserUnited KingdomXuxue Feng UNQUALIFIED
Aika InouyeCanadaXuxue Feng NEGOTIATION
Deepesh ChuiSpainAsiya Javayant RENEWAL
Tony FollerItalyAnna Fali QUALIFIED
Silvio SlusarskiIndiaAnna Fali RENEWAL
Sinclair WaycottSpainXuxue Feng NEW
Rodrigues CampainIndiaAmy Elsner QUALIFIED
Aditya KuskoRussiaAmy Elsner QUALIFIED
Aika InouyeBrazilAnna Fali NEW
Nicolas IturbideUnited KingdomStephen Shaw NEGOTIATION
Deepesh ChuiAustraliaStephen Shaw NEW
Kaitlin OstroskySpainIvan Magalhaes NEW
Julie StensethCanadaAnna Fali UNQUALIFIED
Ivar PaprockiBrazilBernardo Dominic NEGOTIATION
Cody SaylorsRussiaAmy Elsner QUALIFIED
Mujtaba NickaSpainIoni Bowcher NEGOTIATION
Kadeem FlosiGermanyBernardo Dominic RENEWAL
Deepesh ChuiItalyIvan Magalhaes UNQUALIFIED
Julie StensethFranceIoni Bowcher NEW
Frozen Columns
Name
Morrow Ruta
Kadeem Flosi
Emily Whobrey
Aruna Figeroa
Greenwood Bolognia
Leon Oldroyd
Morrow Ruta
Faith Gillian
Stacey Maclead
Murillo Malet
Wickens Nestle
Costa Dilliard
James Butt
Aika Inouye
Cody Saylors
Greenwood Bolognia
Darci Poquette
Cody Saylors
Rodrigues Campain
Jeanfrancois Venere
Darci Poquette
Smith Glick
Jefferson Schemmer
Adams Morasca
Francesco Shinko
Juan Wieser
Isabel Bowley
Claire Tollner
Faith Gillian
Alejandro Perin
Costa Dilliard
Adams Morasca
Ricardo Gaucho
Chavez Briddick
Octavia Malet
Stacey Maclead
Mujtaba Nicka
Wickens Nestle
Juan Wieser
Wickens Nestle
Leja Caldarera
Misaki Royster
Jennifer Amigon
Salvatore Stockham
Jennifer Amigon
Johnson Sergi
Aika Inouye
Murillo Malet
Juan Wieser
Mayumi Kolmetz
IdCountryDate
1000India2025-08-01
1001Japan2025-07-20
1002Argentina2025-08-05
1003France2025-07-24
1004Germany2025-07-28
1005India2025-07-14
1006Australia2025-07-25
1007Russia2025-07-29
1008Spain2025-07-28
1009Canada2025-07-17
1010Argentina2025-07-18
1011Spain2025-07-20
1012United Kingdom2025-07-11
1013Italy2025-07-20
1014Australia2025-08-01
1015Italy2025-08-02
1016India2025-08-05
1017United Kingdom2025-08-04
1018Japan2025-08-03
1019Japan2025-08-06
1020Argentina2025-07-23
1021United Kingdom2025-07-22
1022India2025-07-25
1023Japan2025-07-27
1024Japan2025-08-05
1025Italy2025-07-27
1026India2025-07-13
1027Australia2025-07-30
1028Brazil2025-08-02
1029France2025-08-07
1030Canada2025-07-31
1031India2025-07-26
1032Russia2025-08-06
1033United Kingdom2025-07-16
1034Russia2025-08-03
1035Russia2025-08-03
1036Brazil2025-07-17
1037Argentina2025-07-29
1038Australia2025-07-12
1039France2025-07-10
1040Russia2025-07-11
1041Germany2025-07-29
1042Spain2025-08-02
1043Spain2025-07-13
1044India2025-07-24
1045Argentina2025-07-30
1046Spain2025-07-14
1047United Kingdom2025-07-15
1048Brazil2025-08-03
1049India2025-07-14

On-Demand Data

NameIdCountryDate
Nicolas Iturbide1000Argentina2025-08-06
Octavia Malet1001Spain2025-07-27
Kaitlin Ostrosky1002Italy2025-07-12
David Darakjy1003United Kingdom2025-07-18
Stacey Maclead1004India2025-07-20
Deepesh Chui1005Brazil2025-07-22
Aruna Figeroa1006United Kingdom2025-07-19
Salvatore Stockham1007Argentina2025-07-19
Greenwood Bolognia1008France2025-07-31
Rodrigues Campain1009Argentina2025-07-25
Jennifer Amigon1010Russia2025-07-25
Adams Morasca1011India2025-07-19
Mujtaba Nicka1012Spain2025-07-20
Aditya Kusko1013United Kingdom2025-08-08
Johnson Sergi1014France2025-07-22
Morrow Ruta1015Italy2025-08-07
David Darakjy1016Spain2025-08-01
Francesco Shinko1017Italy2025-08-04
David Darakjy1018France2025-08-06
Deepesh Chui1019Canada2025-07-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jones VocelkaGermanyXuxue Feng NEGOTIATION
Claire TollnerUnited KingdomBernardo Dominic RENEWAL
Arvin AlbaresGermanyAsiya Javayant RENEWAL
Aditya KuskoIndiaAnna Fali NEGOTIATION
Antonio CaudyArgentinaAnna Fali NEGOTIATION
Aditya KuskoRussiaIvan Magalhaes RENEWAL
Tony FollerSpainAsiya Javayant NEGOTIATION
Johnson SergiIndiaAsiya Javayant NEW
Francesco ShinkoJapanAnna Fali UNQUALIFIED
Kaitlin OstroskyItalyElwin Sharvill RENEWAL
Jennifer AmigonBrazilAmy Elsner NEGOTIATION
Clifford RimIndiaStephen Shaw PROPOSAL
Murillo MaletJapanElwin Sharvill QUALIFIED
Jennifer AmigonFranceAsiya Javayant PROPOSAL
Cody SaylorsArgentinaElwin Sharvill QUALIFIED
Arvin AlbaresRussiaXuxue Feng PROPOSAL
Isabel BowleyBrazilOnyama Limba NEGOTIATION
Jones VocelkaSpainStephen Shaw UNQUALIFIED
Jeanfrancois VenereItalyStephen Shaw PROPOSAL
Juan WieserIndiaBernardo Dominic QUALIFIED
Stacey MacleadItalyBernardo Dominic NEW
Arvin AlbaresFranceBernardo Dominic NEW
Morrow RutaRussiaXuxue Feng PROPOSAL
Stacey MacleadAustraliaAsiya Javayant PROPOSAL
Julie StensethUnited KingdomXuxue Feng RENEWAL
Aika InouyeGermanyStephen Shaw NEGOTIATION
Sinclair WaycottBrazilAmy Elsner QUALIFIED
Clifford RimArgentinaIoni Bowcher NEW
Claire TollnerArgentinaAmy Elsner QUALIFIED
Ashley DoeJapanXuxue Feng RENEWAL
Mujtaba NickaUnited KingdomAsiya Javayant UNQUALIFIED
Adams MorascaFranceBernardo Dominic PROPOSAL
Mujtaba NickaArgentinaAsiya Javayant NEGOTIATION
Aika InouyeUnited KingdomStephen Shaw UNQUALIFIED
Morrow RutaItalyAsiya Javayant RENEWAL
Ashley DoeFranceAmy Elsner NEGOTIATION
Aruna FigeroaSpainIvan Magalhaes QUALIFIED
Nicolas IturbideArgentinaAsiya Javayant NEGOTIATION
Sinclair WaycottAustraliaElwin Sharvill UNQUALIFIED
Octavia MaletRussiaAnna Fali 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>