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
Johnson SergiFranceAmy Elsner QUALIFIED
Aruna FigeroaRussiaElwin Sharvill QUALIFIED
Juan WieserJapanElwin Sharvill PROPOSAL
Salvatore StockhamAustraliaAsiya Javayant NEGOTIATION
Deepesh ChuiCanadaXuxue Feng UNQUALIFIED
Alejandro PerinBrazilElwin Sharvill RENEWAL
Ricardo GauchoIndiaXuxue Feng UNQUALIFIED
Chavez BriddickFranceAmy Elsner NEW
Silvio SlusarskiIndiaOnyama Limba NEGOTIATION
Kadeem FlosiItalyIoni Bowcher RENEWAL
Aika InouyeUnited KingdomXuxue Feng QUALIFIED
Sinclair WaycottAustraliaIoni Bowcher NEW
Smith GlickGermanyXuxue Feng UNQUALIFIED
Costa DilliardIndiaAsiya Javayant UNQUALIFIED
Sinclair WaycottFranceElwin Sharvill NEW
Leja CaldareraRussiaStephen Shaw RENEWAL
Octavia MaletUnited KingdomIoni Bowcher PROPOSAL
Johnson SergiBrazilStephen Shaw QUALIFIED
Alejandro PerinRussiaAnna Fali QUALIFIED
Murillo MaletGermanyBernardo Dominic NEW
Maria MarrierRussiaIvan Magalhaes RENEWAL
Julie StensethIndiaElwin Sharvill NEW
Nicolas IturbideFranceXuxue Feng PROPOSAL
Octavia MaletItalyAnna Fali NEGOTIATION
Juan WieserIndiaXuxue Feng RENEWAL
Rodrigues CampainSpainXuxue Feng NEGOTIATION
Stacey MacleadFranceAmy Elsner NEW
Isabel BowleyJapanStephen Shaw RENEWAL
Antonio CaudySpainAnna Fali NEGOTIATION
Johnson SergiIndiaAmy Elsner UNQUALIFIED
Jennifer AmigonArgentinaOnyama Limba NEW
Sinclair WaycottArgentinaElwin Sharvill NEW
Isabel BowleyFranceIoni Bowcher NEW
Faith GillianCanadaElwin Sharvill NEGOTIATION
Jones VocelkaBrazilOnyama Limba NEGOTIATION
Ashley DoeFranceXuxue Feng NEGOTIATION
Ricardo GauchoGermanyAmy Elsner NEW
Smith GlickCanadaAsiya Javayant RENEWAL
Mayumi KolmetzItalyXuxue Feng QUALIFIED
Chavez BriddickFranceIvan Magalhaes UNQUALIFIED
Antonio CaudyGermanyBernardo Dominic RENEWAL
Nicolas IturbideFranceBernardo Dominic UNQUALIFIED
Morrow RutaSpainAnna Fali PROPOSAL
Chavez BriddickUnited KingdomAsiya Javayant NEW
Deepesh ChuiJapanAmy Elsner PROPOSAL
Cody SaylorsArgentinaBernardo Dominic QUALIFIED
Jones VocelkaArgentinaIvan Magalhaes PROPOSAL
Aruna FigeroaJapanStephen Shaw NEW
Costa DilliardIndiaAnna Fali NEGOTIATION
Salvatore StockhamCanadaXuxue Feng UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Jeanfrancois VenereIndiaXuxue Feng PROPOSAL
Clifford RimIndiaElwin Sharvill NEW
Nicolas IturbideIndiaXuxue Feng PROPOSAL
Salvatore StockhamSpainXuxue Feng PROPOSAL
Jefferson SchemmerRussiaIoni Bowcher RENEWAL
Isabel BowleyUnited KingdomIoni Bowcher PROPOSAL
Morrow RutaFranceIvan Magalhaes RENEWAL
Salvatore StockhamUnited KingdomStephen Shaw NEW
Johnson SergiSpainElwin Sharvill PROPOSAL
Leja CaldareraSpainAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Deepesh ChuiBrazil2026-05-20Chemel, James L Cpa UNQUALIFIED20Bernardo Dominic
1001Aika InouyeUnited Kingdom2026-05-25Buckley Miller Wright PROPOSAL87Amy Elsner
1002James ButtSpain2026-05-09Rousseaux, Michael Esq PROPOSAL75Bernardo Dominic
1003Misaki RoysterSpain2026-05-21Rangoni Of Florence NEGOTIATION50Xuxue Feng
1004Ricardo GauchoArgentina2026-05-11Feltz Printing Service RENEWAL53Ivan Magalhaes
1005Aruna FigeroaJapan2026-04-30Benton, John B Jr PROPOSAL8Stephen Shaw
1006Izzy GarufiFrance2026-05-01Chanay, Jeffrey A Esq PROPOSAL93Elwin Sharvill
1007Salvatore StockhamJapan2026-05-18Morlong Associates NEW72Bernardo Dominic
1008Antonio CaudyJapan2026-05-25Commercial Press UNQUALIFIED59Onyama Limba
1009Jeanfrancois VenereRussia2026-05-22Benton, John B Jr NEGOTIATION75Ivan Magalhaes
1010David DarakjyUnited Kingdom2026-05-21Dorl, James J Esq UNQUALIFIED90Bernardo Dominic
1011Leja CaldareraBrazil2026-04-26Feiner Bros NEGOTIATION42Onyama Limba
1012Jennifer AmigonSpain2026-04-27Dorl, James J Esq PROPOSAL29Anna Fali
1013Leon OldroydSpain2026-04-30Morlong Associates RENEWAL10Ivan Magalhaes
1014Alejandro PerinCanada2026-05-09Morlong Associates RENEWAL78Elwin Sharvill
1015Adams MorascaSpain2026-05-05Buckley Miller Wright QUALIFIED43Onyama Limba
1016David DarakjyRussia2026-05-04Rangoni Of Florence NEW2Asiya Javayant
1017Salvatore StockhamJapan2026-04-30Buckley Miller Wright PROPOSAL58Ioni Bowcher
1018Jefferson SchemmerItaly2026-04-28Buckley Miller Wright PROPOSAL52Bernardo Dominic
1019Johnson SergiGermany2026-05-11Morlong Associates UNQUALIFIED95Xuxue Feng
1020Jefferson SchemmerRussia2026-05-15Commercial Press UNQUALIFIED36Stephen Shaw
1021Aditya KuskoUnited Kingdom2026-05-25Printing Dimensions PROPOSAL85Amy Elsner
1022Aditya KuskoGermany2026-05-25Printing Dimensions RENEWAL37Anna Fali
1023Chavez BriddickBrazil2026-04-30Morlong Associates RENEWAL16Ivan Magalhaes
1024Wickens NestleArgentina2026-05-19Feiner Bros NEGOTIATION50Ioni Bowcher
1025Jefferson SchemmerAustralia2026-05-22Chemel, James L Cpa QUALIFIED91Ioni Bowcher
1026Wickens NestleIndia2026-05-19Chanay, Jeffrey A Esq NEGOTIATION94Asiya Javayant
1027Isabel BowleyArgentina2026-05-25Buckley Miller Wright PROPOSAL64Amy Elsner
1028Adams MorascaGermany2026-05-21Chemel, James L Cpa QUALIFIED7Xuxue Feng
1029Misaki RoysterUnited Kingdom2026-05-09Commercial Press RENEWAL2Elwin Sharvill
1030Maria MarrierJapan2026-05-25Truhlar And Truhlar Attys RENEWAL31Ivan Magalhaes
1031Jeanfrancois VenereAustralia2026-04-27Rangoni Of Florence PROPOSAL41Onyama Limba
1032Adams MorascaRussia2026-04-29King, Christopher A Esq NEW42Xuxue Feng
1033Tony FollerGermany2026-05-18Chemel, James L Cpa NEGOTIATION18Amy Elsner
1034Aditya KuskoCanada2026-05-20Benton, John B Jr PROPOSAL87Elwin Sharvill
1035Antonio CaudyAustralia2026-05-16Truhlar And Truhlar Attys PROPOSAL61Stephen Shaw
1036Kaitlin OstroskyRussia2026-04-30Feltz Printing Service NEW67Anna Fali
1037Chavez BriddickSpain2026-05-22Chemel, James L Cpa PROPOSAL69Ioni Bowcher
1038Munro FerenczSpain2026-05-13Commercial Press RENEWAL31Bernardo Dominic
1039Greenwood BologniaSpain2026-05-18Truhlar And Truhlar Attys RENEWAL18Amy Elsner
1040Aditya KuskoFrance2026-05-08Dorl, James J Esq NEGOTIATION59Stephen Shaw
1041Mayumi KolmetzGermany2026-05-08King, Christopher A Esq RENEWAL37Onyama Limba
1042Munro FerenczUnited Kingdom2026-05-10Printing Dimensions NEW45Onyama Limba
1043Johnson SergiBrazil2026-05-20Buckley Miller Wright NEW73Onyama Limba
1044Aruna FigeroaSpain2026-05-21Morlong Associates RENEWAL37Xuxue Feng
1045Jones VocelkaCanada2026-05-13Chapman, Ross E Esq QUALIFIED13Elwin Sharvill
1046Costa DilliardSpain2026-05-23Morlong Associates RENEWAL77Ivan Magalhaes
1047Clifford RimRussia2026-05-11Rousseaux, Michael Esq UNQUALIFIED78Onyama Limba
1048Ricardo GauchoRussia2026-04-29Rangoni Of Florence PROPOSAL31Ivan Magalhaes
1049James ButtRussia2026-05-23Truhlar And Truhlar Attys NEGOTIATION11Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Silvio SlusarskiArgentinaXuxue Feng NEGOTIATION
Leja CaldareraItalyXuxue Feng NEW
James ButtJapanAnna Fali NEGOTIATION
Ashley DoeFranceElwin Sharvill RENEWAL
Rodrigues CampainFranceAsiya Javayant RENEWAL
Antonio CaudyFranceElwin Sharvill NEW
Smith GlickSpainXuxue Feng QUALIFIED
Adams MorascaAustraliaElwin Sharvill UNQUALIFIED
Leon OldroydIndiaAmy Elsner NEW
Emily WhobreyAustraliaElwin Sharvill PROPOSAL
Ricardo GauchoCanadaAsiya Javayant NEW
Greenwood BologniaItalyIoni Bowcher UNQUALIFIED
Mayumi KolmetzRussiaAsiya Javayant PROPOSAL
Smith GlickUnited KingdomElwin Sharvill QUALIFIED
Juan WieserUnited KingdomAmy Elsner NEGOTIATION
Maria MarrierFranceIvan Magalhaes PROPOSAL
Wickens NestleUnited KingdomAmy Elsner PROPOSAL
Leja CaldareraIndiaAmy Elsner NEW
Arvin AlbaresArgentinaAnna Fali UNQUALIFIED
Octavia MaletBrazilIvan Magalhaes QUALIFIED
Ricardo GauchoJapanAnna Fali PROPOSAL
Octavia MaletJapanBernardo Dominic PROPOSAL
Cody SaylorsFranceIoni Bowcher NEGOTIATION
Deepesh ChuiAustraliaXuxue Feng QUALIFIED
Smith GlickCanadaAsiya Javayant QUALIFIED
Johnson SergiIndiaAmy Elsner PROPOSAL
Antonio CaudyAustraliaAmy Elsner NEGOTIATION
Sinclair WaycottItalyIvan Magalhaes QUALIFIED
Johnson SergiArgentinaIvan Magalhaes RENEWAL
Isabel BowleyArgentinaAsiya Javayant RENEWAL
Faith GillianRussiaStephen Shaw QUALIFIED
Antonio CaudyCanadaXuxue Feng RENEWAL
Misaki RoysterRussiaAmy Elsner PROPOSAL
Isabel BowleyRussiaAsiya Javayant UNQUALIFIED
Stacey MacleadJapanAmy Elsner NEGOTIATION
Aruna FigeroaFranceAmy Elsner RENEWAL
Mujtaba NickaArgentinaIvan Magalhaes UNQUALIFIED
Maria MarrierBrazilIvan Magalhaes RENEWAL
Isabel BowleyJapanAnna Fali NEGOTIATION
Emily WhobreyArgentinaIvan Magalhaes NEGOTIATION
Aruna FigeroaIndiaElwin Sharvill NEW
Kaitlin OstroskyGermanyXuxue Feng NEGOTIATION
Aika InouyeFranceAmy Elsner NEW
Jefferson SchemmerArgentinaIvan Magalhaes NEGOTIATION
Greenwood BologniaJapanAsiya Javayant NEW
Jennifer AmigonFranceIoni Bowcher UNQUALIFIED
Munro FerenczItalyIvan Magalhaes NEGOTIATION
Nicolas IturbideUnited KingdomAnna Fali UNQUALIFIED
Tony FollerIndiaBernardo Dominic NEW
Jeanfrancois VenereItalyBernardo Dominic NEGOTIATION
Frozen Columns
Name
Wickens Nestle
Costa Dilliard
Alejandro Perin
Nicolas Iturbide
Maria Marrier
Juan Wieser
Claire Tollner
Jones Vocelka
Maria Marrier
Clifford Rim
Silvio Slusarski
Clifford Rim
Darci Poquette
Isabel Bowley
Jennifer Amigon
Jefferson Schemmer
Emily Whobrey
Cody Saylors
Isabel Bowley
Clifford Rim
Leon Oldroyd
Chavez Briddick
Tony Foller
Maisha Rulapaugh
Murillo Malet
James Butt
Izzy Garufi
Silvio Slusarski
Rodrigues Campain
Darci Poquette
Octavia Malet
Greenwood Bolognia
Murillo Malet
Deepesh Chui
Deepesh Chui
Aruna Figeroa
Morrow Ruta
Kadeem Flosi
Murillo Malet
Maisha Rulapaugh
Chavez Briddick
Chavez Briddick
Aika Inouye
Francesco Shinko
Jefferson Schemmer
Francesco Shinko
Ricardo Gaucho
Clifford Rim
Izzy Garufi
Jones Vocelka
IdCountryDate
1000Japan2026-05-06
1001Spain2026-05-15
1002Canada2026-05-17
1003Argentina2026-05-16
1004Australia2026-04-30
1005Germany2026-04-28
1006France2026-05-23
1007Germany2026-05-11
1008France2026-05-04
1009United Kingdom2026-05-05
1010France2026-05-12
1011Germany2026-05-08
1012Germany2026-05-01
1013Germany2026-05-06
1014France2026-05-09
1015United Kingdom2026-05-16
1016Italy2026-05-14
1017Russia2026-04-29
1018United Kingdom2026-04-27
1019India2026-05-18
1020Australia2026-05-23
1021France2026-04-30
1022United Kingdom2026-05-06
1023Japan2026-05-04
1024India2026-05-14
1025Germany2026-05-02
1026France2026-05-15
1027Spain2026-05-22
1028Argentina2026-04-27
1029Italy2026-05-10
1030Japan2026-05-08
1031France2026-04-29
1032Brazil2026-05-21
1033Australia2026-05-01
1034United Kingdom2026-04-27
1035Australia2026-05-18
1036United Kingdom2026-04-29
1037Spain2026-05-16
1038Australia2026-05-01
1039Italy2026-05-19
1040Japan2026-04-30
1041Argentina2026-04-26
1042Brazil2026-05-18
1043Canada2026-05-02
1044Germany2026-04-27
1045Spain2026-05-18
1046Germany2026-05-24
1047United Kingdom2026-04-28
1048Brazil2026-05-09
1049France2026-05-13

