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
Mujtaba NickaSpainStephen Shaw NEW
Juan WieserArgentinaIvan Magalhaes NEW
Sinclair WaycottJapanXuxue Feng NEW
Aruna FigeroaFranceStephen Shaw NEW
Nicolas IturbideFranceIoni Bowcher UNQUALIFIED
Cody SaylorsGermanyIvan Magalhaes PROPOSAL
Wickens NestleJapanAmy Elsner RENEWAL
Julie StensethAustraliaXuxue Feng NEGOTIATION
Arvin AlbaresJapanIoni Bowcher UNQUALIFIED
Mayumi KolmetzArgentinaStephen Shaw NEGOTIATION
Costa DilliardUnited KingdomAnna Fali PROPOSAL
Jefferson SchemmerFranceAnna Fali PROPOSAL
Jefferson SchemmerSpainOnyama Limba QUALIFIED
Jeanfrancois VenereJapanBernardo Dominic PROPOSAL
Jeanfrancois VenereIndiaAsiya Javayant QUALIFIED
James ButtAustraliaAsiya Javayant RENEWAL
Alejandro PerinFranceAsiya Javayant NEW
Adams MorascaBrazilBernardo Dominic PROPOSAL
Aika InouyeCanadaAsiya Javayant QUALIFIED
Sinclair WaycottIndiaOnyama Limba QUALIFIED
Jones VocelkaAustraliaAsiya Javayant PROPOSAL
Emily WhobreyRussiaStephen Shaw UNQUALIFIED
Julie StensethFranceIoni Bowcher QUALIFIED
Jefferson SchemmerAustraliaBernardo Dominic NEW
Maisha RulapaughRussiaElwin Sharvill PROPOSAL
Munro FerenczFranceAnna Fali QUALIFIED
Silvio SlusarskiSpainXuxue Feng NEW
Ashley DoeGermanyStephen Shaw RENEWAL
Stacey MacleadAustraliaIoni Bowcher QUALIFIED
David DarakjyUnited KingdomAsiya Javayant RENEWAL
Aruna FigeroaJapanIoni Bowcher PROPOSAL
Deepesh ChuiJapanIoni Bowcher QUALIFIED
Claire TollnerRussiaAnna Fali PROPOSAL
Sinclair WaycottJapanAsiya Javayant RENEWAL
David DarakjyCanadaXuxue Feng NEGOTIATION
Darci PoquetteJapanOnyama Limba QUALIFIED
Misaki RoysterSpainAnna Fali NEW
Kaitlin OstroskyItalyOnyama Limba RENEWAL
Jennifer AmigonIndiaIoni Bowcher UNQUALIFIED
Stacey MacleadIndiaAmy Elsner RENEWAL
Murillo MaletAustraliaAnna Fali RENEWAL
Emily WhobreyAustraliaAmy Elsner NEGOTIATION
Antonio CaudyIndiaBernardo Dominic PROPOSAL
Costa DilliardFranceElwin Sharvill QUALIFIED
James ButtBrazilIoni Bowcher NEGOTIATION
Antonio CaudySpainStephen Shaw QUALIFIED
Claire TollnerIndiaBernardo Dominic NEW
Izzy GarufiSpainXuxue Feng UNQUALIFIED
Stacey MacleadCanadaXuxue Feng NEGOTIATION
Cody SaylorsItalyStephen Shaw NEW
Horizontal
NameCountryRepresentativeStatus
Juan WieserJapanAmy Elsner UNQUALIFIED
Mujtaba NickaRussiaAmy Elsner NEGOTIATION
James ButtSpainIvan Magalhaes NEGOTIATION
Francesco ShinkoAustraliaAnna Fali NEW
Antonio CaudyIndiaAnna Fali PROPOSAL
Nicolas IturbideFranceOnyama Limba NEW
Francesco ShinkoBrazilXuxue Feng UNQUALIFIED
Alejandro PerinRussiaXuxue Feng NEGOTIATION
Morrow RutaFranceElwin Sharvill QUALIFIED
Francesco ShinkoSpainIoni Bowcher QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Emily WhobreyJapan2025-08-30Printing Dimensions NEGOTIATION34Elwin Sharvill
1001Chavez BriddickBrazil2025-08-24Morlong Associates RENEWAL65Anna Fali
1002Aika InouyeBrazil2025-09-02Morlong Associates NEW87Ioni Bowcher
1003Faith GillianSpain2025-08-26Chapman, Ross E Esq UNQUALIFIED9Ioni Bowcher
1004Aruna FigeroaUnited Kingdom2025-08-23Commercial Press RENEWAL27Ivan Magalhaes
1005Julie StensethBrazil2025-08-06Chapman, Ross E Esq NEGOTIATION92Onyama Limba
1006Ashley DoeSpain2025-08-14Feltz Printing Service NEW76Elwin Sharvill
1007Ricardo GauchoGermany2025-08-28Rangoni Of Florence UNQUALIFIED20Elwin Sharvill
1008Arvin AlbaresFrance2025-08-23Commercial Press NEW88Ivan Magalhaes
1009Jefferson SchemmerAustralia2025-08-29Truhlar And Truhlar Attys UNQUALIFIED74Anna Fali
1010Isabel BowleyJapan2025-08-12Morlong Associates UNQUALIFIED89Elwin Sharvill
1011Mayumi KolmetzAustralia2025-08-29Morlong Associates UNQUALIFIED25Amy Elsner
1012Leja CaldareraAustralia2025-08-11Chemel, James L Cpa QUALIFIED66Xuxue Feng
1013Rodrigues CampainBrazil2025-08-12Rangoni Of Florence NEGOTIATION44Onyama Limba
1014Stacey MacleadArgentina2025-08-24Chemel, James L Cpa UNQUALIFIED48Ivan Magalhaes
1015Greenwood BologniaJapan2025-08-07Printing Dimensions NEGOTIATION40Bernardo Dominic
1016Cody SaylorsJapan2025-08-26Commercial Press QUALIFIED61Onyama Limba
1017David DarakjyRussia2025-08-24Chemel, James L Cpa PROPOSAL61Stephen Shaw
1018Sinclair WaycottUnited Kingdom2025-08-16Chapman, Ross E Esq NEW26Stephen Shaw
1019Murillo MaletAustralia2025-08-10Chemel, James L Cpa RENEWAL97Stephen Shaw
1020Claire TollnerJapan2025-08-19Printing Dimensions PROPOSAL64Asiya Javayant
1021Juan WieserJapan2025-09-03King, Christopher A Esq QUALIFIED69Bernardo Dominic
1022Isabel BowleyUnited Kingdom2025-08-12Rangoni Of Florence NEGOTIATION19Bernardo Dominic
1023Darci PoquetteUnited Kingdom2025-08-19Rousseaux, Michael Esq UNQUALIFIED94Amy Elsner
1024Jefferson SchemmerRussia2025-09-02Chanay, Jeffrey A Esq NEGOTIATION12Xuxue Feng
1025Wickens NestleArgentina2025-08-09Chemel, James L Cpa UNQUALIFIED64Elwin Sharvill
1026Aruna FigeroaJapan2025-08-20Chemel, James L Cpa UNQUALIFIED12Ivan Magalhaes
1027Francesco ShinkoSpain2025-08-30Benton, John B Jr QUALIFIED69Ivan Magalhaes
1028Cody SaylorsFrance2025-08-21Chanay, Jeffrey A Esq PROPOSAL77Asiya Javayant
1029Rodrigues CampainItaly2025-08-15Chemel, James L Cpa RENEWAL53Ivan Magalhaes
1030Maria MarrierSpain2025-08-22Truhlar And Truhlar Attys NEW99Elwin Sharvill
1031Smith GlickJapan2025-08-18Morlong Associates NEGOTIATION72Elwin Sharvill
1032Tony FollerRussia2025-08-31Benton, John B Jr NEGOTIATION15Anna Fali
1033Silvio SlusarskiItaly2025-08-16Truhlar And Truhlar Attys PROPOSAL79Onyama Limba
1034Mujtaba NickaAustralia2025-08-18Buckley Miller Wright QUALIFIED28Ivan Magalhaes
1035Morrow RutaFrance2025-08-15Dorl, James J Esq RENEWAL63Ioni Bowcher
1036Arvin AlbaresRussia2025-08-21Printing Dimensions QUALIFIED16Onyama Limba
1037Octavia MaletAustralia2025-08-31Feltz Printing Service QUALIFIED52Anna Fali
1038Kadeem FlosiCanada2025-08-30Rousseaux, Michael Esq PROPOSAL65Amy Elsner
1039Leon OldroydGermany2025-08-17Truhlar And Truhlar Attys UNQUALIFIED89Asiya Javayant
1040Izzy GarufiItaly2025-08-20Feltz Printing Service NEW58Ivan Magalhaes
1041Sinclair WaycottUnited Kingdom2025-08-20Truhlar And Truhlar Attys PROPOSAL96Ioni Bowcher
1042Ivar PaprockiJapan2025-08-12Chapman, Ross E Esq PROPOSAL27Ioni Bowcher
1043Francesco ShinkoJapan2025-08-18Benton, John B Jr RENEWAL49Ioni Bowcher
1044Misaki RoysterSpain2025-08-13Rangoni Of Florence NEGOTIATION39Xuxue Feng
1045Antonio CaudyItaly2025-08-22Chemel, James L Cpa NEGOTIATION20Onyama Limba
1046Morrow RutaCanada2025-08-14Morlong Associates NEW8Ioni Bowcher
1047Julie StensethBrazil2025-08-27Benton, John B Jr QUALIFIED84Asiya Javayant
1048Faith GillianGermany2025-08-29Rousseaux, Michael Esq NEW95Onyama Limba
1049Clifford RimArgentina2025-09-02Rousseaux, Michael Esq NEW79Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Chavez BriddickCanadaStephen Shaw RENEWAL
Izzy GarufiJapanIvan Magalhaes PROPOSAL
Aditya KuskoItalyStephen Shaw QUALIFIED
Smith GlickSpainAmy Elsner QUALIFIED
Silvio SlusarskiBrazilOnyama Limba NEW
Sinclair WaycottAustraliaBernardo Dominic RENEWAL
Francesco ShinkoIndiaBernardo Dominic PROPOSAL
Leja CaldareraBrazilOnyama Limba RENEWAL
Jefferson SchemmerRussiaStephen Shaw NEGOTIATION
Kadeem FlosiSpainAmy Elsner UNQUALIFIED
Kadeem FlosiFranceAmy Elsner NEGOTIATION
Stacey MacleadBrazilBernardo Dominic QUALIFIED
Octavia MaletItalyIoni Bowcher PROPOSAL
Greenwood BologniaUnited KingdomElwin Sharvill UNQUALIFIED
Salvatore StockhamGermanyOnyama Limba QUALIFIED
Cody SaylorsIndiaIoni Bowcher UNQUALIFIED
Smith GlickRussiaXuxue Feng PROPOSAL
Cody SaylorsUnited KingdomAmy Elsner NEW
Aruna FigeroaFranceIoni Bowcher RENEWAL
Ashley DoeBrazilBernardo Dominic RENEWAL
Deepesh ChuiAustraliaIoni Bowcher NEW
Aika InouyeIndiaIvan Magalhaes QUALIFIED
Morrow RutaItalyStephen Shaw RENEWAL
Sinclair WaycottFranceBernardo Dominic QUALIFIED
Jones VocelkaItalyOnyama Limba QUALIFIED
Emily WhobreyArgentinaIoni Bowcher RENEWAL
Antonio CaudyArgentinaAnna Fali PROPOSAL
Costa DilliardIndiaBernardo Dominic NEGOTIATION
Julie StensethBrazilBernardo Dominic PROPOSAL
Juan WieserBrazilAmy Elsner RENEWAL
Alejandro PerinUnited KingdomElwin Sharvill QUALIFIED
Cody SaylorsJapanIoni Bowcher RENEWAL
Johnson SergiBrazilIvan Magalhaes RENEWAL
Aditya KuskoGermanyAmy Elsner UNQUALIFIED
Misaki RoysterJapanIoni Bowcher RENEWAL
Morrow RutaIndiaIvan Magalhaes NEGOTIATION
Munro FerenczRussiaBernardo Dominic NEW
Chavez BriddickBrazilXuxue Feng QUALIFIED
Ashley DoeGermanyBernardo Dominic QUALIFIED
Aditya KuskoIndiaIvan Magalhaes QUALIFIED
Salvatore StockhamGermanyOnyama Limba QUALIFIED
Morrow RutaJapanElwin Sharvill PROPOSAL
Mujtaba NickaCanadaOnyama Limba UNQUALIFIED
Octavia MaletSpainIoni Bowcher PROPOSAL
Kadeem FlosiFranceBernardo Dominic PROPOSAL
Juan WieserBrazilAmy Elsner RENEWAL
Francesco ShinkoItalyAmy Elsner RENEWAL
Smith GlickJapanBernardo Dominic NEGOTIATION
Rodrigues CampainCanadaStephen Shaw NEGOTIATION
Mujtaba NickaIndiaAsiya Javayant UNQUALIFIED
Frozen Columns
Name
Kaitlin Ostrosky
Deepesh Chui
Jennifer Amigon
Morrow Ruta
Ivar Paprocki
Misaki Royster
Mayumi Kolmetz
Claire Tollner
Kaitlin Ostrosky
Clifford Rim
Cody Saylors
Adams Morasca
Alejandro Perin
Murillo Malet
Leon Oldroyd
Octavia Malet
Mayumi Kolmetz
Ashley Doe
Julie Stenseth
Adams Morasca
Isabel Bowley
David Darakjy
Clifford Rim
Greenwood Bolognia
Julie Stenseth
Cody Saylors
Leja Caldarera
Nicolas Iturbide
Claire Tollner
Costa Dilliard
Ashley Doe
Tony Foller
Adams Morasca
Octavia Malet
Alejandro Perin
Murillo Malet
Tony Foller
Aruna Figeroa
Arvin Albares
Wickens Nestle
Leon Oldroyd
Emily Whobrey
James Butt
Darci Poquette
Cody Saylors
Kaitlin Ostrosky
Arvin Albares
Arvin Albares
Julie Stenseth
Antonio Caudy
IdCountryDate
1000Australia2025-08-20
1001Spain2025-09-02
1002Germany2025-08-11
1003Russia2025-08-30
1004Argentina2025-09-02
1005Italy2025-08-23
1006Argentina2025-08-19
1007Japan2025-08-14
1008Russia2025-08-16
1009Brazil2025-08-26
1010Australia2025-08-13
1011Argentina2025-08-06
1012Russia2025-08-15
1013Japan2025-08-21
1014Russia2025-08-14
1015Germany2025-09-04
1016Japan2025-08-21
1017Japan2025-08-31
1018Australia2025-08-10
1019Italy2025-08-25
1020India2025-08-20
1021Russia2025-08-24
1022India2025-08-06
1023Japan2025-08-12
1024Australia2025-08-11
1025Japan2025-08-16
1026Germany2025-08-20
1027Italy2025-08-06
1028Canada2025-09-04
1029France2025-08-22
1030France2025-08-25
1031United Kingdom2025-08-09
1032Brazil2025-08-28
1033Japan2025-08-13
1034Russia2025-08-09
1035Australia2025-08-21
1036Argentina2025-08-09
1037Russia2025-08-08
1038Germany2025-08-06
1039Canada2025-09-03
1040Germany2025-08-06
1041Germany2025-08-17
1042Brazil2025-08-18
1043Argentina2025-08-21
1044India2025-08-10
1045France2025-08-12
1046Italy2025-08-13
1047Brazil2025-08-28
1048Russia2025-08-14
1049Germany2025-08-13

