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
Arvin AlbaresJapanXuxue Feng UNQUALIFIED
Silvio SlusarskiGermanyStephen Shaw RENEWAL
Ricardo GauchoRussiaElwin Sharvill NEW
Cody SaylorsFranceStephen Shaw UNQUALIFIED
Julie StensethRussiaAnna Fali RENEWAL
Rodrigues CampainFranceBernardo Dominic QUALIFIED
Misaki RoysterSpainElwin Sharvill PROPOSAL
Cody SaylorsGermanyIvan Magalhaes NEGOTIATION
Cody SaylorsGermanyAnna Fali NEW
Cody SaylorsCanadaBernardo Dominic NEW
Isabel BowleyJapanAmy Elsner QUALIFIED
Morrow RutaAustraliaIvan Magalhaes RENEWAL
Clifford RimGermanyXuxue Feng PROPOSAL
Aditya KuskoFranceOnyama Limba PROPOSAL
Claire TollnerUnited KingdomStephen Shaw NEW
Deepesh ChuiItalyAnna Fali PROPOSAL
Aditya KuskoArgentinaStephen Shaw RENEWAL
Rodrigues CampainArgentinaXuxue Feng UNQUALIFIED
Jones VocelkaRussiaAsiya Javayant UNQUALIFIED
Jefferson SchemmerArgentinaXuxue Feng QUALIFIED
Izzy GarufiRussiaIoni Bowcher UNQUALIFIED
Morrow RutaItalyXuxue Feng QUALIFIED
Mujtaba NickaFranceIvan Magalhaes PROPOSAL
Ricardo GauchoSpainXuxue Feng NEGOTIATION
James ButtCanadaIoni Bowcher UNQUALIFIED
Julie StensethCanadaElwin Sharvill QUALIFIED
Nicolas IturbideFranceAnna Fali RENEWAL
David DarakjyGermanyBernardo Dominic PROPOSAL
Clifford RimBrazilStephen Shaw NEW
Greenwood BologniaItalyIvan Magalhaes RENEWAL
Greenwood BologniaUnited KingdomBernardo Dominic QUALIFIED
Smith GlickUnited KingdomBernardo Dominic QUALIFIED
Ashley DoeUnited KingdomXuxue Feng NEW
Faith GillianCanadaXuxue Feng RENEWAL
Emily WhobreyFranceAmy Elsner RENEWAL
Tony FollerGermanyStephen Shaw PROPOSAL
Julie StensethArgentinaAmy Elsner QUALIFIED
Wickens NestleIndiaAnna Fali RENEWAL
Francesco ShinkoFranceOnyama Limba NEGOTIATION
Mayumi KolmetzIndiaAsiya Javayant QUALIFIED
Aruna FigeroaUnited KingdomXuxue Feng QUALIFIED
Arvin AlbaresUnited KingdomElwin Sharvill RENEWAL
Wickens NestleGermanyOnyama Limba RENEWAL
Tony FollerArgentinaStephen Shaw NEGOTIATION
Izzy GarufiJapanIoni Bowcher PROPOSAL
Darci PoquetteFranceXuxue Feng PROPOSAL
Ashley DoeFranceIoni Bowcher NEGOTIATION
Greenwood BologniaGermanyStephen Shaw UNQUALIFIED
Rodrigues CampainFranceAmy Elsner PROPOSAL
Alejandro PerinJapanAnna Fali PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Adams MorascaCanadaBernardo Dominic UNQUALIFIED
Jennifer AmigonSpainIvan Magalhaes NEGOTIATION
Rodrigues CampainCanadaStephen Shaw NEW
Aika InouyeJapanElwin Sharvill PROPOSAL
Ivar PaprockiItalyOnyama Limba NEGOTIATION
Mayumi KolmetzGermanyIvan Magalhaes NEW
Alejandro PerinRussiaOnyama Limba PROPOSAL
Munro FerenczCanadaAsiya Javayant RENEWAL
Stacey MacleadFranceBernardo Dominic NEW
Mujtaba NickaUnited KingdomOnyama Limba NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jeanfrancois VenereJapan2026-05-02Rangoni Of Florence NEW8Ivan Magalhaes
1001Adams MorascaBrazil2026-05-04Chemel, James L Cpa QUALIFIED27Onyama Limba
1002Clifford RimAustralia2026-05-13Chanay, Jeffrey A Esq RENEWAL72Elwin Sharvill
1003Julie StensethCanada2026-04-26Rangoni Of Florence UNQUALIFIED37Anna Fali
1004Faith GillianGermany2026-05-09Dorl, James J Esq NEW6Elwin Sharvill
1005Julie StensethArgentina2026-05-07Rousseaux, Michael Esq PROPOSAL24Amy Elsner
1006Darci PoquetteUnited Kingdom2026-05-01Printing Dimensions PROPOSAL78Anna Fali
1007Sinclair WaycottIndia2026-05-16Printing Dimensions PROPOSAL36Elwin Sharvill
1008Greenwood BologniaGermany2026-05-12Commercial Press UNQUALIFIED27Bernardo Dominic
1009Alejandro PerinCanada2026-04-26Commercial Press UNQUALIFIED18Amy Elsner
1010Cody SaylorsGermany2026-05-21King, Christopher A Esq RENEWAL3Ioni Bowcher
1011Salvatore StockhamFrance2026-05-21Commercial Press PROPOSAL6Bernardo Dominic
1012Mayumi KolmetzArgentina2026-05-22Chanay, Jeffrey A Esq QUALIFIED93Ivan Magalhaes
1013Maisha RulapaughBrazil2026-05-15Printing Dimensions PROPOSAL52Bernardo Dominic
1014Jefferson SchemmerSpain2026-05-04Morlong Associates NEW5Ioni Bowcher
1015Salvatore StockhamIndia2026-05-09King, Christopher A Esq QUALIFIED79Elwin Sharvill
1016Leon OldroydCanada2026-05-21Benton, John B Jr PROPOSAL1Ioni Bowcher
1017Leja CaldareraAustralia2026-05-18Truhlar And Truhlar Attys NEGOTIATION85Anna Fali
1018Julie StensethItaly2026-04-30Benton, John B Jr QUALIFIED65Ivan Magalhaes
1019Leja CaldareraArgentina2026-04-28Feltz Printing Service NEGOTIATION41Anna Fali
1020Aika InouyeGermany2026-05-19Commercial Press UNQUALIFIED85Bernardo Dominic
1021David DarakjyJapan2026-05-17Chemel, James L Cpa RENEWAL35Asiya Javayant
1022Juan WieserBrazil2026-05-01Commercial Press RENEWAL38Asiya Javayant
1023Ivar PaprockiAustralia2026-05-07Benton, John B Jr NEW43Amy Elsner
1024Kaitlin OstroskyFrance2026-04-26Rousseaux, Michael Esq QUALIFIED31Ioni Bowcher
1025Cody SaylorsArgentina2026-05-17Chapman, Ross E Esq QUALIFIED65Asiya Javayant
1026Salvatore StockhamUnited Kingdom2026-04-28Rousseaux, Michael Esq NEGOTIATION77Amy Elsner
1027Sinclair WaycottAustralia2026-05-01Rangoni Of Florence NEGOTIATION87Stephen Shaw
1028Tony FollerGermany2026-04-29Commercial Press NEGOTIATION40Ivan Magalhaes
1029Leon OldroydArgentina2026-04-26Buckley Miller Wright PROPOSAL74Stephen Shaw
1030Clifford RimGermany2026-05-16Feltz Printing Service NEW50Ioni Bowcher
1031Stacey MacleadIndia2026-04-28Truhlar And Truhlar Attys QUALIFIED42Amy Elsner
1032Munro FerenczBrazil2026-05-18Printing Dimensions QUALIFIED31Xuxue Feng
1033Misaki RoysterItaly2026-05-14Rangoni Of Florence RENEWAL52Onyama Limba
1034Chavez BriddickCanada2026-05-20Feltz Printing Service RENEWAL31Asiya Javayant
1035Ricardo GauchoBrazil2026-04-27Truhlar And Truhlar Attys RENEWAL40Bernardo Dominic
1036Maria MarrierFrance2026-05-16Feltz Printing Service PROPOSAL52Xuxue Feng
1037Francesco ShinkoFrance2026-05-22Chanay, Jeffrey A Esq RENEWAL15Ioni Bowcher
1038Maria MarrierArgentina2026-05-16Chemel, James L Cpa PROPOSAL84Bernardo Dominic
1039Mayumi KolmetzBrazil2026-05-13King, Christopher A Esq QUALIFIED23Asiya Javayant
1040Darci PoquetteIndia2026-05-04Dorl, James J Esq NEGOTIATION86Ivan Magalhaes
1041Ricardo GauchoCanada2026-05-19Printing Dimensions RENEWAL81Xuxue Feng
1042Ashley DoeGermany2026-05-09Rousseaux, Michael Esq RENEWAL25Bernardo Dominic
1043Darci PoquetteArgentina2026-05-05Rousseaux, Michael Esq NEW61Ivan Magalhaes
1044Antonio CaudySpain2026-05-17Chanay, Jeffrey A Esq PROPOSAL67Ivan Magalhaes
1045Leon OldroydRussia2026-05-15Rousseaux, Michael Esq NEW77Stephen Shaw
1046Munro FerenczGermany2026-05-10Feltz Printing Service NEGOTIATION97Xuxue Feng
1047Claire TollnerJapan2026-04-27Rousseaux, Michael Esq NEGOTIATION12Elwin Sharvill
1048Francesco ShinkoUnited Kingdom2026-05-03Chemel, James L Cpa NEGOTIATION11Asiya Javayant
1049Juan WieserAustralia2026-05-08Chanay, Jeffrey A Esq NEGOTIATION65Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Kadeem FlosiJapanXuxue Feng NEGOTIATION
Nicolas IturbideBrazilStephen Shaw PROPOSAL
Rodrigues CampainItalyElwin Sharvill NEGOTIATION
Arvin AlbaresFranceOnyama Limba RENEWAL
Antonio CaudyFranceXuxue Feng QUALIFIED
Tony FollerItalyAsiya Javayant UNQUALIFIED
Stacey MacleadSpainOnyama Limba RENEWAL
Juan WieserGermanyOnyama Limba NEGOTIATION
Ashley DoeItalyIvan Magalhaes NEGOTIATION
Izzy GarufiArgentinaXuxue Feng NEGOTIATION
Clifford RimIndiaElwin Sharvill RENEWAL
Greenwood BologniaRussiaAmy Elsner NEW
James ButtBrazilAmy Elsner NEW
Sinclair WaycottSpainOnyama Limba NEGOTIATION
David DarakjySpainAnna Fali PROPOSAL
Rodrigues CampainCanadaIvan Magalhaes NEGOTIATION
Costa DilliardRussiaAmy Elsner UNQUALIFIED
Aika InouyeIndiaStephen Shaw PROPOSAL
Costa DilliardGermanyIvan Magalhaes PROPOSAL
Sinclair WaycottFranceBernardo Dominic PROPOSAL
Aika InouyeCanadaXuxue Feng UNQUALIFIED
Izzy GarufiBrazilIoni Bowcher RENEWAL
Mujtaba NickaRussiaOnyama Limba PROPOSAL
Jennifer AmigonRussiaIoni Bowcher QUALIFIED
Ashley DoeArgentinaStephen Shaw PROPOSAL
Octavia MaletFranceXuxue Feng PROPOSAL
Mayumi KolmetzFranceAmy Elsner PROPOSAL
Jennifer AmigonCanadaAmy Elsner PROPOSAL
Isabel BowleyRussiaElwin Sharvill QUALIFIED
Jennifer AmigonCanadaIvan Magalhaes NEGOTIATION
Stacey MacleadIndiaStephen Shaw QUALIFIED
Stacey MacleadArgentinaStephen Shaw QUALIFIED
Ivar PaprockiFranceIvan Magalhaes UNQUALIFIED
Claire TollnerAustraliaIoni Bowcher NEGOTIATION
Salvatore StockhamRussiaIvan Magalhaes UNQUALIFIED
Aika InouyeUnited KingdomBernardo Dominic NEGOTIATION
Kadeem FlosiIndiaIoni Bowcher UNQUALIFIED
Mujtaba NickaGermanyXuxue Feng UNQUALIFIED
Johnson SergiFranceXuxue Feng NEGOTIATION
Silvio SlusarskiFranceAsiya Javayant QUALIFIED
Deepesh ChuiBrazilIoni Bowcher UNQUALIFIED
Rodrigues CampainRussiaBernardo Dominic PROPOSAL
Maisha RulapaughCanadaIoni Bowcher PROPOSAL
Faith GillianUnited KingdomOnyama Limba QUALIFIED
Maisha RulapaughUnited KingdomBernardo Dominic PROPOSAL
Costa DilliardCanadaIoni Bowcher PROPOSAL
Cody SaylorsJapanStephen Shaw RENEWAL
Murillo MaletBrazilStephen Shaw QUALIFIED
Claire TollnerCanadaIoni Bowcher PROPOSAL
Jefferson SchemmerBrazilIoni Bowcher PROPOSAL
Frozen Columns
Name
Aruna Figeroa
Faith Gillian
Clifford Rim
Misaki Royster
Julie Stenseth
Leja Caldarera
Faith Gillian
Ashley Doe
Munro Ferencz
Octavia Malet
Jones Vocelka
Silvio Slusarski
Misaki Royster
Juan Wieser
Tony Foller
Smith Glick
Wickens Nestle
Jeanfrancois Venere
Aruna Figeroa
Clifford Rim
Izzy Garufi
Aika Inouye
Emily Whobrey
Mayumi Kolmetz
Wickens Nestle
Aruna Figeroa
Maisha Rulapaugh
Aditya Kusko
Jones Vocelka
Francesco Shinko
Maria Marrier
Murillo Malet
Rodrigues Campain
Darci Poquette
Leon Oldroyd
Aruna Figeroa
James Butt
Greenwood Bolognia
Mayumi Kolmetz
James Butt
Cody Saylors
James Butt
Nicolas Iturbide
Stacey Maclead
Greenwood Bolognia
Maisha Rulapaugh
Clifford Rim
Julie Stenseth
Jones Vocelka
Arvin Albares
IdCountryDate
1000Germany2026-05-12
1001India2026-05-06
1002Spain2026-05-10
1003Argentina2026-05-08
1004Spain2026-05-12
1005India2026-05-22
1006United Kingdom2026-04-28
1007Argentina2026-05-04
1008Japan2026-05-23
1009Italy2026-04-26
1010India2026-05-24
1011Spain2026-05-03
1012Australia2026-04-30
1013Spain2026-05-21
1014India2026-04-29
1015United Kingdom2026-05-02
1016Canada2026-05-14
1017France2026-05-11
1018Germany2026-05-02
1019Argentina2026-05-20
1020India2026-05-21
1021France2026-05-23
1022Brazil2026-04-29
1023Germany2026-05-24
1024United Kingdom2026-04-28
1025Spain2026-05-01
1026Japan2026-05-18
1027Italy2026-04-30
1028Argentina2026-05-14
1029Brazil2026-05-11
1030Brazil2026-05-07
1031Russia2026-05-15
1032Japan2026-05-18
1033Canada2026-05-09
1034Canada2026-05-06
1035Japan2026-05-02
1036Spain2026-04-29
1037Argentina2026-05-14
1038France2026-05-18
1039Italy2026-05-15
1040Canada2026-04-29
1041Brazil2026-05-07
1042Germany2026-05-22
1043Brazil2026-04-28
1044Australia2026-05-10
1045India2026-05-12
1046India2026-05-06
1047United Kingdom2026-05-05
1048Spain2026-05-03
1049France2026-05-07

