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
Isabel BowleyGermanyAsiya Javayant UNQUALIFIED
Kaitlin OstroskyUnited KingdomIoni Bowcher PROPOSAL
Silvio SlusarskiFranceOnyama Limba NEW
Ricardo GauchoUnited KingdomStephen Shaw PROPOSAL
Aruna FigeroaJapanIvan Magalhaes PROPOSAL
Aika InouyeBrazilAmy Elsner UNQUALIFIED
Leon OldroydGermanyAmy Elsner RENEWAL
Juan WieserArgentinaAmy Elsner QUALIFIED
Octavia MaletFranceStephen Shaw RENEWAL
Jeanfrancois VenereArgentinaStephen Shaw NEW
Arvin AlbaresCanadaOnyama Limba UNQUALIFIED
Aditya KuskoCanadaXuxue Feng PROPOSAL
Aruna FigeroaArgentinaIoni Bowcher NEW
Kadeem FlosiRussiaAmy Elsner PROPOSAL
Octavia MaletJapanIoni Bowcher NEW
Aika InouyeAustraliaBernardo Dominic RENEWAL
Maisha RulapaughUnited KingdomIoni Bowcher NEW
Mayumi KolmetzArgentinaAnna Fali NEW
Aika InouyeArgentinaXuxue Feng NEGOTIATION
Adams MorascaGermanyAsiya Javayant RENEWAL
Jefferson SchemmerCanadaOnyama Limba QUALIFIED
Izzy GarufiFranceXuxue Feng NEW
Jones VocelkaBrazilElwin Sharvill NEW
Leon OldroydItalyElwin Sharvill PROPOSAL
Silvio SlusarskiBrazilElwin Sharvill NEGOTIATION
Morrow RutaJapanIoni Bowcher QUALIFIED
Maria MarrierUnited KingdomAnna Fali UNQUALIFIED
Sinclair WaycottAustraliaBernardo Dominic NEGOTIATION
Octavia MaletItalyStephen Shaw UNQUALIFIED
Maisha RulapaughJapanIoni Bowcher RENEWAL
Maria MarrierIndiaAsiya Javayant NEW
Kadeem FlosiUnited KingdomIoni Bowcher QUALIFIED
Isabel BowleySpainStephen Shaw QUALIFIED
Faith GillianRussiaIvan Magalhaes NEGOTIATION
Isabel BowleySpainAmy Elsner UNQUALIFIED
David DarakjyFranceBernardo Dominic QUALIFIED
Ashley DoeCanadaOnyama Limba UNQUALIFIED
Tony FollerArgentinaBernardo Dominic UNQUALIFIED
Ivar PaprockiCanadaAmy Elsner NEW
Alejandro PerinCanadaIoni Bowcher UNQUALIFIED
Greenwood BologniaBrazilIvan Magalhaes PROPOSAL
Silvio SlusarskiUnited KingdomAmy Elsner PROPOSAL
Arvin AlbaresRussiaStephen Shaw NEGOTIATION
Ashley DoeCanadaAnna Fali NEGOTIATION
Clifford RimFranceOnyama Limba UNQUALIFIED
Costa DilliardFranceBernardo Dominic RENEWAL
Maisha RulapaughRussiaElwin Sharvill NEW
Emily WhobreyItalyElwin Sharvill QUALIFIED
Deepesh ChuiRussiaAnna Fali UNQUALIFIED
Chavez BriddickArgentinaAnna Fali RENEWAL
Horizontal
NameCountryRepresentativeStatus
Emily WhobreyAustraliaXuxue Feng NEGOTIATION
Maria MarrierIndiaIvan Magalhaes NEGOTIATION
Deepesh ChuiArgentinaAnna Fali NEGOTIATION
Jones VocelkaGermanyAsiya Javayant NEGOTIATION
Leon OldroydSpainStephen Shaw RENEWAL
Jeanfrancois VenereGermanyOnyama Limba QUALIFIED
Leja CaldareraGermanyXuxue Feng RENEWAL
Sinclair WaycottAustraliaBernardo Dominic NEGOTIATION
Munro FerenczGermanyXuxue Feng UNQUALIFIED
Isabel BowleyBrazilAmy Elsner RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Leon OldroydItaly2026-06-13King, Christopher A Esq QUALIFIED75Xuxue Feng
1001Nicolas IturbideRussia2026-06-07Buckley Miller Wright QUALIFIED63Xuxue Feng
1002Johnson SergiUnited Kingdom2026-05-24Dorl, James J Esq PROPOSAL33Elwin Sharvill
1003Johnson SergiJapan2026-06-04Chemel, James L Cpa NEGOTIATION1Stephen Shaw
1004Rodrigues CampainJapan2026-06-09Chemel, James L Cpa NEGOTIATION94Stephen Shaw
1005Jones VocelkaGermany2026-05-22Commercial Press NEGOTIATION42Xuxue Feng
1006Jefferson SchemmerArgentina2026-06-06Truhlar And Truhlar Attys PROPOSAL63Elwin Sharvill
1007Ashley DoeItaly2026-06-12Commercial Press QUALIFIED64Asiya Javayant
1008Izzy GarufiAustralia2026-05-23Chapman, Ross E Esq RENEWAL28Ioni Bowcher
1009James ButtIndia2026-06-07Commercial Press QUALIFIED79Ioni Bowcher
1010Morrow RutaBrazil2026-05-27Chanay, Jeffrey A Esq NEW1Asiya Javayant
1011Rodrigues CampainAustralia2026-06-09King, Christopher A Esq NEW73Xuxue Feng
1012Claire TollnerUnited Kingdom2026-05-29Printing Dimensions QUALIFIED46Ivan Magalhaes
1013Deepesh ChuiSpain2026-06-01Morlong Associates NEW91Anna Fali
1014Munro FerenczAustralia2026-05-31Benton, John B Jr PROPOSAL88Amy Elsner
1015Rodrigues CampainCanada2026-06-07Feltz Printing Service PROPOSAL4Bernardo Dominic
1016Izzy GarufiRussia2026-05-26Commercial Press RENEWAL77Onyama Limba
1017Adams MorascaRussia2026-05-31Feltz Printing Service NEGOTIATION50Asiya Javayant
1018Octavia MaletJapan2026-06-01Commercial Press NEW72Xuxue Feng
1019Jones VocelkaAustralia2026-05-21Chanay, Jeffrey A Esq PROPOSAL49Asiya Javayant
1020Juan WieserRussia2026-05-23Printing Dimensions RENEWAL85Ioni Bowcher
1021Ricardo GauchoFrance2026-05-29Chanay, Jeffrey A Esq NEW29Ioni Bowcher
1022Adams MorascaArgentina2026-06-01Morlong Associates UNQUALIFIED90Xuxue Feng
1023Juan WieserGermany2026-06-06Chapman, Ross E Esq QUALIFIED44Onyama Limba
1024Emily WhobreyArgentina2026-05-31Chapman, Ross E Esq NEGOTIATION65Xuxue Feng
1025Cody SaylorsGermany2026-06-05Dorl, James J Esq PROPOSAL9Onyama Limba
1026Adams MorascaJapan2026-06-07King, Christopher A Esq QUALIFIED2Onyama Limba
1027Julie StensethAustralia2026-05-21Dorl, James J Esq PROPOSAL94Onyama Limba
1028Greenwood BologniaItaly2026-06-12Rangoni Of Florence UNQUALIFIED71Stephen Shaw
1029Aruna FigeroaUnited Kingdom2026-06-09Buckley Miller Wright UNQUALIFIED79Onyama Limba
1030Misaki RoysterArgentina2026-06-03Feltz Printing Service NEW86Xuxue Feng
1031Rodrigues CampainUnited Kingdom2026-05-15Chanay, Jeffrey A Esq RENEWAL36Anna Fali
1032Morrow RutaFrance2026-05-22Printing Dimensions RENEWAL50Amy Elsner
1033Leja CaldareraFrance2026-06-10Feiner Bros RENEWAL95Elwin Sharvill
1034Maria MarrierCanada2026-05-25Chapman, Ross E Esq NEGOTIATION57Amy Elsner
1035Aditya KuskoSpain2026-05-22Dorl, James J Esq RENEWAL28Ivan Magalhaes
1036Ashley DoeGermany2026-06-12Chanay, Jeffrey A Esq PROPOSAL19Anna Fali
1037Misaki RoysterCanada2026-05-17Rousseaux, Michael Esq NEW90Amy Elsner
1038Morrow RutaSpain2026-05-27Dorl, James J Esq RENEWAL81Onyama Limba
1039Munro FerenczRussia2026-05-15Chemel, James L Cpa NEW64Ioni Bowcher
1040Leon OldroydJapan2026-05-18Printing Dimensions NEW50Asiya Javayant
1041Emily WhobreyFrance2026-06-06Chapman, Ross E Esq PROPOSAL74Onyama Limba
1042Juan WieserAustralia2026-06-08Morlong Associates UNQUALIFIED12Anna Fali
1043Darci PoquetteArgentina2026-06-07Rousseaux, Michael Esq RENEWAL63Amy Elsner
1044Arvin AlbaresIndia2026-05-30King, Christopher A Esq PROPOSAL35Elwin Sharvill
1045Clifford RimAustralia2026-05-29Dorl, James J Esq UNQUALIFIED18Stephen Shaw
1046Arvin AlbaresIndia2026-05-30Dorl, James J Esq NEGOTIATION3Amy Elsner
1047Julie StensethArgentina2026-05-19Chapman, Ross E Esq NEGOTIATION78Xuxue Feng
1048Chavez BriddickAustralia2026-06-01Feltz Printing Service RENEWAL86Xuxue Feng
1049Chavez BriddickSpain2026-06-02Rangoni Of Florence QUALIFIED35Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Leon OldroydUnited KingdomOnyama Limba QUALIFIED
Jennifer AmigonJapanAsiya Javayant PROPOSAL
Cody SaylorsArgentinaStephen Shaw QUALIFIED
Misaki RoysterCanadaAnna Fali UNQUALIFIED
Silvio SlusarskiSpainAnna Fali RENEWAL
Emily WhobreyRussiaAmy Elsner PROPOSAL
Jennifer AmigonSpainOnyama Limba RENEWAL
Aditya KuskoAustraliaAmy Elsner UNQUALIFIED
Leon OldroydFranceStephen Shaw PROPOSAL
Alejandro PerinItalyAsiya Javayant QUALIFIED
Munro FerenczSpainIoni Bowcher RENEWAL
Octavia MaletGermanyAnna Fali NEGOTIATION
Kadeem FlosiBrazilIvan Magalhaes NEGOTIATION
Maisha RulapaughRussiaAmy Elsner QUALIFIED
Ivar PaprockiSpainStephen Shaw NEW
Cody SaylorsBrazilAnna Fali RENEWAL
Costa DilliardFranceStephen Shaw RENEWAL
Octavia MaletRussiaAsiya Javayant QUALIFIED
James ButtFranceAsiya Javayant NEW
Alejandro PerinUnited KingdomIvan Magalhaes NEGOTIATION
Arvin AlbaresArgentinaOnyama Limba UNQUALIFIED
Deepesh ChuiItalyIoni Bowcher NEGOTIATION
David DarakjyCanadaXuxue Feng RENEWAL
Julie StensethJapanAnna Fali UNQUALIFIED
Nicolas IturbideFranceElwin Sharvill PROPOSAL
Aika InouyeCanadaElwin Sharvill PROPOSAL
Alejandro PerinRussiaAnna Fali NEW
Silvio SlusarskiAustraliaIvan Magalhaes RENEWAL
Tony FollerSpainStephen Shaw RENEWAL
Mayumi KolmetzFranceBernardo Dominic NEGOTIATION
Ashley DoeIndiaStephen Shaw PROPOSAL
David DarakjyCanadaAmy Elsner RENEWAL
Ashley DoeUnited KingdomXuxue Feng QUALIFIED
Greenwood BologniaFranceIvan Magalhaes NEGOTIATION
Leon OldroydGermanyXuxue Feng UNQUALIFIED
Ashley DoeSpainAnna Fali RENEWAL
Juan WieserCanadaIvan Magalhaes NEW
Maria MarrierJapanXuxue Feng PROPOSAL
Izzy GarufiCanadaStephen Shaw PROPOSAL
Greenwood BologniaCanadaBernardo Dominic QUALIFIED
Julie StensethGermanyAsiya Javayant NEW
Leon OldroydAustraliaAnna Fali PROPOSAL
Arvin AlbaresIndiaElwin Sharvill UNQUALIFIED
Ashley DoeItalyElwin Sharvill PROPOSAL
Rodrigues CampainBrazilBernardo Dominic QUALIFIED
Deepesh ChuiBrazilElwin Sharvill NEW
Aika InouyeGermanyXuxue Feng RENEWAL
James ButtBrazilIoni Bowcher QUALIFIED
Mujtaba NickaCanadaElwin Sharvill QUALIFIED
Antonio CaudyUnited KingdomStephen Shaw QUALIFIED
Frozen Columns
Name
Octavia Malet
Leja Caldarera
Julie Stenseth
Leja Caldarera
Octavia Malet
Sinclair Waycott
Jennifer Amigon
Adams Morasca
Cody Saylors
Ivar Paprocki
Claire Tollner
Aruna Figeroa
Wickens Nestle
Greenwood Bolognia
Cody Saylors
Mujtaba Nicka
Wickens Nestle
Leja Caldarera
Rodrigues Campain
Ricardo Gaucho
Rodrigues Campain
Emily Whobrey
Jeanfrancois Venere
Smith Glick
Salvatore Stockham
Sinclair Waycott
Aditya Kusko
Juan Wieser
Ricardo Gaucho
Johnson Sergi
Leja Caldarera
Sinclair Waycott
Leon Oldroyd
Salvatore Stockham
Leon Oldroyd
Alejandro Perin
Aika Inouye
Sinclair Waycott
David Darakjy
Sinclair Waycott
Smith Glick
Arvin Albares
Adams Morasca
Julie Stenseth
Costa Dilliard
Greenwood Bolognia
Smith Glick
David Darakjy
Julie Stenseth
Alejandro Perin
IdCountryDate
1000France2026-06-11
1001Canada2026-06-05
1002Spain2026-06-11
1003Russia2026-05-17
1004France2026-05-19
1005Australia2026-05-19
1006United Kingdom2026-05-23
1007Australia2026-05-17
1008Germany2026-06-04
1009Brazil2026-06-09
1010Canada2026-05-19
1011Japan2026-05-19
1012Spain2026-06-10
1013Germany2026-05-19
1014India2026-06-03
1015Russia2026-06-05
1016Germany2026-05-27
1017France2026-05-23
1018Japan2026-06-07
1019Australia2026-06-02
1020France2026-05-18
1021France2026-06-12
1022Argentina2026-05-27
1023Italy2026-06-11
1024Germany2026-05-20
1025Brazil2026-05-26
1026Brazil2026-06-11
1027Argentina2026-05-19
1028Spain2026-05-26
1029Germany2026-06-09
1030Australia2026-05-18
1031Italy2026-06-09
1032United Kingdom2026-06-10
1033France2026-06-07
1034Canada2026-06-08
1035France2026-05-18
1036Germany2026-05-18
1037Canada2026-06-01
1038United Kingdom2026-06-12
1039Spain2026-05-16
1040Brazil2026-06-08
1041India2026-05-21
1042Australia2026-05-16
1043India2026-05-18
1044Brazil2026-05-18
1045Australia2026-05-25
1046Germany2026-06-13
1047Brazil2026-06-13
1048Spain2026-06-11
1049United Kingdom2026-05-30

