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
Aditya KuskoCanadaStephen Shaw PROPOSAL
Tony FollerItalyOnyama Limba PROPOSAL
Leja CaldareraArgentinaIoni Bowcher RENEWAL
Jefferson SchemmerAustraliaElwin Sharvill NEW
Aditya KuskoJapanAnna Fali QUALIFIED
Greenwood BologniaJapanIvan Magalhaes QUALIFIED
Costa DilliardAustraliaAmy Elsner NEGOTIATION
James ButtBrazilIvan Magalhaes PROPOSAL
Octavia MaletItalyElwin Sharvill RENEWAL
Maria MarrierAustraliaIvan Magalhaes UNQUALIFIED
Misaki RoysterIndiaIvan Magalhaes RENEWAL
Deepesh ChuiItalyIvan Magalhaes QUALIFIED
Aika InouyeCanadaBernardo Dominic PROPOSAL
Jeanfrancois VenereBrazilIvan Magalhaes UNQUALIFIED
Claire TollnerRussiaElwin Sharvill PROPOSAL
Isabel BowleyGermanyIoni Bowcher RENEWAL
Johnson SergiAustraliaXuxue Feng PROPOSAL
Aditya KuskoArgentinaOnyama Limba QUALIFIED
Kadeem FlosiAustraliaAnna Fali RENEWAL
Silvio SlusarskiItalyElwin Sharvill NEW
Alejandro PerinGermanyIoni Bowcher NEW
Mujtaba NickaFranceOnyama Limba NEGOTIATION
Leon OldroydCanadaOnyama Limba PROPOSAL
Jennifer AmigonRussiaIoni Bowcher PROPOSAL
Smith GlickUnited KingdomElwin Sharvill UNQUALIFIED
Wickens NestleIndiaStephen Shaw UNQUALIFIED
Smith GlickBrazilAnna Fali UNQUALIFIED
Leon OldroydUnited KingdomIoni Bowcher UNQUALIFIED
Deepesh ChuiJapanAmy Elsner UNQUALIFIED
Johnson SergiUnited KingdomOnyama Limba UNQUALIFIED
Maria MarrierCanadaIoni Bowcher PROPOSAL
Arvin AlbaresSpainIoni Bowcher RENEWAL
Mujtaba NickaItalyIoni Bowcher NEGOTIATION
Octavia MaletGermanyBernardo Dominic NEW
Johnson SergiSpainBernardo Dominic NEW
Alejandro PerinFranceAnna Fali RENEWAL
Isabel BowleyCanadaAmy Elsner NEW
Arvin AlbaresSpainXuxue Feng RENEWAL
Morrow RutaIndiaStephen Shaw PROPOSAL
Deepesh ChuiUnited KingdomIoni Bowcher NEW
Maria MarrierRussiaStephen Shaw NEW
Ricardo GauchoUnited KingdomIoni Bowcher UNQUALIFIED
Kadeem FlosiItalyIoni Bowcher NEGOTIATION
Julie StensethSpainAnna Fali UNQUALIFIED
Aditya KuskoUnited KingdomStephen Shaw QUALIFIED
Octavia MaletAustraliaIvan Magalhaes PROPOSAL
Maria MarrierRussiaIvan Magalhaes UNQUALIFIED
Mujtaba NickaRussiaStephen Shaw NEW
Alejandro PerinIndiaElwin Sharvill PROPOSAL
Darci PoquetteJapanIvan Magalhaes NEW
Horizontal
NameCountryRepresentativeStatus
David DarakjyArgentinaIvan Magalhaes UNQUALIFIED
Misaki RoysterGermanyStephen Shaw NEGOTIATION
Clifford RimArgentinaIvan Magalhaes RENEWAL
Arvin AlbaresIndiaAnna Fali PROPOSAL
Costa DilliardSpainOnyama Limba RENEWAL
Murillo MaletFranceBernardo Dominic NEGOTIATION
Isabel BowleyGermanyXuxue Feng RENEWAL
Wickens NestleBrazilStephen Shaw QUALIFIED
Costa DilliardUnited KingdomStephen Shaw NEW
Isabel BowleyArgentinaIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Alejandro PerinArgentina2026-06-18Chapman, Ross E Esq UNQUALIFIED4Bernardo Dominic
1001Cody SaylorsIndia2026-06-08Dorl, James J Esq NEGOTIATION91Ivan Magalhaes
1002Smith GlickFrance2026-06-12Dorl, James J Esq QUALIFIED84Elwin Sharvill
1003Wickens NestleItaly2026-06-02Buckley Miller Wright QUALIFIED7Xuxue Feng
1004Nicolas IturbideJapan2026-06-01Rangoni Of Florence UNQUALIFIED65Stephen Shaw
1005Isabel BowleyArgentina2026-06-18Rangoni Of Florence NEGOTIATION6Ioni Bowcher
1006Leja CaldareraSpain2026-06-09Chanay, Jeffrey A Esq QUALIFIED29Xuxue Feng
1007Jones VocelkaCanada2026-05-31Feltz Printing Service NEW11Ioni Bowcher
1008Kadeem FlosiGermany2026-06-13Chanay, Jeffrey A Esq RENEWAL64Onyama Limba
1009Murillo MaletFrance2026-05-23Printing Dimensions RENEWAL43Amy Elsner
1010Ricardo GauchoBrazil2026-06-09Benton, John B Jr NEGOTIATION45Stephen Shaw
1011Chavez BriddickRussia2026-06-06Buckley Miller Wright UNQUALIFIED54Ivan Magalhaes
1012Murillo MaletBrazil2026-06-01Rousseaux, Michael Esq RENEWAL96Xuxue Feng
1013Tony FollerIndia2026-06-16Feiner Bros UNQUALIFIED23Xuxue Feng
1014Kadeem FlosiArgentina2026-06-07Feiner Bros QUALIFIED58Anna Fali
1015Greenwood BologniaRussia2026-06-14Dorl, James J Esq NEGOTIATION22Bernardo Dominic
1016Murillo MaletItaly2026-06-03Benton, John B Jr PROPOSAL22Ioni Bowcher
1017Jones VocelkaRussia2026-06-16Feiner Bros QUALIFIED42Anna Fali
1018Tony FollerFrance2026-05-24King, Christopher A Esq UNQUALIFIED46Stephen Shaw
1019Mayumi KolmetzArgentina2026-06-04Dorl, James J Esq RENEWAL47Ioni Bowcher
1020Izzy GarufiFrance2026-06-05Feltz Printing Service PROPOSAL71Onyama Limba
1021Faith GillianAustralia2026-05-24Buckley Miller Wright UNQUALIFIED73Asiya Javayant
1022Leon OldroydGermany2026-05-27Chanay, Jeffrey A Esq NEGOTIATION89Bernardo Dominic
1023Alejandro PerinCanada2026-05-24Feltz Printing Service RENEWAL50Asiya Javayant
1024Munro FerenczCanada2026-05-25Chapman, Ross E Esq NEW88Elwin Sharvill
1025Jeanfrancois VenereArgentina2026-06-09Chemel, James L Cpa UNQUALIFIED73Amy Elsner
1026Salvatore StockhamFrance2026-06-16Dorl, James J Esq PROPOSAL70Asiya Javayant
1027Leon OldroydCanada2026-06-01Printing Dimensions UNQUALIFIED65Ioni Bowcher
1028Ivar PaprockiCanada2026-05-23Buckley Miller Wright UNQUALIFIED68Amy Elsner
1029Jefferson SchemmerArgentina2026-05-28Morlong Associates QUALIFIED87Xuxue Feng
1030Ivar PaprockiRussia2026-06-04Printing Dimensions RENEWAL64Ivan Magalhaes
1031Cody SaylorsJapan2026-06-06Chapman, Ross E Esq UNQUALIFIED39Stephen Shaw
1032Maisha RulapaughBrazil2026-06-18Feiner Bros RENEWAL74Elwin Sharvill
1033Morrow RutaIndia2026-06-18Buckley Miller Wright PROPOSAL30Amy Elsner
1034Cody SaylorsItaly2026-06-13Rangoni Of Florence NEGOTIATION57Stephen Shaw
1035Rodrigues CampainUnited Kingdom2026-05-31Chapman, Ross E Esq RENEWAL53Elwin Sharvill
1036Octavia MaletCanada2026-06-13Morlong Associates NEGOTIATION45Ivan Magalhaes
1037Ivar PaprockiIndia2026-05-23Chanay, Jeffrey A Esq PROPOSAL76Bernardo Dominic
1038Ashley DoeUnited Kingdom2026-06-15Feiner Bros UNQUALIFIED68Onyama Limba
1039Maria MarrierJapan2026-06-02Dorl, James J Esq PROPOSAL63Asiya Javayant
1040Tony FollerItaly2026-06-04Rousseaux, Michael Esq QUALIFIED99Xuxue Feng
1041Aruna FigeroaCanada2026-06-01Feltz Printing Service QUALIFIED22Anna Fali
1042Munro FerenczBrazil2026-05-21Feltz Printing Service RENEWAL81Stephen Shaw
1043Salvatore StockhamRussia2026-06-07King, Christopher A Esq RENEWAL94Ivan Magalhaes
1044Claire TollnerArgentina2026-05-24Rangoni Of Florence NEW38Bernardo Dominic
1045Arvin AlbaresItaly2026-06-05Commercial Press RENEWAL95Onyama Limba
1046Jones VocelkaJapan2026-05-20Printing Dimensions QUALIFIED83Bernardo Dominic
1047Ivar PaprockiCanada2026-05-24Buckley Miller Wright RENEWAL84Amy Elsner
1048Nicolas IturbideSpain2026-05-25Feiner Bros RENEWAL75Ivan Magalhaes
1049Arvin AlbaresAustralia2026-05-30Dorl, James J Esq RENEWAL99Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
James ButtCanadaAmy Elsner NEW
Octavia MaletAustraliaAmy Elsner NEW
Alejandro PerinBrazilIoni Bowcher RENEWAL
Nicolas IturbideGermanyAsiya Javayant RENEWAL
Isabel BowleyItalyAmy Elsner NEGOTIATION
Julie StensethIndiaOnyama Limba QUALIFIED
Chavez BriddickCanadaElwin Sharvill QUALIFIED
Munro FerenczIndiaIvan Magalhaes NEW
Rodrigues CampainAustraliaIoni Bowcher RENEWAL
Leja CaldareraArgentinaBernardo Dominic NEW
Cody SaylorsJapanXuxue Feng UNQUALIFIED
Misaki RoysterItalyXuxue Feng UNQUALIFIED
Clifford RimIndiaIvan Magalhaes PROPOSAL
Murillo MaletBrazilXuxue Feng NEGOTIATION
Ashley DoeCanadaXuxue Feng PROPOSAL
Claire TollnerBrazilAnna Fali UNQUALIFIED
Aditya KuskoAustraliaOnyama Limba NEGOTIATION
Kaitlin OstroskyFranceAsiya Javayant NEGOTIATION
Clifford RimCanadaAsiya Javayant NEW
Alejandro PerinFranceXuxue Feng NEW
Maisha RulapaughCanadaAnna Fali NEGOTIATION
Darci PoquetteUnited KingdomBernardo Dominic PROPOSAL
Jefferson SchemmerFranceAsiya Javayant UNQUALIFIED
Sinclair WaycottArgentinaAnna Fali UNQUALIFIED
Deepesh ChuiSpainXuxue Feng PROPOSAL
Wickens NestleJapanAsiya Javayant PROPOSAL
Claire TollnerSpainIoni Bowcher QUALIFIED
Julie StensethItalyAnna Fali QUALIFIED
Faith GillianAustraliaStephen Shaw QUALIFIED
Jeanfrancois VenereArgentinaOnyama Limba NEGOTIATION
Tony FollerIndiaElwin Sharvill RENEWAL
Isabel BowleyUnited KingdomOnyama Limba NEGOTIATION
Jefferson SchemmerBrazilAmy Elsner QUALIFIED
Kadeem FlosiFranceElwin Sharvill UNQUALIFIED
Arvin AlbaresItalyAnna Fali PROPOSAL
Costa DilliardJapanStephen Shaw NEW
Ricardo GauchoItalyStephen Shaw QUALIFIED
Misaki RoysterArgentinaAnna Fali PROPOSAL
Faith GillianSpainBernardo Dominic NEW
Jennifer AmigonArgentinaAsiya Javayant PROPOSAL
Mayumi KolmetzArgentinaOnyama Limba NEW
Tony FollerSpainBernardo Dominic RENEWAL
Ashley DoeRussiaIvan Magalhaes NEW
Jefferson SchemmerItalyAmy Elsner UNQUALIFIED
Maisha RulapaughFranceIvan Magalhaes UNQUALIFIED
Smith GlickAustraliaElwin Sharvill NEW
Ashley DoeItalyAmy Elsner PROPOSAL
Greenwood BologniaBrazilOnyama Limba QUALIFIED
Johnson SergiArgentinaAmy Elsner RENEWAL
Isabel BowleyJapanBernardo Dominic NEGOTIATION
Frozen Columns
Name
Morrow Ruta
Izzy Garufi
Mujtaba Nicka
Arvin Albares
Misaki Royster
Kaitlin Ostrosky
Cody Saylors
Arvin Albares
Alejandro Perin
Ricardo Gaucho
Leja Caldarera
Greenwood Bolognia
James Butt
Antonio Caudy
Alejandro Perin
Misaki Royster
Munro Ferencz
Tony Foller
Nicolas Iturbide
James Butt
Aruna Figeroa
Munro Ferencz
Juan Wieser
Maria Marrier
Claire Tollner
Costa Dilliard
Jones Vocelka
Nicolas Iturbide
Ivar Paprocki
Kadeem Flosi
Tony Foller
Murillo Malet
Misaki Royster
Ashley Doe
Alejandro Perin
Emily Whobrey
Francesco Shinko
Jennifer Amigon
Kadeem Flosi
Ashley Doe
Murillo Malet
Ashley Doe
Sinclair Waycott
Emily Whobrey
Faith Gillian
Johnson Sergi
Rodrigues Campain
Salvatore Stockham
Wickens Nestle
Jefferson Schemmer
IdCountryDate
1000Japan2026-05-27
1001Brazil2026-05-30
1002Australia2026-06-09
1003Germany2026-06-11
1004India2026-05-29
1005Spain2026-06-12
1006Spain2026-06-09
1007Germany2026-06-18
1008Canada2026-06-03
1009Canada2026-06-13
1010Brazil2026-05-23
1011Italy2026-05-23
1012Canada2026-05-30
1013Australia2026-06-03
1014Australia2026-05-23
1015Germany2026-06-04
1016Australia2026-05-22
1017Russia2026-05-26
1018Australia2026-06-06
1019Japan2026-06-01
1020Italy2026-06-11
1021Argentina2026-05-27
1022France2026-06-11
1023United Kingdom2026-06-08
1024Italy2026-05-25
1025France2026-05-25
1026Russia2026-06-16
1027Spain2026-06-13
1028Russia2026-06-12
1029Brazil2026-05-28
1030Canada2026-06-03
1031Germany2026-05-26
1032India2026-05-23
1033Russia2026-05-29
1034Italy2026-05-22
1035Italy2026-05-26
1036Argentina2026-06-06
1037Brazil2026-06-10
1038Italy2026-05-29
1039India2026-06-13
1040United Kingdom2026-06-02
1041Argentina2026-06-04
1042India2026-06-16
1043France2026-06-14
1044Argentina2026-06-10
1045Canada2026-05-24
1046Italy2026-06-03
1047Canada2026-06-16
1048India2026-06-07
1049Japan2026-06-01

