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
Octavia MaletJapanAnna Fali NEGOTIATION
Kadeem FlosiAustraliaAnna Fali NEW
Aditya KuskoItalyAmy Elsner NEW
Aditya KuskoRussiaAmy Elsner RENEWAL
Adams MorascaUnited KingdomOnyama Limba QUALIFIED
Darci PoquetteRussiaOnyama Limba RENEWAL
Kaitlin OstroskyFranceIoni Bowcher NEW
Jones VocelkaItalyOnyama Limba PROPOSAL
Alejandro PerinAustraliaStephen Shaw NEGOTIATION
Jones VocelkaAustraliaIoni Bowcher QUALIFIED
Clifford RimArgentinaIoni Bowcher PROPOSAL
Leja CaldareraJapanAnna Fali PROPOSAL
Chavez BriddickBrazilIoni Bowcher QUALIFIED
Stacey MacleadAustraliaIoni Bowcher UNQUALIFIED
Deepesh ChuiBrazilIoni Bowcher QUALIFIED
Jefferson SchemmerUnited KingdomAnna Fali NEW
Adams MorascaUnited KingdomIvan Magalhaes QUALIFIED
Tony FollerBrazilAsiya Javayant RENEWAL
Cody SaylorsItalyIoni Bowcher QUALIFIED
Claire TollnerBrazilXuxue Feng QUALIFIED
James ButtUnited KingdomAsiya Javayant NEW
Smith GlickArgentinaElwin Sharvill RENEWAL
Jennifer AmigonJapanAmy Elsner NEW
Mayumi KolmetzJapanAsiya Javayant UNQUALIFIED
Ivar PaprockiUnited KingdomIvan Magalhaes UNQUALIFIED
James ButtUnited KingdomStephen Shaw QUALIFIED
Murillo MaletJapanStephen Shaw UNQUALIFIED
Mayumi KolmetzBrazilXuxue Feng QUALIFIED
Sinclair WaycottArgentinaBernardo Dominic UNQUALIFIED
Izzy GarufiFranceAsiya Javayant NEGOTIATION
Antonio CaudyBrazilXuxue Feng UNQUALIFIED
Darci PoquetteAustraliaIvan Magalhaes UNQUALIFIED
Isabel BowleyCanadaIoni Bowcher QUALIFIED
Morrow RutaCanadaStephen Shaw QUALIFIED
Johnson SergiGermanyStephen Shaw NEW
Izzy GarufiAustraliaStephen Shaw PROPOSAL
Izzy GarufiJapanIoni Bowcher NEGOTIATION
Cody SaylorsJapanXuxue Feng RENEWAL
Antonio CaudyJapanStephen Shaw NEGOTIATION
Greenwood BologniaIndiaBernardo Dominic RENEWAL
Alejandro PerinJapanXuxue Feng UNQUALIFIED
Salvatore StockhamBrazilIvan Magalhaes PROPOSAL
Ivar PaprockiJapanXuxue Feng NEGOTIATION
Wickens NestleBrazilIvan Magalhaes NEW
Aika InouyeJapanElwin Sharvill NEW
Salvatore StockhamItalyOnyama Limba PROPOSAL
Juan WieserRussiaOnyama Limba NEGOTIATION
Aika InouyeGermanyXuxue Feng PROPOSAL
James ButtCanadaBernardo Dominic NEGOTIATION
Johnson SergiBrazilAsiya Javayant RENEWAL
Horizontal
NameCountryRepresentativeStatus
Arvin AlbaresBrazilOnyama Limba NEW
Arvin AlbaresArgentinaIoni Bowcher RENEWAL
Antonio CaudyRussiaIvan Magalhaes NEW
Maria MarrierAustraliaIvan Magalhaes PROPOSAL
Johnson SergiJapanIvan Magalhaes QUALIFIED
Leon OldroydItalyIvan Magalhaes RENEWAL
Francesco ShinkoJapanIoni Bowcher PROPOSAL
Mujtaba NickaArgentinaAnna Fali NEGOTIATION
Mayumi KolmetzFranceXuxue Feng QUALIFIED
Clifford RimFranceIoni Bowcher RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Octavia MaletArgentina2026-05-23Dorl, James J Esq QUALIFIED84Anna Fali
1001Francesco ShinkoBrazil2026-05-19Dorl, James J Esq PROPOSAL28Ivan Magalhaes
1002Munro FerenczRussia2026-05-26Commercial Press NEW44Anna Fali
1003Leon OldroydIndia2026-06-09Rousseaux, Michael Esq NEW77Ivan Magalhaes
1004Rodrigues CampainRussia2026-06-02Truhlar And Truhlar Attys NEW72Onyama Limba
1005Salvatore StockhamItaly2026-06-12Chanay, Jeffrey A Esq QUALIFIED7Elwin Sharvill
1006Smith GlickItaly2026-06-06Truhlar And Truhlar Attys PROPOSAL99Xuxue Feng
1007Misaki RoysterFrance2026-06-04Benton, John B Jr QUALIFIED52Ivan Magalhaes
1008Maria MarrierRussia2026-05-31Buckley Miller Wright NEGOTIATION59Ioni Bowcher
1009Aditya KuskoAustralia2026-05-22Feltz Printing Service NEGOTIATION48Onyama Limba
1010Jeanfrancois VenereItaly2026-05-20Truhlar And Truhlar Attys NEW25Amy Elsner
1011Aditya KuskoSpain2026-06-02Chemel, James L Cpa QUALIFIED82Anna Fali
1012Mayumi KolmetzSpain2026-06-05Rangoni Of Florence NEW45Xuxue Feng
1013Maisha RulapaughArgentina2026-06-12Rangoni Of Florence QUALIFIED39Ivan Magalhaes
1014Jefferson SchemmerArgentina2026-05-22King, Christopher A Esq UNQUALIFIED96Asiya Javayant
1015James ButtJapan2026-05-28Feltz Printing Service RENEWAL80Asiya Javayant
1016Faith GillianUnited Kingdom2026-05-19Buckley Miller Wright RENEWAL80Ivan Magalhaes
1017Ashley DoeJapan2026-06-16Printing Dimensions QUALIFIED5Ioni Bowcher
1018Silvio SlusarskiSpain2026-06-14Feiner Bros NEGOTIATION61Asiya Javayant
1019Mayumi KolmetzCanada2026-06-11Truhlar And Truhlar Attys UNQUALIFIED34Stephen Shaw
1020Faith GillianJapan2026-06-07Rousseaux, Michael Esq UNQUALIFIED21Amy Elsner
1021Silvio SlusarskiAustralia2026-06-10Chanay, Jeffrey A Esq NEW54Amy Elsner
1022Faith GillianIndia2026-05-23Printing Dimensions UNQUALIFIED93Elwin Sharvill
1023Ricardo GauchoJapan2026-05-21Dorl, James J Esq QUALIFIED79Onyama Limba
1024Ashley DoeItaly2026-06-10Printing Dimensions PROPOSAL89Onyama Limba
1025James ButtBrazil2026-05-20Feiner Bros NEW46Amy Elsner
1026Ricardo GauchoItaly2026-06-13Chapman, Ross E Esq NEGOTIATION49Bernardo Dominic
1027Isabel BowleyJapan2026-06-09Printing Dimensions UNQUALIFIED68Anna Fali
1028Aika InouyeBrazil2026-06-03Chanay, Jeffrey A Esq UNQUALIFIED30Stephen Shaw
1029Clifford RimIndia2026-06-12Printing Dimensions PROPOSAL6Anna Fali
1030Kaitlin OstroskyAustralia2026-06-08Feiner Bros PROPOSAL8Anna Fali
1031Aruna FigeroaGermany2026-05-25Chemel, James L Cpa QUALIFIED56Amy Elsner
1032Octavia MaletUnited Kingdom2026-06-03Truhlar And Truhlar Attys PROPOSAL29Elwin Sharvill
1033Munro FerenczJapan2026-06-01Printing Dimensions NEW90Elwin Sharvill
1034Jeanfrancois VenereBrazil2026-05-24Morlong Associates QUALIFIED26Xuxue Feng
1035Francesco ShinkoJapan2026-05-19Chemel, James L Cpa NEW40Onyama Limba
1036Mayumi KolmetzItaly2026-05-21Dorl, James J Esq PROPOSAL2Amy Elsner
1037Antonio CaudyArgentina2026-06-13Chanay, Jeffrey A Esq NEGOTIATION86Stephen Shaw
1038Jennifer AmigonItaly2026-06-11Rangoni Of Florence NEW16Onyama Limba
1039Jeanfrancois VenereItaly2026-06-17Feltz Printing Service PROPOSAL49Stephen Shaw
1040Aruna FigeroaSpain2026-05-27Chanay, Jeffrey A Esq QUALIFIED17Onyama Limba
1041Maisha RulapaughUnited Kingdom2026-06-08Benton, John B Jr RENEWAL48Xuxue Feng
1042Maria MarrierArgentina2026-05-23Morlong Associates RENEWAL47Ivan Magalhaes
1043Jeanfrancois VenereIndia2026-06-16Dorl, James J Esq RENEWAL8Stephen Shaw
1044Leja CaldareraGermany2026-06-12Dorl, James J Esq QUALIFIED10Stephen Shaw
1045Ivar PaprockiArgentina2026-05-20Benton, John B Jr UNQUALIFIED5Ioni Bowcher
1046Leja CaldareraAustralia2026-05-23Feltz Printing Service NEW30Asiya Javayant
1047Chavez BriddickIndia2026-05-21Morlong Associates NEW72Xuxue Feng
1048Tony FollerFrance2026-06-05Printing Dimensions RENEWAL83Stephen Shaw
1049Murillo MaletSpain2026-05-22Morlong Associates NEW67Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Costa DilliardCanadaIvan Magalhaes RENEWAL
Smith GlickItalyOnyama Limba PROPOSAL
Maisha RulapaughGermanyElwin Sharvill PROPOSAL
Silvio SlusarskiAustraliaAmy Elsner RENEWAL
Julie StensethJapanIvan Magalhaes PROPOSAL
Leja CaldareraCanadaAmy Elsner PROPOSAL
James ButtCanadaAnna Fali NEW
Leja CaldareraGermanyAnna Fali UNQUALIFIED
Isabel BowleyArgentinaIoni Bowcher NEGOTIATION
Isabel BowleyIndiaAsiya Javayant UNQUALIFIED
Greenwood BologniaRussiaAsiya Javayant PROPOSAL
Aditya KuskoRussiaBernardo Dominic NEGOTIATION
Smith GlickItalyStephen Shaw QUALIFIED
Deepesh ChuiRussiaAnna Fali NEW
Jennifer AmigonArgentinaBernardo Dominic UNQUALIFIED
Jennifer AmigonAustraliaOnyama Limba NEGOTIATION
Nicolas IturbideUnited KingdomAnna Fali NEW
Rodrigues CampainItalyAsiya Javayant RENEWAL
Munro FerenczArgentinaIoni Bowcher NEW
Julie StensethRussiaBernardo Dominic NEW
Arvin AlbaresAustraliaAmy Elsner UNQUALIFIED
Ricardo GauchoArgentinaIvan Magalhaes UNQUALIFIED
Misaki RoysterGermanyAmy Elsner UNQUALIFIED
Silvio SlusarskiItalyBernardo Dominic QUALIFIED
Stacey MacleadBrazilIvan Magalhaes PROPOSAL
Leon OldroydBrazilAmy Elsner RENEWAL
Wickens NestleUnited KingdomElwin Sharvill NEW
Julie StensethAustraliaElwin Sharvill RENEWAL
Rodrigues CampainGermanyXuxue Feng QUALIFIED
Kadeem FlosiArgentinaAnna Fali QUALIFIED
Silvio SlusarskiItalyAmy Elsner PROPOSAL
Arvin AlbaresBrazilIoni Bowcher RENEWAL
Jeanfrancois VenereCanadaStephen Shaw NEGOTIATION
Arvin AlbaresJapanAmy Elsner QUALIFIED
Munro FerenczArgentinaAsiya Javayant NEGOTIATION
Izzy GarufiSpainAmy Elsner PROPOSAL
Jennifer AmigonItalyAnna Fali QUALIFIED
Jennifer AmigonGermanyAsiya Javayant PROPOSAL
Aika InouyeUnited KingdomAmy Elsner QUALIFIED
Tony FollerItalyXuxue Feng UNQUALIFIED
Silvio SlusarskiGermanyBernardo Dominic UNQUALIFIED
Nicolas IturbideIndiaAmy Elsner RENEWAL
Wickens NestleItalyElwin Sharvill RENEWAL
James ButtSpainAsiya Javayant RENEWAL
Kadeem FlosiItalyOnyama Limba UNQUALIFIED
Mujtaba NickaBrazilIvan Magalhaes RENEWAL
Aruna FigeroaSpainAmy Elsner NEW
Aditya KuskoIndiaAmy Elsner NEGOTIATION
Jefferson SchemmerBrazilIoni Bowcher RENEWAL
Alejandro PerinAustraliaAsiya Javayant UNQUALIFIED
Frozen Columns
Name
Aruna Figeroa
Jennifer Amigon
Antonio Caudy
Nicolas Iturbide
Leon Oldroyd
Clifford Rim
Darci Poquette
Kadeem Flosi
Francesco Shinko
Claire Tollner
Adams Morasca
Mayumi Kolmetz
Nicolas Iturbide
Darci Poquette
Munro Ferencz
Maisha Rulapaugh
Arvin Albares
Aika Inouye
Alejandro Perin
Jeanfrancois Venere
Isabel Bowley
Mayumi Kolmetz
Deepesh Chui
Clifford Rim
Leon Oldroyd
Sinclair Waycott
Octavia Malet
Nicolas Iturbide
David Darakjy
Claire Tollner
Murillo Malet
Antonio Caudy
Octavia Malet
Mayumi Kolmetz
Stacey Maclead
James Butt
Clifford Rim
Kadeem Flosi
Jefferson Schemmer
James Butt
Francesco Shinko
Johnson Sergi
Emily Whobrey
Sinclair Waycott
Alejandro Perin
Julie Stenseth
Kaitlin Ostrosky
Emily Whobrey
Clifford Rim
Costa Dilliard
IdCountryDate
1000Italy2026-05-20
1001Canada2026-06-10
1002Russia2026-06-04
1003Argentina2026-05-19
1004Japan2026-05-21
1005France2026-06-16
1006Russia2026-06-02
1007Brazil2026-06-02
1008Australia2026-06-16
1009Argentina2026-06-06
1010Brazil2026-05-29
1011Germany2026-05-24
1012Brazil2026-05-23
1013United Kingdom2026-05-20
1014Germany2026-06-14
1015India2026-06-02
1016Russia2026-06-13
1017Canada2026-05-21
1018Spain2026-05-24
1019Germany2026-05-25
1020Canada2026-05-30
1021France2026-06-12
1022Germany2026-05-19
1023Argentina2026-06-08
1024Spain2026-06-14
1025Germany2026-06-14
1026Japan2026-06-08
1027Brazil2026-06-10
1028Spain2026-06-08
1029Japan2026-06-15
1030Italy2026-06-17
1031Germany2026-06-14
1032Spain2026-06-03
1033France2026-05-20
1034Italy2026-06-10
1035United Kingdom2026-06-05
1036Canada2026-05-31
1037Australia2026-06-15
1038Australia2026-05-27
1039Canada2026-05-27
1040Germany2026-06-02
1041United Kingdom2026-06-16
1042Italy2026-05-26
1043Argentina2026-05-21
1044Spain2026-06-17
1045France2026-06-10
1046Brazil2026-05-22
1047Brazil2026-06-10
1048Italy2026-06-12
1049United Kingdom2026-06-03

