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
Juan WieserGermanyAnna Fali PROPOSAL
Jones VocelkaItalyStephen Shaw RENEWAL
Juan WieserGermanyAmy Elsner NEW
Smith GlickFranceAsiya Javayant RENEWAL
Salvatore StockhamAustraliaIvan Magalhaes QUALIFIED
Deepesh ChuiGermanyBernardo Dominic NEW
Darci PoquetteSpainAmy Elsner UNQUALIFIED
Rodrigues CampainGermanyAsiya Javayant NEGOTIATION
Faith GillianIndiaOnyama Limba PROPOSAL
Silvio SlusarskiBrazilAmy Elsner PROPOSAL
Stacey MacleadItalyAmy Elsner QUALIFIED
Chavez BriddickAustraliaOnyama Limba RENEWAL
Aruna FigeroaRussiaOnyama Limba QUALIFIED
Kadeem FlosiUnited KingdomStephen Shaw QUALIFIED
Juan WieserUnited KingdomStephen Shaw RENEWAL
Antonio CaudyCanadaBernardo Dominic QUALIFIED
Rodrigues CampainFranceAmy Elsner NEGOTIATION
Kaitlin OstroskySpainXuxue Feng NEW
Morrow RutaArgentinaIoni Bowcher PROPOSAL
Tony FollerSpainOnyama Limba NEGOTIATION
Munro FerenczArgentinaIoni Bowcher NEW
Aika InouyeRussiaIoni Bowcher UNQUALIFIED
Mayumi KolmetzBrazilBernardo Dominic NEW
Antonio CaudyGermanyIvan Magalhaes QUALIFIED
Murillo MaletBrazilStephen Shaw RENEWAL
Silvio SlusarskiItalyIoni Bowcher UNQUALIFIED
Claire TollnerFranceIvan Magalhaes NEGOTIATION
Smith GlickUnited KingdomElwin Sharvill UNQUALIFIED
Cody SaylorsFranceOnyama Limba UNQUALIFIED
Juan WieserFranceAsiya Javayant NEGOTIATION
Leja CaldareraSpainAmy Elsner PROPOSAL
Izzy GarufiCanadaAsiya Javayant NEW
Kadeem FlosiFranceOnyama Limba RENEWAL
Ricardo GauchoGermanyBernardo Dominic PROPOSAL
Nicolas IturbideFranceStephen Shaw UNQUALIFIED
Claire TollnerJapanAnna Fali QUALIFIED
Arvin AlbaresUnited KingdomIvan Magalhaes UNQUALIFIED
Chavez BriddickBrazilIvan Magalhaes QUALIFIED
Antonio CaudyCanadaAnna Fali RENEWAL
Nicolas IturbideIndiaBernardo Dominic RENEWAL
Isabel BowleyItalyIoni Bowcher QUALIFIED
Leja CaldareraFranceIoni Bowcher NEGOTIATION
Misaki RoysterUnited KingdomAnna Fali PROPOSAL
Smith GlickUnited KingdomStephen Shaw NEW
Aditya KuskoBrazilXuxue Feng PROPOSAL
Kaitlin OstroskyArgentinaElwin Sharvill NEW
Morrow RutaJapanOnyama Limba RENEWAL
Ashley DoeItalyIvan Magalhaes QUALIFIED
Costa DilliardBrazilAnna Fali NEGOTIATION
Darci PoquetteRussiaAnna Fali NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Leon OldroydJapanBernardo Dominic NEW
Leja CaldareraAustraliaElwin Sharvill NEW
Izzy GarufiRussiaAnna Fali RENEWAL
Arvin AlbaresSpainAsiya Javayant UNQUALIFIED
Aika InouyeIndiaXuxue Feng PROPOSAL
Juan WieserCanadaBernardo Dominic RENEWAL
Aditya KuskoItalyOnyama Limba PROPOSAL
Aditya KuskoCanadaOnyama Limba UNQUALIFIED
David DarakjyGermanyOnyama Limba QUALIFIED
Tony FollerFranceIvan Magalhaes NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Salvatore StockhamGermany2026-04-30Chanay, Jeffrey A Esq PROPOSAL21Asiya Javayant
1001Ashley DoeGermany2026-04-29Feiner Bros QUALIFIED45Xuxue Feng
1002Darci PoquetteCanada2026-05-02King, Christopher A Esq UNQUALIFIED80Xuxue Feng
1003Chavez BriddickJapan2026-05-19Feiner Bros UNQUALIFIED31Elwin Sharvill
1004Wickens NestleUnited Kingdom2026-05-12Rousseaux, Michael Esq RENEWAL80Anna Fali
1005Murillo MaletRussia2026-05-24Benton, John B Jr QUALIFIED39Ivan Magalhaes
1006Mujtaba NickaUnited Kingdom2026-05-14Rangoni Of Florence QUALIFIED83Stephen Shaw
1007Morrow RutaJapan2026-05-01Truhlar And Truhlar Attys PROPOSAL36Xuxue Feng
1008Octavia MaletGermany2026-05-07Chemel, James L Cpa NEGOTIATION95Anna Fali
1009Maisha RulapaughGermany2026-05-08Buckley Miller Wright PROPOSAL69Asiya Javayant
1010Jones VocelkaGermany2026-05-10Chemel, James L Cpa NEGOTIATION26Asiya Javayant
1011Tony FollerUnited Kingdom2026-04-28Chemel, James L Cpa UNQUALIFIED81Anna Fali
1012Silvio SlusarskiJapan2026-04-29Buckley Miller Wright RENEWAL41Stephen Shaw
1013Maisha RulapaughFrance2026-04-29Benton, John B Jr QUALIFIED55Amy Elsner
1014Deepesh ChuiItaly2026-05-19Rousseaux, Michael Esq QUALIFIED52Elwin Sharvill
1015Greenwood BologniaAustralia2026-04-29Feiner Bros NEW25Bernardo Dominic
1016James ButtArgentina2026-05-17Buckley Miller Wright QUALIFIED19Elwin Sharvill
1017Munro FerenczAustralia2026-05-19Chemel, James L Cpa RENEWAL72Ivan Magalhaes
1018Cody SaylorsSpain2026-05-26Commercial Press NEGOTIATION51Stephen Shaw
1019Misaki RoysterRussia2026-05-13Commercial Press QUALIFIED30Ivan Magalhaes
1020Juan WieserArgentina2026-05-08Commercial Press QUALIFIED42Ivan Magalhaes
1021Chavez BriddickGermany2026-05-16Rangoni Of Florence UNQUALIFIED73Bernardo Dominic
1022Rodrigues CampainItaly2026-05-19Feiner Bros NEW14Ivan Magalhaes
1023Claire TollnerArgentina2026-05-19Chanay, Jeffrey A Esq NEW9Amy Elsner
1024Wickens NestleSpain2026-05-25Chanay, Jeffrey A Esq NEGOTIATION46Ivan Magalhaes
1025Nicolas IturbideFrance2026-05-03Feltz Printing Service NEW49Asiya Javayant
1026Emily WhobreySpain2026-05-18Chanay, Jeffrey A Esq QUALIFIED97Xuxue Feng
1027Juan WieserUnited Kingdom2026-05-04Chapman, Ross E Esq NEGOTIATION12Xuxue Feng
1028Salvatore StockhamArgentina2026-05-27King, Christopher A Esq PROPOSAL56Xuxue Feng
1029Ashley DoeRussia2026-05-23Buckley Miller Wright QUALIFIED32Xuxue Feng
1030Maria MarrierGermany2026-05-20Chemel, James L Cpa NEW7Elwin Sharvill
1031Isabel BowleyRussia2026-05-12Feltz Printing Service NEW15Amy Elsner
1032Jeanfrancois VenereArgentina2026-04-28King, Christopher A Esq RENEWAL31Ioni Bowcher
1033David DarakjyUnited Kingdom2026-05-23Feltz Printing Service NEGOTIATION68Stephen Shaw
1034David DarakjyBrazil2026-05-16Feltz Printing Service RENEWAL92Ioni Bowcher
1035Leon OldroydUnited Kingdom2026-05-06Benton, John B Jr QUALIFIED63Ioni Bowcher
1036Leja CaldareraArgentina2026-05-16Rousseaux, Michael Esq PROPOSAL49Anna Fali
1037Stacey MacleadFrance2026-04-29Benton, John B Jr NEW33Onyama Limba
1038Leja CaldareraCanada2026-05-01Chanay, Jeffrey A Esq RENEWAL27Stephen Shaw
1039Costa DilliardCanada2026-05-01Commercial Press PROPOSAL10Asiya Javayant
1040David DarakjyGermany2026-05-26Rangoni Of Florence NEW38Onyama Limba
1041Ricardo GauchoItaly2026-05-20Chanay, Jeffrey A Esq NEW9Stephen Shaw
1042Murillo MaletSpain2026-05-02Rousseaux, Michael Esq NEGOTIATION5Elwin Sharvill
1043Claire TollnerFrance2026-05-18Morlong Associates UNQUALIFIED47Ivan Magalhaes
1044Maisha RulapaughIndia2026-05-25Feltz Printing Service RENEWAL70Elwin Sharvill
1045Alejandro PerinRussia2026-05-03Commercial Press QUALIFIED72Amy Elsner
1046Ashley DoeUnited Kingdom2026-05-09Truhlar And Truhlar Attys QUALIFIED24Bernardo Dominic
1047Johnson SergiCanada2026-05-04Dorl, James J Esq QUALIFIED35Ivan Magalhaes
1048Aruna FigeroaGermany2026-05-20Truhlar And Truhlar Attys NEW89Anna Fali
1049Sinclair WaycottFrance2026-05-16Rousseaux, Michael Esq NEW1Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Arvin AlbaresJapanStephen Shaw NEW
Morrow RutaItalyXuxue Feng RENEWAL
Kaitlin OstroskyCanadaXuxue Feng NEW
Leja CaldareraArgentinaIvan Magalhaes PROPOSAL
Faith GillianSpainOnyama Limba QUALIFIED
Faith GillianCanadaIvan Magalhaes UNQUALIFIED
Cody SaylorsIndiaIoni Bowcher PROPOSAL
Jeanfrancois VenereCanadaOnyama Limba UNQUALIFIED
Jennifer AmigonUnited KingdomAmy Elsner NEGOTIATION
Octavia MaletJapanStephen Shaw PROPOSAL
Ivar PaprockiGermanyStephen Shaw QUALIFIED
Julie StensethGermanyAsiya Javayant QUALIFIED
Jeanfrancois VenereJapanAnna Fali QUALIFIED
Aika InouyeItalyBernardo Dominic QUALIFIED
Izzy GarufiArgentinaAsiya Javayant QUALIFIED
Adams MorascaGermanyIvan Magalhaes NEW
Mayumi KolmetzFranceIoni Bowcher NEW
Jones VocelkaIndiaOnyama Limba UNQUALIFIED
Sinclair WaycottGermanyAnna Fali NEW
Stacey MacleadRussiaIvan Magalhaes PROPOSAL
Rodrigues CampainGermanyElwin Sharvill NEGOTIATION
Silvio SlusarskiAustraliaOnyama Limba NEGOTIATION
Leja CaldareraBrazilAmy Elsner NEGOTIATION
Isabel BowleyIndiaXuxue Feng RENEWAL
David DarakjyFranceXuxue Feng QUALIFIED
Izzy GarufiBrazilElwin Sharvill QUALIFIED
Johnson SergiGermanyElwin Sharvill PROPOSAL
Silvio SlusarskiItalyBernardo Dominic NEW
Izzy GarufiSpainAsiya Javayant NEGOTIATION
Jefferson SchemmerRussiaBernardo Dominic QUALIFIED
Jennifer AmigonAustraliaIvan Magalhaes NEW
Francesco ShinkoFranceOnyama Limba NEW
Mujtaba NickaFranceAmy Elsner QUALIFIED
Clifford RimFranceIoni Bowcher PROPOSAL
Julie StensethFranceElwin Sharvill NEGOTIATION
Greenwood BologniaIndiaIoni Bowcher NEW
Mayumi KolmetzCanadaIvan Magalhaes NEGOTIATION
Murillo MaletUnited KingdomAsiya Javayant RENEWAL
Isabel BowleyBrazilAsiya Javayant RENEWAL
Leja CaldareraBrazilXuxue Feng RENEWAL
Nicolas IturbideFranceXuxue Feng UNQUALIFIED
Mujtaba NickaUnited KingdomIoni Bowcher UNQUALIFIED
Smith GlickAustraliaStephen Shaw PROPOSAL
Ivar PaprockiItalyAmy Elsner NEGOTIATION
Misaki RoysterAustraliaIvan Magalhaes NEW
Ricardo GauchoRussiaBernardo Dominic PROPOSAL
Rodrigues CampainFranceAnna Fali NEGOTIATION
Izzy GarufiFranceIoni Bowcher QUALIFIED
Murillo MaletUnited KingdomIoni Bowcher RENEWAL
Aditya KuskoJapanAsiya Javayant NEW
Frozen Columns
Name
James Butt
Antonio Caudy
Juan Wieser
Aditya Kusko
Aditya Kusko
Alejandro Perin
Mujtaba Nicka
Deepesh Chui
Smith Glick
Smith Glick
Aika Inouye
Costa Dilliard
Morrow Ruta
Wickens Nestle
Arvin Albares
Cody Saylors
Leja Caldarera
Ricardo Gaucho
Munro Ferencz
Ricardo Gaucho
Sinclair Waycott
Antonio Caudy
Octavia Malet
Chavez Briddick
Rodrigues Campain
Jennifer Amigon
Alejandro Perin
Leon Oldroyd
Silvio Slusarski
Cody Saylors
Faith Gillian
Munro Ferencz
Juan Wieser
Isabel Bowley
Octavia Malet
Kaitlin Ostrosky
Wickens Nestle
Maisha Rulapaugh
Aruna Figeroa
Silvio Slusarski
Silvio Slusarski
Octavia Malet
Isabel Bowley
James Butt
Alejandro Perin
Morrow Ruta
Ivar Paprocki
Alejandro Perin
Claire Tollner
Julie Stenseth
IdCountryDate
1000France2026-05-24
1001United Kingdom2026-05-11
1002Italy2026-05-25
1003Russia2026-04-28
1004Australia2026-05-27
1005United Kingdom2026-05-18
1006Italy2026-05-20
1007Australia2026-05-10
1008India2026-05-03
1009Australia2026-05-06
1010Argentina2026-05-07
1011Japan2026-04-29
1012United Kingdom2026-05-23
1013Germany2026-05-03
1014India2026-05-14
1015France2026-04-30
1016France2026-05-02
1017Russia2026-05-01
1018Brazil2026-05-02
1019Russia2026-05-25
1020India2026-05-03
1021France2026-05-13
1022Argentina2026-05-27
1023Argentina2026-05-20
1024United Kingdom2026-05-14
1025Canada2026-05-25
1026India2026-04-30
1027Russia2026-05-12
1028India2026-05-03
1029Argentina2026-05-04
1030Russia2026-05-22
1031Japan2026-05-10
1032Australia2026-05-24
1033Spain2026-05-04
1034Germany2026-05-22
1035Australia2026-05-02
1036Spain2026-05-11
1037United Kingdom2026-05-24
1038Germany2026-05-04
1039United Kingdom2026-05-20
1040Italy2026-05-19
1041Argentina2026-05-17
1042Japan2026-05-20
1043France2026-05-22
1044United Kingdom2026-05-10
1045Italy2026-05-04
1046Japan2026-05-06
1047Germany2026-05-07
1048India2026-05-16
1049Japan2026-05-15

