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 NickaArgentinaAmy Elsner PROPOSAL
Smith GlickUnited KingdomOnyama Limba UNQUALIFIED
Salvatore StockhamIndiaElwin Sharvill NEGOTIATION
Aditya KuskoJapanAnna Fali NEGOTIATION
Julie StensethIndiaAsiya Javayant QUALIFIED
Leon OldroydJapanXuxue Feng UNQUALIFIED
Izzy GarufiGermanyAnna Fali NEGOTIATION
Emily WhobreyGermanyAsiya Javayant NEW
Antonio CaudyArgentinaXuxue Feng NEW
Francesco ShinkoGermanyElwin Sharvill UNQUALIFIED
Ricardo GauchoRussiaAnna Fali UNQUALIFIED
Chavez BriddickBrazilBernardo Dominic NEW
Johnson SergiAustraliaBernardo Dominic NEW
Maisha RulapaughJapanIoni Bowcher NEGOTIATION
Mujtaba NickaFranceIoni Bowcher NEW
Salvatore StockhamIndiaIoni Bowcher NEW
Misaki RoysterJapanAmy Elsner NEW
Maria MarrierIndiaOnyama Limba NEGOTIATION
Morrow RutaItalyElwin Sharvill UNQUALIFIED
Murillo MaletJapanAnna Fali UNQUALIFIED
Murillo MaletSpainAsiya Javayant UNQUALIFIED
Jennifer AmigonUnited KingdomAsiya Javayant PROPOSAL
Clifford RimFranceAsiya Javayant RENEWAL
Sinclair WaycottGermanyIvan Magalhaes QUALIFIED
Misaki RoysterCanadaIvan Magalhaes RENEWAL
Smith GlickSpainXuxue Feng RENEWAL
Mujtaba NickaAustraliaAmy Elsner NEGOTIATION
Smith GlickAustraliaStephen Shaw QUALIFIED
Smith GlickBrazilElwin Sharvill QUALIFIED
Stacey MacleadArgentinaStephen Shaw NEGOTIATION
Smith GlickBrazilElwin Sharvill PROPOSAL
Murillo MaletArgentinaXuxue Feng NEW
Claire TollnerBrazilElwin Sharvill PROPOSAL
Wickens NestleUnited KingdomAnna Fali RENEWAL
Smith GlickSpainXuxue Feng RENEWAL
Alejandro PerinSpainAmy Elsner PROPOSAL
Julie StensethCanadaAnna Fali RENEWAL
Silvio SlusarskiJapanAsiya Javayant QUALIFIED
Jennifer AmigonBrazilAsiya Javayant UNQUALIFIED
Cody SaylorsJapanOnyama Limba NEW
Johnson SergiSpainAnna Fali UNQUALIFIED
Mayumi KolmetzBrazilElwin Sharvill PROPOSAL
Izzy GarufiFranceAnna Fali RENEWAL
Sinclair WaycottFranceAsiya Javayant QUALIFIED
Kadeem FlosiGermanyElwin Sharvill QUALIFIED
Stacey MacleadArgentinaAmy Elsner UNQUALIFIED
Mayumi KolmetzSpainStephen Shaw NEW
Rodrigues CampainCanadaStephen Shaw RENEWAL
Silvio SlusarskiFranceXuxue Feng UNQUALIFIED
Adams MorascaIndiaOnyama Limba UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Aruna FigeroaItalyAsiya Javayant RENEWAL
Jeanfrancois VenereBrazilElwin Sharvill NEW
James ButtGermanyAnna Fali QUALIFIED
Jeanfrancois VenereAustraliaStephen Shaw PROPOSAL
Costa DilliardFranceXuxue Feng RENEWAL
Alejandro PerinArgentinaOnyama Limba UNQUALIFIED
David DarakjyRussiaXuxue Feng NEGOTIATION
Ivar PaprockiSpainBernardo Dominic UNQUALIFIED
Emily WhobreySpainIvan Magalhaes NEW
Clifford RimArgentinaXuxue Feng UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Izzy GarufiBrazil2025-08-06Rangoni Of Florence RENEWAL50Elwin Sharvill
1001Alejandro PerinGermany2025-07-31Dorl, James J Esq NEW73Amy Elsner
1002David DarakjyArgentina2025-08-07Morlong Associates UNQUALIFIED91Stephen Shaw
1003Misaki RoysterBrazil2025-08-08Chanay, Jeffrey A Esq PROPOSAL33Asiya Javayant
1004Alejandro PerinSpain2025-08-09Rousseaux, Michael Esq PROPOSAL62Ivan Magalhaes
1005Mayumi KolmetzJapan2025-08-12Benton, John B Jr NEW91Onyama Limba
1006Deepesh ChuiFrance2025-08-03King, Christopher A Esq RENEWAL76Amy Elsner
1007Aruna FigeroaUnited Kingdom2025-08-02Morlong Associates NEGOTIATION19Ioni Bowcher
1008Deepesh ChuiAustralia2025-08-16Morlong Associates RENEWAL15Anna Fali
1009Maria MarrierFrance2025-08-14Printing Dimensions QUALIFIED48Bernardo Dominic
1010Alejandro PerinGermany2025-08-18Rousseaux, Michael Esq PROPOSAL5Ivan Magalhaes
1011Mujtaba NickaItaly2025-08-03Rousseaux, Michael Esq NEGOTIATION80Stephen Shaw
1012Tony FollerRussia2025-08-19Dorl, James J Esq QUALIFIED2Ivan Magalhaes
1013Leja CaldareraItaly2025-08-20Rousseaux, Michael Esq UNQUALIFIED74Xuxue Feng
1014Juan WieserGermany2025-08-05Feiner Bros NEW54Xuxue Feng
1015Deepesh ChuiUnited Kingdom2025-08-17Printing Dimensions NEGOTIATION48Ivan Magalhaes
1016Adams MorascaFrance2025-08-05Commercial Press PROPOSAL9Xuxue Feng
1017Darci PoquetteIndia2025-08-27Chapman, Ross E Esq RENEWAL32Anna Fali
1018Julie StensethCanada2025-08-14Printing Dimensions UNQUALIFIED23Xuxue Feng
1019Francesco ShinkoJapan2025-08-10King, Christopher A Esq NEGOTIATION73Ivan Magalhaes
1020Kadeem FlosiItaly2025-08-01Chemel, James L Cpa RENEWAL66Ivan Magalhaes
1021Costa DilliardIndia2025-08-15Chemel, James L Cpa QUALIFIED8Ivan Magalhaes
1022Mujtaba NickaSpain2025-08-27Chemel, James L Cpa NEW73Anna Fali
1023Stacey MacleadBrazil2025-07-30Feiner Bros RENEWAL98Anna Fali
1024Izzy GarufiUnited Kingdom2025-08-18King, Christopher A Esq QUALIFIED32Asiya Javayant
1025Arvin AlbaresArgentina2025-07-29Dorl, James J Esq NEW61Xuxue Feng
1026Nicolas IturbideSpain2025-08-08Printing Dimensions UNQUALIFIED12Amy Elsner
1027Morrow RutaArgentina2025-08-08Chemel, James L Cpa UNQUALIFIED66Stephen Shaw
1028Murillo MaletAustralia2025-08-02Chapman, Ross E Esq QUALIFIED49Amy Elsner
1029Mujtaba NickaFrance2025-08-19Dorl, James J Esq NEGOTIATION87Xuxue Feng
1030Darci PoquetteIndia2025-07-31Chapman, Ross E Esq NEGOTIATION65Xuxue Feng
1031Rodrigues CampainBrazil2025-08-22Dorl, James J Esq NEW92Stephen Shaw
1032Leon OldroydRussia2025-08-05Buckley Miller Wright QUALIFIED64Amy Elsner
1033Adams MorascaSpain2025-08-11Buckley Miller Wright NEGOTIATION2Elwin Sharvill
1034Antonio CaudyItaly2025-08-27Chanay, Jeffrey A Esq RENEWAL52Amy Elsner
1035Jeanfrancois VenereBrazil2025-07-30Printing Dimensions RENEWAL51Xuxue Feng
1036Octavia MaletArgentina2025-08-22Feiner Bros NEGOTIATION58Amy Elsner
1037Antonio CaudyUnited Kingdom2025-08-14Buckley Miller Wright RENEWAL54Onyama Limba
1038Tony FollerGermany2025-08-17Chapman, Ross E Esq RENEWAL19Anna Fali
1039Julie StensethCanada2025-07-30Chapman, Ross E Esq NEGOTIATION10Ivan Magalhaes
1040Darci PoquetteUnited Kingdom2025-08-21Chapman, Ross E Esq PROPOSAL41Xuxue Feng
1041Ashley DoeRussia2025-08-20Feltz Printing Service UNQUALIFIED54Stephen Shaw
1042Greenwood BologniaFrance2025-08-05Chapman, Ross E Esq RENEWAL55Elwin Sharvill
1043Nicolas IturbideItaly2025-08-01Rousseaux, Michael Esq QUALIFIED78Xuxue Feng
1044Aditya KuskoAustralia2025-08-24Rousseaux, Michael Esq PROPOSAL45Onyama Limba
1045Jefferson SchemmerIndia2025-07-29Rangoni Of Florence QUALIFIED56Stephen Shaw
1046Mujtaba NickaJapan2025-08-11Chemel, James L Cpa UNQUALIFIED21Ivan Magalhaes
1047Deepesh ChuiSpain2025-08-20Chemel, James L Cpa NEW66Amy Elsner
1048Stacey MacleadAustralia2025-08-01Rangoni Of Florence NEGOTIATION17Amy Elsner
1049Aruna FigeroaItaly2025-08-22King, Christopher A Esq UNQUALIFIED20Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Ricardo GauchoGermanyStephen Shaw NEGOTIATION
Arvin AlbaresJapanIoni Bowcher NEGOTIATION
Cody SaylorsBrazilStephen Shaw QUALIFIED
Jeanfrancois VenereItalyOnyama Limba UNQUALIFIED
Arvin AlbaresUnited KingdomAnna Fali NEGOTIATION
Kadeem FlosiFranceXuxue Feng NEW
Rodrigues CampainRussiaAsiya Javayant UNQUALIFIED
Aditya KuskoJapanOnyama Limba NEGOTIATION
Ivar PaprockiCanadaBernardo Dominic NEGOTIATION
Adams MorascaIndiaStephen Shaw RENEWAL
Greenwood BologniaUnited KingdomBernardo Dominic NEW
Stacey MacleadBrazilStephen Shaw UNQUALIFIED
Nicolas IturbideArgentinaOnyama Limba PROPOSAL
Tony FollerJapanAmy Elsner QUALIFIED
Aruna FigeroaUnited KingdomStephen Shaw RENEWAL
Jennifer AmigonCanadaElwin Sharvill PROPOSAL
Cody SaylorsArgentinaIvan Magalhaes NEW
Ricardo GauchoRussiaIvan Magalhaes UNQUALIFIED
Maria MarrierArgentinaAsiya Javayant NEW
Salvatore StockhamIndiaAnna Fali UNQUALIFIED
Leja CaldareraCanadaBernardo Dominic NEGOTIATION
Maria MarrierCanadaAmy Elsner RENEWAL
Darci PoquetteItalyStephen Shaw RENEWAL
Kadeem FlosiGermanyXuxue Feng NEGOTIATION
Tony FollerSpainStephen Shaw PROPOSAL
Cody SaylorsArgentinaIoni Bowcher NEW
Morrow RutaJapanStephen Shaw PROPOSAL
Jones VocelkaFranceXuxue Feng RENEWAL
Julie StensethGermanyAnna Fali NEW
Nicolas IturbideSpainAsiya Javayant UNQUALIFIED
Chavez BriddickIndiaBernardo Dominic NEW
Cody SaylorsSpainAmy Elsner NEGOTIATION
James ButtUnited KingdomOnyama Limba NEGOTIATION
Kaitlin OstroskyGermanyAmy Elsner QUALIFIED
Kadeem FlosiUnited KingdomBernardo Dominic NEW
Julie StensethAustraliaIoni Bowcher RENEWAL
Leon OldroydBrazilStephen Shaw QUALIFIED
Tony FollerGermanyBernardo Dominic PROPOSAL
Rodrigues CampainGermanyIoni Bowcher RENEWAL
Aika InouyeFranceAnna Fali RENEWAL
Julie StensethUnited KingdomAnna Fali NEGOTIATION
Juan WieserAustraliaElwin Sharvill PROPOSAL
James ButtCanadaIoni Bowcher UNQUALIFIED
Silvio SlusarskiRussiaIvan Magalhaes PROPOSAL
Leon OldroydBrazilAmy Elsner UNQUALIFIED
Tony FollerFranceAnna Fali NEW
Rodrigues CampainArgentinaAmy Elsner QUALIFIED
Stacey MacleadGermanyAsiya Javayant QUALIFIED
Alejandro PerinArgentinaAnna Fali RENEWAL
Antonio CaudyArgentinaAnna Fali UNQUALIFIED
Frozen Columns
Name
Kaitlin Ostrosky
Jeanfrancois Venere
James Butt
Rodrigues Campain
Arvin Albares
Francesco Shinko
Jennifer Amigon
Mujtaba Nicka
Juan Wieser
Smith Glick
Darci Poquette
Tony Foller
Smith Glick
Mujtaba Nicka
James Butt
Salvatore Stockham
Aruna Figeroa
Julie Stenseth
Smith Glick
Leja Caldarera
Sinclair Waycott
Ivar Paprocki
Isabel Bowley
Leja Caldarera
Nicolas Iturbide
Octavia Malet
Mujtaba Nicka
Kaitlin Ostrosky
Tony Foller
Salvatore Stockham
Adams Morasca
Ashley Doe
Aika Inouye
Johnson Sergi
Smith Glick
James Butt
Maria Marrier
Jeanfrancois Venere
Ashley Doe
Clifford Rim
Nicolas Iturbide
Jefferson Schemmer
Tony Foller
Antonio Caudy
Johnson Sergi
Mujtaba Nicka
Rodrigues Campain
Leja Caldarera
Francesco Shinko
Costa Dilliard
IdCountryDate
1000Brazil2025-08-10
1001Canada2025-08-27
1002Australia2025-08-15
1003France2025-08-25
1004Australia2025-08-04
1005Argentina2025-08-25
1006United Kingdom2025-08-06
1007Brazil2025-07-29
1008Argentina2025-08-21
1009Canada2025-08-08
1010Germany2025-08-22
1011Australia2025-07-30
1012Brazil2025-08-06
1013Spain2025-08-01
1014Japan2025-08-13
1015Russia2025-08-03
1016Australia2025-08-11
1017Spain2025-07-30
1018Australia2025-08-06
1019Japan2025-07-30
1020Australia2025-08-17
1021Canada2025-08-20
1022Japan2025-08-02
1023France2025-08-02
1024Brazil2025-08-21
1025Canada2025-08-27
1026Japan2025-08-04
1027Brazil2025-08-14
1028Brazil2025-08-02
1029Italy2025-08-05
1030Canada2025-07-29
1031Brazil2025-08-15
1032Germany2025-08-06
1033Argentina2025-08-13
1034France2025-08-03
1035Brazil2025-08-25
1036India2025-08-07
1037India2025-08-15
1038Australia2025-08-19
1039United Kingdom2025-08-06
1040Germany2025-08-12
1041Russia2025-08-18
1042France2025-07-31
1043Germany2025-08-14
1044France2025-08-21
1045Japan2025-07-31
1046Italy2025-08-21
1047Japan2025-07-30
1048Italy2025-07-30
1049Brazil2025-08-24