On-Demand Data

NameIdCountryDate
Munro Ferencz1000Brazil2025-08-24
Jeanfrancois Venere1001Argentina2025-08-31
Izzy Garufi1002United Kingdom2025-08-14
Salvatore Stockham1003Japan2025-08-09
Misaki Royster1004Canada2025-08-17
Jennifer Amigon1005Spain2025-08-22
Wickens Nestle1006Japan2025-08-26
Juan Wieser1007United Kingdom2025-08-14
Darci Poquette1008Japan2025-08-15
Aika Inouye1009United Kingdom2025-08-10
Emily Whobrey1010Russia2025-08-16
Salvatore Stockham1011Italy2025-08-26
Deepesh Chui1012France2025-08-25
Antonio Caudy1013Argentina2025-08-16
Chavez Briddick1014Italy2025-08-29
Francesco Shinko1015United Kingdom2025-08-10
Faith Gillian1016Brazil2025-08-31
Rodrigues Campain1017India2025-08-10
Aditya Kusko1018Canada2025-08-06
James Butt1019Russia2025-08-09
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Smith GlickRussiaIvan Magalhaes PROPOSAL
James ButtFranceBernardo Dominic UNQUALIFIED
Salvatore StockhamGermanyStephen Shaw NEGOTIATION
Arvin AlbaresGermanyElwin Sharvill NEGOTIATION
Kaitlin OstroskyCanadaXuxue Feng UNQUALIFIED
Juan WieserFranceAnna Fali NEW
Ivar PaprockiBrazilAmy Elsner PROPOSAL
Kaitlin OstroskyUnited KingdomElwin Sharvill PROPOSAL
Greenwood BologniaItalyOnyama Limba NEGOTIATION
Kadeem FlosiCanadaOnyama Limba QUALIFIED
Tony FollerAustraliaOnyama Limba RENEWAL
James ButtFranceStephen Shaw NEGOTIATION
Deepesh ChuiUnited KingdomAmy Elsner PROPOSAL
Silvio SlusarskiSpainIoni Bowcher RENEWAL
Ricardo GauchoUnited KingdomStephen Shaw NEGOTIATION
Cody SaylorsIndiaOnyama Limba RENEWAL
Chavez BriddickSpainAsiya Javayant QUALIFIED
Arvin AlbaresArgentinaBernardo Dominic QUALIFIED
Isabel BowleyJapanXuxue Feng RENEWAL
Alejandro PerinGermanyAmy Elsner PROPOSAL
Greenwood BologniaGermanyIvan Magalhaes UNQUALIFIED
Maria MarrierAustraliaIvan Magalhaes NEGOTIATION
Francesco ShinkoIndiaAnna Fali NEGOTIATION
Murillo MaletSpainOnyama Limba UNQUALIFIED
Antonio CaudyCanadaStephen Shaw QUALIFIED
Darci PoquetteItalyAnna Fali PROPOSAL
Ivar PaprockiCanadaStephen Shaw NEW
Leon OldroydUnited KingdomIoni Bowcher NEGOTIATION
Kadeem FlosiUnited KingdomIvan Magalhaes QUALIFIED
Faith GillianIndiaAnna Fali PROPOSAL
Smith GlickItalyOnyama Limba UNQUALIFIED
Adams MorascaJapanStephen Shaw QUALIFIED
James ButtRussiaStephen Shaw QUALIFIED
James ButtItalyIoni Bowcher NEGOTIATION
Rodrigues CampainAustraliaAnna Fali RENEWAL
Alejandro PerinSpainAmy Elsner PROPOSAL
Leon OldroydGermanyAsiya Javayant NEGOTIATION
Jennifer AmigonJapanIvan Magalhaes NEGOTIATION
Antonio CaudyGermanyBernardo Dominic QUALIFIED
Rodrigues CampainIndiaStephen Shaw NEW

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