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 KuskoAustraliaAsiya Javayant RENEWAL
Smith GlickRussiaAnna Fali RENEWAL
Misaki RoysterUnited KingdomBernardo Dominic RENEWAL
Morrow RutaJapanElwin Sharvill NEGOTIATION
Wickens NestleCanadaAmy Elsner NEW
Salvatore StockhamCanadaBernardo Dominic QUALIFIED
Juan WieserGermanyXuxue Feng NEGOTIATION
Kaitlin OstroskySpainXuxue Feng QUALIFIED
Arvin AlbaresGermanyAsiya Javayant QUALIFIED
Murillo MaletRussiaAsiya Javayant RENEWAL
Arvin AlbaresJapanAnna Fali PROPOSAL
Mujtaba NickaArgentinaElwin Sharvill QUALIFIED
Munro FerenczArgentinaAsiya Javayant RENEWAL
Izzy GarufiJapanAmy Elsner NEW
Darci PoquetteBrazilIvan Magalhaes NEGOTIATION
David DarakjyCanadaAnna Fali UNQUALIFIED
Rodrigues CampainSpainXuxue Feng NEW
Aruna FigeroaRussiaStephen Shaw NEGOTIATION
Tony FollerAustraliaAmy Elsner QUALIFIED
Mayumi KolmetzRussiaBernardo Dominic NEW
Isabel BowleyUnited KingdomXuxue Feng NEW
Tony FollerSpainOnyama Limba NEW
Salvatore StockhamGermanyIvan Magalhaes PROPOSAL
Morrow RutaArgentinaOnyama Limba RENEWAL
Aika InouyeRussiaStephen Shaw RENEWAL
Munro FerenczSpainIvan Magalhaes QUALIFIED
Leon OldroydIndiaAmy Elsner QUALIFIED
Tony FollerSpainIoni Bowcher QUALIFIED
Costa DilliardIndiaAmy Elsner QUALIFIED
Aruna FigeroaAustraliaIoni Bowcher UNQUALIFIED
Kaitlin OstroskyGermanyIvan Magalhaes UNQUALIFIED
Kadeem FlosiUnited KingdomAmy Elsner QUALIFIED
Faith GillianFranceXuxue Feng QUALIFIED
Mujtaba NickaSpainAsiya Javayant RENEWAL
Johnson SergiUnited KingdomBernardo Dominic RENEWAL
Ashley DoeAustraliaAmy Elsner QUALIFIED
Jefferson SchemmerGermanyXuxue Feng QUALIFIED
Jennifer AmigonCanadaAnna Fali RENEWAL
Francesco ShinkoItalyStephen Shaw QUALIFIED
Kaitlin OstroskyGermanyAsiya Javayant QUALIFIED
Julie StensethCanadaOnyama Limba RENEWAL
Isabel BowleyArgentinaBernardo Dominic QUALIFIED
Ivar PaprockiRussiaElwin Sharvill RENEWAL
Aika InouyeJapanAsiya Javayant NEW
Alejandro PerinArgentinaAnna Fali RENEWAL
Smith GlickArgentinaOnyama Limba UNQUALIFIED
Claire TollnerItalyAmy Elsner PROPOSAL
Johnson SergiIndiaOnyama Limba UNQUALIFIED
Jeanfrancois VenereIndiaElwin Sharvill NEGOTIATION
Maria MarrierIndiaBernardo Dominic RENEWAL
Horizontal
NameCountryRepresentativeStatus
Ivar PaprockiFranceIvan Magalhaes QUALIFIED
Francesco ShinkoAustraliaElwin Sharvill RENEWAL
Arvin AlbaresFranceElwin Sharvill NEGOTIATION
Mujtaba NickaSpainAnna Fali NEW
Ivar PaprockiJapanStephen Shaw NEGOTIATION
Misaki RoysterJapanXuxue Feng RENEWAL
Deepesh ChuiItalyAsiya Javayant QUALIFIED
Chavez BriddickFranceStephen Shaw QUALIFIED
Aditya KuskoArgentinaIvan Magalhaes RENEWAL
James ButtItalyStephen Shaw QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mayumi KolmetzUnited Kingdom2026-05-18Buckley Miller Wright PROPOSAL54Ivan Magalhaes
1001Francesco ShinkoIndia2026-05-09Commercial Press QUALIFIED64Amy Elsner
1002Kadeem FlosiIndia2026-05-08Chapman, Ross E Esq RENEWAL4Stephen Shaw
1003James ButtCanada2026-05-12Commercial Press NEGOTIATION9Ivan Magalhaes
1004Smith GlickSpain2026-05-29Commercial Press PROPOSAL31Onyama Limba
1005Adams MorascaJapan2026-05-20Chemel, James L Cpa NEW20Onyama Limba
1006Costa DilliardItaly2026-05-15Feiner Bros NEGOTIATION9Xuxue Feng
1007Ricardo GauchoArgentina2026-05-28Feiner Bros NEGOTIATION99Ivan Magalhaes
1008Sinclair WaycottIndia2026-06-02Feiner Bros UNQUALIFIED63Ivan Magalhaes
1009Faith GillianRussia2026-05-12Commercial Press NEGOTIATION8Elwin Sharvill
1010Faith GillianAustralia2026-05-28Chapman, Ross E Esq RENEWAL4Bernardo Dominic
1011Aika InouyeBrazil2026-05-06Truhlar And Truhlar Attys UNQUALIFIED12Bernardo Dominic
1012Cody SaylorsArgentina2026-05-14Truhlar And Truhlar Attys NEW53Asiya Javayant
1013Costa DilliardBrazil2026-05-28Chapman, Ross E Esq NEW5Ivan Magalhaes
1014Stacey MacleadRussia2026-05-08Feiner Bros NEW45Stephen Shaw
1015Deepesh ChuiAustralia2026-05-31King, Christopher A Esq PROPOSAL46Stephen Shaw
1016James ButtFrance2026-05-12Dorl, James J Esq NEW70Xuxue Feng
1017Aditya KuskoFrance2026-05-30Chanay, Jeffrey A Esq QUALIFIED7Asiya Javayant
1018Jones VocelkaRussia2026-05-24Truhlar And Truhlar Attys UNQUALIFIED60Ivan Magalhaes
1019Deepesh ChuiSpain2026-05-11Printing Dimensions QUALIFIED90Ioni Bowcher
1020David DarakjyRussia2026-05-11Chapman, Ross E Esq UNQUALIFIED39Asiya Javayant
1021Arvin AlbaresBrazil2026-05-22Rangoni Of Florence NEW12Xuxue Feng
1022Murillo MaletIndia2026-05-19Morlong Associates NEW67Anna Fali
1023Aditya KuskoUnited Kingdom2026-05-31Commercial Press RENEWAL6Ioni Bowcher
1024Arvin AlbaresIndia2026-05-31Chapman, Ross E Esq NEGOTIATION61Stephen Shaw
1025Greenwood BologniaBrazil2026-06-02Chemel, James L Cpa RENEWAL30Onyama Limba
1026Leon OldroydSpain2026-05-31Commercial Press NEW55Onyama Limba
1027Clifford RimBrazil2026-05-06Buckley Miller Wright PROPOSAL61Stephen Shaw
1028Darci PoquetteAustralia2026-05-09Benton, John B Jr PROPOSAL22Bernardo Dominic
1029Kaitlin OstroskyFrance2026-05-29Rangoni Of Florence PROPOSAL39Ioni Bowcher
1030Nicolas IturbideBrazil2026-05-09Feiner Bros QUALIFIED86Stephen Shaw
1031Francesco ShinkoGermany2026-05-05Chapman, Ross E Esq UNQUALIFIED96Stephen Shaw
1032Kadeem FlosiUnited Kingdom2026-05-15Chanay, Jeffrey A Esq NEW96Asiya Javayant
1033Izzy GarufiGermany2026-05-20Buckley Miller Wright NEGOTIATION96Anna Fali
1034Francesco ShinkoFrance2026-05-08Morlong Associates RENEWAL11Onyama Limba
1035Greenwood BologniaUnited Kingdom2026-05-13Rousseaux, Michael Esq NEGOTIATION96Elwin Sharvill
1036Darci PoquetteItaly2026-05-14Chanay, Jeffrey A Esq NEGOTIATION60Xuxue Feng
1037Salvatore StockhamCanada2026-05-13Morlong Associates UNQUALIFIED49Elwin Sharvill
1038Clifford RimBrazil2026-05-05Benton, John B Jr NEGOTIATION87Onyama Limba
1039Ivar PaprockiBrazil2026-05-17Commercial Press PROPOSAL35Xuxue Feng
1040James ButtRussia2026-05-21Commercial Press PROPOSAL59Elwin Sharvill
1041Julie StensethIndia2026-05-24Printing Dimensions QUALIFIED62Xuxue Feng
1042Jones VocelkaItaly2026-05-08Chanay, Jeffrey A Esq UNQUALIFIED85Elwin Sharvill
1043Misaki RoysterJapan2026-05-23Chanay, Jeffrey A Esq RENEWAL63Bernardo Dominic
1044Ivar PaprockiRussia2026-05-26Printing Dimensions NEGOTIATION11Ioni Bowcher
1045Aruna FigeroaUnited Kingdom2026-05-26Dorl, James J Esq NEW21Onyama Limba
1046Smith GlickFrance2026-05-14Rousseaux, Michael Esq NEW64Onyama Limba
1047Arvin AlbaresSpain2026-05-18Feiner Bros UNQUALIFIED4Asiya Javayant
1048Juan WieserUnited Kingdom2026-05-22Feiner Bros NEW25Xuxue Feng
1049Arvin AlbaresArgentina2026-05-05Dorl, James J Esq NEW82Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Ricardo GauchoItalyElwin Sharvill NEGOTIATION
Adams MorascaFranceOnyama Limba RENEWAL
Adams MorascaUnited KingdomElwin Sharvill RENEWAL
Darci PoquetteArgentinaIoni Bowcher NEGOTIATION
Jeanfrancois VenereCanadaOnyama Limba NEGOTIATION
Salvatore StockhamGermanyElwin Sharvill NEW
Rodrigues CampainIndiaAsiya Javayant PROPOSAL
Deepesh ChuiSpainStephen Shaw PROPOSAL
Wickens NestleSpainIoni Bowcher UNQUALIFIED
Aruna FigeroaFranceAnna Fali UNQUALIFIED
Ashley DoeCanadaXuxue Feng NEGOTIATION
Mayumi KolmetzJapanAsiya Javayant NEGOTIATION
Aditya KuskoCanadaAmy Elsner NEGOTIATION
Leja CaldareraCanadaBernardo Dominic UNQUALIFIED
Aruna FigeroaJapanElwin Sharvill NEGOTIATION
Francesco ShinkoAustraliaAmy Elsner RENEWAL
Tony FollerRussiaElwin Sharvill QUALIFIED
Ashley DoeItalyXuxue Feng RENEWAL
David DarakjyCanadaAmy Elsner NEGOTIATION
Izzy GarufiIndiaBernardo Dominic UNQUALIFIED
Rodrigues CampainJapanStephen Shaw QUALIFIED
Leja CaldareraFranceIoni Bowcher RENEWAL
Chavez BriddickFranceBernardo Dominic QUALIFIED
Ricardo GauchoUnited KingdomElwin Sharvill PROPOSAL
Sinclair WaycottGermanyStephen Shaw NEGOTIATION
Ricardo GauchoSpainIvan Magalhaes UNQUALIFIED
Leon OldroydAustraliaBernardo Dominic PROPOSAL
Murillo MaletUnited KingdomIvan Magalhaes PROPOSAL
Ricardo GauchoRussiaXuxue Feng PROPOSAL
Deepesh ChuiRussiaAmy Elsner QUALIFIED
Aika InouyeFranceAnna Fali UNQUALIFIED
Jefferson SchemmerRussiaBernardo Dominic PROPOSAL
Jones VocelkaCanadaAmy Elsner RENEWAL
Maria MarrierRussiaStephen Shaw RENEWAL
Ivar PaprockiCanadaAmy Elsner RENEWAL
Jones VocelkaGermanyIvan Magalhaes PROPOSAL
Isabel BowleySpainOnyama Limba RENEWAL
Isabel BowleyCanadaAnna Fali UNQUALIFIED
Wickens NestleSpainIoni Bowcher NEW
Aruna FigeroaAustraliaXuxue Feng QUALIFIED
Julie StensethArgentinaOnyama Limba QUALIFIED
Wickens NestleBrazilElwin Sharvill PROPOSAL
Jennifer AmigonIndiaBernardo Dominic QUALIFIED
Ashley DoeAustraliaXuxue Feng RENEWAL
Jennifer AmigonAustraliaBernardo Dominic UNQUALIFIED
David DarakjyGermanyElwin Sharvill NEW
Jennifer AmigonCanadaXuxue Feng NEW
Aika InouyeIndiaStephen Shaw NEW
Munro FerenczFranceAmy Elsner RENEWAL
Jennifer AmigonIndiaOnyama Limba UNQUALIFIED
Frozen Columns
Name
Kadeem Flosi
Maria Marrier
Adams Morasca
Aruna Figeroa
Silvio Slusarski
Jefferson Schemmer
Morrow Ruta
Morrow Ruta
Mujtaba Nicka
Octavia Malet
Adams Morasca
Kadeem Flosi
Emily Whobrey
Misaki Royster
Greenwood Bolognia
Wickens Nestle
Aika Inouye
Greenwood Bolognia
Faith Gillian
Deepesh Chui
Jeanfrancois Venere
Tony Foller
Cody Saylors
Cody Saylors
Ashley Doe
Smith Glick
Rodrigues Campain
Cody Saylors
Smith Glick
Tony Foller
Cody Saylors
Misaki Royster
Jeanfrancois Venere
Aruna Figeroa
Jeanfrancois Venere
Darci Poquette
Aditya Kusko
Murillo Malet
Deepesh Chui
Greenwood Bolognia
Darci Poquette
Misaki Royster
Silvio Slusarski
Tony Foller
Emily Whobrey
Kadeem Flosi
Costa Dilliard
Arvin Albares
Juan Wieser
Leja Caldarera
IdCountryDate
1000Italy2026-05-23
1001Argentina2026-05-07
1002Japan2026-05-30
1003Russia2026-06-02
1004Spain2026-05-12
1005India2026-05-22
1006Spain2026-05-25
1007Russia2026-05-08
1008United Kingdom2026-05-05
1009India2026-05-05
1010Italy2026-05-21
1011Italy2026-05-07
1012Argentina2026-05-04
1013Germany2026-05-19
1014India2026-05-24
1015France2026-05-17
1016France2026-05-18
1017United Kingdom2026-05-13
1018Germany2026-05-09
1019Japan2026-05-26
1020Japan2026-05-07
1021United Kingdom2026-05-12
1022Australia2026-05-22
1023Italy2026-05-05
1024Canada2026-05-19
1025Canada2026-05-09
1026India2026-05-20
1027Russia2026-05-13
1028Australia2026-05-12
1029Australia2026-05-29
1030Italy2026-05-13
1031Germany2026-06-02
1032Brazil2026-05-19
1033India2026-05-18
1034Brazil2026-05-15
1035India2026-05-13
1036Russia2026-05-29
1037Brazil2026-05-29
1038Italy2026-05-08
1039Japan2026-05-23
1040Spain2026-05-28
1041Spain2026-05-25
1042Italy2026-05-22
1043Argentina2026-05-08
1044Australia2026-05-28
1045Germany2026-05-09
1046Canada2026-05-20
1047India2026-05-30
1048Australia2026-05-10
1049Spain2026-05-05