On-Demand Data

NameIdCountryDate
Jefferson Schemmer1000Argentina2026-05-18
Ricardo Gaucho1001India2026-04-30
Julie Stenseth1002Brazil2026-05-09
Aika Inouye1003United Kingdom2026-05-08
Costa Dilliard1004Russia2026-05-24
Leja Caldarera1005Italy2026-05-19
Johnson Sergi1006United Kingdom2026-04-29
Octavia Malet1007Canada2026-05-01
Alejandro Perin1008United Kingdom2026-05-18
Arvin Albares1009Argentina2026-04-30
Sinclair Waycott1010Canada2026-05-22
Francesco Shinko1011Argentina2026-04-29
Misaki Royster1012Australia2026-05-10
Sinclair Waycott1013Germany2026-05-03
Ivar Paprocki1014Canada2026-05-03
Greenwood Bolognia1015Japan2026-05-07
Stacey Maclead1016Russia2026-05-04
Aruna Figeroa1017Australia2026-05-02
Kadeem Flosi1018Brazil2026-05-17
Aruna Figeroa1019Japan2026-05-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jennifer AmigonFranceAmy Elsner PROPOSAL
Rodrigues CampainBrazilOnyama Limba RENEWAL
Rodrigues CampainIndiaIvan Magalhaes RENEWAL
Leon OldroydUnited KingdomIoni Bowcher NEGOTIATION
Juan WieserFranceAsiya Javayant UNQUALIFIED
Izzy GarufiAustraliaIvan Magalhaes RENEWAL
Leon OldroydGermanyAmy Elsner UNQUALIFIED
Misaki RoysterBrazilStephen Shaw RENEWAL
Octavia MaletCanadaElwin Sharvill RENEWAL
Jones VocelkaUnited KingdomStephen Shaw NEW
Kaitlin OstroskySpainAmy Elsner UNQUALIFIED
Alejandro PerinRussiaIvan Magalhaes NEW
Arvin AlbaresGermanyElwin Sharvill NEW
Faith GillianAustraliaXuxue Feng RENEWAL
Francesco ShinkoIndiaAnna Fali UNQUALIFIED
Cody SaylorsJapanAsiya Javayant PROPOSAL
Ricardo GauchoItalyAsiya Javayant RENEWAL
Sinclair WaycottRussiaAnna Fali RENEWAL
Julie StensethBrazilOnyama Limba RENEWAL
Chavez BriddickAustraliaAmy Elsner QUALIFIED
Chavez BriddickAustraliaXuxue Feng NEW
Aruna FigeroaItalyIoni Bowcher NEW
Maisha RulapaughSpainElwin Sharvill NEW
Chavez BriddickFranceOnyama Limba RENEWAL
Jefferson SchemmerAustraliaIoni Bowcher UNQUALIFIED
Murillo MaletItalyStephen Shaw NEGOTIATION
Jeanfrancois VenereCanadaBernardo Dominic QUALIFIED
Alejandro PerinUnited KingdomIoni Bowcher RENEWAL
Francesco ShinkoIndiaStephen Shaw NEW
Greenwood BologniaIndiaStephen Shaw QUALIFIED
Antonio CaudyIndiaAnna Fali PROPOSAL
Costa DilliardBrazilAmy Elsner NEGOTIATION
Murillo MaletRussiaIvan Magalhaes PROPOSAL
Adams MorascaJapanIvan Magalhaes NEW
Morrow RutaUnited KingdomIoni Bowcher RENEWAL
Izzy GarufiJapanAmy Elsner QUALIFIED
Aika InouyeFranceIoni Bowcher NEGOTIATION
David DarakjyItalyElwin Sharvill QUALIFIED
Aika InouyeUnited KingdomElwin Sharvill NEW
Misaki RoysterRussiaAsiya Javayant UNQUALIFIED

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