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 KuskoSpainIvan Magalhaes NEGOTIATION
Rodrigues CampainAustraliaAmy Elsner RENEWAL
Leja CaldareraIndiaIoni Bowcher RENEWAL
Izzy GarufiFranceAnna Fali RENEWAL
Mujtaba NickaRussiaAnna Fali QUALIFIED
Morrow RutaArgentinaAsiya Javayant NEGOTIATION
Jones VocelkaJapanAnna Fali QUALIFIED
Maria MarrierJapanBernardo Dominic NEGOTIATION
Adams MorascaUnited KingdomBernardo Dominic PROPOSAL
Maisha RulapaughJapanXuxue Feng NEGOTIATION
Maisha RulapaughRussiaAsiya Javayant RENEWAL
Cody SaylorsJapanOnyama Limba NEGOTIATION
Deepesh ChuiGermanyBernardo Dominic QUALIFIED
Deepesh ChuiBrazilStephen Shaw UNQUALIFIED
Costa DilliardAustraliaBernardo Dominic PROPOSAL
Aika InouyeFranceAsiya Javayant RENEWAL
Misaki RoysterFranceElwin Sharvill QUALIFIED
Rodrigues CampainCanadaStephen Shaw NEGOTIATION
Leja CaldareraCanadaStephen Shaw RENEWAL
Nicolas IturbideSpainOnyama Limba NEW
Jefferson SchemmerJapanAmy Elsner NEGOTIATION
Leja CaldareraGermanyElwin Sharvill NEGOTIATION
Mayumi KolmetzIndiaXuxue Feng UNQUALIFIED
Jones VocelkaJapanBernardo Dominic NEW
Faith GillianItalyElwin Sharvill UNQUALIFIED
Maisha RulapaughUnited KingdomAsiya Javayant RENEWAL
Leja CaldareraBrazilXuxue Feng QUALIFIED
Salvatore StockhamFranceXuxue Feng RENEWAL
Juan WieserCanadaStephen Shaw NEGOTIATION
Aika InouyeAustraliaElwin Sharvill PROPOSAL
Clifford RimCanadaBernardo Dominic UNQUALIFIED
Morrow RutaBrazilAsiya Javayant RENEWAL
Julie StensethIndiaXuxue Feng RENEWAL
Stacey MacleadSpainAsiya Javayant QUALIFIED
Maria MarrierBrazilIoni Bowcher PROPOSAL
Jennifer AmigonArgentinaElwin Sharvill RENEWAL
Octavia MaletUnited KingdomIvan Magalhaes UNQUALIFIED
Mayumi KolmetzJapanAmy Elsner UNQUALIFIED
Sinclair WaycottUnited KingdomIvan Magalhaes PROPOSAL
Jeanfrancois VenereBrazilOnyama Limba UNQUALIFIED
Alejandro PerinUnited KingdomStephen Shaw PROPOSAL
Izzy GarufiRussiaElwin Sharvill PROPOSAL
James ButtCanadaElwin Sharvill UNQUALIFIED
Sinclair WaycottBrazilStephen Shaw RENEWAL
Cody SaylorsCanadaAnna Fali QUALIFIED
Rodrigues CampainSpainStephen Shaw PROPOSAL
Silvio SlusarskiUnited KingdomElwin Sharvill QUALIFIED
Ashley DoeItalyIoni Bowcher NEGOTIATION
Chavez BriddickAustraliaElwin Sharvill RENEWAL
Leon OldroydArgentinaXuxue Feng NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
James ButtUnited KingdomAnna Fali PROPOSAL
Clifford RimAustraliaAmy Elsner NEGOTIATION
Aika InouyeAustraliaOnyama Limba RENEWAL
Maria MarrierIndiaElwin Sharvill QUALIFIED
Wickens NestleJapanAsiya Javayant UNQUALIFIED
Darci PoquetteItalyAnna Fali NEW
Francesco ShinkoJapanIoni Bowcher NEGOTIATION
Greenwood BologniaBrazilAsiya Javayant PROPOSAL
Maria MarrierArgentinaAsiya Javayant UNQUALIFIED
Mujtaba NickaRussiaAsiya Javayant RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Leja CaldareraRussia2025-08-24Truhlar And Truhlar Attys QUALIFIED12Ivan Magalhaes
1001Munro FerenczAustralia2025-07-31Feiner Bros RENEWAL12Onyama Limba
1002Adams MorascaGermany2025-08-05Dorl, James J Esq NEW52Anna Fali
1003Jefferson SchemmerFrance2025-07-31Rousseaux, Michael Esq QUALIFIED98Stephen Shaw
1004Maria MarrierGermany2025-08-16Benton, John B Jr NEGOTIATION33Stephen Shaw
1005Adams MorascaItaly2025-08-28Chemel, James L Cpa UNQUALIFIED19Ivan Magalhaes
1006Mujtaba NickaIndia2025-08-26Chapman, Ross E Esq PROPOSAL76Elwin Sharvill
1007Cody SaylorsRussia2025-08-22Feltz Printing Service UNQUALIFIED32Ivan Magalhaes
1008Octavia MaletSpain2025-08-10Dorl, James J Esq UNQUALIFIED69Elwin Sharvill
1009Alejandro PerinFrance2025-08-23Benton, John B Jr QUALIFIED65Elwin Sharvill
1010Faith GillianAustralia2025-08-12Feiner Bros NEGOTIATION19Onyama Limba
1011Adams MorascaIndia2025-08-02Rangoni Of Florence UNQUALIFIED29Onyama Limba
1012Smith GlickUnited Kingdom2025-08-01Truhlar And Truhlar Attys PROPOSAL70Ioni Bowcher
1013Nicolas IturbideItaly2025-08-08Chanay, Jeffrey A Esq UNQUALIFIED20Ivan Magalhaes
1014Misaki RoysterFrance2025-08-02Chapman, Ross E Esq UNQUALIFIED64Bernardo Dominic
1015Mayumi KolmetzRussia2025-08-18Rousseaux, Michael Esq UNQUALIFIED47Onyama Limba
1016Clifford RimBrazil2025-08-08Buckley Miller Wright NEGOTIATION85Anna Fali
1017David DarakjyGermany2025-08-26Rousseaux, Michael Esq RENEWAL51Xuxue Feng
1018Greenwood BologniaSpain2025-08-14Feltz Printing Service UNQUALIFIED6Amy Elsner
1019Wickens NestleGermany2025-08-15Chemel, James L Cpa NEGOTIATION44Asiya Javayant
1020Chavez BriddickIndia2025-08-01Buckley Miller Wright QUALIFIED49Stephen Shaw
1021Aditya KuskoIndia2025-08-06Feiner Bros PROPOSAL60Bernardo Dominic
1022Julie StensethGermany2025-08-17Truhlar And Truhlar Attys PROPOSAL33Stephen Shaw
1023Maisha RulapaughRussia2025-08-21Buckley Miller Wright RENEWAL51Amy Elsner
1024Jefferson SchemmerArgentina2025-08-20Rousseaux, Michael Esq NEGOTIATION58Elwin Sharvill
1025Maria MarrierCanada2025-08-10Chapman, Ross E Esq NEGOTIATION75Ioni Bowcher
1026Jeanfrancois VenereJapan2025-08-06Truhlar And Truhlar Attys UNQUALIFIED23Asiya Javayant
1027Leja CaldareraItaly2025-08-22Dorl, James J Esq PROPOSAL79Ivan Magalhaes
1028Faith GillianItaly2025-08-27Benton, John B Jr UNQUALIFIED82Xuxue Feng
1029Munro FerenczIndia2025-08-23Truhlar And Truhlar Attys QUALIFIED44Elwin Sharvill
1030Wickens NestleBrazil2025-08-23Chapman, Ross E Esq NEW71Xuxue Feng
1031Isabel BowleyUnited Kingdom2025-08-04King, Christopher A Esq PROPOSAL28Ivan Magalhaes
1032Cody SaylorsAustralia2025-08-02Commercial Press RENEWAL81Onyama Limba
1033Julie StensethFrance2025-08-22Commercial Press NEGOTIATION70Onyama Limba
1034Antonio CaudyUnited Kingdom2025-08-27Rangoni Of Florence PROPOSAL52Anna Fali
1035Ashley DoeArgentina2025-08-13Buckley Miller Wright NEGOTIATION36Bernardo Dominic
1036Rodrigues CampainJapan2025-08-13Benton, John B Jr PROPOSAL13Asiya Javayant
1037Alejandro PerinFrance2025-08-15King, Christopher A Esq RENEWAL6Bernardo Dominic
1038Silvio SlusarskiUnited Kingdom2025-08-08Truhlar And Truhlar Attys QUALIFIED40Ioni Bowcher
1039Silvio SlusarskiBrazil2025-08-06Printing Dimensions RENEWAL79Amy Elsner
1040Morrow RutaItaly2025-08-23Rangoni Of Florence NEGOTIATION44Asiya Javayant
1041Claire TollnerJapan2025-08-11Commercial Press QUALIFIED64Ioni Bowcher
1042Ashley DoeCanada2025-08-26Dorl, James J Esq QUALIFIED63Ivan Magalhaes
1043Johnson SergiGermany2025-08-20King, Christopher A Esq PROPOSAL51Amy Elsner
1044Aditya KuskoCanada2025-08-07Feltz Printing Service RENEWAL88Onyama Limba
1045Jones VocelkaJapan2025-08-15Commercial Press NEW16Anna Fali
1046Nicolas IturbideArgentina2025-08-26Buckley Miller Wright QUALIFIED47Ivan Magalhaes
1047Isabel BowleyCanada2025-08-07Commercial Press RENEWAL88Bernardo Dominic
1048Johnson SergiSpain2025-08-24Buckley Miller Wright PROPOSAL71Amy Elsner
1049Tony FollerAustralia2025-08-01Feltz Printing Service UNQUALIFIED78Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Chavez BriddickBrazilXuxue Feng UNQUALIFIED
Darci PoquetteFranceStephen Shaw RENEWAL
Adams MorascaItalyOnyama Limba UNQUALIFIED
Isabel BowleyGermanyXuxue Feng UNQUALIFIED
Murillo MaletGermanyAnna Fali NEW
Clifford RimRussiaIoni Bowcher RENEWAL
Francesco ShinkoRussiaBernardo Dominic NEGOTIATION
Izzy GarufiIndiaBernardo Dominic NEW
Silvio SlusarskiSpainStephen Shaw NEW
Octavia MaletGermanyXuxue Feng NEGOTIATION
Munro FerenczCanadaIoni Bowcher QUALIFIED
Silvio SlusarskiRussiaXuxue Feng RENEWAL
Morrow RutaIndiaOnyama Limba RENEWAL
James ButtAustraliaAsiya Javayant NEW
Arvin AlbaresSpainOnyama Limba RENEWAL
Julie StensethGermanyBernardo Dominic PROPOSAL
Deepesh ChuiSpainStephen Shaw RENEWAL
Ashley DoeFranceElwin Sharvill PROPOSAL
Salvatore StockhamArgentinaStephen Shaw QUALIFIED
James ButtGermanyAmy Elsner UNQUALIFIED
Emily WhobreyFranceIvan Magalhaes PROPOSAL
David DarakjyJapanStephen Shaw RENEWAL
Maria MarrierJapanIoni Bowcher RENEWAL
Ivar PaprockiBrazilIoni Bowcher RENEWAL
Maria MarrierArgentinaBernardo Dominic QUALIFIED
Costa DilliardSpainXuxue Feng RENEWAL
Ivar PaprockiRussiaAnna Fali PROPOSAL
Rodrigues CampainRussiaStephen Shaw PROPOSAL
David DarakjyAustraliaAsiya Javayant QUALIFIED
Nicolas IturbideIndiaStephen Shaw PROPOSAL
Johnson SergiUnited KingdomIvan Magalhaes PROPOSAL
Aika InouyeCanadaAmy Elsner NEW
Aditya KuskoCanadaBernardo Dominic PROPOSAL
Clifford RimRussiaXuxue Feng NEGOTIATION
Leja CaldareraSpainXuxue Feng NEGOTIATION
Jones VocelkaArgentinaAsiya Javayant UNQUALIFIED
Antonio CaudyIndiaAnna Fali PROPOSAL
Clifford RimArgentinaIvan Magalhaes QUALIFIED
Antonio CaudyIndiaAmy Elsner RENEWAL
Rodrigues CampainAustraliaAmy Elsner UNQUALIFIED
David DarakjyAustraliaIoni Bowcher PROPOSAL
Leon OldroydIndiaAmy Elsner UNQUALIFIED
James ButtItalyXuxue Feng NEW
Arvin AlbaresAustraliaXuxue Feng UNQUALIFIED
Tony FollerUnited KingdomElwin Sharvill RENEWAL
Mujtaba NickaSpainIvan Magalhaes QUALIFIED
Aruna FigeroaGermanyStephen Shaw NEGOTIATION
Costa DilliardRussiaIvan Magalhaes RENEWAL
Misaki RoysterArgentinaIvan Magalhaes PROPOSAL
Costa DilliardRussiaIoni Bowcher PROPOSAL
Frozen Columns
Name
Claire Tollner
Clifford Rim
Silvio Slusarski
Costa Dilliard
Mayumi Kolmetz
Jeanfrancois Venere
Chavez Briddick
Tony Foller
Jennifer Amigon
Arvin Albares
Morrow Ruta
Aruna Figeroa
Deepesh Chui
Maria Marrier
Kaitlin Ostrosky
Maria Marrier
Faith Gillian
Deepesh Chui
James Butt
Maria Marrier
Wickens Nestle
Mujtaba Nicka
Aditya Kusko
Deepesh Chui
Claire Tollner
Mujtaba Nicka
Johnson Sergi
Aditya Kusko
Ricardo Gaucho
Alejandro Perin
Jefferson Schemmer
Chavez Briddick
Jefferson Schemmer
Costa Dilliard
Wickens Nestle
Misaki Royster
Julie Stenseth
Tony Foller
Aika Inouye
Rodrigues Campain
Leon Oldroyd
Stacey Maclead
Chavez Briddick
Ricardo Gaucho
Wickens Nestle
Aditya Kusko
Munro Ferencz
Smith Glick
Isabel Bowley
Ricardo Gaucho
IdCountryDate
1000Canada2025-08-20
1001France2025-08-05
1002Japan2025-08-12
1003Japan2025-08-21
1004Germany2025-08-10
1005India2025-07-30
1006France2025-08-25
1007Brazil2025-08-10
1008France2025-08-12
1009Japan2025-08-02
1010Argentina2025-08-14
1011Germany2025-08-17
1012France2025-08-04
1013India2025-08-12
1014Argentina2025-08-20
1015Canada2025-08-06
1016Australia2025-08-04
1017Canada2025-08-23
1018Canada2025-08-03
1019Brazil2025-08-01
1020France2025-08-16
1021France2025-08-20
1022Brazil2025-08-24
1023France2025-08-17
1024France2025-08-11
1025Canada2025-08-19
1026Germany2025-08-11
1027France2025-08-22
1028Spain2025-08-01
1029Italy2025-08-02
1030Argentina2025-08-12
1031Germany2025-08-27
1032Italy2025-08-11
1033Spain2025-08-19
1034Germany2025-08-14
1035Australia2025-08-06
1036India2025-08-27
1037India2025-08-21
1038Canada2025-08-28
1039Spain2025-08-10
1040Spain2025-08-02
1041Italy2025-08-18
1042Japan2025-08-23
1043Japan2025-08-03
1044Argentina2025-08-01
1045France2025-08-02
1046United Kingdom2025-08-02
1047India2025-08-11
1048Argentina2025-08-08
1049Canada2025-08-05