On-Demand Data

NameIdCountryDate
Stacey Maclead1000Italy2026-05-27
Salvatore Stockham1001Russia2026-05-24
Mujtaba Nicka1002France2026-05-24
Juan Wieser1003Brazil2026-05-06
Francesco Shinko1004Russia2026-05-22
Aika Inouye1005Brazil2026-05-08
Misaki Royster1006Germany2026-05-25
Adams Morasca1007Australia2026-06-02
Ivar Paprocki1008India2026-05-20
Rodrigues Campain1009Japan2026-05-15
Arvin Albares1010Spain2026-06-02
Maisha Rulapaugh1011India2026-05-23
Ricardo Gaucho1012Spain2026-05-27
Emily Whobrey1013Japan2026-05-09
Arvin Albares1014Germany2026-05-16
Adams Morasca1015Brazil2026-05-14
James Butt1016United Kingdom2026-05-22
Ivar Paprocki1017India2026-05-31
Leja Caldarera1018India2026-05-13
Ivar Paprocki1019Japan2026-05-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Silvio SlusarskiIndiaXuxue Feng PROPOSAL
Kaitlin OstroskyFranceAnna Fali QUALIFIED
Jones VocelkaCanadaAsiya Javayant UNQUALIFIED
Mayumi KolmetzFranceElwin Sharvill RENEWAL
Misaki RoysterUnited KingdomAsiya Javayant RENEWAL
Murillo MaletArgentinaAsiya Javayant NEGOTIATION
Salvatore StockhamCanadaAmy Elsner QUALIFIED
Smith GlickIndiaIvan Magalhaes QUALIFIED
Leja CaldareraIndiaAsiya Javayant UNQUALIFIED
David DarakjyIndiaAmy Elsner UNQUALIFIED
Mayumi KolmetzGermanyIoni Bowcher QUALIFIED
Smith GlickIndiaAnna Fali PROPOSAL
Arvin AlbaresFranceIvan Magalhaes QUALIFIED
Faith GillianRussiaStephen Shaw PROPOSAL
Mujtaba NickaGermanyIvan Magalhaes NEGOTIATION
Nicolas IturbideJapanOnyama Limba UNQUALIFIED
Alejandro PerinGermanyBernardo Dominic QUALIFIED
Greenwood BologniaIndiaStephen Shaw PROPOSAL
Sinclair WaycottUnited KingdomStephen Shaw NEGOTIATION
Silvio SlusarskiBrazilXuxue Feng QUALIFIED
Alejandro PerinGermanyStephen Shaw NEW
Aditya KuskoJapanAsiya Javayant NEGOTIATION
Chavez BriddickFranceElwin Sharvill RENEWAL
Greenwood BologniaSpainAsiya Javayant PROPOSAL
Morrow RutaItalyAnna Fali QUALIFIED
Leon OldroydIndiaAmy Elsner UNQUALIFIED
Clifford RimUnited KingdomAmy Elsner QUALIFIED
Claire TollnerArgentinaStephen Shaw NEGOTIATION
Kaitlin OstroskyAustraliaIoni Bowcher NEW
Octavia MaletJapanBernardo Dominic RENEWAL
Salvatore StockhamArgentinaOnyama Limba RENEWAL
Mayumi KolmetzCanadaOnyama Limba RENEWAL
Kadeem FlosiUnited KingdomAsiya Javayant QUALIFIED
Smith GlickBrazilStephen Shaw UNQUALIFIED
Chavez BriddickFranceElwin Sharvill NEGOTIATION
Kadeem FlosiJapanAnna Fali NEW
Jennifer AmigonItalyElwin Sharvill RENEWAL
Deepesh ChuiGermanyAnna Fali NEW
Octavia MaletRussiaOnyama Limba NEGOTIATION
Juan WieserFranceOnyama Limba 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>