On-Demand Data

NameIdCountryDate
Darci Poquette1000Italy2026-05-28
Stacey Maclead1001Italy2026-06-04
Costa Dilliard1002Argentina2026-05-28
Emily Whobrey1003Canada2026-05-22
Mujtaba Nicka1004Germany2026-06-05
Jennifer Amigon1005Brazil2026-06-08
Aditya Kusko1006Russia2026-06-07
Wickens Nestle1007France2026-06-07
Aika Inouye1008Argentina2026-05-17
Antonio Caudy1009Spain2026-06-03
Wickens Nestle1010Russia2026-05-27
Deepesh Chui1011Russia2026-05-30
Arvin Albares1012United Kingdom2026-05-23
Juan Wieser1013Russia2026-05-21
Salvatore Stockham1014Russia2026-06-08
Faith Gillian1015Russia2026-06-06
Greenwood Bolognia1016Argentina2026-05-30
Claire Tollner1017Japan2026-05-15
Greenwood Bolognia1018Russia2026-05-23
Cody Saylors1019Spain2026-05-22
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Emily WhobreyArgentinaAnna Fali NEW
Ashley DoeGermanyIvan Magalhaes PROPOSAL
Smith GlickCanadaIvan Magalhaes UNQUALIFIED
Darci PoquetteJapanIoni Bowcher UNQUALIFIED
Aditya KuskoIndiaAsiya Javayant UNQUALIFIED
Morrow RutaUnited KingdomAmy Elsner UNQUALIFIED
Aditya KuskoAustraliaOnyama Limba NEGOTIATION
Maria MarrierIndiaIoni Bowcher PROPOSAL
Julie StensethFranceAsiya Javayant NEGOTIATION
Salvatore StockhamItalyIoni Bowcher NEGOTIATION
Mayumi KolmetzSpainAnna Fali RENEWAL
Adams MorascaJapanXuxue Feng QUALIFIED
Maria MarrierArgentinaAsiya Javayant NEGOTIATION
Alejandro PerinGermanyAnna Fali UNQUALIFIED
Morrow RutaGermanyBernardo Dominic NEW
Cody SaylorsAustraliaAnna Fali QUALIFIED
David DarakjyAustraliaStephen Shaw PROPOSAL
Darci PoquetteItalyStephen Shaw UNQUALIFIED
Deepesh ChuiBrazilIoni Bowcher QUALIFIED
Ivar PaprockiFranceOnyama Limba UNQUALIFIED
Ivar PaprockiSpainOnyama Limba PROPOSAL
Johnson SergiJapanOnyama Limba UNQUALIFIED
Misaki RoysterItalyBernardo Dominic UNQUALIFIED
Mujtaba NickaIndiaAnna Fali NEGOTIATION
Jennifer AmigonJapanIvan Magalhaes RENEWAL
Ricardo GauchoIndiaXuxue Feng UNQUALIFIED
Wickens NestleCanadaBernardo Dominic QUALIFIED
Maisha RulapaughGermanyElwin Sharvill NEGOTIATION
Mujtaba NickaFranceElwin Sharvill RENEWAL
Leon OldroydCanadaAnna Fali NEGOTIATION
Ashley DoeIndiaAnna Fali RENEWAL
Jones VocelkaFranceIoni Bowcher PROPOSAL
Leon OldroydUnited KingdomAnna Fali RENEWAL
Salvatore StockhamRussiaBernardo Dominic UNQUALIFIED
Claire TollnerRussiaElwin Sharvill NEW
Aika InouyeSpainIvan Magalhaes UNQUALIFIED
Adams MorascaItalyBernardo Dominic QUALIFIED
Clifford RimAustraliaAmy Elsner UNQUALIFIED
Julie StensethCanadaAnna Fali RENEWAL
Clifford RimAustraliaBernardo Dominic 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>