On-Demand Data

NameIdCountryDate
Stacey Maclead1000India2025-08-01
Kadeem Flosi1001Spain2025-08-25
Ashley Doe1002Brazil2025-08-20
Ivar Paprocki1003India2025-08-07
Maria Marrier1004Russia2025-08-26
Faith Gillian1005Russia2025-08-15
Johnson Sergi1006Japan2025-07-31
Johnson Sergi1007Italy2025-08-01
Faith Gillian1008Japan2025-08-28
Jeanfrancois Venere1009Canada2025-08-22
Mujtaba Nicka1010Germany2025-08-06
Leja Caldarera1011Russia2025-08-12
Stacey Maclead1012France2025-08-28
Aditya Kusko1013Spain2025-08-10
Silvio Slusarski1014Germany2025-08-26
Salvatore Stockham1015France2025-08-01
Ricardo Gaucho1016Italy2025-08-24
Morrow Ruta1017Spain2025-08-28
Leon Oldroyd1018Brazil2025-08-23
Stacey Maclead1019Spain2025-08-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Rodrigues CampainAustraliaElwin Sharvill NEGOTIATION
Maisha RulapaughAustraliaAnna Fali PROPOSAL
Leon OldroydGermanyBernardo Dominic UNQUALIFIED
Aika InouyeSpainStephen Shaw NEGOTIATION
Arvin AlbaresAustraliaXuxue Feng NEGOTIATION
David DarakjyRussiaAnna Fali NEW
Jeanfrancois VenereFranceXuxue Feng RENEWAL
Deepesh ChuiIndiaStephen Shaw UNQUALIFIED
David DarakjyItalyAnna Fali NEW
Ricardo GauchoBrazilIvan Magalhaes NEGOTIATION
Deepesh ChuiJapanIoni Bowcher RENEWAL
Chavez BriddickFranceIvan Magalhaes QUALIFIED
Juan WieserIndiaXuxue Feng UNQUALIFIED
Murillo MaletSpainElwin Sharvill UNQUALIFIED
Greenwood BologniaUnited KingdomIvan Magalhaes UNQUALIFIED
Deepesh ChuiCanadaIvan Magalhaes PROPOSAL
Ivar PaprockiJapanElwin Sharvill RENEWAL
Mayumi KolmetzAustraliaStephen Shaw QUALIFIED
Tony FollerSpainElwin Sharvill NEW
Julie StensethRussiaAsiya Javayant QUALIFIED
Munro FerenczFranceElwin Sharvill PROPOSAL
Claire TollnerIndiaXuxue Feng NEGOTIATION
Morrow RutaJapanIoni Bowcher UNQUALIFIED
Ricardo GauchoArgentinaStephen Shaw NEW
Leja CaldareraSpainAnna Fali NEGOTIATION
Ashley DoeItalyIvan Magalhaes QUALIFIED
Misaki RoysterFranceAsiya Javayant NEW
Adams MorascaRussiaAnna Fali NEW
Emily WhobreyAustraliaOnyama Limba QUALIFIED
Francesco ShinkoFranceAmy Elsner NEW
Jones VocelkaGermanyStephen Shaw RENEWAL
Darci PoquetteAustraliaStephen Shaw RENEWAL
Tony FollerItalyStephen Shaw NEW
Julie StensethUnited KingdomAnna Fali UNQUALIFIED
Aditya KuskoRussiaElwin Sharvill PROPOSAL
Claire TollnerSpainElwin Sharvill NEW
Sinclair WaycottRussiaAmy Elsner NEGOTIATION
Francesco ShinkoCanadaAnna Fali NEW
Emily WhobreyBrazilElwin Sharvill RENEWAL
Jeanfrancois VenereJapanStephen Shaw 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>