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
Maria MarrierFranceOnyama Limba UNQUALIFIED
Misaki RoysterGermanyAsiya Javayant NEGOTIATION
Ivar PaprockiArgentinaIoni Bowcher QUALIFIED
Ricardo GauchoAustraliaElwin Sharvill PROPOSAL
Kaitlin OstroskySpainIoni Bowcher QUALIFIED
Deepesh ChuiFranceIoni Bowcher NEW
Isabel BowleySpainBernardo Dominic PROPOSAL
Adams MorascaFranceOnyama Limba PROPOSAL
Mayumi KolmetzCanadaAnna Fali NEW
Wickens NestleFranceXuxue Feng NEW
Kaitlin OstroskyIndiaAnna Fali NEW
Aika InouyeRussiaElwin Sharvill UNQUALIFIED
Maria MarrierSpainIvan Magalhaes NEGOTIATION
Alejandro PerinArgentinaIvan Magalhaes NEGOTIATION
Jeanfrancois VenereUnited KingdomAmy Elsner RENEWAL
Costa DilliardGermanyIvan Magalhaes QUALIFIED
Murillo MaletGermanyOnyama Limba NEGOTIATION
Sinclair WaycottAustraliaStephen Shaw PROPOSAL
Antonio CaudyAustraliaIvan Magalhaes NEW
Jennifer AmigonAustraliaIoni Bowcher QUALIFIED
Ivar PaprockiGermanyAmy Elsner RENEWAL
Aditya KuskoAustraliaBernardo Dominic QUALIFIED
Claire TollnerGermanyIvan Magalhaes NEGOTIATION
Alejandro PerinSpainAnna Fali PROPOSAL
Tony FollerIndiaStephen Shaw UNQUALIFIED
Costa DilliardGermanyOnyama Limba RENEWAL
Octavia MaletCanadaStephen Shaw UNQUALIFIED
Cody SaylorsItalyBernardo Dominic UNQUALIFIED
Jones VocelkaItalyAmy Elsner UNQUALIFIED
Aika InouyeItalyOnyama Limba QUALIFIED
Clifford RimJapanAsiya Javayant UNQUALIFIED
Maria MarrierSpainXuxue Feng UNQUALIFIED
Ivar PaprockiAustraliaIoni Bowcher UNQUALIFIED
Aditya KuskoGermanyBernardo Dominic NEGOTIATION
Mujtaba NickaJapanAsiya Javayant UNQUALIFIED
Salvatore StockhamUnited KingdomIoni Bowcher UNQUALIFIED
Chavez BriddickArgentinaBernardo Dominic PROPOSAL
Stacey MacleadUnited KingdomStephen Shaw PROPOSAL
Stacey MacleadGermanyStephen Shaw QUALIFIED
Clifford RimFranceAnna Fali QUALIFIED
Chavez BriddickFranceAsiya Javayant NEGOTIATION
Jefferson SchemmerFranceIoni Bowcher UNQUALIFIED
Wickens NestleIndiaAmy Elsner QUALIFIED
Sinclair WaycottCanadaAsiya Javayant NEW
Jones VocelkaIndiaElwin Sharvill QUALIFIED
Antonio CaudyIndiaAsiya Javayant QUALIFIED
Julie StensethFranceAmy Elsner QUALIFIED
Aika InouyeCanadaAnna Fali QUALIFIED
Chavez BriddickIndiaAmy Elsner NEGOTIATION
Isabel BowleyArgentinaOnyama Limba QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Stacey MacleadAustraliaBernardo Dominic QUALIFIED
Tony FollerGermanyIoni Bowcher UNQUALIFIED
Munro FerenczRussiaIoni Bowcher RENEWAL
Nicolas IturbideUnited KingdomStephen Shaw QUALIFIED
Silvio SlusarskiAustraliaIvan Magalhaes NEGOTIATION
Tony FollerRussiaAsiya Javayant UNQUALIFIED
Johnson SergiGermanyElwin Sharvill NEW
Ivar PaprockiIndiaElwin Sharvill PROPOSAL
Salvatore StockhamUnited KingdomStephen Shaw UNQUALIFIED
Aruna FigeroaJapanStephen Shaw PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Claire TollnerItaly2025-09-25Rousseaux, Michael Esq QUALIFIED10Xuxue Feng
1001Johnson SergiArgentina2025-09-12Feltz Printing Service UNQUALIFIED93Ioni Bowcher
1002Jefferson SchemmerArgentina2025-09-13Chemel, James L Cpa NEGOTIATION61Amy Elsner
1003David DarakjyCanada2025-09-29Feltz Printing Service PROPOSAL57Anna Fali
1004Jefferson SchemmerIndia2025-10-03Chapman, Ross E Esq RENEWAL11Ivan Magalhaes
1005Johnson SergiAustralia2025-09-15Printing Dimensions NEW70Onyama Limba
1006Clifford RimRussia2025-09-22Morlong Associates PROPOSAL81Ioni Bowcher
1007Deepesh ChuiSpain2025-09-09Chanay, Jeffrey A Esq NEW59Onyama Limba
1008Mayumi KolmetzJapan2025-09-07Rangoni Of Florence NEW82Anna Fali
1009Jeanfrancois VenereBrazil2025-09-12Dorl, James J Esq NEGOTIATION10Bernardo Dominic
1010Aruna FigeroaArgentina2025-10-01Printing Dimensions QUALIFIED77Ioni Bowcher
1011Cody SaylorsJapan2025-09-26Chanay, Jeffrey A Esq QUALIFIED96Anna Fali
1012Munro FerenczArgentina2025-10-01Rousseaux, Michael Esq PROPOSAL40Stephen Shaw
1013Tony FollerIndia2025-09-08Benton, John B Jr PROPOSAL75Xuxue Feng
1014Alejandro PerinRussia2025-09-05Benton, John B Jr NEW4Anna Fali
1015Juan WieserRussia2025-09-17Dorl, James J Esq NEGOTIATION95Elwin Sharvill
1016Johnson SergiItaly2025-09-20Chemel, James L Cpa RENEWAL65Elwin Sharvill
1017Julie StensethItaly2025-09-22Commercial Press PROPOSAL44Asiya Javayant
1018Greenwood BologniaCanada2025-09-23Chanay, Jeffrey A Esq RENEWAL66Stephen Shaw
1019Chavez BriddickUnited Kingdom2025-09-26Truhlar And Truhlar Attys UNQUALIFIED47Elwin Sharvill
1020Chavez BriddickGermany2025-09-07Printing Dimensions UNQUALIFIED50Ioni Bowcher
1021Darci PoquetteGermany2025-09-08Feiner Bros UNQUALIFIED6Elwin Sharvill
1022Munro FerenczArgentina2025-09-19Printing Dimensions RENEWAL80Stephen Shaw
1023Adams MorascaArgentina2025-09-06Commercial Press RENEWAL19Bernardo Dominic
1024Deepesh ChuiJapan2025-09-06Chemel, James L Cpa NEGOTIATION23Onyama Limba
1025Deepesh ChuiAustralia2025-09-17Feiner Bros NEW60Stephen Shaw
1026Chavez BriddickBrazil2025-09-29Printing Dimensions NEGOTIATION53Onyama Limba
1027Ashley DoeSpain2025-09-20Feiner Bros NEGOTIATION81Amy Elsner
1028Jeanfrancois VenereIndia2025-10-01Morlong Associates NEGOTIATION21Ioni Bowcher
1029Rodrigues CampainGermany2025-09-26Rousseaux, Michael Esq RENEWAL21Elwin Sharvill
1030Ashley DoeGermany2025-09-15Feltz Printing Service NEW32Xuxue Feng
1031Nicolas IturbideUnited Kingdom2025-09-24Feltz Printing Service QUALIFIED91Anna Fali
1032Johnson SergiCanada2025-09-22King, Christopher A Esq RENEWAL40Bernardo Dominic
1033Francesco ShinkoArgentina2025-09-15Chemel, James L Cpa NEW39Onyama Limba
1034Sinclair WaycottGermany2025-09-08Rangoni Of Florence RENEWAL59Xuxue Feng
1035Isabel BowleyBrazil2025-09-09Commercial Press PROPOSAL3Bernardo Dominic
1036Arvin AlbaresJapan2025-09-27Dorl, James J Esq PROPOSAL64Asiya Javayant
1037Octavia MaletRussia2025-09-17Feiner Bros NEGOTIATION89Bernardo Dominic
1038Leja CaldareraIndia2025-10-01Buckley Miller Wright PROPOSAL88Amy Elsner
1039James ButtGermany2025-09-12Benton, John B Jr PROPOSAL60Ivan Magalhaes
1040Mujtaba NickaJapan2025-09-30Rousseaux, Michael Esq NEGOTIATION98Ioni Bowcher
1041Julie StensethGermany2025-09-11Printing Dimensions PROPOSAL27Anna Fali
1042Ricardo GauchoIndia2025-09-13Chapman, Ross E Esq UNQUALIFIED91Amy Elsner
1043Faith GillianUnited Kingdom2025-09-25Rousseaux, Michael Esq PROPOSAL27Bernardo Dominic
1044Octavia MaletSpain2025-09-08Rangoni Of Florence QUALIFIED98Elwin Sharvill
1045Jefferson SchemmerItaly2025-09-08Feltz Printing Service UNQUALIFIED63Xuxue Feng
1046Kadeem FlosiUnited Kingdom2025-09-20Truhlar And Truhlar Attys RENEWAL27Bernardo Dominic
1047Clifford RimItaly2025-09-09Rousseaux, Michael Esq QUALIFIED23Amy Elsner
1048Ivar PaprockiIndia2025-09-05Truhlar And Truhlar Attys UNQUALIFIED8Ioni Bowcher
1049Cody SaylorsBrazil2025-10-04Truhlar And Truhlar Attys RENEWAL10Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Claire TollnerRussiaAmy Elsner QUALIFIED
Arvin AlbaresIndiaOnyama Limba RENEWAL
James ButtFranceOnyama Limba PROPOSAL
Claire TollnerIndiaAnna Fali QUALIFIED
Nicolas IturbideAustraliaAsiya Javayant NEGOTIATION
Ashley DoeCanadaXuxue Feng NEGOTIATION
Jeanfrancois VenereRussiaXuxue Feng PROPOSAL
Ivar PaprockiJapanAnna Fali NEW
Ivar PaprockiItalyBernardo Dominic NEGOTIATION
Silvio SlusarskiSpainBernardo Dominic QUALIFIED
Aditya KuskoRussiaAmy Elsner NEW
Izzy GarufiUnited KingdomAmy Elsner NEGOTIATION
Tony FollerJapanIoni Bowcher QUALIFIED
Nicolas IturbideArgentinaAnna Fali PROPOSAL
Wickens NestleBrazilOnyama Limba PROPOSAL
Aruna FigeroaItalyAsiya Javayant UNQUALIFIED
Morrow RutaRussiaAmy Elsner NEW
Antonio CaudyArgentinaBernardo Dominic NEW
Maisha RulapaughAustraliaStephen Shaw NEW
Ivar PaprockiCanadaAmy Elsner PROPOSAL
Cody SaylorsFranceStephen Shaw QUALIFIED
Aika InouyeUnited KingdomAmy Elsner QUALIFIED
Greenwood BologniaBrazilIvan Magalhaes RENEWAL
Misaki RoysterItalyElwin Sharvill RENEWAL
Jones VocelkaJapanAnna Fali NEW
Faith GillianUnited KingdomIoni Bowcher UNQUALIFIED
Morrow RutaItalyIvan Magalhaes NEW
Adams MorascaArgentinaAsiya Javayant NEW
Arvin AlbaresUnited KingdomOnyama Limba NEW
Smith GlickIndiaAsiya Javayant NEW
James ButtRussiaElwin Sharvill PROPOSAL
Octavia MaletArgentinaAsiya Javayant RENEWAL
James ButtArgentinaAmy Elsner RENEWAL
Silvio SlusarskiFranceOnyama Limba RENEWAL
Ashley DoeArgentinaAsiya Javayant PROPOSAL
Adams MorascaArgentinaBernardo Dominic NEW
Deepesh ChuiBrazilXuxue Feng RENEWAL
Jefferson SchemmerGermanyElwin Sharvill NEW
Ashley DoeIndiaBernardo Dominic UNQUALIFIED
Sinclair WaycottGermanyIoni Bowcher NEW
Antonio CaudyRussiaStephen Shaw NEGOTIATION
Antonio CaudyArgentinaXuxue Feng RENEWAL
Sinclair WaycottBrazilBernardo Dominic NEW
Stacey MacleadAustraliaBernardo Dominic NEGOTIATION
Jennifer AmigonBrazilAmy Elsner QUALIFIED
Chavez BriddickJapanStephen Shaw PROPOSAL
Izzy GarufiIndiaAnna Fali PROPOSAL
Jones VocelkaJapanAsiya Javayant UNQUALIFIED
Jennifer AmigonRussiaBernardo Dominic UNQUALIFIED
Izzy GarufiCanadaIoni Bowcher UNQUALIFIED
Frozen Columns
Name
Aika Inouye
Maria Marrier
Chavez Briddick
Leon Oldroyd
Faith Gillian
Kadeem Flosi
Claire Tollner
Johnson Sergi
Silvio Slusarski
Francesco Shinko
Rodrigues Campain
Kadeem Flosi
Jeanfrancois Venere
Ricardo Gaucho
Silvio Slusarski
Arvin Albares
Leja Caldarera
Rodrigues Campain
Octavia Malet
Costa Dilliard
Octavia Malet
Misaki Royster
Ricardo Gaucho
Julie Stenseth
Aika Inouye
Mayumi Kolmetz
Juan Wieser
Misaki Royster
Misaki Royster
Jeanfrancois Venere
Adams Morasca
Nicolas Iturbide
Greenwood Bolognia
David Darakjy
Deepesh Chui
Smith Glick
Maisha Rulapaugh
David Darakjy
Nicolas Iturbide
Isabel Bowley
David Darakjy
Wickens Nestle
Faith Gillian
Julie Stenseth
Aruna Figeroa
Nicolas Iturbide
Antonio Caudy
Jones Vocelka
Stacey Maclead
Sinclair Waycott
IdCountryDate
1000Spain2025-09-06
1001Brazil2025-09-08
1002Italy2025-10-04
1003United Kingdom2025-09-10
1004Australia2025-09-25
1005United Kingdom2025-09-27
1006India2025-09-19
1007Brazil2025-09-10
1008Canada2025-09-19
1009United Kingdom2025-09-28
1010Spain2025-09-22
1011Brazil2025-09-27
1012Brazil2025-09-24
1013Canada2025-09-11
1014Russia2025-09-07
1015Argentina2025-09-05
1016Italy2025-09-08
1017India2025-09-13
1018Italy2025-09-18
1019Australia2025-09-23
1020Australia2025-09-10
1021Germany2025-09-16
1022Argentina2025-09-11
1023Russia2025-09-29
1024Spain2025-09-23
1025India2025-09-29
1026Italy2025-09-17
1027Australia2025-09-24
1028France2025-09-20
1029United Kingdom2025-09-10
1030Canada2025-09-23
1031Argentina2025-09-05
1032United Kingdom2025-09-30
1033Japan2025-09-09
1034Argentina2025-09-27
1035Canada2025-09-19
1036Germany2025-09-14
1037Germany2025-09-13
1038Italy2025-09-27
1039United Kingdom2025-09-13
1040Italy2025-09-26
1041Japan2025-10-02
1042France2025-09-24
1043Canada2025-09-05
1044United Kingdom2025-09-27
1045Canada2025-09-08
1046France2025-09-23
1047Russia2025-09-05
1048Russia2025-09-20
1049Japan2025-09-21