On-Demand Data

NameIdCountryDate
Munro Ferencz1000Spain2025-08-22
Claire Tollner1001Brazil2025-08-03
Wickens Nestle1002Brazil2025-08-12
Leja Caldarera1003Argentina2025-08-05
Ivar Paprocki1004Germany2025-07-31
Arvin Albares1005Japan2025-08-17
Chavez Briddick1006India2025-08-24
David Darakjy1007Canada2025-08-26
Aika Inouye1008Italy2025-08-07
Emily Whobrey1009France2025-08-17
Johnson Sergi1010Italy2025-08-06
Tony Foller1011France2025-08-03
Leon Oldroyd1012Italy2025-08-10
Stacey Maclead1013Italy2025-08-21
Sinclair Waycott1014Germany2025-08-18
Salvatore Stockham1015Japan2025-08-16
Jefferson Schemmer1016Germany2025-08-04
Smith Glick1017France2025-08-06
Mujtaba Nicka1018Australia2025-08-02
Kaitlin Ostrosky1019United Kingdom2025-08-07
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Maisha RulapaughGermanyIvan Magalhaes NEGOTIATION
Jefferson SchemmerJapanIvan Magalhaes RENEWAL
Mayumi KolmetzIndiaIoni Bowcher RENEWAL
Ashley DoeFranceStephen Shaw QUALIFIED
Misaki RoysterUnited KingdomIvan Magalhaes NEW
Aruna FigeroaGermanyXuxue Feng NEGOTIATION
Wickens NestleItalyIoni Bowcher PROPOSAL
Stacey MacleadFranceAmy Elsner NEGOTIATION
Silvio SlusarskiCanadaStephen Shaw NEW
Darci PoquetteSpainAnna Fali PROPOSAL
Leon OldroydFranceElwin Sharvill RENEWAL
Smith GlickCanadaAsiya Javayant PROPOSAL
Faith GillianBrazilAnna Fali QUALIFIED
Mujtaba NickaCanadaAnna Fali NEW
Aruna FigeroaItalyOnyama Limba RENEWAL
Kaitlin OstroskyFranceBernardo Dominic NEW
Greenwood BologniaArgentinaAnna Fali UNQUALIFIED
Julie StensethUnited KingdomIvan Magalhaes NEW
Misaki RoysterCanadaOnyama Limba UNQUALIFIED
Tony FollerIndiaOnyama Limba NEGOTIATION
Faith GillianItalyElwin Sharvill PROPOSAL
Mayumi KolmetzUnited KingdomElwin Sharvill NEGOTIATION
Murillo MaletAustraliaAsiya Javayant NEW
Deepesh ChuiArgentinaAmy Elsner RENEWAL
Kadeem FlosiCanadaStephen Shaw PROPOSAL
Salvatore StockhamGermanyBernardo Dominic RENEWAL
Murillo MaletArgentinaAmy Elsner UNQUALIFIED
Aruna FigeroaUnited KingdomAmy Elsner RENEWAL
Munro FerenczAustraliaBernardo Dominic NEW
Nicolas IturbideItalyXuxue Feng PROPOSAL
Tony FollerIndiaBernardo Dominic UNQUALIFIED
Arvin AlbaresUnited KingdomXuxue Feng NEW
Aika InouyeArgentinaBernardo Dominic RENEWAL
Kadeem FlosiIndiaOnyama Limba QUALIFIED
Alejandro PerinBrazilElwin Sharvill NEW
Rodrigues CampainJapanBernardo Dominic NEW
Jefferson SchemmerUnited KingdomAnna Fali PROPOSAL
Jennifer AmigonBrazilIvan Magalhaes QUALIFIED
Misaki RoysterUnited KingdomAsiya Javayant UNQUALIFIED
Izzy GarufiItalyStephen Shaw 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>