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
Smith GlickJapanXuxue Feng NEW
Nicolas IturbideSpainIoni Bowcher NEW
Antonio CaudySpainIvan Magalhaes QUALIFIED
Wickens NestleArgentinaIoni Bowcher NEGOTIATION
Darci PoquetteArgentinaStephen Shaw QUALIFIED
Leja CaldareraBrazilXuxue Feng PROPOSAL
Greenwood BologniaFranceElwin Sharvill NEGOTIATION
James ButtRussiaAsiya Javayant UNQUALIFIED
Claire TollnerJapanAmy Elsner NEGOTIATION
Maria MarrierBrazilAsiya Javayant NEW
Jefferson SchemmerIndiaAsiya Javayant RENEWAL
Ricardo GauchoGermanyIvan Magalhaes NEW
Cody SaylorsUnited KingdomXuxue Feng NEW
David DarakjyCanadaXuxue Feng PROPOSAL
Claire TollnerGermanyElwin Sharvill UNQUALIFIED
Kadeem FlosiAustraliaAnna Fali NEW
Adams MorascaArgentinaElwin Sharvill NEGOTIATION
Salvatore StockhamSpainIoni Bowcher QUALIFIED
Costa DilliardGermanyIvan Magalhaes QUALIFIED
Juan WieserJapanXuxue Feng UNQUALIFIED
Rodrigues CampainCanadaXuxue Feng PROPOSAL
Ricardo GauchoBrazilStephen Shaw QUALIFIED
Misaki RoysterUnited KingdomOnyama Limba UNQUALIFIED
Johnson SergiGermanyOnyama Limba QUALIFIED
Julie StensethAustraliaXuxue Feng QUALIFIED
Salvatore StockhamItalyBernardo Dominic NEGOTIATION
Costa DilliardBrazilAsiya Javayant RENEWAL
Murillo MaletArgentinaAsiya Javayant PROPOSAL
Aruna FigeroaGermanyAnna Fali QUALIFIED
Ricardo GauchoBrazilBernardo Dominic UNQUALIFIED
Kaitlin OstroskyIndiaIoni Bowcher NEW
Faith GillianSpainAmy Elsner NEGOTIATION
Johnson SergiBrazilAmy Elsner NEW
Aruna FigeroaArgentinaBernardo Dominic PROPOSAL
Leja CaldareraAustraliaAmy Elsner NEW
Alejandro PerinItalyIvan Magalhaes UNQUALIFIED
Antonio CaudyAustraliaBernardo Dominic RENEWAL
Murillo MaletUnited KingdomXuxue Feng NEW
Octavia MaletAustraliaElwin Sharvill PROPOSAL
Salvatore StockhamItalyOnyama Limba RENEWAL
Nicolas IturbideRussiaOnyama Limba UNQUALIFIED
Darci PoquetteCanadaOnyama Limba NEGOTIATION
Jennifer AmigonItalyOnyama Limba QUALIFIED
Aika InouyeItalyIoni Bowcher PROPOSAL
Kaitlin OstroskyJapanOnyama Limba NEW
Chavez BriddickArgentinaStephen Shaw UNQUALIFIED
Octavia MaletAustraliaBernardo Dominic QUALIFIED
Wickens NestleUnited KingdomBernardo Dominic PROPOSAL
Munro FerenczRussiaBernardo Dominic PROPOSAL
David DarakjyIndiaAnna Fali NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Chavez BriddickRussiaStephen Shaw NEW
Morrow RutaRussiaXuxue Feng UNQUALIFIED
Francesco ShinkoUnited KingdomAsiya Javayant NEW
Maria MarrierFranceAnna Fali QUALIFIED
Alejandro PerinArgentinaOnyama Limba QUALIFIED
Octavia MaletItalyAsiya Javayant UNQUALIFIED
Ivar PaprockiIndiaAmy Elsner PROPOSAL
Maisha RulapaughArgentinaXuxue Feng RENEWAL
Nicolas IturbideRussiaElwin Sharvill RENEWAL
Smith GlickJapanElwin Sharvill NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ivar PaprockiUnited Kingdom2025-08-30Rangoni Of Florence UNQUALIFIED51Asiya Javayant
1001Leon OldroydArgentina2025-08-24Printing Dimensions RENEWAL64Bernardo Dominic
1002Costa DilliardSpain2025-09-13Dorl, James J Esq NEW91Xuxue Feng
1003Wickens NestleGermany2025-08-27Chapman, Ross E Esq NEW71Stephen Shaw
1004Chavez BriddickBrazil2025-09-06King, Christopher A Esq NEW80Bernardo Dominic
1005Antonio CaudyGermany2025-09-02Morlong Associates RENEWAL48Xuxue Feng
1006Faith GillianUnited Kingdom2025-08-21Chanay, Jeffrey A Esq NEW35Amy Elsner
1007Kaitlin OstroskyIndia2025-08-18Benton, John B Jr PROPOSAL59Asiya Javayant
1008Adams MorascaBrazil2025-09-13Feltz Printing Service NEGOTIATION22Onyama Limba
1009Jones VocelkaUnited Kingdom2025-09-01Rousseaux, Michael Esq QUALIFIED39Anna Fali
1010Isabel BowleyItaly2025-09-09Truhlar And Truhlar Attys PROPOSAL96Onyama Limba
1011Morrow RutaGermany2025-09-08Printing Dimensions NEGOTIATION51Xuxue Feng
1012Sinclair WaycottCanada2025-08-18Buckley Miller Wright QUALIFIED27Onyama Limba
1013Aika InouyeArgentina2025-09-04Commercial Press RENEWAL87Stephen Shaw
1014Faith GillianSpain2025-08-18Commercial Press QUALIFIED77Ivan Magalhaes
1015Ricardo GauchoItaly2025-08-27Commercial Press PROPOSAL76Ivan Magalhaes
1016David DarakjyGermany2025-08-26Benton, John B Jr NEGOTIATION28Onyama Limba
1017Deepesh ChuiRussia2025-08-28Dorl, James J Esq RENEWAL52Stephen Shaw
1018Nicolas IturbideRussia2025-09-07Rangoni Of Florence NEW17Xuxue Feng
1019Maria MarrierArgentina2025-08-29Printing Dimensions NEGOTIATION45Ivan Magalhaes
1020Jennifer AmigonArgentina2025-09-13Rangoni Of Florence RENEWAL95Onyama Limba
1021Tony FollerRussia2025-09-06Printing Dimensions QUALIFIED99Elwin Sharvill
1022James ButtFrance2025-08-19Printing Dimensions UNQUALIFIED41Bernardo Dominic
1023Julie StensethRussia2025-08-21Feiner Bros PROPOSAL31Asiya Javayant
1024Isabel BowleySpain2025-08-31Chemel, James L Cpa UNQUALIFIED66Onyama Limba
1025Mujtaba NickaItaly2025-09-09Feltz Printing Service QUALIFIED92Stephen Shaw
1026Ashley DoeIndia2025-08-21Truhlar And Truhlar Attys QUALIFIED32Bernardo Dominic
1027Stacey MacleadIndia2025-08-16Chapman, Ross E Esq QUALIFIED12Ivan Magalhaes
1028Maisha RulapaughItaly2025-09-07Chapman, Ross E Esq QUALIFIED24Bernardo Dominic
1029Maria MarrierCanada2025-08-30Buckley Miller Wright RENEWAL67Asiya Javayant
1030Tony FollerUnited Kingdom2025-08-18Rangoni Of Florence UNQUALIFIED92Anna Fali
1031Emily WhobreyUnited Kingdom2025-08-27Benton, John B Jr NEGOTIATION27Asiya Javayant
1032Isabel BowleyAustralia2025-09-02Rousseaux, Michael Esq QUALIFIED5Amy Elsner
1033Adams MorascaCanada2025-09-06Chemel, James L Cpa PROPOSAL7Xuxue Feng
1034Mayumi KolmetzFrance2025-09-11Chanay, Jeffrey A Esq UNQUALIFIED9Asiya Javayant
1035Leja CaldareraJapan2025-08-20Morlong Associates RENEWAL19Asiya Javayant
1036David DarakjyGermany2025-08-26Morlong Associates NEGOTIATION65Ioni Bowcher
1037Cody SaylorsArgentina2025-08-26Dorl, James J Esq PROPOSAL76Anna Fali
1038Jones VocelkaItaly2025-08-20Benton, John B Jr RENEWAL86Stephen Shaw
1039Wickens NestleBrazil2025-09-01Chanay, Jeffrey A Esq QUALIFIED59Xuxue Feng
1040Jones VocelkaArgentina2025-09-07Truhlar And Truhlar Attys NEGOTIATION1Onyama Limba
1041Mujtaba NickaGermany2025-08-15Commercial Press QUALIFIED90Xuxue Feng
1042Mayumi KolmetzBrazil2025-09-04Feltz Printing Service NEW42Stephen Shaw
1043Smith GlickGermany2025-08-27Rousseaux, Michael Esq UNQUALIFIED57Anna Fali
1044Munro FerenczGermany2025-09-01Benton, John B Jr PROPOSAL34Xuxue Feng
1045Mujtaba NickaIndia2025-08-23Chemel, James L Cpa QUALIFIED38Anna Fali
1046David DarakjyGermany2025-09-03Chapman, Ross E Esq RENEWAL59Amy Elsner
1047Juan WieserSpain2025-08-31Printing Dimensions NEW2Ioni Bowcher
1048Julie StensethIndia2025-09-07Chapman, Ross E Esq UNQUALIFIED67Asiya Javayant
1049Antonio CaudyJapan2025-08-21Chanay, Jeffrey A Esq UNQUALIFIED20Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyRussiaIvan Magalhaes PROPOSAL
Salvatore StockhamBrazilElwin Sharvill UNQUALIFIED
Izzy GarufiIndiaIoni Bowcher UNQUALIFIED
Jeanfrancois VenereBrazilAmy Elsner PROPOSAL
Juan WieserBrazilBernardo Dominic RENEWAL
Murillo MaletAustraliaAmy Elsner PROPOSAL
Darci PoquetteIndiaStephen Shaw UNQUALIFIED
Aditya KuskoBrazilElwin Sharvill NEW
Ricardo GauchoArgentinaBernardo Dominic PROPOSAL
Silvio SlusarskiIndiaOnyama Limba UNQUALIFIED
Silvio SlusarskiFranceIoni Bowcher UNQUALIFIED
Izzy GarufiCanadaAmy Elsner QUALIFIED
Clifford RimBrazilIoni Bowcher RENEWAL
Deepesh ChuiGermanyBernardo Dominic UNQUALIFIED
Murillo MaletBrazilIvan Magalhaes RENEWAL
Francesco ShinkoUnited KingdomElwin Sharvill UNQUALIFIED
Leon OldroydArgentinaXuxue Feng NEGOTIATION
Clifford RimIndiaAmy Elsner UNQUALIFIED
Izzy GarufiCanadaXuxue Feng NEW
Antonio CaudyFranceOnyama Limba PROPOSAL
Kaitlin OstroskySpainAnna Fali NEGOTIATION
Costa DilliardIndiaStephen Shaw NEGOTIATION
Nicolas IturbideArgentinaBernardo Dominic NEGOTIATION
Ivar PaprockiUnited KingdomStephen Shaw RENEWAL
Alejandro PerinRussiaIvan Magalhaes UNQUALIFIED
Murillo MaletGermanyIvan Magalhaes QUALIFIED
Jeanfrancois VenereSpainElwin Sharvill NEGOTIATION
Jones VocelkaSpainAsiya Javayant PROPOSAL
Jefferson SchemmerArgentinaXuxue Feng PROPOSAL
Leon OldroydItalyAsiya Javayant PROPOSAL
Morrow RutaAustraliaAsiya Javayant QUALIFIED
Rodrigues CampainRussiaStephen Shaw UNQUALIFIED
James ButtUnited KingdomOnyama Limba RENEWAL
James ButtJapanIoni Bowcher RENEWAL
Chavez BriddickIndiaAmy Elsner QUALIFIED
Alejandro PerinItalyXuxue Feng RENEWAL
Ivar PaprockiAustraliaBernardo Dominic PROPOSAL
Aditya KuskoArgentinaAmy Elsner QUALIFIED
Aditya KuskoFranceIvan Magalhaes RENEWAL
Emily WhobreyBrazilBernardo Dominic RENEWAL
Jefferson SchemmerArgentinaElwin Sharvill UNQUALIFIED
Alejandro PerinItalyOnyama Limba PROPOSAL
Aika InouyeIndiaAmy Elsner NEW
Izzy GarufiAustraliaStephen Shaw RENEWAL
Octavia MaletUnited KingdomIoni Bowcher PROPOSAL
Arvin AlbaresArgentinaOnyama Limba UNQUALIFIED
Leon OldroydAustraliaIvan Magalhaes UNQUALIFIED
Ivar PaprockiSpainStephen Shaw PROPOSAL
Arvin AlbaresFranceIvan Magalhaes UNQUALIFIED
Johnson SergiIndiaBernardo Dominic NEW
Frozen Columns
Name
Clifford Rim
Maisha Rulapaugh
Alejandro Perin
Ashley Doe
James Butt
Mujtaba Nicka
Salvatore Stockham
Rodrigues Campain
Aditya Kusko
Jeanfrancois Venere
Chavez Briddick
Costa Dilliard
Maria Marrier
Rodrigues Campain
Ashley Doe
Jeanfrancois Venere
Isabel Bowley
Nicolas Iturbide
Jeanfrancois Venere
Tony Foller
Deepesh Chui
Isabel Bowley
Claire Tollner
Mayumi Kolmetz
Salvatore Stockham
Morrow Ruta
Alejandro Perin
Aditya Kusko
Chavez Briddick
Rodrigues Campain
David Darakjy
Jeanfrancois Venere
Jefferson Schemmer
Stacey Maclead
Smith Glick
James Butt
Jefferson Schemmer
David Darakjy
James Butt
Munro Ferencz
Salvatore Stockham
David Darakjy
Silvio Slusarski
Jeanfrancois Venere
Julie Stenseth
Mayumi Kolmetz
Cody Saylors
Octavia Malet
Jefferson Schemmer
Stacey Maclead
IdCountryDate
1000Germany2025-09-12
1001Japan2025-08-28
1002Japan2025-09-08
1003Canada2025-08-19
1004Spain2025-09-01
1005Argentina2025-08-24
1006Japan2025-09-02
1007Germany2025-09-09
1008France2025-09-12
1009Argentina2025-08-20
1010Italy2025-08-30
1011Argentina2025-09-03
1012Italy2025-08-24
1013Germany2025-08-16
1014Italy2025-08-23
1015Russia2025-09-12
1016India2025-08-24
1017Spain2025-09-10
1018Germany2025-09-03
1019United Kingdom2025-09-08
1020Spain2025-09-12
1021Russia2025-08-23
1022Italy2025-08-20
1023India2025-09-03
1024Brazil2025-09-12
1025Argentina2025-09-08
1026United Kingdom2025-09-07
1027Germany2025-09-04
1028United Kingdom2025-08-16
1029Argentina2025-08-26
1030Canada2025-08-31
1031Japan2025-08-17
1032Canada2025-08-18
1033Italy2025-09-12
1034Italy2025-09-12
1035Russia2025-08-15
1036Argentina2025-08-31
1037Brazil2025-08-17
1038Germany2025-08-30
1039Canada2025-08-26
1040India2025-08-21
1041Japan2025-09-10
1042France2025-08-26
1043Argentina2025-08-29
1044Brazil2025-09-10
1045Russia2025-08-30
1046Argentina2025-08-27
1047Germany2025-08-16
1048Australia2025-09-05
1049Italy2025-08-26