On-Demand Data

NameIdCountryDate
Deepesh Chui1000United Kingdom2026-05-11
Adams Morasca1001Canada2026-05-15
Nicolas Iturbide1002France2026-05-03
Jennifer Amigon1003Argentina2026-05-10
David Darakjy1004Japan2026-05-15
Tony Foller1005Japan2026-05-07
Wickens Nestle1006Argentina2026-05-17
Aruna Figeroa1007Brazil2026-05-11
Alejandro Perin1008India2026-05-12
Antonio Caudy1009France2026-05-03
Murillo Malet1010Japan2026-05-08
Ricardo Gaucho1011Argentina2026-05-04
Jennifer Amigon1012Australia2026-04-28
Sinclair Waycott1013Russia2026-04-30
Johnson Sergi1014Spain2026-05-22
Stacey Maclead1015Argentina2026-05-20
Johnson Sergi1016Russia2026-05-15
Jefferson Schemmer1017Germany2026-04-29
Arvin Albares1018Argentina2026-05-15
Morrow Ruta1019United Kingdom2026-05-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Costa DilliardUnited KingdomAmy Elsner RENEWAL
Kaitlin OstroskyFranceStephen Shaw UNQUALIFIED
Octavia MaletRussiaStephen Shaw PROPOSAL
Murillo MaletGermanyElwin Sharvill PROPOSAL
Sinclair WaycottBrazilIvan Magalhaes NEW
Francesco ShinkoSpainStephen Shaw NEW
Murillo MaletBrazilIvan Magalhaes PROPOSAL
Isabel BowleyBrazilOnyama Limba NEW
Maria MarrierBrazilElwin Sharvill QUALIFIED
Maisha RulapaughItalyIoni Bowcher PROPOSAL
Izzy GarufiArgentinaAnna Fali PROPOSAL
Chavez BriddickRussiaXuxue Feng RENEWAL
Emily WhobreyCanadaAnna Fali PROPOSAL
Emily WhobreyItalyIoni Bowcher UNQUALIFIED
Julie StensethArgentinaOnyama Limba UNQUALIFIED
Rodrigues CampainItalyAnna Fali UNQUALIFIED
Ashley DoeCanadaStephen Shaw PROPOSAL
Kadeem FlosiArgentinaAmy Elsner NEGOTIATION
Munro FerenczGermanyElwin Sharvill QUALIFIED
Clifford RimBrazilAsiya Javayant PROPOSAL
Julie StensethItalyXuxue Feng UNQUALIFIED
Deepesh ChuiGermanyBernardo Dominic PROPOSAL
Isabel BowleyItalyAnna Fali NEW
James ButtSpainBernardo Dominic NEGOTIATION
Isabel BowleyAustraliaStephen Shaw NEGOTIATION
Francesco ShinkoItalyOnyama Limba RENEWAL
Mujtaba NickaRussiaIoni Bowcher PROPOSAL
Aruna FigeroaBrazilXuxue Feng UNQUALIFIED
Jefferson SchemmerCanadaStephen Shaw QUALIFIED
Antonio CaudyAustraliaAnna Fali QUALIFIED
Kadeem FlosiArgentinaStephen Shaw PROPOSAL
Arvin AlbaresArgentinaIoni Bowcher QUALIFIED
Faith GillianRussiaBernardo Dominic NEGOTIATION
Aditya KuskoRussiaIoni Bowcher RENEWAL
Aika InouyeUnited KingdomElwin Sharvill PROPOSAL
Silvio SlusarskiFranceStephen Shaw QUALIFIED
Aruna FigeroaUnited KingdomXuxue Feng RENEWAL
Arvin AlbaresArgentinaAnna Fali PROPOSAL
Clifford RimGermanyAmy Elsner NEGOTIATION
Arvin AlbaresArgentinaElwin Sharvill 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>