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 MacleadJapanElwin Sharvill UNQUALIFIED
Mayumi KolmetzUnited KingdomOnyama Limba NEGOTIATION
Wickens NestleItalyStephen Shaw RENEWAL
Arvin AlbaresSpainStephen Shaw QUALIFIED
Stacey MacleadCanadaOnyama Limba UNQUALIFIED
Smith GlickBrazilBernardo Dominic NEW
Mujtaba NickaJapanAnna Fali QUALIFIED
Alejandro PerinGermanyOnyama Limba PROPOSAL
Emily WhobreyFranceElwin Sharvill RENEWAL
Smith GlickCanadaIoni Bowcher UNQUALIFIED
Darci PoquetteArgentinaOnyama Limba QUALIFIED
Salvatore StockhamCanadaElwin Sharvill UNQUALIFIED
Sinclair WaycottIndiaAnna Fali QUALIFIED
Deepesh ChuiSpainIvan Magalhaes RENEWAL
Mayumi KolmetzUnited KingdomXuxue Feng QUALIFIED
Greenwood BologniaArgentinaOnyama Limba UNQUALIFIED
Murillo MaletArgentinaAmy Elsner RENEWAL
Octavia MaletArgentinaStephen Shaw UNQUALIFIED
Leja CaldareraSpainAnna Fali NEW
Antonio CaudySpainAnna Fali QUALIFIED
Alejandro PerinItalyIvan Magalhaes NEGOTIATION
Nicolas IturbideUnited KingdomAmy Elsner RENEWAL
Aika InouyeFranceXuxue Feng NEGOTIATION
Jeanfrancois VenereIndiaIvan Magalhaes PROPOSAL
Costa DilliardJapanAmy Elsner PROPOSAL
Maisha RulapaughCanadaIoni Bowcher NEW
Johnson SergiRussiaAnna Fali QUALIFIED
Maisha RulapaughAustraliaIoni Bowcher QUALIFIED
Antonio CaudyIndiaIoni Bowcher QUALIFIED
Emily WhobreyIndiaAmy Elsner UNQUALIFIED
Antonio CaudyGermanyIvan Magalhaes RENEWAL
Silvio SlusarskiUnited KingdomElwin Sharvill PROPOSAL
Murillo MaletJapanStephen Shaw UNQUALIFIED
Deepesh ChuiRussiaAnna Fali UNQUALIFIED
Nicolas IturbideGermanyIoni Bowcher RENEWAL
Clifford RimArgentinaElwin Sharvill QUALIFIED
Darci PoquetteBrazilOnyama Limba PROPOSAL
Ricardo GauchoGermanyIoni Bowcher NEW
Ricardo GauchoFranceBernardo Dominic QUALIFIED
Maria MarrierItalyBernardo Dominic NEGOTIATION
Francesco ShinkoGermanyAnna Fali NEGOTIATION
Jennifer AmigonFranceBernardo Dominic NEW
Misaki RoysterRussiaIvan Magalhaes RENEWAL
Morrow RutaArgentinaStephen Shaw QUALIFIED
Maisha RulapaughSpainAnna Fali UNQUALIFIED
James ButtItalyOnyama Limba UNQUALIFIED
Johnson SergiItalyIoni Bowcher RENEWAL
Tony FollerRussiaAnna Fali NEW
Morrow RutaItalyStephen Shaw QUALIFIED
Salvatore StockhamSpainStephen Shaw QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Maria MarrierFranceIoni Bowcher RENEWAL
Arvin AlbaresSpainXuxue Feng QUALIFIED
Cody SaylorsJapanIvan Magalhaes QUALIFIED
Aruna FigeroaArgentinaBernardo Dominic UNQUALIFIED
Johnson SergiItalyXuxue Feng QUALIFIED
Tony FollerCanadaStephen Shaw NEW
Stacey MacleadUnited KingdomStephen Shaw NEGOTIATION
David DarakjyJapanIvan Magalhaes RENEWAL
Jeanfrancois VenereCanadaBernardo Dominic PROPOSAL
Jeanfrancois VenereAustraliaAnna Fali QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Julie StensethUnited Kingdom2025-10-24Rangoni Of Florence UNQUALIFIED34Asiya Javayant
1001James ButtFrance2025-10-27Chapman, Ross E Esq PROPOSAL87Xuxue Feng
1002Kadeem FlosiJapan2025-10-27King, Christopher A Esq QUALIFIED59Anna Fali
1003Adams MorascaCanada2025-10-16King, Christopher A Esq UNQUALIFIED1Stephen Shaw
1004Claire TollnerBrazil2025-10-07Buckley Miller Wright NEW31Amy Elsner
1005Aika InouyeBrazil2025-10-30Chanay, Jeffrey A Esq UNQUALIFIED19Onyama Limba
1006Silvio SlusarskiSpain2025-10-05Chemel, James L Cpa RENEWAL15Onyama Limba
1007Jeanfrancois VenereRussia2025-10-17King, Christopher A Esq RENEWAL65Bernardo Dominic
1008Leja CaldareraArgentina2025-10-24Buckley Miller Wright NEGOTIATION0Stephen Shaw
1009Stacey MacleadItaly2025-10-25Printing Dimensions PROPOSAL22Asiya Javayant
1010Johnson SergiArgentina2025-10-18Feltz Printing Service PROPOSAL96Amy Elsner
1011Emily WhobreyRussia2025-11-03Feltz Printing Service UNQUALIFIED32Ioni Bowcher
1012Arvin AlbaresBrazil2025-10-05Feiner Bros UNQUALIFIED19Amy Elsner
1013Ricardo GauchoArgentina2025-10-26Dorl, James J Esq RENEWAL31Ioni Bowcher
1014Kaitlin OstroskyRussia2025-10-06Benton, John B Jr QUALIFIED17Ioni Bowcher
1015Kadeem FlosiJapan2025-10-14Chapman, Ross E Esq PROPOSAL67Stephen Shaw
1016Salvatore StockhamIndia2025-10-11Rousseaux, Michael Esq QUALIFIED6Ioni Bowcher
1017Mayumi KolmetzGermany2025-10-13Feiner Bros UNQUALIFIED1Bernardo Dominic
1018Silvio SlusarskiBrazil2025-10-24Chapman, Ross E Esq NEW44Asiya Javayant
1019Aika InouyeRussia2025-10-26King, Christopher A Esq NEGOTIATION35Onyama Limba
1020Munro FerenczArgentina2025-10-06Rousseaux, Michael Esq QUALIFIED81Onyama Limba
1021Ricardo GauchoIndia2025-10-09Benton, John B Jr QUALIFIED70Stephen Shaw
1022Nicolas IturbideUnited Kingdom2025-10-22Buckley Miller Wright NEW85Ioni Bowcher
1023Johnson SergiArgentina2025-10-13Rangoni Of Florence PROPOSAL9Xuxue Feng
1024Ashley DoeBrazil2025-10-07Chemel, James L Cpa UNQUALIFIED61Stephen Shaw
1025Stacey MacleadRussia2025-10-30Chanay, Jeffrey A Esq PROPOSAL26Ivan Magalhaes
1026Faith GillianCanada2025-10-29Feltz Printing Service RENEWAL47Stephen Shaw
1027Kaitlin OstroskyBrazil2025-10-14Commercial Press PROPOSAL68Ioni Bowcher
1028Leon OldroydItaly2025-10-06Printing Dimensions QUALIFIED35Stephen Shaw
1029Tony FollerArgentina2025-11-01Buckley Miller Wright NEW2Ivan Magalhaes
1030Faith GillianSpain2025-10-18Buckley Miller Wright NEGOTIATION20Ioni Bowcher
1031Stacey MacleadAustralia2025-10-25Dorl, James J Esq RENEWAL50Xuxue Feng
1032Jones VocelkaIndia2025-10-20Printing Dimensions PROPOSAL39Stephen Shaw
1033Juan WieserRussia2025-10-19Buckley Miller Wright NEGOTIATION26Asiya Javayant
1034Salvatore StockhamSpain2025-10-21Chemel, James L Cpa UNQUALIFIED36Stephen Shaw
1035David DarakjyAustralia2025-10-07Chemel, James L Cpa NEGOTIATION40Asiya Javayant
1036Greenwood BologniaRussia2025-10-28Rousseaux, Michael Esq UNQUALIFIED87Ivan Magalhaes
1037Ricardo GauchoArgentina2025-10-30Printing Dimensions UNQUALIFIED58Stephen Shaw
1038Maria MarrierFrance2025-10-08Commercial Press PROPOSAL35Asiya Javayant
1039Chavez BriddickIndia2025-10-20Benton, John B Jr NEGOTIATION20Xuxue Feng
1040Antonio CaudyUnited Kingdom2025-10-30Truhlar And Truhlar Attys NEGOTIATION23Stephen Shaw
1041Alejandro PerinUnited Kingdom2025-10-11King, Christopher A Esq PROPOSAL29Amy Elsner
1042Smith GlickCanada2025-10-22Morlong Associates PROPOSAL62Stephen Shaw
1043Jefferson SchemmerAustralia2025-10-23Commercial Press PROPOSAL53Xuxue Feng
1044Smith GlickIndia2025-10-26Feiner Bros QUALIFIED62Ivan Magalhaes
1045Jennifer AmigonRussia2025-10-15Commercial Press NEW30Stephen Shaw
1046Mujtaba NickaArgentina2025-11-02Truhlar And Truhlar Attys NEGOTIATION9Stephen Shaw
1047Leja CaldareraRussia2025-10-26Buckley Miller Wright NEW93Asiya Javayant
1048Antonio CaudyItaly2025-10-18Chemel, James L Cpa NEGOTIATION54Onyama Limba
1049Jones VocelkaAustralia2025-10-17Truhlar And Truhlar Attys PROPOSAL55Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Johnson SergiCanadaIoni Bowcher PROPOSAL
Leon OldroydItalyXuxue Feng NEW
Greenwood BologniaItalyIvan Magalhaes PROPOSAL
Ashley DoeFranceAnna Fali QUALIFIED
Mujtaba NickaArgentinaStephen Shaw QUALIFIED
Murillo MaletSpainStephen Shaw QUALIFIED
Costa DilliardFranceIvan Magalhaes NEGOTIATION
Francesco ShinkoFranceAnna Fali UNQUALIFIED
Jennifer AmigonItalyXuxue Feng NEGOTIATION
Aruna FigeroaAustraliaAsiya Javayant NEGOTIATION
Aika InouyeSpainAsiya Javayant QUALIFIED
Darci PoquetteItalyAnna Fali UNQUALIFIED
Izzy GarufiGermanyOnyama Limba RENEWAL
Juan WieserArgentinaAmy Elsner NEGOTIATION
Ricardo GauchoSpainAnna Fali RENEWAL
Costa DilliardArgentinaAnna Fali PROPOSAL
Ricardo GauchoFranceAnna Fali PROPOSAL
Jennifer AmigonRussiaAsiya Javayant RENEWAL
Arvin AlbaresBrazilIvan Magalhaes NEW
James ButtRussiaElwin Sharvill UNQUALIFIED
Salvatore StockhamAustraliaElwin Sharvill NEW
Munro FerenczAustraliaIoni Bowcher NEGOTIATION
Arvin AlbaresJapanBernardo Dominic NEW
Ashley DoeItalyXuxue Feng NEGOTIATION
Aditya KuskoBrazilOnyama Limba PROPOSAL
Aika InouyeJapanAmy Elsner QUALIFIED
Jeanfrancois VenereIndiaStephen Shaw NEW
Alejandro PerinFranceElwin Sharvill NEW
Julie StensethIndiaIvan Magalhaes QUALIFIED
Tony FollerCanadaStephen Shaw QUALIFIED
Antonio CaudySpainElwin Sharvill UNQUALIFIED
Clifford RimBrazilElwin Sharvill PROPOSAL
Mayumi KolmetzJapanElwin Sharvill RENEWAL
Faith GillianRussiaBernardo Dominic UNQUALIFIED
Silvio SlusarskiUnited KingdomAmy Elsner NEGOTIATION
James ButtBrazilIvan Magalhaes RENEWAL
Claire TollnerBrazilAsiya Javayant UNQUALIFIED
Mayumi KolmetzUnited KingdomElwin Sharvill NEGOTIATION
Misaki RoysterFranceAmy Elsner NEW
Deepesh ChuiJapanBernardo Dominic QUALIFIED
Chavez BriddickUnited KingdomAmy Elsner NEW
James ButtAustraliaBernardo Dominic UNQUALIFIED
Jones VocelkaRussiaIvan Magalhaes RENEWAL
Alejandro PerinGermanyBernardo Dominic PROPOSAL
Salvatore StockhamGermanyIvan Magalhaes QUALIFIED
Chavez BriddickIndiaIvan Magalhaes NEW
Maisha RulapaughBrazilElwin Sharvill RENEWAL
Julie StensethCanadaAmy Elsner UNQUALIFIED
Kadeem FlosiUnited KingdomAnna Fali PROPOSAL
Murillo MaletJapanAnna Fali RENEWAL
Frozen Columns
Name
Jennifer Amigon
Antonio Caudy
Jeanfrancois Venere
Julie Stenseth
Emily Whobrey
Mayumi Kolmetz
Munro Ferencz
Ricardo Gaucho
Jennifer Amigon
Claire Tollner
Munro Ferencz
Julie Stenseth
Izzy Garufi
Antonio Caudy
Silvio Slusarski
Claire Tollner
James Butt
Mujtaba Nicka
Faith Gillian
Wickens Nestle
James Butt
James Butt
Kadeem Flosi
Jefferson Schemmer
Ricardo Gaucho
Morrow Ruta
Emily Whobrey
Clifford Rim
Juan Wieser
Wickens Nestle
Mujtaba Nicka
Jeanfrancois Venere
James Butt
Darci Poquette
Alejandro Perin
Salvatore Stockham
Aruna Figeroa
Aika Inouye
Izzy Garufi
Alejandro Perin
Faith Gillian
Nicolas Iturbide
Aika Inouye
Deepesh Chui
Chavez Briddick
Rodrigues Campain
Greenwood Bolognia
Cody Saylors
Nicolas Iturbide
Julie Stenseth
IdCountryDate
1000France2025-10-12
1001Brazil2025-10-13
1002Canada2025-10-05
1003Japan2025-10-24
1004Germany2025-10-10
1005Australia2025-10-18
1006Canada2025-11-01
1007Brazil2025-10-07
1008France2025-10-21
1009India2025-11-03
1010Spain2025-10-27
1011Australia2025-10-15
1012Spain2025-10-06
1013Spain2025-10-09
1014Australia2025-10-27
1015Brazil2025-10-09
1016France2025-10-05
1017Italy2025-11-03
1018Canada2025-10-26
1019Canada2025-10-08
1020Japan2025-10-07
1021Italy2025-11-02
1022Argentina2025-10-31
1023Italy2025-10-16
1024Canada2025-10-28
1025Brazil2025-10-06
1026India2025-10-05
1027Australia2025-10-27
1028Italy2025-10-24
1029Brazil2025-11-03
1030Italy2025-10-21
1031Australia2025-10-23
1032Germany2025-10-29
1033Australia2025-10-11
1034Brazil2025-10-29
1035Brazil2025-10-30
1036Spain2025-10-14
1037Germany2025-10-31
1038United Kingdom2025-10-18
1039Argentina2025-10-19
1040Argentina2025-10-07
1041Italy2025-10-16
1042France2025-10-25
1043Spain2025-10-25
1044Italy2025-10-16
1045Spain2025-10-09
1046Argentina2025-10-07
1047Russia2025-10-08
1048Australia2025-10-07
1049United Kingdom2025-10-14