On-Demand Data

NameIdCountryDate
Jefferson Schemmer1000Australia2026-06-02
Ashley Doe1001Brazil2026-06-17
Juan Wieser1002Russia2026-05-30
Leja Caldarera1003Russia2026-05-21
Adams Morasca1004Australia2026-06-03
Silvio Slusarski1005Japan2026-06-15
Jones Vocelka1006United Kingdom2026-06-18
Clifford Rim1007India2026-05-20
Isabel Bowley1008Australia2026-05-29
Emily Whobrey1009Germany2026-06-16
Chavez Briddick1010United Kingdom2026-06-02
Clifford Rim1011Russia2026-06-14
Jefferson Schemmer1012Japan2026-06-18
Jeanfrancois Venere1013Japan2026-06-04
James Butt1014Germany2026-06-09
Kadeem Flosi1015Italy2026-06-07
Aika Inouye1016Canada2026-05-22
Morrow Ruta1017United Kingdom2026-05-24
Izzy Garufi1018Germany2026-06-05
Darci Poquette1019Argentina2026-06-06
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aika InouyeJapanOnyama Limba QUALIFIED
Salvatore StockhamSpainBernardo Dominic RENEWAL
Deepesh ChuiJapanAsiya Javayant PROPOSAL
Arvin AlbaresUnited KingdomAnna Fali PROPOSAL
Julie StensethCanadaElwin Sharvill NEW
Emily WhobreyBrazilAnna Fali NEGOTIATION
Claire TollnerIndiaElwin Sharvill NEW
Ricardo GauchoAustraliaIvan Magalhaes PROPOSAL
Munro FerenczIndiaStephen Shaw NEGOTIATION
Ashley DoeAustraliaBernardo Dominic RENEWAL
Chavez BriddickRussiaOnyama Limba NEGOTIATION
Julie StensethCanadaIvan Magalhaes PROPOSAL
Nicolas IturbideArgentinaElwin Sharvill UNQUALIFIED
Claire TollnerSpainXuxue Feng PROPOSAL
Claire TollnerAustraliaElwin Sharvill NEGOTIATION
Kadeem FlosiRussiaXuxue Feng UNQUALIFIED
Morrow RutaArgentinaStephen Shaw UNQUALIFIED
Aditya KuskoJapanAmy Elsner NEW
Faith GillianJapanAsiya Javayant PROPOSAL
Adams MorascaAustraliaElwin Sharvill QUALIFIED
Aruna FigeroaRussiaOnyama Limba NEW
Ashley DoeArgentinaIvan Magalhaes UNQUALIFIED
Emily WhobreyAustraliaStephen Shaw QUALIFIED
Deepesh ChuiFranceElwin Sharvill UNQUALIFIED
Clifford RimIndiaIvan Magalhaes UNQUALIFIED
James ButtRussiaIoni Bowcher UNQUALIFIED
Alejandro PerinRussiaBernardo Dominic PROPOSAL
Jeanfrancois VenereArgentinaAsiya Javayant RENEWAL
Sinclair WaycottGermanyAsiya Javayant NEW
Stacey MacleadAustraliaAnna Fali RENEWAL
Emily WhobreySpainXuxue Feng QUALIFIED
Mayumi KolmetzUnited KingdomIoni Bowcher UNQUALIFIED
Isabel BowleyCanadaAnna Fali NEW
Clifford RimArgentinaStephen Shaw NEW
Maisha RulapaughGermanyIvan Magalhaes PROPOSAL
Murillo MaletBrazilAmy Elsner NEW
Rodrigues CampainJapanStephen Shaw PROPOSAL
Cody SaylorsAustraliaBernardo Dominic NEGOTIATION
Maisha RulapaughCanadaAnna Fali QUALIFIED
Rodrigues CampainJapanIoni 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>