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 BowleyRussiaAmy Elsner PROPOSAL
Deepesh ChuiUnited KingdomStephen Shaw PROPOSAL
Aruna FigeroaJapanBernardo Dominic NEW
Jeanfrancois VenereJapanXuxue Feng PROPOSAL
Chavez BriddickSpainAnna Fali NEGOTIATION
Leon OldroydItalyBernardo Dominic NEGOTIATION
Stacey MacleadBrazilAnna Fali RENEWAL
Rodrigues CampainItalyIvan Magalhaes RENEWAL
Jennifer AmigonGermanyOnyama Limba NEW
Greenwood BologniaArgentinaXuxue Feng UNQUALIFIED
Octavia MaletRussiaAmy Elsner QUALIFIED
Mujtaba NickaItalyElwin Sharvill UNQUALIFIED
Cody SaylorsArgentinaAmy Elsner QUALIFIED
Smith GlickAustraliaIoni Bowcher NEGOTIATION
Emily WhobreyBrazilIoni Bowcher PROPOSAL
Emily WhobreyBrazilAnna Fali NEW
Octavia MaletFranceBernardo Dominic RENEWAL
Ricardo GauchoUnited KingdomAmy Elsner NEGOTIATION
Aika InouyeGermanyAnna Fali RENEWAL
Chavez BriddickItalyBernardo Dominic RENEWAL
Clifford RimRussiaXuxue Feng NEW
Munro FerenczCanadaIoni Bowcher PROPOSAL
Silvio SlusarskiIndiaElwin Sharvill QUALIFIED
Cody SaylorsSpainAsiya Javayant NEW
Juan WieserCanadaElwin Sharvill NEW
Murillo MaletRussiaAnna Fali UNQUALIFIED
Leja CaldareraAustraliaIoni Bowcher NEGOTIATION
Mujtaba NickaUnited KingdomIvan Magalhaes NEGOTIATION
Wickens NestleSpainAmy Elsner PROPOSAL
Johnson SergiAustraliaOnyama Limba PROPOSAL
Misaki RoysterSpainAnna Fali PROPOSAL
Morrow RutaAustraliaElwin Sharvill UNQUALIFIED
Ashley DoeAustraliaAmy Elsner UNQUALIFIED
Greenwood BologniaArgentinaAsiya Javayant NEGOTIATION
Morrow RutaSpainAsiya Javayant UNQUALIFIED
Isabel BowleyGermanyOnyama Limba QUALIFIED
Juan WieserFranceAsiya Javayant QUALIFIED
Ricardo GauchoGermanyIoni Bowcher NEW
Kaitlin OstroskyBrazilAsiya Javayant RENEWAL
Francesco ShinkoGermanyBernardo Dominic NEW
Izzy GarufiArgentinaIoni Bowcher RENEWAL
Rodrigues CampainIndiaIoni Bowcher NEW
Ashley DoeFranceAnna Fali UNQUALIFIED
Jeanfrancois VenereSpainIoni Bowcher NEW
Silvio SlusarskiArgentinaElwin Sharvill NEGOTIATION
David DarakjyUnited KingdomAsiya Javayant NEGOTIATION
Mujtaba NickaItalyAnna Fali PROPOSAL
Munro FerenczJapanAnna Fali QUALIFIED
Juan WieserBrazilAmy Elsner NEW
Jones VocelkaCanadaIvan Magalhaes RENEWAL
Horizontal
NameCountryRepresentativeStatus
Darci PoquetteIndiaAnna Fali PROPOSAL
Sinclair WaycottBrazilIvan Magalhaes RENEWAL
Tony FollerAustraliaIvan Magalhaes RENEWAL
Mujtaba NickaFranceAsiya Javayant QUALIFIED
Arvin AlbaresGermanyElwin Sharvill NEGOTIATION
Adams MorascaJapanStephen Shaw UNQUALIFIED
Ashley DoeJapanElwin Sharvill RENEWAL
Aditya KuskoJapanOnyama Limba NEGOTIATION
Alejandro PerinBrazilOnyama Limba RENEWAL
Silvio SlusarskiBrazilAmy Elsner RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickSpain2026-04-15Feiner Bros PROPOSAL41Amy Elsner
1001Wickens NestleSpain2026-04-17Chanay, Jeffrey A Esq PROPOSAL92Ioni Bowcher
1002Smith GlickFrance2026-03-29Rousseaux, Michael Esq QUALIFIED24Stephen Shaw
1003Octavia MaletBrazil2026-04-22Morlong Associates NEGOTIATION8Bernardo Dominic
1004Chavez BriddickCanada2026-04-03Buckley Miller Wright NEGOTIATION54Anna Fali
1005Julie StensethBrazil2026-03-26Morlong Associates PROPOSAL59Stephen Shaw
1006Greenwood BologniaUnited Kingdom2026-03-25Rangoni Of Florence RENEWAL15Xuxue Feng
1007Clifford RimUnited Kingdom2026-04-16Buckley Miller Wright UNQUALIFIED78Bernardo Dominic
1008Rodrigues CampainIndia2026-03-27Morlong Associates NEW85Onyama Limba
1009Francesco ShinkoBrazil2026-04-16Feiner Bros PROPOSAL63Xuxue Feng
1010Jefferson SchemmerRussia2026-04-21Dorl, James J Esq UNQUALIFIED98Ivan Magalhaes
1011Greenwood BologniaIndia2026-04-23Rangoni Of Florence NEW57Amy Elsner
1012Emily WhobreyFrance2026-04-11Chanay, Jeffrey A Esq NEGOTIATION85Anna Fali
1013Antonio CaudyArgentina2026-04-18Buckley Miller Wright QUALIFIED33Bernardo Dominic
1014Mayumi KolmetzRussia2026-03-28Feiner Bros RENEWAL88Stephen Shaw
1015David DarakjyGermany2026-04-15Chapman, Ross E Esq UNQUALIFIED87Ioni Bowcher
1016Johnson SergiBrazil2026-03-26Dorl, James J Esq NEW98Elwin Sharvill
1017Isabel BowleyIndia2026-04-06Truhlar And Truhlar Attys NEW7Anna Fali
1018Kaitlin OstroskyUnited Kingdom2026-03-25Chemel, James L Cpa PROPOSAL49Anna Fali
1019Murillo MaletSpain2026-03-29Morlong Associates PROPOSAL34Stephen Shaw
1020Sinclair WaycottItaly2026-03-26Feiner Bros UNQUALIFIED39Bernardo Dominic
1021Mayumi KolmetzUnited Kingdom2026-03-28Feiner Bros NEGOTIATION64Stephen Shaw
1022Alejandro PerinBrazil2026-03-27Benton, John B Jr RENEWAL33Ioni Bowcher
1023Antonio CaudyAustralia2026-04-02Feiner Bros RENEWAL27Asiya Javayant
1024Adams MorascaRussia2026-04-14Feltz Printing Service QUALIFIED3Ioni Bowcher
1025Misaki RoysterSpain2026-04-04Feltz Printing Service UNQUALIFIED48Ioni Bowcher
1026Arvin AlbaresFrance2026-04-18Feltz Printing Service NEGOTIATION47Elwin Sharvill
1027Cody SaylorsArgentina2026-04-16Feiner Bros RENEWAL3Bernardo Dominic
1028Deepesh ChuiArgentina2026-03-29Rangoni Of Florence QUALIFIED15Amy Elsner
1029Salvatore StockhamAustralia2026-03-31Morlong Associates NEGOTIATION50Onyama Limba
1030Francesco ShinkoArgentina2026-04-21Chapman, Ross E Esq RENEWAL0Xuxue Feng
1031Smith GlickIndia2026-04-14Dorl, James J Esq NEGOTIATION61Asiya Javayant
1032Stacey MacleadFrance2026-04-02Rousseaux, Michael Esq NEW63Ioni Bowcher
1033Jones VocelkaBrazil2026-04-03Buckley Miller Wright QUALIFIED86Anna Fali
1034Antonio CaudyIndia2026-03-29Dorl, James J Esq QUALIFIED89Xuxue Feng
1035Aditya KuskoJapan2026-04-23Chemel, James L Cpa QUALIFIED85Stephen Shaw
1036Aditya KuskoArgentina2026-04-02Commercial Press RENEWAL32Asiya Javayant
1037James ButtArgentina2026-04-11Rousseaux, Michael Esq RENEWAL15Amy Elsner
1038Ivar PaprockiGermany2026-04-02Benton, John B Jr NEW72Stephen Shaw
1039Francesco ShinkoJapan2026-04-13Chanay, Jeffrey A Esq RENEWAL66Elwin Sharvill
1040Ricardo GauchoRussia2026-04-05Truhlar And Truhlar Attys PROPOSAL29Stephen Shaw
1041Mayumi KolmetzItaly2026-04-08Rangoni Of Florence NEW45Ivan Magalhaes
1042Juan WieserItaly2026-04-18Commercial Press NEW67Elwin Sharvill
1043Misaki RoysterFrance2026-04-09Rousseaux, Michael Esq UNQUALIFIED34Bernardo Dominic
1044Emily WhobreyJapan2026-04-07Truhlar And Truhlar Attys RENEWAL60Xuxue Feng
1045Isabel BowleyRussia2026-04-23Buckley Miller Wright QUALIFIED31Asiya Javayant
1046Octavia MaletIndia2026-04-14King, Christopher A Esq QUALIFIED92Amy Elsner
1047Kaitlin OstroskyUnited Kingdom2026-04-16Feiner Bros UNQUALIFIED16Ioni Bowcher
1048Ashley DoeGermany2026-04-02Dorl, James J Esq RENEWAL98Stephen Shaw
1049Salvatore StockhamBrazil2026-03-26Chemel, James L Cpa PROPOSAL91Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Cody SaylorsSpainXuxue Feng PROPOSAL
Leon OldroydItalyIoni Bowcher PROPOSAL
Misaki RoysterCanadaIvan Magalhaes QUALIFIED
Mujtaba NickaFranceIvan Magalhaes RENEWAL
Isabel BowleyGermanyAsiya Javayant NEGOTIATION
Mayumi KolmetzArgentinaBernardo Dominic PROPOSAL
Jones VocelkaRussiaElwin Sharvill UNQUALIFIED
Rodrigues CampainBrazilOnyama Limba QUALIFIED
James ButtItalyElwin Sharvill UNQUALIFIED
Juan WieserFranceElwin Sharvill QUALIFIED
Alejandro PerinSpainOnyama Limba RENEWAL
Julie StensethSpainStephen Shaw PROPOSAL
Claire TollnerAustraliaXuxue Feng NEW
Antonio CaudyGermanyBernardo Dominic UNQUALIFIED
Jones VocelkaCanadaAmy Elsner RENEWAL
Aika InouyeIndiaAmy Elsner PROPOSAL
Maisha RulapaughGermanyXuxue Feng NEGOTIATION
James ButtIndiaAnna Fali NEW
Kadeem FlosiAustraliaAsiya Javayant NEGOTIATION
Ivar PaprockiItalyAmy Elsner QUALIFIED
Leja CaldareraSpainStephen Shaw QUALIFIED
Francesco ShinkoArgentinaOnyama Limba NEW
Claire TollnerCanadaAsiya Javayant RENEWAL
Sinclair WaycottFranceAnna Fali NEW
Murillo MaletGermanyAmy Elsner NEW
Munro FerenczAustraliaElwin Sharvill NEGOTIATION
Ashley DoeJapanIvan Magalhaes QUALIFIED
Arvin AlbaresBrazilIoni Bowcher PROPOSAL
Wickens NestleArgentinaAmy Elsner NEGOTIATION
Adams MorascaBrazilAsiya Javayant NEW
Aruna FigeroaJapanOnyama Limba QUALIFIED
Faith GillianAustraliaAnna Fali UNQUALIFIED
James ButtItalyIoni Bowcher PROPOSAL
Stacey MacleadUnited KingdomIoni Bowcher NEGOTIATION
Alejandro PerinItalyStephen Shaw QUALIFIED
Clifford RimBrazilIvan Magalhaes NEGOTIATION
Jones VocelkaCanadaIoni Bowcher QUALIFIED
Tony FollerFranceIvan Magalhaes NEGOTIATION
Francesco ShinkoIndiaAsiya Javayant NEGOTIATION
Julie StensethUnited KingdomAnna Fali QUALIFIED
Leja CaldareraUnited KingdomIvan Magalhaes QUALIFIED
Darci PoquetteGermanyAnna Fali UNQUALIFIED
Chavez BriddickAustraliaAsiya Javayant RENEWAL
Misaki RoysterSpainStephen Shaw NEGOTIATION
Alejandro PerinUnited KingdomXuxue Feng QUALIFIED
Silvio SlusarskiFranceXuxue Feng NEGOTIATION
David DarakjyAustraliaIvan Magalhaes QUALIFIED
Misaki RoysterFranceXuxue Feng NEW
Octavia MaletFranceIvan Magalhaes QUALIFIED
Adams MorascaUnited KingdomAmy Elsner RENEWAL
Frozen Columns
Name
Julie Stenseth
Aditya Kusko
Juan Wieser
Salvatore Stockham
Salvatore Stockham
Adams Morasca
Leja Caldarera
Leon Oldroyd
Mujtaba Nicka
Smith Glick
Leon Oldroyd
Antonio Caudy
Ivar Paprocki
Stacey Maclead
Alejandro Perin
Johnson Sergi
Darci Poquette
Morrow Ruta
David Darakjy
Faith Gillian
Rodrigues Campain
Costa Dilliard
Jefferson Schemmer
Wickens Nestle
Salvatore Stockham
Misaki Royster
Aditya Kusko
Tony Foller
Munro Ferencz
Wickens Nestle
Rodrigues Campain
Emily Whobrey
Silvio Slusarski
Costa Dilliard
Faith Gillian
Smith Glick
Jeanfrancois Venere
Sinclair Waycott
Mayumi Kolmetz
Kadeem Flosi
Stacey Maclead
Adams Morasca
Aika Inouye
James Butt
Nicolas Iturbide
Deepesh Chui
Julie Stenseth
Jeanfrancois Venere
Chavez Briddick
Jennifer Amigon
IdCountryDate
1000Spain2026-03-27
1001Japan2026-04-16
1002Spain2026-04-08
1003United Kingdom2026-04-17
1004Japan2026-04-14
1005Russia2026-03-27
1006United Kingdom2026-04-02
1007Argentina2026-04-04
1008India2026-03-31
1009Brazil2026-04-12
1010Japan2026-04-09
1011Germany2026-04-15
1012Argentina2026-04-07
1013Brazil2026-03-28
1014Italy2026-03-27
1015Germany2026-04-21
1016United Kingdom2026-04-15
1017Russia2026-03-26
1018Japan2026-03-30
1019Russia2026-03-29
1020Canada2026-04-06
1021Russia2026-04-16
1022Japan2026-04-23
1023India2026-03-25
1024Germany2026-04-16
1025Brazil2026-03-25
1026Brazil2026-03-26
1027Spain2026-03-31
1028Japan2026-04-06
1029Brazil2026-04-08
1030Russia2026-03-28
1031France2026-04-12
1032United Kingdom2026-04-10
1033Russia2026-04-01
1034Brazil2026-04-16
1035Brazil2026-03-30
1036France2026-04-23
1037United Kingdom2026-04-06
1038India2026-04-08
1039United Kingdom2026-04-08
1040France2026-04-15
1041France2026-04-21
1042Japan2026-03-25
1043Australia2026-04-09
1044Italy2026-03-30
1045Russia2026-03-31
1046United Kingdom2026-03-25
1047Italy2026-04-17
1048Argentina2026-04-13
1049France2026-04-20