On-Demand Data

NameIdCountryDate
Tony Foller1000France2025-09-08
Faith Gillian1001Russia2025-09-14
Johnson Sergi1002United Kingdom2025-10-02
Jefferson Schemmer1003Brazil2025-09-18
Johnson Sergi1004Canada2025-09-21
Misaki Royster1005United Kingdom2025-09-19
Smith Glick1006India2025-09-25
Juan Wieser1007India2025-09-29
Stacey Maclead1008United Kingdom2025-09-16
Leja Caldarera1009Australia2025-09-12
Darci Poquette1010Brazil2025-09-30
Aruna Figeroa1011Germany2025-09-15
Kaitlin Ostrosky1012India2025-10-04
Morrow Ruta1013India2025-09-08
Munro Ferencz1014United Kingdom2025-10-01
Kaitlin Ostrosky1015France2025-09-22
Silvio Slusarski1016India2025-09-05
Jeanfrancois Venere1017Canada2025-09-18
Leja Caldarera1018Germany2025-09-24
Francesco Shinko1019France2025-09-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Arvin AlbaresSpainOnyama Limba RENEWAL
Chavez BriddickFranceAmy Elsner UNQUALIFIED
Leon OldroydGermanyAsiya Javayant PROPOSAL
Jennifer AmigonRussiaAmy Elsner UNQUALIFIED
Tony FollerItalyAsiya Javayant PROPOSAL
Kaitlin OstroskyArgentinaXuxue Feng RENEWAL
Johnson SergiGermanyXuxue Feng NEGOTIATION
Isabel BowleyFranceBernardo Dominic QUALIFIED
Darci PoquetteRussiaIoni Bowcher RENEWAL
Aika InouyeBrazilIoni Bowcher NEW
Maisha RulapaughItalyIvan Magalhaes RENEWAL
Faith GillianIndiaIoni Bowcher PROPOSAL
Tony FollerCanadaIoni Bowcher QUALIFIED
Jefferson SchemmerRussiaAmy Elsner RENEWAL
Mayumi KolmetzRussiaBernardo Dominic RENEWAL
Jennifer AmigonCanadaBernardo Dominic UNQUALIFIED
Rodrigues CampainGermanyOnyama Limba NEW
Chavez BriddickAustraliaAmy Elsner RENEWAL
Mujtaba NickaJapanOnyama Limba QUALIFIED
Arvin AlbaresBrazilBernardo Dominic NEGOTIATION
Mayumi KolmetzJapanAmy Elsner NEW
Faith GillianFranceAsiya Javayant PROPOSAL
Silvio SlusarskiIndiaAmy Elsner PROPOSAL
Izzy GarufiItalyOnyama Limba NEGOTIATION
Murillo MaletGermanyIoni Bowcher QUALIFIED
Aruna FigeroaGermanyAmy Elsner PROPOSAL
Alejandro PerinAustraliaOnyama Limba NEW
Adams MorascaSpainOnyama Limba UNQUALIFIED
James ButtItalyAsiya Javayant NEGOTIATION
Tony FollerIndiaAnna Fali UNQUALIFIED
Wickens NestleItalyXuxue Feng UNQUALIFIED
Nicolas IturbideGermanyElwin Sharvill UNQUALIFIED
Wickens NestleFranceBernardo Dominic RENEWAL
Jeanfrancois VenereFranceElwin Sharvill UNQUALIFIED
Mayumi KolmetzUnited KingdomAsiya Javayant PROPOSAL
Chavez BriddickArgentinaAsiya Javayant NEGOTIATION
Deepesh ChuiUnited KingdomAnna Fali PROPOSAL
Faith GillianItalyElwin Sharvill NEW
Aika InouyeArgentinaAnna Fali NEW
Francesco ShinkoGermanyAnna Fali QUALIFIED

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