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 SergiIndiaBernardo Dominic NEW
Maisha RulapaughRussiaXuxue Feng NEGOTIATION
Jones VocelkaIndiaIvan Magalhaes NEW
Francesco ShinkoFranceIvan Magalhaes PROPOSAL
Aika InouyeFranceStephen Shaw PROPOSAL
Arvin AlbaresCanadaBernardo Dominic NEW
Munro FerenczArgentinaBernardo Dominic UNQUALIFIED
Salvatore StockhamUnited KingdomAnna Fali NEGOTIATION
Jones VocelkaCanadaIoni Bowcher QUALIFIED
Stacey MacleadItalyAnna Fali QUALIFIED
Nicolas IturbideBrazilXuxue Feng UNQUALIFIED
Tony FollerCanadaIvan Magalhaes RENEWAL
Ivar PaprockiArgentinaBernardo Dominic UNQUALIFIED
Sinclair WaycottBrazilIvan Magalhaes NEW
Ricardo GauchoGermanyIvan Magalhaes QUALIFIED
Clifford RimFranceStephen Shaw NEGOTIATION
Munro FerenczSpainBernardo Dominic PROPOSAL
Cody SaylorsItalyXuxue Feng QUALIFIED
Misaki RoysterItalyIoni Bowcher QUALIFIED
Julie StensethUnited KingdomStephen Shaw UNQUALIFIED
Kaitlin OstroskyBrazilOnyama Limba QUALIFIED
Chavez BriddickGermanyIoni Bowcher QUALIFIED
Maisha RulapaughSpainAnna Fali RENEWAL
Jeanfrancois VenereCanadaStephen Shaw PROPOSAL
Wickens NestleGermanyAnna Fali NEW
Emily WhobreyItalyIvan Magalhaes NEGOTIATION
Smith GlickJapanAmy Elsner NEW
Francesco ShinkoBrazilOnyama Limba QUALIFIED
Stacey MacleadUnited KingdomAnna Fali NEW
Maisha RulapaughFranceAnna Fali RENEWAL
Emily WhobreyFranceBernardo Dominic PROPOSAL
Ashley DoeBrazilElwin Sharvill RENEWAL
Juan WieserIndiaAsiya Javayant RENEWAL
Murillo MaletIndiaBernardo Dominic NEW
Emily WhobreyArgentinaStephen Shaw NEW
Ashley DoeAustraliaStephen Shaw NEW
Kaitlin OstroskyJapanAmy Elsner NEGOTIATION
Cody SaylorsCanadaIoni Bowcher RENEWAL
Clifford RimSpainStephen Shaw PROPOSAL
Faith GillianBrazilIvan Magalhaes NEGOTIATION
Rodrigues CampainItalyIoni Bowcher RENEWAL
Maisha RulapaughItalyIvan Magalhaes PROPOSAL
Ivar PaprockiGermanyAmy Elsner UNQUALIFIED
Aditya KuskoGermanyIvan Magalhaes NEW
Jones VocelkaAustraliaAmy Elsner PROPOSAL
Ivar PaprockiItalyAnna Fali NEW
Alejandro PerinUnited KingdomStephen Shaw NEW
Adams MorascaJapanOnyama Limba NEGOTIATION
Antonio CaudyCanadaIoni Bowcher NEGOTIATION
Leon OldroydIndiaAnna Fali UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Deepesh ChuiUnited KingdomElwin Sharvill QUALIFIED
Silvio SlusarskiFranceXuxue Feng PROPOSAL
Jeanfrancois VenereFranceAsiya Javayant UNQUALIFIED
Costa DilliardRussiaElwin Sharvill RENEWAL
Leon OldroydItalyBernardo Dominic PROPOSAL
Ivar PaprockiBrazilStephen Shaw UNQUALIFIED
Mujtaba NickaSpainXuxue Feng NEW
Emily WhobreySpainStephen Shaw RENEWAL
David DarakjyUnited KingdomStephen Shaw PROPOSAL
David DarakjyArgentinaIoni Bowcher NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Murillo MaletCanada2026-05-09Rousseaux, Michael Esq UNQUALIFIED1Onyama Limba
1001Alejandro PerinJapan2026-05-04Rousseaux, Michael Esq NEGOTIATION59Ioni Bowcher
1002Darci PoquetteFrance2026-04-29King, Christopher A Esq QUALIFIED72Asiya Javayant
1003Jefferson SchemmerRussia2026-04-17Morlong Associates RENEWAL27Stephen Shaw
1004Greenwood BologniaArgentina2026-04-17Dorl, James J Esq NEW69Asiya Javayant
1005Mujtaba NickaBrazil2026-04-28Chanay, Jeffrey A Esq NEGOTIATION30Ioni Bowcher
1006Greenwood BologniaUnited Kingdom2026-05-05Truhlar And Truhlar Attys RENEWAL91Amy Elsner
1007Maisha RulapaughBrazil2026-04-18Commercial Press UNQUALIFIED66Stephen Shaw
1008Murillo MaletItaly2026-04-22King, Christopher A Esq NEW68Xuxue Feng
1009Juan WieserArgentina2026-05-06Commercial Press UNQUALIFIED25Ioni Bowcher
1010Smith GlickJapan2026-05-01King, Christopher A Esq PROPOSAL45Asiya Javayant
1011Murillo MaletSpain2026-05-08Benton, John B Jr NEGOTIATION86Amy Elsner
1012Claire TollnerJapan2026-05-09Buckley Miller Wright PROPOSAL95Ioni Bowcher
1013Stacey MacleadItaly2026-05-01Chapman, Ross E Esq QUALIFIED39Xuxue Feng
1014Cody SaylorsFrance2026-05-13Chanay, Jeffrey A Esq NEGOTIATION73Bernardo Dominic
1015Costa DilliardBrazil2026-04-19Printing Dimensions RENEWAL92Ioni Bowcher
1016Misaki RoysterItaly2026-04-18Dorl, James J Esq NEW45Ivan Magalhaes
1017Costa DilliardBrazil2026-05-13Commercial Press RENEWAL71Elwin Sharvill
1018Leon OldroydArgentina2026-04-18Morlong Associates PROPOSAL88Amy Elsner
1019Murillo MaletUnited Kingdom2026-04-17Truhlar And Truhlar Attys RENEWAL95Bernardo Dominic
1020Cody SaylorsFrance2026-05-08King, Christopher A Esq NEGOTIATION69Amy Elsner
1021Cody SaylorsAustralia2026-05-13Rousseaux, Michael Esq NEGOTIATION65Ivan Magalhaes
1022Darci PoquetteUnited Kingdom2026-04-20Rousseaux, Michael Esq UNQUALIFIED6Asiya Javayant
1023Ashley DoeSpain2026-05-06Feiner Bros NEGOTIATION95Ioni Bowcher
1024Ricardo GauchoItaly2026-04-28Rousseaux, Michael Esq RENEWAL92Xuxue Feng
1025Ricardo GauchoAustralia2026-05-05Truhlar And Truhlar Attys RENEWAL21Asiya Javayant
1026Claire TollnerUnited Kingdom2026-05-13Dorl, James J Esq NEW90Ioni Bowcher
1027Ivar PaprockiSpain2026-04-20Commercial Press RENEWAL68Bernardo Dominic
1028Deepesh ChuiFrance2026-05-12King, Christopher A Esq QUALIFIED82Elwin Sharvill
1029Jeanfrancois VenereIndia2026-05-08Dorl, James J Esq NEGOTIATION19Xuxue Feng
1030Jones VocelkaBrazil2026-04-15Chemel, James L Cpa PROPOSAL87Ioni Bowcher
1031Cody SaylorsItaly2026-04-17Chapman, Ross E Esq RENEWAL70Onyama Limba
1032Johnson SergiIndia2026-04-22Chanay, Jeffrey A Esq NEGOTIATION80Elwin Sharvill
1033Munro FerenczFrance2026-05-03Morlong Associates NEW13Ivan Magalhaes
1034Antonio CaudyCanada2026-04-20Rousseaux, Michael Esq PROPOSAL17Bernardo Dominic
1035Deepesh ChuiGermany2026-05-14Chapman, Ross E Esq QUALIFIED64Amy Elsner
1036Francesco ShinkoJapan2026-04-24Dorl, James J Esq RENEWAL0Xuxue Feng
1037Morrow RutaUnited Kingdom2026-04-30Feiner Bros NEW8Amy Elsner
1038Deepesh ChuiIndia2026-05-05Commercial Press RENEWAL31Ivan Magalhaes
1039Costa DilliardJapan2026-05-05Rangoni Of Florence QUALIFIED67Amy Elsner
1040Stacey MacleadGermany2026-05-05Commercial Press NEGOTIATION76Amy Elsner
1041Antonio CaudyItaly2026-05-11Truhlar And Truhlar Attys NEW48Onyama Limba
1042Sinclair WaycottIndia2026-04-15Rangoni Of Florence NEW18Onyama Limba
1043Mayumi KolmetzRussia2026-05-05Truhlar And Truhlar Attys NEW13Amy Elsner
1044Maria MarrierCanada2026-04-28Dorl, James J Esq NEW14Asiya Javayant
1045Stacey MacleadIndia2026-04-21Morlong Associates PROPOSAL39Asiya Javayant
1046Salvatore StockhamItaly2026-04-16Buckley Miller Wright NEW91Bernardo Dominic
1047Mujtaba NickaGermany2026-04-15Chapman, Ross E Esq RENEWAL10Elwin Sharvill
1048Arvin AlbaresIndia2026-04-24Buckley Miller Wright QUALIFIED85Onyama Limba
1049Francesco ShinkoSpain2026-05-09King, Christopher A Esq RENEWAL0Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Octavia MaletCanadaAsiya Javayant PROPOSAL
Claire TollnerUnited KingdomIvan Magalhaes RENEWAL
Smith GlickFranceAnna Fali NEW
Ricardo GauchoBrazilIoni Bowcher RENEWAL
Francesco ShinkoUnited KingdomElwin Sharvill RENEWAL
Leja CaldareraIndiaAnna Fali RENEWAL
Francesco ShinkoIndiaIoni Bowcher RENEWAL
Johnson SergiItalyIoni Bowcher NEGOTIATION
Wickens NestleGermanyIoni Bowcher NEGOTIATION
Wickens NestleFranceAmy Elsner RENEWAL
Ivar PaprockiFranceIoni Bowcher RENEWAL
Faith GillianSpainOnyama Limba NEGOTIATION
Alejandro PerinGermanyOnyama Limba NEW
James ButtAustraliaBernardo Dominic NEW
Mayumi KolmetzRussiaIoni Bowcher NEW
Misaki RoysterIndiaOnyama Limba PROPOSAL
Leon OldroydArgentinaBernardo Dominic UNQUALIFIED
Johnson SergiBrazilBernardo Dominic NEW
Jennifer AmigonIndiaOnyama Limba RENEWAL
Aika InouyeArgentinaAsiya Javayant UNQUALIFIED
Sinclair WaycottFranceAsiya Javayant RENEWAL
Johnson SergiBrazilElwin Sharvill RENEWAL
Chavez BriddickGermanyOnyama Limba PROPOSAL
Claire TollnerArgentinaOnyama Limba NEW
Johnson SergiItalyXuxue Feng NEGOTIATION
Tony FollerAustraliaIoni Bowcher UNQUALIFIED
Emily WhobreyBrazilAnna Fali RENEWAL
Nicolas IturbideAustraliaBernardo Dominic NEW
Johnson SergiSpainElwin Sharvill QUALIFIED
Smith GlickFranceOnyama Limba QUALIFIED
Isabel BowleyFranceXuxue Feng NEGOTIATION
Costa DilliardSpainAnna Fali PROPOSAL
Jones VocelkaAustraliaXuxue Feng QUALIFIED
David DarakjySpainOnyama Limba NEW
Claire TollnerCanadaOnyama Limba PROPOSAL
Alejandro PerinCanadaBernardo Dominic NEGOTIATION
Murillo MaletUnited KingdomAsiya Javayant PROPOSAL
Misaki RoysterItalyElwin Sharvill PROPOSAL
Octavia MaletArgentinaIoni Bowcher NEW
Kaitlin OstroskyItalyIoni Bowcher PROPOSAL
Jennifer AmigonUnited KingdomIoni Bowcher NEW
Johnson SergiFranceAsiya Javayant UNQUALIFIED
Chavez BriddickArgentinaElwin Sharvill PROPOSAL
Alejandro PerinRussiaOnyama Limba UNQUALIFIED
Octavia MaletRussiaElwin Sharvill NEGOTIATION
Ivar PaprockiIndiaAnna Fali NEGOTIATION
Darci PoquetteItalyIoni Bowcher QUALIFIED
Darci PoquetteCanadaAmy Elsner UNQUALIFIED
Arvin AlbaresCanadaIvan Magalhaes QUALIFIED
Deepesh ChuiUnited KingdomAnna Fali QUALIFIED
Frozen Columns
Name
Misaki Royster
Aditya Kusko
Tony Foller
Johnson Sergi
Maisha Rulapaugh
Sinclair Waycott
Faith Gillian
Francesco Shinko
Munro Ferencz
Leon Oldroyd
Morrow Ruta
Clifford Rim
Isabel Bowley
Rodrigues Campain
Sinclair Waycott
Costa Dilliard
Leja Caldarera
Maisha Rulapaugh
Tony Foller
Misaki Royster
Aditya Kusko
Isabel Bowley
Munro Ferencz
Julie Stenseth
Misaki Royster
Morrow Ruta
Nicolas Iturbide
Arvin Albares
Costa Dilliard
Jeanfrancois Venere
Salvatore Stockham
Antonio Caudy
David Darakjy
Claire Tollner
Kaitlin Ostrosky
Antonio Caudy
Salvatore Stockham
Kadeem Flosi
Ricardo Gaucho
Morrow Ruta
Salvatore Stockham
Francesco Shinko
Salvatore Stockham
Juan Wieser
Nicolas Iturbide
Arvin Albares
Arvin Albares
Stacey Maclead
Jeanfrancois Venere
Morrow Ruta
IdCountryDate
1000Argentina2026-05-01
1001France2026-05-06
1002Italy2026-05-01
1003Argentina2026-04-29
1004Brazil2026-04-21
1005Italy2026-04-17
1006Brazil2026-05-10
1007Brazil2026-05-11
1008France2026-04-15
1009Australia2026-04-18
1010Argentina2026-04-16
1011Germany2026-05-09
1012France2026-05-13
1013Australia2026-05-12
1014United Kingdom2026-05-02
1015Argentina2026-04-17
1016United Kingdom2026-04-21
1017United Kingdom2026-04-17
1018France2026-04-30
1019Russia2026-05-05
1020Italy2026-05-07
1021Spain2026-05-04
1022India2026-04-22
1023Japan2026-04-16
1024Russia2026-05-05
1025Brazil2026-05-12
1026Spain2026-05-12
1027Germany2026-04-18
1028France2026-04-18
1029India2026-04-24
1030Brazil2026-04-25
1031Germany2026-05-06
1032Spain2026-04-17
1033United Kingdom2026-04-19
1034Japan2026-04-28
1035Argentina2026-05-06
1036United Kingdom2026-04-30
1037Argentina2026-04-18
1038India2026-05-05
1039France2026-05-02
1040Canada2026-05-02
1041France2026-05-05
1042Brazil2026-05-12
1043Canada2026-04-27
1044India2026-05-06
1045Spain2026-04-26
1046Brazil2026-04-18
1047Canada2026-04-29
1048India2026-04-28
1049Germany2026-04-17