On-Demand Data

NameIdCountryDate
Kaitlin Ostrosky1000Germany2026-03-29
Deepesh Chui1001Germany2026-04-12
Emily Whobrey1002Australia2026-03-26
Mujtaba Nicka1003Brazil2026-04-08
Chavez Briddick1004India2026-03-30
Murillo Malet1005Brazil2026-04-09
Emily Whobrey1006France2026-04-20
Johnson Sergi1007Argentina2026-04-05
Rodrigues Campain1008Canada2026-03-25
David Darakjy1009United Kingdom2026-04-11
Sinclair Waycott1010Canada2026-04-20
Rodrigues Campain1011India2026-04-04
Mayumi Kolmetz1012Germany2026-04-11
Leja Caldarera1013Australia2026-03-29
Misaki Royster1014India2026-03-27
Aika Inouye1015Russia2026-04-15
Kadeem Flosi1016Argentina2026-03-30
Silvio Slusarski1017United Kingdom2026-04-23
Kaitlin Ostrosky1018India2026-04-13
Misaki Royster1019Spain2026-03-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Maisha RulapaughIndiaAmy Elsner QUALIFIED
Emily WhobreySpainXuxue Feng QUALIFIED
Ricardo GauchoCanadaOnyama Limba NEW
Julie StensethGermanyAmy Elsner NEGOTIATION
Antonio CaudyItalyIoni Bowcher QUALIFIED
Murillo MaletItalyStephen Shaw QUALIFIED
Morrow RutaGermanyIoni Bowcher QUALIFIED
Nicolas IturbideGermanyStephen Shaw QUALIFIED
Leon OldroydFranceOnyama Limba NEW
Alejandro PerinSpainIoni Bowcher NEGOTIATION
Rodrigues CampainCanadaAsiya Javayant RENEWAL
Rodrigues CampainBrazilIvan Magalhaes QUALIFIED
Claire TollnerUnited KingdomBernardo Dominic QUALIFIED
Ricardo GauchoGermanyElwin Sharvill NEW
Clifford RimAustraliaElwin Sharvill RENEWAL
Mujtaba NickaArgentinaOnyama Limba PROPOSAL
Francesco ShinkoJapanXuxue Feng NEW
Isabel BowleyJapanElwin Sharvill UNQUALIFIED
Chavez BriddickAustraliaStephen Shaw NEW
Kaitlin OstroskyRussiaAmy Elsner NEW
Tony FollerSpainElwin Sharvill RENEWAL
Ashley DoeJapanElwin Sharvill NEW
Mayumi KolmetzIndiaAsiya Javayant QUALIFIED
Arvin AlbaresGermanyAmy Elsner QUALIFIED
Nicolas IturbideGermanyIoni Bowcher NEGOTIATION
Leon OldroydIndiaIvan Magalhaes NEW
Leon OldroydJapanStephen Shaw NEW
Octavia MaletFranceXuxue Feng QUALIFIED
Ricardo GauchoGermanyBernardo Dominic UNQUALIFIED
Emily WhobreyBrazilBernardo Dominic PROPOSAL
Aditya KuskoBrazilIoni Bowcher UNQUALIFIED
Alejandro PerinGermanyElwin Sharvill RENEWAL
James ButtBrazilElwin Sharvill UNQUALIFIED
Emily WhobreyJapanAsiya Javayant PROPOSAL
Sinclair WaycottSpainOnyama Limba NEGOTIATION
Faith GillianItalyAnna Fali NEW
Leja CaldareraIndiaAmy Elsner NEGOTIATION
Jeanfrancois VenereRussiaBernardo Dominic PROPOSAL
Cody SaylorsFranceElwin Sharvill PROPOSAL
Faith GillianCanadaAnna Fali QUALIFIED

<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>