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
Stacey MacleadAustraliaElwin Sharvill NEW
Leja CaldareraCanadaAmy Elsner PROPOSAL
Alejandro PerinRussiaXuxue Feng PROPOSAL
Murillo MaletIndiaXuxue Feng RENEWAL
Wickens NestleSpainStephen Shaw RENEWAL
Maria MarrierJapanBernardo Dominic RENEWAL
Rodrigues CampainIndiaAsiya Javayant NEW
Stacey MacleadAustraliaXuxue Feng NEW
Antonio CaudyBrazilIvan Magalhaes NEW
Jefferson SchemmerArgentinaAsiya Javayant NEGOTIATION
Chavez BriddickFranceBernardo Dominic RENEWAL
Tony FollerGermanyBernardo Dominic QUALIFIED
Morrow RutaRussiaAmy Elsner NEGOTIATION
Juan WieserJapanIvan Magalhaes UNQUALIFIED
Greenwood BologniaIndiaElwin Sharvill PROPOSAL
Leon OldroydAustraliaAnna Fali UNQUALIFIED
Jennifer AmigonJapanAsiya Javayant NEGOTIATION
Wickens NestleUnited KingdomElwin Sharvill PROPOSAL
Sinclair WaycottUnited KingdomIvan Magalhaes UNQUALIFIED
Greenwood BologniaRussiaIvan Magalhaes PROPOSAL
Alejandro PerinRussiaAsiya Javayant QUALIFIED
Jeanfrancois VenereFranceIvan Magalhaes RENEWAL
Aditya KuskoSpainIoni Bowcher RENEWAL
Stacey MacleadAustraliaIvan Magalhaes RENEWAL
Ricardo GauchoFranceElwin Sharvill RENEWAL
Claire TollnerJapanAnna Fali RENEWAL
Stacey MacleadJapanAsiya Javayant NEW
Sinclair WaycottItalyElwin Sharvill RENEWAL
Jennifer AmigonUnited KingdomElwin Sharvill PROPOSAL
Aditya KuskoIndiaAmy Elsner NEGOTIATION
Munro FerenczBrazilAnna Fali UNQUALIFIED
Ivar PaprockiRussiaIvan Magalhaes QUALIFIED
Stacey MacleadGermanyStephen Shaw UNQUALIFIED
Kaitlin OstroskyRussiaBernardo Dominic NEW
Jefferson SchemmerIndiaStephen Shaw RENEWAL
James ButtUnited KingdomXuxue Feng PROPOSAL
James ButtIndiaElwin Sharvill PROPOSAL
Jeanfrancois VenereSpainXuxue Feng RENEWAL
Tony FollerCanadaStephen Shaw NEW
Darci PoquetteItalyXuxue Feng NEW
Tony FollerSpainIvan Magalhaes PROPOSAL
Jones VocelkaIndiaElwin Sharvill NEW
Maria MarrierBrazilXuxue Feng PROPOSAL
Morrow RutaCanadaStephen Shaw UNQUALIFIED
Morrow RutaCanadaAmy Elsner UNQUALIFIED
Costa DilliardBrazilIvan Magalhaes PROPOSAL
Greenwood BologniaSpainStephen Shaw QUALIFIED
Johnson SergiCanadaOnyama Limba QUALIFIED
Kadeem FlosiArgentinaIoni Bowcher QUALIFIED
Ricardo GauchoRussiaAnna Fali UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Julie StensethUnited KingdomAsiya Javayant RENEWAL
Deepesh ChuiGermanyStephen Shaw QUALIFIED
Faith GillianArgentinaElwin Sharvill UNQUALIFIED
Ivar PaprockiUnited KingdomAsiya Javayant QUALIFIED
Darci PoquetteJapanStephen Shaw NEGOTIATION
Jennifer AmigonIndiaIvan Magalhaes NEW
Misaki RoysterCanadaAnna Fali UNQUALIFIED
Leon OldroydJapanXuxue Feng NEGOTIATION
Misaki RoysterBrazilAnna Fali QUALIFIED
Maria MarrierIndiaOnyama Limba PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Stacey MacleadRussia2026-06-12Commercial Press NEW50Ioni Bowcher
1001Kaitlin OstroskyItaly2026-05-19Chemel, James L Cpa UNQUALIFIED81Amy Elsner
1002Wickens NestleGermany2026-05-15Dorl, James J Esq PROPOSAL24Stephen Shaw
1003Kaitlin OstroskyRussia2026-06-13King, Christopher A Esq NEW30Ioni Bowcher
1004Jennifer AmigonRussia2026-06-02Buckley Miller Wright NEW51Ivan Magalhaes
1005Ashley DoeBrazil2026-05-27Truhlar And Truhlar Attys UNQUALIFIED20Stephen Shaw
1006Mujtaba NickaFrance2026-06-02Chapman, Ross E Esq PROPOSAL67Amy Elsner
1007Leja CaldareraBrazil2026-05-27Feiner Bros NEGOTIATION22Amy Elsner
1008Morrow RutaFrance2026-06-03Rangoni Of Florence PROPOSAL15Ivan Magalhaes
1009Smith GlickIndia2026-06-01King, Christopher A Esq NEW99Ioni Bowcher
1010Antonio CaudyItaly2026-06-13Chapman, Ross E Esq PROPOSAL0Elwin Sharvill
1011Rodrigues CampainCanada2026-06-03Commercial Press PROPOSAL11Stephen Shaw
1012Deepesh ChuiCanada2026-06-02Feltz Printing Service PROPOSAL62Ivan Magalhaes
1013Kadeem FlosiItaly2026-05-16Commercial Press PROPOSAL0Elwin Sharvill
1014Deepesh ChuiJapan2026-05-15Dorl, James J Esq PROPOSAL87Xuxue Feng
1015Maria MarrierUnited Kingdom2026-06-02Morlong Associates NEGOTIATION24Anna Fali
1016David DarakjyArgentina2026-05-24Rangoni Of Florence RENEWAL59Stephen Shaw
1017Aditya KuskoBrazil2026-06-04Buckley Miller Wright RENEWAL75Stephen Shaw
1018Aditya KuskoCanada2026-06-10Benton, John B Jr UNQUALIFIED57Asiya Javayant
1019Isabel BowleyAustralia2026-05-26Feltz Printing Service NEW44Elwin Sharvill
1020Jones VocelkaUnited Kingdom2026-05-28Feltz Printing Service UNQUALIFIED91Elwin Sharvill
1021Alejandro PerinItaly2026-06-08Rousseaux, Michael Esq PROPOSAL43Ioni Bowcher
1022Morrow RutaFrance2026-05-21Rousseaux, Michael Esq NEGOTIATION5Anna Fali
1023Clifford RimSpain2026-06-11Feltz Printing Service UNQUALIFIED30Amy Elsner
1024Mujtaba NickaSpain2026-06-06Chanay, Jeffrey A Esq RENEWAL52Onyama Limba
1025Emily WhobreyUnited Kingdom2026-05-17Rangoni Of Florence UNQUALIFIED33Onyama Limba
1026Maria MarrierSpain2026-05-19Feiner Bros RENEWAL8Xuxue Feng
1027Maisha RulapaughArgentina2026-06-12King, Christopher A Esq QUALIFIED6Ioni Bowcher
1028Antonio CaudyGermany2026-05-16Buckley Miller Wright NEGOTIATION35Xuxue Feng
1029Julie StensethUnited Kingdom2026-06-02Chanay, Jeffrey A Esq PROPOSAL5Ioni Bowcher
1030Jefferson SchemmerAustralia2026-06-08Feiner Bros PROPOSAL36Onyama Limba
1031Smith GlickAustralia2026-05-23Feltz Printing Service NEW62Amy Elsner
1032Maisha RulapaughAustralia2026-06-02King, Christopher A Esq NEW27Amy Elsner
1033Ashley DoeIndia2026-06-03Printing Dimensions NEW70Ivan Magalhaes
1034Maisha RulapaughGermany2026-06-02Chapman, Ross E Esq PROPOSAL83Ivan Magalhaes
1035Alejandro PerinIndia2026-06-11Chanay, Jeffrey A Esq PROPOSAL5Ioni Bowcher
1036Ashley DoeUnited Kingdom2026-05-17Feltz Printing Service NEGOTIATION58Asiya Javayant
1037Rodrigues CampainCanada2026-05-23King, Christopher A Esq QUALIFIED58Ioni Bowcher
1038Antonio CaudyIndia2026-06-07Rousseaux, Michael Esq RENEWAL23Bernardo Dominic
1039Wickens NestleRussia2026-06-11Chanay, Jeffrey A Esq NEGOTIATION29Bernardo Dominic
1040David DarakjyFrance2026-05-17Chapman, Ross E Esq NEGOTIATION60Ioni Bowcher
1041Deepesh ChuiGermany2026-06-03Printing Dimensions NEGOTIATION3Xuxue Feng
1042Ivar PaprockiArgentina2026-06-13Morlong Associates NEW68Asiya Javayant
1043Salvatore StockhamBrazil2026-06-05Chemel, James L Cpa RENEWAL8Ioni Bowcher
1044Kaitlin OstroskyIndia2026-06-01Buckley Miller Wright NEW53Anna Fali
1045Antonio CaudyIndia2026-05-23Dorl, James J Esq QUALIFIED42Xuxue Feng
1046Faith GillianRussia2026-05-20Rousseaux, Michael Esq RENEWAL79Asiya Javayant
1047Costa DilliardBrazil2026-05-25Rangoni Of Florence NEGOTIATION14Amy Elsner
1048Octavia MaletGermany2026-05-21Feiner Bros NEGOTIATION87Elwin Sharvill
1049Murillo MaletFrance2026-05-30King, Christopher A Esq RENEWAL67Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Johnson SergiIndiaIoni Bowcher QUALIFIED
Jones VocelkaJapanXuxue Feng PROPOSAL
Jones VocelkaBrazilAmy Elsner QUALIFIED
David DarakjyArgentinaAsiya Javayant NEGOTIATION
Morrow RutaArgentinaOnyama Limba RENEWAL
Octavia MaletItalyStephen Shaw QUALIFIED
Kaitlin OstroskyArgentinaAnna Fali NEW
Tony FollerItalyXuxue Feng RENEWAL
Morrow RutaBrazilIoni Bowcher QUALIFIED
Leon OldroydBrazilAnna Fali QUALIFIED
Johnson SergiRussiaXuxue Feng UNQUALIFIED
Morrow RutaArgentinaStephen Shaw NEW
Sinclair WaycottGermanyStephen Shaw PROPOSAL
Octavia MaletJapanBernardo Dominic NEGOTIATION
Silvio SlusarskiBrazilAnna Fali NEW
Antonio CaudyJapanIvan Magalhaes NEW
Francesco ShinkoGermanyAmy Elsner PROPOSAL
Smith GlickGermanyBernardo Dominic NEW
Aika InouyeGermanyAnna Fali PROPOSAL
Greenwood BologniaArgentinaAnna Fali RENEWAL
Deepesh ChuiCanadaXuxue Feng NEW
Mayumi KolmetzUnited KingdomStephen Shaw NEW
Misaki RoysterAustraliaStephen Shaw QUALIFIED
Maisha RulapaughFranceIvan Magalhaes QUALIFIED
Isabel BowleyItalyAmy Elsner NEGOTIATION
Silvio SlusarskiIndiaOnyama Limba NEW
Francesco ShinkoAustraliaIvan Magalhaes NEGOTIATION
Izzy GarufiGermanyAmy Elsner RENEWAL
Kaitlin OstroskyGermanyOnyama Limba NEGOTIATION
Juan WieserJapanAnna Fali QUALIFIED
Octavia MaletAustraliaIvan Magalhaes QUALIFIED
Isabel BowleyCanadaBernardo Dominic QUALIFIED
Murillo MaletCanadaBernardo Dominic UNQUALIFIED
Jones VocelkaIndiaOnyama Limba RENEWAL
Aditya KuskoBrazilAnna Fali RENEWAL
Chavez BriddickItalyIoni Bowcher NEGOTIATION
James ButtAustraliaOnyama Limba UNQUALIFIED
Aruna FigeroaFranceXuxue Feng PROPOSAL
Alejandro PerinItalyXuxue Feng NEW
Smith GlickJapanElwin Sharvill PROPOSAL
Smith GlickJapanOnyama Limba NEGOTIATION
Chavez BriddickBrazilStephen Shaw PROPOSAL
Julie StensethBrazilXuxue Feng NEW
Jones VocelkaFranceAsiya Javayant UNQUALIFIED
Cody SaylorsSpainStephen Shaw NEGOTIATION
Clifford RimRussiaStephen Shaw RENEWAL
Maisha RulapaughRussiaIvan Magalhaes PROPOSAL
Cody SaylorsGermanyXuxue Feng NEGOTIATION
Salvatore StockhamIndiaAmy Elsner QUALIFIED
Juan WieserFranceIvan Magalhaes NEW
Frozen Columns
Name
Clifford Rim
Aika Inouye
Deepesh Chui
Ricardo Gaucho
Munro Ferencz
Tony Foller
Johnson Sergi
Juan Wieser
Sinclair Waycott
Silvio Slusarski
James Butt
Aditya Kusko
Johnson Sergi
Kaitlin Ostrosky
Mujtaba Nicka
Mujtaba Nicka
Deepesh Chui
Kaitlin Ostrosky
Maisha Rulapaugh
Antonio Caudy
Emily Whobrey
Munro Ferencz
Nicolas Iturbide
Leon Oldroyd
Kaitlin Ostrosky
Cody Saylors
Sinclair Waycott
Leon Oldroyd
Faith Gillian
Ivar Paprocki
Morrow Ruta
Francesco Shinko
Kaitlin Ostrosky
Ashley Doe
Leon Oldroyd
Silvio Slusarski
Nicolas Iturbide
Arvin Albares
Leon Oldroyd
Silvio Slusarski
Kaitlin Ostrosky
Octavia Malet
Misaki Royster
Ricardo Gaucho
Mujtaba Nicka
Cody Saylors
Claire Tollner
Juan Wieser
Arvin Albares
Adams Morasca
IdCountryDate
1000Canada2026-05-26
1001France2026-05-15
1002Germany2026-05-30
1003United Kingdom2026-05-28
1004Canada2026-06-13
1005Australia2026-06-04
1006United Kingdom2026-06-08
1007Spain2026-05-23
1008Russia2026-05-29
1009India2026-06-09
1010Germany2026-05-25
1011Canada2026-05-17
1012Russia2026-06-02
1013Argentina2026-05-20
1014United Kingdom2026-06-10
1015Germany2026-05-25
1016Japan2026-05-19
1017Australia2026-05-30
1018Italy2026-06-02
1019Germany2026-05-31
1020Russia2026-05-21
1021India2026-05-27
1022Japan2026-06-02
1023Australia2026-06-02
1024United Kingdom2026-06-07
1025France2026-06-11
1026Russia2026-05-18
1027Italy2026-05-27
1028Japan2026-05-16
1029Italy2026-06-06
1030Japan2026-06-09
1031India2026-06-07
1032Germany2026-06-07
1033Russia2026-05-26
1034Brazil2026-06-08
1035Canada2026-06-03
1036Argentina2026-05-21
1037France2026-05-24
1038United Kingdom2026-05-21
1039Brazil2026-05-31
1040France2026-05-27
1041Australia2026-06-12
1042Italy2026-05-18
1043United Kingdom2026-06-10
1044Germany2026-06-05
1045Argentina2026-06-12
1046Canada2026-05-25
1047Germany2026-06-12
1048Argentina2026-05-31
1049Italy2026-05-31

