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 DoeRussiaIoni Bowcher QUALIFIED
Julie StensethIndiaAmy Elsner UNQUALIFIED
Alejandro PerinFranceAmy Elsner NEGOTIATION
Wickens NestleItalyIvan Magalhaes NEGOTIATION
Claire TollnerAustraliaAsiya Javayant PROPOSAL
Kadeem FlosiArgentinaAnna Fali NEW
Stacey MacleadCanadaOnyama Limba QUALIFIED
Murillo MaletRussiaIoni Bowcher RENEWAL
Claire TollnerRussiaAnna Fali NEW
Aika InouyeCanadaOnyama Limba NEW
Nicolas IturbideSpainXuxue Feng PROPOSAL
Chavez BriddickUnited KingdomAmy Elsner UNQUALIFIED
Kaitlin OstroskyItalyOnyama Limba UNQUALIFIED
Claire TollnerUnited KingdomAnna Fali RENEWAL
Aditya KuskoGermanyAsiya Javayant NEW
Jennifer AmigonIndiaXuxue Feng NEGOTIATION
Jeanfrancois VenereBrazilAsiya Javayant NEW
Johnson SergiUnited KingdomStephen Shaw UNQUALIFIED
James ButtGermanyAnna Fali NEGOTIATION
Darci PoquetteAustraliaIoni Bowcher QUALIFIED
Antonio CaudyAustraliaIoni Bowcher UNQUALIFIED
Adams MorascaUnited KingdomIvan Magalhaes NEGOTIATION
Deepesh ChuiUnited KingdomIoni Bowcher RENEWAL
Costa DilliardItalyXuxue Feng NEGOTIATION
Morrow RutaFranceAnna Fali NEGOTIATION
Isabel BowleyJapanAnna Fali NEW
Greenwood BologniaIndiaXuxue Feng RENEWAL
Greenwood BologniaRussiaElwin Sharvill NEW
Julie StensethCanadaIoni Bowcher NEGOTIATION
Darci PoquetteBrazilXuxue Feng NEW
Maisha RulapaughItalyOnyama Limba QUALIFIED
Costa DilliardJapanStephen Shaw NEW
Mayumi KolmetzItalyIoni Bowcher QUALIFIED
Wickens NestleUnited KingdomIoni Bowcher UNQUALIFIED
Cody SaylorsItalyStephen Shaw QUALIFIED
Leon OldroydAustraliaIoni Bowcher RENEWAL
Adams MorascaSpainIoni Bowcher NEW
Greenwood BologniaJapanXuxue Feng QUALIFIED
Arvin AlbaresArgentinaStephen Shaw UNQUALIFIED
Salvatore StockhamSpainAsiya Javayant NEGOTIATION
Mayumi KolmetzRussiaBernardo Dominic PROPOSAL
Faith GillianBrazilAnna Fali RENEWAL
Morrow RutaBrazilStephen Shaw QUALIFIED
Tony FollerRussiaAnna Fali PROPOSAL
Jennifer AmigonRussiaElwin Sharvill NEW
Jones VocelkaJapanIoni Bowcher NEGOTIATION
Nicolas IturbideFranceStephen Shaw UNQUALIFIED
Greenwood BologniaAustraliaStephen Shaw RENEWAL
Nicolas IturbideItalyBernardo Dominic NEW
Clifford RimUnited KingdomIvan Magalhaes NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Maisha RulapaughGermanyStephen Shaw NEW
Murillo MaletBrazilIoni Bowcher QUALIFIED
Mujtaba NickaCanadaIvan Magalhaes PROPOSAL
Ricardo GauchoUnited KingdomIoni Bowcher NEW
Alejandro PerinFranceXuxue Feng NEGOTIATION
Aruna FigeroaSpainStephen Shaw QUALIFIED
Arvin AlbaresRussiaBernardo Dominic NEGOTIATION
Emily WhobreyUnited KingdomXuxue Feng NEGOTIATION
Johnson SergiItalyStephen Shaw PROPOSAL
Julie StensethJapanIvan Magalhaes NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Salvatore StockhamItaly2025-07-13Chapman, Ross E Esq PROPOSAL88Anna Fali
1001Cody SaylorsFrance2025-07-31Chemel, James L Cpa PROPOSAL67Anna Fali
1002Aruna FigeroaArgentina2025-08-01Feiner Bros UNQUALIFIED81Asiya Javayant
1003Mujtaba NickaGermany2025-07-27Truhlar And Truhlar Attys PROPOSAL43Stephen Shaw
1004Johnson SergiItaly2025-07-24King, Christopher A Esq QUALIFIED0Ioni Bowcher
1005Johnson SergiFrance2025-07-19Chanay, Jeffrey A Esq PROPOSAL84Bernardo Dominic
1006Maria MarrierCanada2025-07-07Feiner Bros NEGOTIATION14Ivan Magalhaes
1007James ButtGermany2025-08-03King, Christopher A Esq QUALIFIED50Anna Fali
1008Francesco ShinkoJapan2025-07-31Chanay, Jeffrey A Esq RENEWAL11Amy Elsner
1009Antonio CaudyJapan2025-07-07Dorl, James J Esq QUALIFIED27Ioni Bowcher
1010Maria MarrierJapan2025-07-07Rousseaux, Michael Esq PROPOSAL93Onyama Limba
1011Misaki RoysterFrance2025-07-08Chapman, Ross E Esq NEW67Ivan Magalhaes
1012Ashley DoeUnited Kingdom2025-07-29Morlong Associates NEGOTIATION89Asiya Javayant
1013Kadeem FlosiGermany2025-07-20Truhlar And Truhlar Attys PROPOSAL55Xuxue Feng
1014Ricardo GauchoIndia2025-07-27Dorl, James J Esq UNQUALIFIED92Ioni Bowcher
1015Faith GillianSpain2025-07-16Feltz Printing Service NEGOTIATION39Amy Elsner
1016Maisha RulapaughUnited Kingdom2025-07-11King, Christopher A Esq PROPOSAL54Xuxue Feng
1017Aruna FigeroaRussia2025-07-05Rangoni Of Florence QUALIFIED55Ivan Magalhaes
1018Arvin AlbaresSpain2025-07-18Chemel, James L Cpa UNQUALIFIED38Amy Elsner
1019Smith GlickGermany2025-07-13Morlong Associates NEGOTIATION59Amy Elsner
1020Cody SaylorsIndia2025-07-15Feiner Bros UNQUALIFIED57Anna Fali
1021Alejandro PerinUnited Kingdom2025-08-01Rousseaux, Michael Esq NEW70Asiya Javayant
1022Faith GillianCanada2025-07-05King, Christopher A Esq PROPOSAL45Xuxue Feng
1023Rodrigues CampainBrazil2025-07-05Benton, John B Jr QUALIFIED80Onyama Limba
1024Wickens NestleItaly2025-07-06Printing Dimensions RENEWAL0Xuxue Feng
1025Johnson SergiFrance2025-07-24Buckley Miller Wright NEW28Ivan Magalhaes
1026Wickens NestleIndia2025-07-14Commercial Press QUALIFIED37Stephen Shaw
1027Nicolas IturbideIndia2025-07-12Chemel, James L Cpa PROPOSAL89Onyama Limba
1028Chavez BriddickIndia2025-07-22Printing Dimensions PROPOSAL96Stephen Shaw
1029Jennifer AmigonIndia2025-07-28Chanay, Jeffrey A Esq NEW51Onyama Limba
1030Arvin AlbaresItaly2025-07-30Chemel, James L Cpa NEW82Ioni Bowcher
1031Silvio SlusarskiSpain2025-07-06Benton, John B Jr NEGOTIATION66Onyama Limba
1032Ivar PaprockiFrance2025-07-25Dorl, James J Esq PROPOSAL70Anna Fali
1033Aruna FigeroaBrazil2025-08-02Chanay, Jeffrey A Esq NEW59Ivan Magalhaes
1034Francesco ShinkoFrance2025-07-25Printing Dimensions UNQUALIFIED85Ioni Bowcher
1035Leon OldroydArgentina2025-07-12Feiner Bros UNQUALIFIED59Amy Elsner
1036Johnson SergiGermany2025-07-12Feltz Printing Service NEGOTIATION53Asiya Javayant
1037Stacey MacleadFrance2025-07-28Buckley Miller Wright NEGOTIATION41Asiya Javayant
1038Mayumi KolmetzSpain2025-07-07Rangoni Of Florence NEGOTIATION53Onyama Limba
1039Aruna FigeroaAustralia2025-07-30King, Christopher A Esq QUALIFIED59Ivan Magalhaes
1040Maisha RulapaughJapan2025-07-21Feltz Printing Service NEW29Amy Elsner
1041Maisha RulapaughIndia2025-07-08Feiner Bros NEW88Stephen Shaw
1042Kadeem FlosiItaly2025-07-21Chemel, James L Cpa PROPOSAL76Stephen Shaw
1043Salvatore StockhamAustralia2025-07-14King, Christopher A Esq QUALIFIED65Amy Elsner
1044Kaitlin OstroskyAustralia2025-07-12Benton, John B Jr QUALIFIED92Xuxue Feng
1045Rodrigues CampainGermany2025-07-21Printing Dimensions QUALIFIED54Bernardo Dominic
1046Jeanfrancois VenereFrance2025-07-30Truhlar And Truhlar Attys NEW91Anna Fali
1047Ivar PaprockiAustralia2025-07-15Buckley Miller Wright QUALIFIED62Elwin Sharvill
1048Mujtaba NickaAustralia2025-07-19Chapman, Ross E Esq QUALIFIED28Elwin Sharvill
1049Tony FollerBrazil2025-07-07Rangoni Of Florence RENEWAL60Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Maria MarrierGermanyElwin Sharvill PROPOSAL
Smith GlickGermanyBernardo Dominic QUALIFIED
Johnson SergiItalyOnyama Limba PROPOSAL
Jennifer AmigonSpainStephen Shaw NEGOTIATION
Aditya KuskoRussiaBernardo Dominic QUALIFIED
Darci PoquetteRussiaBernardo Dominic NEW
Octavia MaletFranceAnna Fali PROPOSAL
Aruna FigeroaBrazilOnyama Limba NEW
Octavia MaletArgentinaAmy Elsner RENEWAL
Adams MorascaItalyXuxue Feng NEGOTIATION
Kaitlin OstroskySpainAsiya Javayant NEW
Salvatore StockhamArgentinaIoni Bowcher PROPOSAL
Alejandro PerinRussiaBernardo Dominic NEGOTIATION
Smith GlickSpainIvan Magalhaes QUALIFIED
Rodrigues CampainSpainOnyama Limba NEGOTIATION
Chavez BriddickFranceStephen Shaw PROPOSAL
Maria MarrierJapanBernardo Dominic PROPOSAL
Leja CaldareraGermanyOnyama Limba RENEWAL
Julie StensethItalyAnna Fali QUALIFIED
Claire TollnerCanadaOnyama Limba NEGOTIATION
Francesco ShinkoJapanAnna Fali PROPOSAL
Francesco ShinkoSpainElwin Sharvill RENEWAL
Ashley DoeArgentinaBernardo Dominic NEW
Antonio CaudyArgentinaElwin Sharvill PROPOSAL
Nicolas IturbideCanadaIvan Magalhaes PROPOSAL
Cody SaylorsItalyAmy Elsner NEW
Salvatore StockhamIndiaBernardo Dominic RENEWAL
Julie StensethJapanStephen Shaw UNQUALIFIED
Emily WhobreyJapanAsiya Javayant NEGOTIATION
Stacey MacleadRussiaXuxue Feng NEGOTIATION
Aruna FigeroaCanadaAmy Elsner NEGOTIATION
Francesco ShinkoItalyStephen Shaw QUALIFIED
James ButtCanadaBernardo Dominic RENEWAL
Aruna FigeroaJapanXuxue Feng NEW
Ashley DoeGermanyAmy Elsner QUALIFIED
Nicolas IturbideGermanyOnyama Limba NEGOTIATION
Tony FollerCanadaStephen Shaw NEGOTIATION
Francesco ShinkoUnited KingdomAsiya Javayant RENEWAL
Nicolas IturbideRussiaBernardo Dominic QUALIFIED
Izzy GarufiAustraliaAnna Fali PROPOSAL
Costa DilliardRussiaOnyama Limba NEW
Rodrigues CampainUnited KingdomAsiya Javayant NEW
Mayumi KolmetzRussiaOnyama Limba RENEWAL
Jefferson SchemmerRussiaXuxue Feng RENEWAL
Mayumi KolmetzArgentinaIvan Magalhaes UNQUALIFIED
Mayumi KolmetzGermanyIoni Bowcher QUALIFIED
Emily WhobreyArgentinaElwin Sharvill NEW
Salvatore StockhamIndiaAnna Fali NEW
Jeanfrancois VenereSpainIoni Bowcher PROPOSAL
Juan WieserUnited KingdomStephen Shaw QUALIFIED
Frozen Columns
Name
Leja Caldarera
Francesco Shinko
Francesco Shinko
Rodrigues Campain
Juan Wieser
Isabel Bowley
Isabel Bowley
Greenwood Bolognia
Mayumi Kolmetz
Johnson Sergi
Leon Oldroyd
Tony Foller
Sinclair Waycott
Misaki Royster
Maria Marrier
Maisha Rulapaugh
Leja Caldarera
Jones Vocelka
Isabel Bowley
Greenwood Bolognia
Wickens Nestle
Octavia Malet
Jones Vocelka
Munro Ferencz
Wickens Nestle
Izzy Garufi
Kaitlin Ostrosky
Smith Glick
Rodrigues Campain
Maisha Rulapaugh
Darci Poquette
Octavia Malet
Faith Gillian
Stacey Maclead
Silvio Slusarski
Sinclair Waycott
Deepesh Chui
Antonio Caudy
Jones Vocelka
Morrow Ruta
Stacey Maclead
Aika Inouye
Mujtaba Nicka
Aditya Kusko
Izzy Garufi
Salvatore Stockham
Juan Wieser
Alejandro Perin
Cody Saylors
Leon Oldroyd
IdCountryDate
1000Brazil2025-07-15
1001Canada2025-07-20
1002India2025-07-11
1003Germany2025-07-12
1004Germany2025-07-22
1005Brazil2025-08-02
1006Argentina2025-07-22
1007Russia2025-07-18
1008Brazil2025-07-24
1009France2025-07-26
1010Canada2025-07-18
1011Russia2025-07-17
1012Spain2025-07-29
1013France2025-07-20
1014Russia2025-07-19
1015Argentina2025-07-16
1016Germany2025-07-15
1017India2025-08-01
1018Brazil2025-07-31
1019Italy2025-07-21
1020France2025-07-10
1021Australia2025-08-02
1022Spain2025-07-17
1023Canada2025-07-16
1024Japan2025-07-22
1025Spain2025-07-07
1026Australia2025-07-07
1027Brazil2025-07-24
1028United Kingdom2025-07-18
1029Italy2025-08-03
1030Brazil2025-07-31
1031France2025-07-31
1032India2025-07-31
1033Australia2025-07-30
1034Spain2025-08-01
1035Russia2025-07-25
1036United Kingdom2025-07-18
1037Spain2025-07-25
1038Argentina2025-07-27
1039Japan2025-07-14
1040Brazil2025-07-08
1041United Kingdom2025-07-22
1042France2025-07-12
1043Argentina2025-08-03
1044Canada2025-07-10
1045Australia2025-07-30
1046Japan2025-07-19
1047Japan2025-08-01
1048Russia2025-07-17
1049Spain2025-07-22

