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
Mujtaba NickaAustraliaXuxue Feng QUALIFIED
Maria MarrierCanadaAmy Elsner NEW
Claire TollnerUnited KingdomAmy Elsner QUALIFIED
Cody SaylorsFranceElwin Sharvill QUALIFIED
Aruna FigeroaJapanElwin Sharvill UNQUALIFIED
Ashley DoeAustraliaAnna Fali RENEWAL
Munro FerenczFranceElwin Sharvill UNQUALIFIED
Kadeem FlosiRussiaAnna Fali RENEWAL
Clifford RimSpainStephen Shaw UNQUALIFIED
Kaitlin OstroskyRussiaOnyama Limba RENEWAL
Munro FerenczGermanyIoni Bowcher PROPOSAL
Jennifer AmigonAustraliaBernardo Dominic NEW
Chavez BriddickBrazilIoni Bowcher NEGOTIATION
Emily WhobreyGermanyAnna Fali UNQUALIFIED
Emily WhobreyItalyAnna Fali NEW
Maisha RulapaughRussiaIvan Magalhaes NEGOTIATION
Juan WieserItalyIoni Bowcher NEW
Claire TollnerCanadaStephen Shaw NEW
David DarakjyGermanyElwin Sharvill RENEWAL
Faith GillianRussiaStephen Shaw RENEWAL
Silvio SlusarskiItalyElwin Sharvill NEGOTIATION
Emily WhobreyIndiaIvan Magalhaes QUALIFIED
Aruna FigeroaRussiaStephen Shaw NEW
Stacey MacleadItalyOnyama Limba NEW
Aika InouyeAustraliaAnna Fali PROPOSAL
Stacey MacleadIndiaBernardo Dominic RENEWAL
Aika InouyeAustraliaIoni Bowcher NEW
Sinclair WaycottItalyStephen Shaw UNQUALIFIED
Munro FerenczFranceAmy Elsner PROPOSAL
Morrow RutaSpainIoni Bowcher QUALIFIED
Costa DilliardFranceElwin Sharvill NEGOTIATION
Octavia MaletFranceAmy Elsner UNQUALIFIED
Mujtaba NickaFranceIvan Magalhaes RENEWAL
Ricardo GauchoAustraliaElwin Sharvill RENEWAL
Jefferson SchemmerFranceXuxue Feng PROPOSAL
Julie StensethAustraliaAnna Fali NEW
Jefferson SchemmerSpainIvan Magalhaes PROPOSAL
James ButtRussiaAsiya Javayant QUALIFIED
Tony FollerBrazilAnna Fali QUALIFIED
Mujtaba NickaAustraliaStephen Shaw QUALIFIED
Arvin AlbaresCanadaStephen Shaw RENEWAL
Adams MorascaArgentinaIvan Magalhaes PROPOSAL
Darci PoquetteUnited KingdomBernardo Dominic RENEWAL
Mujtaba NickaArgentinaStephen Shaw QUALIFIED
Johnson SergiRussiaAsiya Javayant NEW
Deepesh ChuiGermanyElwin Sharvill QUALIFIED
Chavez BriddickAustraliaStephen Shaw PROPOSAL
Adams MorascaBrazilIoni Bowcher RENEWAL
Sinclair WaycottUnited KingdomStephen Shaw NEGOTIATION
Aditya KuskoUnited KingdomAnna Fali PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Kadeem FlosiFranceXuxue Feng RENEWAL
Antonio CaudyFranceElwin Sharvill NEW
Darci PoquetteArgentinaElwin Sharvill QUALIFIED
Alejandro PerinRussiaOnyama Limba NEGOTIATION
Tony FollerIndiaStephen Shaw PROPOSAL
Faith GillianFranceOnyama Limba RENEWAL
Juan WieserCanadaIvan Magalhaes UNQUALIFIED
Deepesh ChuiFranceBernardo Dominic NEGOTIATION
Jennifer AmigonFranceBernardo Dominic QUALIFIED
Deepesh ChuiCanadaAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jeanfrancois VenereBrazil2025-06-17Truhlar And Truhlar Attys NEGOTIATION74Anna Fali
1001Claire TollnerUnited Kingdom2025-06-09King, Christopher A Esq PROPOSAL74Asiya Javayant
1002Maisha RulapaughAustralia2025-06-27Printing Dimensions RENEWAL43Ioni Bowcher
1003Ashley DoeSpain2025-06-25Printing Dimensions NEGOTIATION98Ivan Magalhaes
1004Octavia MaletSpain2025-06-30Morlong Associates RENEWAL82Asiya Javayant
1005Stacey MacleadUnited Kingdom2025-06-28Printing Dimensions RENEWAL41Bernardo Dominic
1006Mayumi KolmetzItaly2025-06-14Chapman, Ross E Esq PROPOSAL9Asiya Javayant
1007Kaitlin OstroskyArgentina2025-06-04Chemel, James L Cpa PROPOSAL47Bernardo Dominic
1008Isabel BowleyGermany2025-06-27Rangoni Of Florence NEW51Bernardo Dominic
1009Juan WieserGermany2025-06-04Commercial Press NEGOTIATION78Elwin Sharvill
1010Morrow RutaFrance2025-06-18Dorl, James J Esq QUALIFIED67Amy Elsner
1011Jennifer AmigonGermany2025-06-26Chanay, Jeffrey A Esq QUALIFIED13Bernardo Dominic
1012Deepesh ChuiGermany2025-06-07King, Christopher A Esq NEGOTIATION78Elwin Sharvill
1013Stacey MacleadItaly2025-06-22Commercial Press NEGOTIATION55Amy Elsner
1014Salvatore StockhamUnited Kingdom2025-06-07Rousseaux, Michael Esq RENEWAL52Ivan Magalhaes
1015David DarakjyBrazil2025-06-26Chapman, Ross E Esq RENEWAL8Ivan Magalhaes
1016Stacey MacleadRussia2025-06-23Commercial Press NEGOTIATION95Anna Fali
1017Faith GillianIndia2025-06-04Chanay, Jeffrey A Esq NEGOTIATION25Ioni Bowcher
1018Sinclair WaycottRussia2025-06-30Dorl, James J Esq NEW47Xuxue Feng
1019Sinclair WaycottFrance2025-06-26Chemel, James L Cpa QUALIFIED29Xuxue Feng
1020Wickens NestleJapan2025-06-09Chapman, Ross E Esq NEGOTIATION50Stephen Shaw
1021Kadeem FlosiArgentina2025-06-02Rousseaux, Michael Esq NEGOTIATION21Elwin Sharvill
1022Faith GillianGermany2025-06-15Truhlar And Truhlar Attys RENEWAL49Xuxue Feng
1023Sinclair WaycottJapan2025-06-16Printing Dimensions UNQUALIFIED61Amy Elsner
1024Jones VocelkaAustralia2025-06-15Benton, John B Jr QUALIFIED77Ioni Bowcher
1025James ButtCanada2025-06-06Feltz Printing Service UNQUALIFIED12Stephen Shaw
1026Sinclair WaycottSpain2025-06-07Dorl, James J Esq QUALIFIED37Xuxue Feng
1027Costa DilliardCanada2025-06-03Morlong Associates NEW64Asiya Javayant
1028Adams MorascaJapan2025-06-06Chanay, Jeffrey A Esq RENEWAL70Onyama Limba
1029Darci PoquetteJapan2025-06-06Benton, John B Jr UNQUALIFIED2Asiya Javayant
1030Tony FollerIndia2025-07-01King, Christopher A Esq NEGOTIATION50Elwin Sharvill
1031Francesco ShinkoArgentina2025-06-06Benton, John B Jr RENEWAL42Amy Elsner
1032Juan WieserItaly2025-07-01Benton, John B Jr NEGOTIATION13Asiya Javayant
1033Juan WieserJapan2025-06-04King, Christopher A Esq RENEWAL32Bernardo Dominic
1034David DarakjyFrance2025-06-15Benton, John B Jr UNQUALIFIED36Stephen Shaw
1035Rodrigues CampainRussia2025-06-02Chemel, James L Cpa NEW26Stephen Shaw
1036James ButtItaly2025-06-17Chapman, Ross E Esq NEW95Asiya Javayant
1037Jennifer AmigonItaly2025-06-15Dorl, James J Esq PROPOSAL85Asiya Javayant
1038Clifford RimJapan2025-06-15Benton, John B Jr UNQUALIFIED25Elwin Sharvill
1039Salvatore StockhamAustralia2025-06-19Chemel, James L Cpa PROPOSAL31Amy Elsner
1040Greenwood BologniaArgentina2025-06-20Chanay, Jeffrey A Esq NEGOTIATION70Elwin Sharvill
1041Costa DilliardArgentina2025-06-06Commercial Press UNQUALIFIED21Onyama Limba
1042Tony FollerGermany2025-06-12Chemel, James L Cpa RENEWAL13Stephen Shaw
1043Jeanfrancois VenereAustralia2025-06-13Feltz Printing Service PROPOSAL99Xuxue Feng
1044Costa DilliardFrance2025-06-16Truhlar And Truhlar Attys RENEWAL74Ivan Magalhaes
1045Sinclair WaycottRussia2025-07-01Chanay, Jeffrey A Esq UNQUALIFIED16Bernardo Dominic
1046Stacey MacleadUnited Kingdom2025-06-18Buckley Miller Wright PROPOSAL93Bernardo Dominic
1047Jones VocelkaFrance2025-06-26Truhlar And Truhlar Attys PROPOSAL45Anna Fali
1048Stacey MacleadAustralia2025-06-27Feltz Printing Service NEW20Amy Elsner
1049Maria MarrierAustralia2025-06-21Buckley Miller Wright NEGOTIATION59Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Maria MarrierIndiaBernardo Dominic NEGOTIATION
Salvatore StockhamFranceOnyama Limba QUALIFIED
Leja CaldareraCanadaIvan Magalhaes NEGOTIATION
Emily WhobreyItalyAsiya Javayant UNQUALIFIED
Mayumi KolmetzGermanyBernardo Dominic PROPOSAL
Salvatore StockhamItalyElwin Sharvill PROPOSAL
Jeanfrancois VenereJapanXuxue Feng UNQUALIFIED
Munro FerenczRussiaAsiya Javayant RENEWAL
Aditya KuskoIndiaAmy Elsner RENEWAL
Maisha RulapaughFranceStephen Shaw PROPOSAL
Mujtaba NickaJapanAmy Elsner QUALIFIED
Murillo MaletArgentinaAnna Fali PROPOSAL
Alejandro PerinBrazilBernardo Dominic UNQUALIFIED
Murillo MaletUnited KingdomStephen Shaw NEGOTIATION
Deepesh ChuiGermanyAsiya Javayant QUALIFIED
Salvatore StockhamBrazilIvan Magalhaes NEW
Alejandro PerinCanadaAmy Elsner NEGOTIATION
Morrow RutaRussiaXuxue Feng NEW
Munro FerenczItalyOnyama Limba NEGOTIATION
Maisha RulapaughGermanyElwin Sharvill RENEWAL
Jeanfrancois VenereJapanBernardo Dominic UNQUALIFIED
Octavia MaletArgentinaXuxue Feng QUALIFIED
Ricardo GauchoJapanIvan Magalhaes NEW
Salvatore StockhamCanadaBernardo Dominic QUALIFIED
Octavia MaletItalyIvan Magalhaes NEGOTIATION
Aditya KuskoRussiaIoni Bowcher RENEWAL
Tony FollerArgentinaXuxue Feng QUALIFIED
Aruna FigeroaUnited KingdomXuxue Feng UNQUALIFIED
Emily WhobreySpainIoni Bowcher NEGOTIATION
Johnson SergiUnited KingdomStephen Shaw QUALIFIED
Emily WhobreyFranceAmy Elsner RENEWAL
Jones VocelkaJapanBernardo Dominic PROPOSAL
Leja CaldareraRussiaIoni Bowcher QUALIFIED
Ashley DoeAustraliaXuxue Feng RENEWAL
Cody SaylorsRussiaXuxue Feng NEW
Claire TollnerGermanyBernardo Dominic UNQUALIFIED
Kaitlin OstroskyRussiaXuxue Feng NEW
Greenwood BologniaUnited KingdomAmy Elsner PROPOSAL
Octavia MaletCanadaStephen Shaw NEW
Chavez BriddickJapanIoni Bowcher QUALIFIED
Johnson SergiCanadaOnyama Limba PROPOSAL
Smith GlickGermanyElwin Sharvill UNQUALIFIED
Deepesh ChuiAustraliaAnna Fali RENEWAL
Smith GlickBrazilIoni Bowcher RENEWAL
Maria MarrierGermanyOnyama Limba UNQUALIFIED
Emily WhobreyFranceIoni Bowcher UNQUALIFIED
Kaitlin OstroskyGermanyStephen Shaw UNQUALIFIED
Morrow RutaUnited KingdomAnna Fali UNQUALIFIED
Misaki RoysterFranceIoni Bowcher RENEWAL
Aditya KuskoUnited KingdomStephen Shaw NEW
Frozen Columns
Name
Morrow Ruta
Kadeem Flosi
Morrow Ruta
Adams Morasca
Jennifer Amigon
Antonio Caudy
Deepesh Chui
Darci Poquette
David Darakjy
James Butt
Aditya Kusko
Chavez Briddick
Julie Stenseth
Ricardo Gaucho
Tony Foller
Silvio Slusarski
Claire Tollner
Ricardo Gaucho
Ricardo Gaucho
Jones Vocelka
Kadeem Flosi
Silvio Slusarski
Faith Gillian
Aruna Figeroa
Claire Tollner
Greenwood Bolognia
Tony Foller
Darci Poquette
Maisha Rulapaugh
Arvin Albares
Murillo Malet
Kadeem Flosi
Munro Ferencz
Leja Caldarera
Murillo Malet
Kaitlin Ostrosky
Cody Saylors
Emily Whobrey
Arvin Albares
Faith Gillian
Darci Poquette
Costa Dilliard
Kadeem Flosi
Tony Foller
Maisha Rulapaugh
Leja Caldarera
Silvio Slusarski
Darci Poquette
Julie Stenseth
Adams Morasca
IdCountryDate
1000United Kingdom2025-06-18
1001Australia2025-06-26
1002France2025-06-04
1003Japan2025-06-21
1004India2025-06-08
1005India2025-06-18
1006India2025-06-24
1007Brazil2025-06-24
1008Japan2025-06-05
1009Italy2025-06-16
1010Japan2025-06-12
1011Argentina2025-06-03
1012France2025-06-04
1013Australia2025-06-02
1014Australia2025-06-29
1015Argentina2025-06-04
1016Germany2025-06-28
1017Argentina2025-06-08
1018Brazil2025-06-15
1019Australia2025-07-01
1020Germany2025-07-01
1021Russia2025-06-25
1022Spain2025-06-14
1023India2025-06-17
1024United Kingdom2025-06-10
1025Argentina2025-06-19
1026United Kingdom2025-06-29
1027Russia2025-06-27
1028Italy2025-06-22
1029Australia2025-06-18
1030Germany2025-06-24
1031Argentina2025-06-24
1032Australia2025-06-07
1033Japan2025-06-15
1034Japan2025-06-10
1035Australia2025-06-25
1036France2025-06-13
1037United Kingdom2025-06-29
1038United Kingdom2025-06-11
1039Australia2025-06-29
1040Spain2025-06-09
1041Japan2025-06-29
1042Spain2025-06-26
1043Russia2025-06-24
1044Australia2025-06-21
1045Japan2025-06-02
1046Japan2025-06-19
1047Japan2025-06-10
1048Germany2025-06-04
1049Japan2025-06-20