On-Demand Data

NameIdCountryDate
David Darakjy1000Brazil2025-10-25
Chavez Briddick1001Germany2025-10-17
Johnson Sergi1002United Kingdom2025-10-11
Maria Marrier1003France2025-10-07
Juan Wieser1004France2025-10-25
Costa Dilliard1005Australia2025-10-11
Rodrigues Campain1006India2025-10-13
Cody Saylors1007India2025-10-25
Deepesh Chui1008Argentina2025-10-08
Greenwood Bolognia1009Canada2025-10-23
Jeanfrancois Venere1010Argentina2025-10-07
Adams Morasca1011Brazil2025-10-12
Leja Caldarera1012Argentina2025-10-12
Morrow Ruta1013Japan2025-10-17
Jennifer Amigon1014United Kingdom2025-10-15
Deepesh Chui1015United Kingdom2025-10-12
Misaki Royster1016Japan2025-10-23
Ashley Doe1017Brazil2025-10-15
Jeanfrancois Venere1018France2025-10-19
Maisha Rulapaugh1019Argentina2025-10-18
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kadeem FlosiSpainOnyama Limba NEGOTIATION
Ashley DoeBrazilElwin Sharvill PROPOSAL
Cody SaylorsBrazilAmy Elsner UNQUALIFIED
Faith GillianSpainIvan Magalhaes RENEWAL
Johnson SergiUnited KingdomStephen Shaw RENEWAL
David DarakjySpainStephen Shaw PROPOSAL
Greenwood BologniaUnited KingdomStephen Shaw PROPOSAL
Mujtaba NickaFranceIoni Bowcher QUALIFIED
Murillo MaletCanadaOnyama Limba NEW
Ivar PaprockiAustraliaStephen Shaw QUALIFIED
Darci PoquetteGermanyOnyama Limba QUALIFIED
Munro FerenczJapanAnna Fali NEGOTIATION
Smith GlickJapanAmy Elsner RENEWAL
Leja CaldareraFranceAnna Fali RENEWAL
Salvatore StockhamUnited KingdomElwin Sharvill UNQUALIFIED
Darci PoquetteUnited KingdomXuxue Feng UNQUALIFIED
Arvin AlbaresAustraliaElwin Sharvill PROPOSAL
Maisha RulapaughJapanIoni Bowcher QUALIFIED
Aruna FigeroaFranceIvan Magalhaes RENEWAL
Mayumi KolmetzSpainStephen Shaw NEW
Smith GlickIndiaIoni Bowcher PROPOSAL
Maria MarrierUnited KingdomOnyama Limba NEGOTIATION
Mujtaba NickaAustraliaStephen Shaw PROPOSAL
Munro FerenczRussiaStephen Shaw QUALIFIED
Clifford RimRussiaIoni Bowcher QUALIFIED
Silvio SlusarskiSpainIvan Magalhaes RENEWAL
Clifford RimItalyStephen Shaw QUALIFIED
Arvin AlbaresBrazilAmy Elsner RENEWAL
Johnson SergiRussiaIoni Bowcher NEGOTIATION
David DarakjyAustraliaElwin Sharvill UNQUALIFIED
Tony FollerJapanElwin Sharvill NEW
Arvin AlbaresAustraliaAsiya Javayant UNQUALIFIED
Clifford RimRussiaBernardo Dominic QUALIFIED
Chavez BriddickGermanyElwin Sharvill NEGOTIATION
Cody SaylorsBrazilIvan Magalhaes QUALIFIED
Cody SaylorsSpainAsiya Javayant NEGOTIATION
Ashley DoeIndiaBernardo Dominic QUALIFIED
Juan WieserArgentinaXuxue Feng QUALIFIED
Ricardo GauchoJapanStephen Shaw UNQUALIFIED
Munro FerenczSpainElwin Sharvill RENEWAL

<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>