On-Demand Data

NameIdCountryDate
Kaitlin Ostrosky1000Brazil2026-05-15
Jefferson Schemmer1001Australia2026-05-25
Isabel Bowley1002Argentina2026-05-17
Misaki Royster1003Japan2026-04-26
Greenwood Bolognia1004Italy2026-05-25
Antonio Caudy1005United Kingdom2026-05-25
Cody Saylors1006United Kingdom2026-05-22
Aruna Figeroa1007Australia2026-05-04
Emily Whobrey1008Australia2026-04-28
Morrow Ruta1009Japan2026-05-22
Cody Saylors1010Spain2026-05-13
Chavez Briddick1011Australia2026-05-03
Cody Saylors1012Argentina2026-04-27
Adams Morasca1013Japan2026-05-09
Tony Foller1014Australia2026-05-23
Faith Gillian1015Canada2026-05-02
Julie Stenseth1016India2026-05-13
Julie Stenseth1017France2026-05-17
Julie Stenseth1018Germany2026-05-09
Jefferson Schemmer1019Spain2026-05-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Nicolas IturbideIndiaIoni Bowcher PROPOSAL
Jefferson SchemmerUnited KingdomXuxue Feng RENEWAL
Francesco ShinkoArgentinaAmy Elsner UNQUALIFIED
Kaitlin OstroskyItalyAmy Elsner PROPOSAL
Jefferson SchemmerUnited KingdomXuxue Feng NEW
Leon OldroydAustraliaIvan Magalhaes NEW
Rodrigues CampainRussiaXuxue Feng NEW
Alejandro PerinCanadaElwin Sharvill NEGOTIATION
Mujtaba NickaItalyElwin Sharvill RENEWAL
Antonio CaudyRussiaOnyama Limba NEGOTIATION
Rodrigues CampainSpainOnyama Limba RENEWAL
Jennifer AmigonCanadaIvan Magalhaes QUALIFIED
Jefferson SchemmerIndiaOnyama Limba PROPOSAL
Deepesh ChuiItalyBernardo Dominic QUALIFIED
Emily WhobreySpainIvan Magalhaes PROPOSAL
Tony FollerGermanyIvan Magalhaes RENEWAL
David DarakjyFranceXuxue Feng UNQUALIFIED
Adams MorascaAustraliaAsiya Javayant NEW
Kadeem FlosiSpainBernardo Dominic RENEWAL
Antonio CaudyJapanIoni Bowcher RENEWAL
Alejandro PerinSpainXuxue Feng UNQUALIFIED
Aruna FigeroaAustraliaIvan Magalhaes UNQUALIFIED
Mujtaba NickaAustraliaAmy Elsner NEW
Jones VocelkaFranceIoni Bowcher UNQUALIFIED
Isabel BowleyRussiaElwin Sharvill UNQUALIFIED
Mayumi KolmetzAustraliaBernardo Dominic RENEWAL
Stacey MacleadCanadaOnyama Limba PROPOSAL
Jennifer AmigonBrazilIoni Bowcher RENEWAL
James ButtBrazilStephen Shaw PROPOSAL
Adams MorascaGermanyXuxue Feng NEW
Tony FollerFranceXuxue Feng NEW
Ricardo GauchoCanadaIoni Bowcher RENEWAL
Isabel BowleyBrazilStephen Shaw PROPOSAL
Murillo MaletGermanyAmy Elsner PROPOSAL
Faith GillianItalyIoni Bowcher PROPOSAL
Ashley DoeArgentinaElwin Sharvill QUALIFIED
Aika InouyeRussiaElwin Sharvill NEW
Nicolas IturbideFranceBernardo Dominic QUALIFIED
Johnson SergiCanadaIoni Bowcher NEGOTIATION
Salvatore StockhamGermanyAmy Elsner 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>