On-Demand Data

NameIdCountryDate
Silvio Slusarski1000Germany2026-04-28
Juan Wieser1001United Kingdom2026-04-25
Leon Oldroyd1002Argentina2026-05-01
Maria Marrier1003Australia2026-05-14
Octavia Malet1004Italy2026-04-23
Juan Wieser1005Canada2026-04-24
Rodrigues Campain1006Argentina2026-05-08
Juan Wieser1007Australia2026-04-30
Nicolas Iturbide1008Spain2026-04-20
Jeanfrancois Venere1009France2026-04-17
Kadeem Flosi1010Spain2026-05-13
Juan Wieser1011Brazil2026-05-06
Maria Marrier1012Argentina2026-05-14
Mayumi Kolmetz1013Italy2026-05-01
Emily Whobrey1014Brazil2026-04-22
Octavia Malet1015Argentina2026-05-02
Sinclair Waycott1016United Kingdom2026-04-16
Kaitlin Ostrosky1017Brazil2026-05-09
Izzy Garufi1018Canada2026-05-13
Arvin Albares1019Australia2026-04-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Murillo MaletIndiaAsiya Javayant NEW
Julie StensethCanadaAnna Fali NEW
Ashley DoeFranceXuxue Feng QUALIFIED
Adams MorascaArgentinaIoni Bowcher UNQUALIFIED
Silvio SlusarskiJapanStephen Shaw QUALIFIED
Jefferson SchemmerIndiaStephen Shaw NEGOTIATION
Kadeem FlosiJapanAnna Fali PROPOSAL
Smith GlickGermanyElwin Sharvill PROPOSAL
Izzy GarufiAustraliaAsiya Javayant QUALIFIED
Johnson SergiSpainAnna Fali UNQUALIFIED
Juan WieserAustraliaAnna Fali QUALIFIED
Izzy GarufiBrazilAsiya Javayant UNQUALIFIED
Darci PoquetteGermanyXuxue Feng QUALIFIED
Francesco ShinkoRussiaAnna Fali RENEWAL
James ButtJapanAnna Fali RENEWAL
Clifford RimItalyAmy Elsner QUALIFIED
Chavez BriddickAustraliaElwin Sharvill NEGOTIATION
Adams MorascaSpainIoni Bowcher UNQUALIFIED
Silvio SlusarskiRussiaAmy Elsner NEGOTIATION
Cody SaylorsJapanBernardo Dominic RENEWAL
Octavia MaletSpainBernardo Dominic QUALIFIED
Wickens NestleBrazilIoni Bowcher NEGOTIATION
Salvatore StockhamIndiaAnna Fali NEW
Emily WhobreyAustraliaIoni Bowcher NEW
Silvio SlusarskiFranceAmy Elsner UNQUALIFIED
Wickens NestleArgentinaIoni Bowcher PROPOSAL
Wickens NestleArgentinaBernardo Dominic NEW
Adams MorascaBrazilIoni Bowcher UNQUALIFIED
Silvio SlusarskiUnited KingdomBernardo Dominic QUALIFIED
Johnson SergiCanadaOnyama Limba QUALIFIED
Salvatore StockhamUnited KingdomAsiya Javayant NEGOTIATION
Faith GillianUnited KingdomOnyama Limba RENEWAL
Rodrigues CampainGermanyStephen Shaw QUALIFIED
Kaitlin OstroskyBrazilStephen Shaw NEW
Costa DilliardItalyAnna Fali PROPOSAL
Ashley DoeRussiaElwin Sharvill RENEWAL
Cody SaylorsArgentinaStephen Shaw PROPOSAL
Wickens NestleItalyStephen Shaw RENEWAL
Claire TollnerSpainXuxue Feng UNQUALIFIED
Darci PoquetteGermanyOnyama 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>