On-Demand Data

NameIdCountryDate
Leja Caldarera1000Argentina2026-06-12
Maria Marrier1001Brazil2026-05-24
Aruna Figeroa1002India2026-05-19
Arvin Albares1003Germany2026-05-27
Ashley Doe1004Spain2026-06-13
Sinclair Waycott1005Australia2026-05-28
Juan Wieser1006Argentina2026-05-29
Aika Inouye1007France2026-05-29
Leon Oldroyd1008Russia2026-06-15
Alejandro Perin1009Germany2026-06-04
Alejandro Perin1010Spain2026-06-13
Jennifer Amigon1011Australia2026-06-07
Claire Tollner1012India2026-05-20
Clifford Rim1013India2026-06-02
Isabel Bowley1014France2026-06-12
Arvin Albares1015France2026-05-30
Emily Whobrey1016Japan2026-06-03
Greenwood Bolognia1017Brazil2026-06-01
Arvin Albares1018Spain2026-06-14
Leja Caldarera1019Germany2026-05-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Wickens NestleIndiaAmy Elsner NEGOTIATION
Greenwood BologniaIndiaBernardo Dominic RENEWAL
Smith GlickJapanXuxue Feng NEW
James ButtArgentinaAmy Elsner UNQUALIFIED
Ricardo GauchoArgentinaIvan Magalhaes UNQUALIFIED
James ButtJapanOnyama Limba NEW
Juan WieserJapanOnyama Limba RENEWAL
Jefferson SchemmerFranceIoni Bowcher NEW
Wickens NestleUnited KingdomAsiya Javayant NEW
Murillo MaletIndiaElwin Sharvill UNQUALIFIED
Tony FollerArgentinaIvan Magalhaes NEGOTIATION
Stacey MacleadRussiaXuxue Feng NEGOTIATION
Jefferson SchemmerGermanyIoni Bowcher UNQUALIFIED
Izzy GarufiAustraliaXuxue Feng NEGOTIATION
Antonio CaudyUnited KingdomBernardo Dominic RENEWAL
Clifford RimGermanyBernardo Dominic NEW
Salvatore StockhamIndiaStephen Shaw NEW
Clifford RimFranceAnna Fali QUALIFIED
Jones VocelkaSpainXuxue Feng NEW
Izzy GarufiArgentinaAmy Elsner UNQUALIFIED
Mujtaba NickaFranceAmy Elsner NEW
Tony FollerAustraliaIvan Magalhaes PROPOSAL
Darci PoquetteRussiaAnna Fali UNQUALIFIED
Morrow RutaUnited KingdomElwin Sharvill PROPOSAL
Stacey MacleadUnited KingdomIoni Bowcher NEW
Kadeem FlosiUnited KingdomElwin Sharvill PROPOSAL
Kaitlin OstroskyUnited KingdomAmy Elsner UNQUALIFIED
Mayumi KolmetzAustraliaIvan Magalhaes NEW
Salvatore StockhamGermanyOnyama Limba UNQUALIFIED
Adams MorascaAustraliaStephen Shaw NEGOTIATION
Mayumi KolmetzCanadaElwin Sharvill NEGOTIATION
Salvatore StockhamFranceBernardo Dominic UNQUALIFIED
Aika InouyeJapanOnyama Limba PROPOSAL
Julie StensethAustraliaAmy Elsner PROPOSAL
Aruna FigeroaAustraliaElwin Sharvill NEGOTIATION
Ricardo GauchoAustraliaAsiya Javayant UNQUALIFIED
Faith GillianCanadaAsiya Javayant UNQUALIFIED
Munro FerenczBrazilBernardo Dominic QUALIFIED
Adams MorascaCanadaStephen Shaw PROPOSAL
Arvin AlbaresRussiaOnyama Limba 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>