On-Demand Data

NameIdCountryDate
Murillo Malet1000Brazil2025-06-23
Sinclair Waycott1001India2025-06-02
Jeanfrancois Venere1002Japan2025-06-24
Isabel Bowley1003France2025-06-10
Mayumi Kolmetz1004France2025-06-22
Greenwood Bolognia1005United Kingdom2025-06-08
James Butt1006Argentina2025-06-15
Octavia Malet1007France2025-06-24
Salvatore Stockham1008Argentina2025-06-16
Kaitlin Ostrosky1009Australia2025-06-30
Munro Ferencz1010France2025-06-07
Maisha Rulapaugh1011Italy2025-06-24
Adams Morasca1012Spain2025-06-24
Aditya Kusko1013Germany2025-06-15
Isabel Bowley1014Brazil2025-06-09
Mujtaba Nicka1015India2025-06-16
Deepesh Chui1016Canada2025-06-06
Chavez Briddick1017France2025-06-30
Aika Inouye1018Brazil2025-06-02
Mujtaba Nicka1019Germany2025-06-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Rodrigues CampainCanadaIoni Bowcher PROPOSAL
Rodrigues CampainFranceStephen Shaw NEGOTIATION
Stacey MacleadIndiaIoni Bowcher NEGOTIATION
Cody SaylorsRussiaXuxue Feng NEGOTIATION
Kaitlin OstroskyCanadaIvan Magalhaes RENEWAL
Kadeem FlosiArgentinaOnyama Limba RENEWAL
Mayumi KolmetzArgentinaOnyama Limba QUALIFIED
Stacey MacleadGermanyAnna Fali NEW
David DarakjyFranceIvan Magalhaes RENEWAL
Emily WhobreyCanadaAmy Elsner RENEWAL
Smith GlickUnited KingdomIoni Bowcher QUALIFIED
Kaitlin OstroskyGermanyIoni Bowcher RENEWAL
Costa DilliardBrazilAsiya Javayant QUALIFIED
Johnson SergiGermanyElwin Sharvill QUALIFIED
Cody SaylorsUnited KingdomStephen Shaw RENEWAL
Mujtaba NickaItalyStephen Shaw NEW
Clifford RimIndiaElwin Sharvill PROPOSAL
Arvin AlbaresJapanAsiya Javayant UNQUALIFIED
Julie StensethAustraliaXuxue Feng RENEWAL
Arvin AlbaresFranceElwin Sharvill NEW
Octavia MaletCanadaIvan Magalhaes RENEWAL
Isabel BowleyGermanyAmy Elsner RENEWAL
Kadeem FlosiCanadaAmy Elsner RENEWAL
Arvin AlbaresJapanIvan Magalhaes QUALIFIED
Arvin AlbaresBrazilStephen Shaw PROPOSAL
Morrow RutaItalyBernardo Dominic RENEWAL
Silvio SlusarskiSpainStephen Shaw UNQUALIFIED
Maria MarrierArgentinaOnyama Limba NEGOTIATION
Chavez BriddickBrazilElwin Sharvill UNQUALIFIED
Mayumi KolmetzJapanXuxue Feng NEGOTIATION
Ivar PaprockiJapanIvan Magalhaes NEGOTIATION
Juan WieserFranceAmy Elsner NEW
Munro FerenczGermanyAmy Elsner QUALIFIED
Juan WieserJapanAsiya Javayant RENEWAL
Alejandro PerinIndiaBernardo Dominic QUALIFIED
Johnson SergiUnited KingdomStephen Shaw NEW
Smith GlickUnited KingdomBernardo Dominic QUALIFIED
Francesco ShinkoArgentinaAnna Fali PROPOSAL
Francesco ShinkoIndiaAnna Fali NEGOTIATION
Munro FerenczRussiaXuxue Feng PROPOSAL

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