On-Demand Data

NameIdCountryDate
Ashley Doe1000Germany2025-07-11
Izzy Garufi1001Australia2025-07-05
Mujtaba Nicka1002Japan2025-07-22
Salvatore Stockham1003United Kingdom2025-07-23
Aditya Kusko1004India2025-07-17
Juan Wieser1005Canada2025-07-08
Ashley Doe1006Italy2025-07-12
Jones Vocelka1007Argentina2025-07-25
Salvatore Stockham1008Russia2025-08-03
Julie Stenseth1009India2025-07-19
Chavez Briddick1010Japan2025-07-07
Ivar Paprocki1011Spain2025-07-12
Silvio Slusarski1012Germany2025-07-06
Jefferson Schemmer1013Japan2025-07-28
Johnson Sergi1014United Kingdom2025-07-06
Cody Saylors1015France2025-07-25
Morrow Ruta1016Spain2025-07-26
Salvatore Stockham1017Spain2025-07-15
Cody Saylors1018United Kingdom2025-08-02
Ashley Doe1019Japan2025-07-31
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Maria MarrierItalyAsiya Javayant PROPOSAL
Morrow RutaJapanXuxue Feng NEGOTIATION
Tony FollerGermanyElwin Sharvill UNQUALIFIED
Salvatore StockhamItalyBernardo Dominic NEGOTIATION
Mujtaba NickaRussiaOnyama Limba NEGOTIATION
Aika InouyeAustraliaIoni Bowcher NEGOTIATION
Kaitlin OstroskyArgentinaOnyama Limba NEW
Octavia MaletCanadaIoni Bowcher NEGOTIATION
Isabel BowleyArgentinaOnyama Limba UNQUALIFIED
Ashley DoeFranceElwin Sharvill PROPOSAL
Ashley DoeBrazilBernardo Dominic RENEWAL
Costa DilliardAustraliaXuxue Feng NEGOTIATION
Alejandro PerinCanadaBernardo Dominic NEW
Wickens NestleGermanyOnyama Limba RENEWAL
Octavia MaletJapanOnyama Limba NEW
Tony FollerRussiaElwin Sharvill NEGOTIATION
Leja CaldareraItalyBernardo Dominic PROPOSAL
Mujtaba NickaRussiaAnna Fali NEGOTIATION
Kadeem FlosiJapanElwin Sharvill NEGOTIATION
Jennifer AmigonItalyOnyama Limba UNQUALIFIED
Salvatore StockhamCanadaXuxue Feng QUALIFIED
Johnson SergiBrazilIvan Magalhaes PROPOSAL
David DarakjyGermanyOnyama Limba QUALIFIED
Sinclair WaycottBrazilElwin Sharvill NEGOTIATION
Kaitlin OstroskyCanadaBernardo Dominic UNQUALIFIED
Rodrigues CampainUnited KingdomBernardo Dominic NEW
Wickens NestleArgentinaIoni Bowcher UNQUALIFIED
Ricardo GauchoJapanStephen Shaw QUALIFIED
Leon OldroydCanadaIoni Bowcher NEW
Deepesh ChuiItalyIoni Bowcher RENEWAL
Kadeem FlosiCanadaXuxue Feng QUALIFIED
Leon OldroydJapanIvan Magalhaes NEW
David DarakjyGermanyOnyama Limba UNQUALIFIED
Arvin AlbaresSpainStephen Shaw UNQUALIFIED
Morrow RutaGermanyElwin Sharvill NEW
Ivar PaprockiJapanBernardo Dominic NEGOTIATION
Jeanfrancois VenereSpainElwin Sharvill NEW
Jennifer AmigonUnited KingdomOnyama Limba NEGOTIATION
Leja CaldareraUnited KingdomIvan Magalhaes RENEWAL
Chavez BriddickArgentinaIoni Bowcher 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>