On-Demand Data

NameIdCountryDate
Silvio Slusarski1000Argentina2025-09-05
Antonio Caudy1001Japan2025-09-05
Smith Glick1002Japan2025-09-06
Octavia Malet1003India2025-09-07
Kaitlin Ostrosky1004Brazil2025-08-31
Chavez Briddick1005Germany2025-08-18
James Butt1006India2025-08-31
David Darakjy1007United Kingdom2025-08-22
Rodrigues Campain1008Japan2025-08-27
Nicolas Iturbide1009Brazil2025-08-27
Kaitlin Ostrosky1010Italy2025-09-11
Munro Ferencz1011Japan2025-08-30
Mayumi Kolmetz1012Germany2025-08-22
Julie Stenseth1013Canada2025-08-25
Maisha Rulapaugh1014United Kingdom2025-08-29
Nicolas Iturbide1015Canada2025-08-21
Greenwood Bolognia1016Canada2025-09-02
Isabel Bowley1017Canada2025-08-24
Rodrigues Campain1018Australia2025-09-10
Aruna Figeroa1019Japan2025-08-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aditya KuskoFranceOnyama Limba QUALIFIED
David DarakjyJapanAsiya Javayant RENEWAL
Francesco ShinkoItalyXuxue Feng PROPOSAL
Deepesh ChuiJapanAsiya Javayant NEW
Ashley DoeUnited KingdomIvan Magalhaes PROPOSAL
Adams MorascaRussiaAmy Elsner UNQUALIFIED
Sinclair WaycottCanadaStephen Shaw UNQUALIFIED
Kaitlin OstroskyJapanIoni Bowcher PROPOSAL
David DarakjyRussiaAnna Fali NEW
Isabel BowleySpainIvan Magalhaes RENEWAL
Octavia MaletFranceIvan Magalhaes RENEWAL
Stacey MacleadFranceStephen Shaw UNQUALIFIED
Leon OldroydGermanyAmy Elsner QUALIFIED
Ashley DoeCanadaXuxue Feng NEW
Sinclair WaycottIndiaXuxue Feng NEW
Clifford RimSpainAnna Fali NEW
Leon OldroydUnited KingdomBernardo Dominic RENEWAL
Greenwood BologniaCanadaIoni Bowcher PROPOSAL
Aika InouyeCanadaXuxue Feng NEGOTIATION
Morrow RutaRussiaElwin Sharvill NEW
Jefferson SchemmerCanadaOnyama Limba NEGOTIATION
Claire TollnerCanadaBernardo Dominic PROPOSAL
Stacey MacleadJapanIoni Bowcher UNQUALIFIED
Leon OldroydUnited KingdomXuxue Feng NEW
Alejandro PerinJapanAsiya Javayant QUALIFIED
Morrow RutaAustraliaBernardo Dominic UNQUALIFIED
Francesco ShinkoRussiaAsiya Javayant QUALIFIED
Alejandro PerinIndiaBernardo Dominic NEW
Octavia MaletSpainIvan Magalhaes RENEWAL
Claire TollnerSpainBernardo Dominic UNQUALIFIED
Francesco ShinkoSpainBernardo Dominic NEW
Aditya KuskoFranceElwin Sharvill NEW
Salvatore StockhamAustraliaAsiya Javayant QUALIFIED
Jennifer AmigonRussiaIoni Bowcher RENEWAL
Adams MorascaCanadaElwin Sharvill QUALIFIED
Misaki RoysterUnited KingdomIoni Bowcher PROPOSAL
Isabel BowleyIndiaBernardo Dominic QUALIFIED
Kaitlin OstroskyGermanyStephen Shaw QUALIFIED
Salvatore StockhamRussiaOnyama Limba NEW
Maria MarrierArgentinaAnna Fali NEGOTIATION

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