On-Demand Data

NameIdCountryDate
Arvin Albares1000United Kingdom2026-05-20
Darci Poquette1001Italy2026-06-04
Murillo Malet1002Australia2026-06-12
Misaki Royster1003Australia2026-05-30
Costa Dilliard1004Japan2026-06-02
Arvin Albares1005Spain2026-05-30
Faith Gillian1006Canada2026-05-22
Adams Morasca1007Canada2026-05-20
Leon Oldroyd1008Australia2026-05-31
Murillo Malet1009Italy2026-05-30
Mujtaba Nicka1010Australia2026-06-04
Tony Foller1011Australia2026-05-27
Chavez Briddick1012Spain2026-05-28
Leja Caldarera1013Brazil2026-05-27
Ashley Doe1014Russia2026-06-04
Francesco Shinko1015Canada2026-05-15
Tony Foller1016United Kingdom2026-05-15
Jeanfrancois Venere1017Germany2026-06-11
Isabel Bowley1018Australia2026-05-24
Sinclair Waycott1019Australia2026-05-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Munro FerenczGermanyIoni Bowcher PROPOSAL
Sinclair WaycottGermanyStephen Shaw UNQUALIFIED
Cody SaylorsRussiaAnna Fali NEW
Aditya KuskoItalyElwin Sharvill QUALIFIED
Kadeem FlosiCanadaIvan Magalhaes RENEWAL
Francesco ShinkoGermanyAnna Fali NEGOTIATION
Smith GlickJapanBernardo Dominic QUALIFIED
Misaki RoysterUnited KingdomAnna Fali UNQUALIFIED
Rodrigues CampainBrazilElwin Sharvill NEW
Jeanfrancois VenereRussiaIoni Bowcher UNQUALIFIED
Izzy GarufiArgentinaStephen Shaw RENEWAL
Greenwood BologniaArgentinaAsiya Javayant UNQUALIFIED
Claire TollnerUnited KingdomStephen Shaw QUALIFIED
Wickens NestleUnited KingdomAmy Elsner RENEWAL
Kaitlin OstroskyCanadaAmy Elsner PROPOSAL
Morrow RutaGermanyBernardo Dominic PROPOSAL
James ButtRussiaBernardo Dominic NEW
Claire TollnerSpainBernardo Dominic PROPOSAL
Mujtaba NickaFranceAsiya Javayant NEW
Ivar PaprockiUnited KingdomXuxue Feng PROPOSAL
Deepesh ChuiArgentinaXuxue Feng RENEWAL
Misaki RoysterCanadaIoni Bowcher QUALIFIED
Faith GillianBrazilIoni Bowcher PROPOSAL
Darci PoquetteArgentinaAsiya Javayant NEGOTIATION
Deepesh ChuiItalyAnna Fali NEGOTIATION
Ricardo GauchoSpainElwin Sharvill PROPOSAL
Misaki RoysterRussiaOnyama Limba NEW
Jeanfrancois VenereCanadaAnna Fali UNQUALIFIED
Mayumi KolmetzBrazilIvan Magalhaes RENEWAL
Silvio SlusarskiUnited KingdomAnna Fali QUALIFIED
James ButtCanadaIoni Bowcher NEW
Munro FerenczFranceIoni Bowcher QUALIFIED
Wickens NestleItalyElwin Sharvill NEGOTIATION
Emily WhobreyRussiaElwin Sharvill NEW
Costa DilliardFranceStephen Shaw NEGOTIATION
Tony FollerGermanyOnyama Limba RENEWAL
Deepesh ChuiBrazilAsiya Javayant NEW
Alejandro PerinCanadaElwin Sharvill NEW
Isabel BowleyGermanyXuxue Feng NEW
Isabel BowleyArgentinaAnna Fali 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>