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
Morrow RutaUnited KingdomBernardo Dominic QUALIFIED
Darci PoquetteBrazilIoni Bowcher NEGOTIATION
Adams MorascaUnited KingdomOnyama Limba NEGOTIATION
Maisha RulapaughJapanAmy Elsner RENEWAL
Chavez BriddickSpainOnyama Limba NEW
David DarakjyAustraliaStephen Shaw NEGOTIATION
Darci PoquetteCanadaAmy Elsner UNQUALIFIED
Adams MorascaBrazilXuxue Feng PROPOSAL
Julie StensethUnited KingdomAnna Fali NEGOTIATION
Leon OldroydCanadaOnyama Limba PROPOSAL
Adams MorascaRussiaElwin Sharvill PROPOSAL
Mayumi KolmetzBrazilStephen Shaw NEGOTIATION
Greenwood BologniaFranceIoni Bowcher UNQUALIFIED
Adams MorascaIndiaXuxue Feng PROPOSAL
Deepesh ChuiBrazilIoni Bowcher UNQUALIFIED
Misaki RoysterAustraliaBernardo Dominic UNQUALIFIED
Ricardo GauchoFranceIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereFranceIvan Magalhaes NEW
Kaitlin OstroskySpainAmy Elsner NEGOTIATION
Leon OldroydRussiaXuxue Feng UNQUALIFIED
Tony FollerBrazilElwin Sharvill RENEWAL
Mujtaba NickaBrazilIoni Bowcher PROPOSAL
Alejandro PerinCanadaAsiya Javayant QUALIFIED
Sinclair WaycottAustraliaOnyama Limba UNQUALIFIED
Kadeem FlosiArgentinaStephen Shaw NEGOTIATION
Izzy GarufiJapanIoni Bowcher RENEWAL
Antonio CaudyGermanyAsiya Javayant QUALIFIED
Maisha RulapaughJapanXuxue Feng PROPOSAL
Octavia MaletIndiaElwin Sharvill RENEWAL
Jeanfrancois VenereIndiaIvan Magalhaes NEGOTIATION
Maria MarrierJapanAnna Fali PROPOSAL
Murillo MaletBrazilBernardo Dominic UNQUALIFIED
Adams MorascaFranceAmy Elsner UNQUALIFIED
Maria MarrierRussiaElwin Sharvill NEGOTIATION
Octavia MaletIndiaIoni Bowcher NEW
James ButtSpainBernardo Dominic RENEWAL
Jennifer AmigonSpainAsiya Javayant RENEWAL
Maisha RulapaughFranceAnna Fali PROPOSAL
Salvatore StockhamGermanyIvan Magalhaes QUALIFIED
Leon OldroydGermanyAnna Fali QUALIFIED
Chavez BriddickBrazilStephen Shaw NEGOTIATION
Johnson SergiBrazilBernardo Dominic QUALIFIED
Leja CaldareraAustraliaAsiya Javayant QUALIFIED
Maisha RulapaughGermanyAsiya Javayant QUALIFIED
Aika InouyeAustraliaIoni Bowcher QUALIFIED
Faith GillianBrazilAmy Elsner NEW
Izzy GarufiAustraliaXuxue Feng NEGOTIATION
Darci PoquetteUnited KingdomAnna Fali QUALIFIED
Aditya KuskoFranceAmy Elsner NEW
Isabel BowleyCanadaXuxue Feng PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Aika InouyeBrazilAmy Elsner RENEWAL
Leja CaldareraRussiaAsiya Javayant RENEWAL
Wickens NestleJapanAsiya Javayant UNQUALIFIED
Ashley DoeSpainIvan Magalhaes NEGOTIATION
Antonio CaudyIndiaIoni Bowcher PROPOSAL
Chavez BriddickBrazilElwin Sharvill PROPOSAL
Arvin AlbaresBrazilStephen Shaw PROPOSAL
Darci PoquetteUnited KingdomIoni Bowcher PROPOSAL
Rodrigues CampainAustraliaElwin Sharvill UNQUALIFIED
Isabel BowleyAustraliaOnyama Limba PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aruna FigeroaRussia2025-08-14Benton, John B Jr PROPOSAL68Amy Elsner
1001Aruna FigeroaIndia2025-08-24Rousseaux, Michael Esq UNQUALIFIED23Elwin Sharvill
1002Kaitlin OstroskyRussia2025-08-18Chanay, Jeffrey A Esq RENEWAL43Asiya Javayant
1003Cody SaylorsGermany2025-08-06Morlong Associates QUALIFIED24Xuxue Feng
1004Aruna FigeroaFrance2025-08-17King, Christopher A Esq PROPOSAL65Amy Elsner
1005Ashley DoeGermany2025-08-03Chanay, Jeffrey A Esq UNQUALIFIED46Elwin Sharvill
1006Chavez BriddickFrance2025-08-25Rangoni Of Florence NEW6Xuxue Feng
1007Munro FerenczBrazil2025-08-08Truhlar And Truhlar Attys PROPOSAL69Ioni Bowcher
1008Chavez BriddickIndia2025-08-04Chemel, James L Cpa QUALIFIED40Bernardo Dominic
1009Chavez BriddickRussia2025-08-23Buckley Miller Wright NEW35Elwin Sharvill
1010Ricardo GauchoGermany2025-08-13Dorl, James J Esq NEGOTIATION76Bernardo Dominic
1011Chavez BriddickRussia2025-08-08Feltz Printing Service NEGOTIATION32Amy Elsner
1012Deepesh ChuiItaly2025-08-02Rangoni Of Florence PROPOSAL68Ioni Bowcher
1013Chavez BriddickArgentina2025-07-27Feltz Printing Service NEW36Onyama Limba
1014Isabel BowleyJapan2025-08-18King, Christopher A Esq PROPOSAL21Amy Elsner
1015Sinclair WaycottItaly2025-08-12Chemel, James L Cpa RENEWAL36Asiya Javayant
1016Aruna FigeroaSpain2025-08-25Rousseaux, Michael Esq RENEWAL58Onyama Limba
1017Octavia MaletCanada2025-08-21Chanay, Jeffrey A Esq UNQUALIFIED93Bernardo Dominic
1018Maria MarrierBrazil2025-08-17Printing Dimensions UNQUALIFIED71Elwin Sharvill
1019Mayumi KolmetzIndia2025-07-31Dorl, James J Esq RENEWAL87Ivan Magalhaes
1020Sinclair WaycottIndia2025-08-12Benton, John B Jr QUALIFIED23Xuxue Feng
1021Alejandro PerinBrazil2025-08-22Chanay, Jeffrey A Esq RENEWAL46Stephen Shaw
1022Mayumi KolmetzArgentina2025-08-05Feiner Bros PROPOSAL99Xuxue Feng
1023Misaki RoysterBrazil2025-08-13Feltz Printing Service RENEWAL12Ioni Bowcher
1024Emily WhobreyBrazil2025-07-31Rousseaux, Michael Esq NEW28Bernardo Dominic
1025Antonio CaudyRussia2025-07-31Printing Dimensions PROPOSAL14Asiya Javayant
1026Munro FerenczIndia2025-08-17Chemel, James L Cpa PROPOSAL14Amy Elsner
1027Kadeem FlosiGermany2025-08-13Chapman, Ross E Esq RENEWAL40Amy Elsner
1028James ButtIndia2025-08-07King, Christopher A Esq RENEWAL27Stephen Shaw
1029Salvatore StockhamGermany2025-08-14Chemel, James L Cpa NEW83Ivan Magalhaes
1030Antonio CaudyBrazil2025-08-21Chanay, Jeffrey A Esq NEGOTIATION66Elwin Sharvill
1031Isabel BowleyArgentina2025-08-21Buckley Miller Wright UNQUALIFIED4Onyama Limba
1032Mujtaba NickaUnited Kingdom2025-08-06Morlong Associates NEW98Ivan Magalhaes
1033Silvio SlusarskiCanada2025-08-02Chanay, Jeffrey A Esq UNQUALIFIED83Asiya Javayant
1034Isabel BowleyFrance2025-08-04Rousseaux, Michael Esq NEW14Onyama Limba
1035Clifford RimArgentina2025-08-20Chemel, James L Cpa RENEWAL44Anna Fali
1036Juan WieserGermany2025-07-27Truhlar And Truhlar Attys NEW68Asiya Javayant
1037Leja CaldareraUnited Kingdom2025-08-05Feiner Bros NEW59Xuxue Feng
1038Leja CaldareraItaly2025-08-09Chanay, Jeffrey A Esq PROPOSAL34Elwin Sharvill
1039Maisha RulapaughUnited Kingdom2025-08-24Benton, John B Jr QUALIFIED31Elwin Sharvill
1040Kadeem FlosiUnited Kingdom2025-08-20Benton, John B Jr QUALIFIED13Ioni Bowcher
1041Stacey MacleadJapan2025-08-22King, Christopher A Esq PROPOSAL77Ioni Bowcher
1042Maria MarrierSpain2025-07-27Commercial Press NEGOTIATION84Ioni Bowcher
1043Tony FollerGermany2025-08-25Chanay, Jeffrey A Esq NEGOTIATION37Ivan Magalhaes
1044Faith GillianFrance2025-08-11Feltz Printing Service RENEWAL6Stephen Shaw
1045Isabel BowleyJapan2025-08-22Chapman, Ross E Esq QUALIFIED9Stephen Shaw
1046Darci PoquetteArgentina2025-08-13Feltz Printing Service RENEWAL42Bernardo Dominic
1047Francesco ShinkoSpain2025-07-29Rangoni Of Florence PROPOSAL68Ivan Magalhaes
1048Mujtaba NickaAustralia2025-08-04Chanay, Jeffrey A Esq QUALIFIED88Asiya Javayant
1049Julie StensethSpain2025-08-05Buckley Miller Wright NEW81Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Jones VocelkaCanadaBernardo Dominic RENEWAL
Silvio SlusarskiItalyAmy Elsner QUALIFIED
Isabel BowleyIndiaBernardo Dominic QUALIFIED
Kadeem FlosiIndiaAmy Elsner QUALIFIED
Izzy GarufiArgentinaBernardo Dominic RENEWAL
Jennifer AmigonCanadaXuxue Feng QUALIFIED
Greenwood BologniaArgentinaXuxue Feng UNQUALIFIED
Costa DilliardUnited KingdomXuxue Feng NEW
Juan WieserAustraliaIvan Magalhaes UNQUALIFIED
Nicolas IturbideItalyStephen Shaw NEGOTIATION
Aditya KuskoBrazilBernardo Dominic RENEWAL
Morrow RutaCanadaOnyama Limba NEW
Ashley DoeGermanyAmy Elsner NEGOTIATION
Julie StensethGermanyAsiya Javayant UNQUALIFIED
Munro FerenczArgentinaBernardo Dominic NEW
Claire TollnerGermanyOnyama Limba UNQUALIFIED
David DarakjyFranceIvan Magalhaes QUALIFIED
Ricardo GauchoUnited KingdomStephen Shaw NEGOTIATION
Salvatore StockhamBrazilAnna Fali RENEWAL
Jennifer AmigonItalyAnna Fali PROPOSAL
Isabel BowleyCanadaBernardo Dominic NEGOTIATION
Leja CaldareraItalyStephen Shaw RENEWAL
Greenwood BologniaFranceAnna Fali PROPOSAL
Rodrigues CampainJapanAsiya Javayant NEW
David DarakjyFranceAmy Elsner NEW
Faith GillianIndiaXuxue Feng UNQUALIFIED
Ivar PaprockiCanadaOnyama Limba NEW
Leja CaldareraFranceBernardo Dominic PROPOSAL
Wickens NestleAustraliaAnna Fali RENEWAL
Aditya KuskoCanadaElwin Sharvill RENEWAL
Darci PoquetteIndiaElwin Sharvill QUALIFIED
Claire TollnerItalyOnyama Limba QUALIFIED
Cody SaylorsArgentinaAmy Elsner NEW
Jeanfrancois VenereAustraliaAmy Elsner NEGOTIATION
Tony FollerArgentinaXuxue Feng NEW
Salvatore StockhamFranceIoni Bowcher RENEWAL
Costa DilliardRussiaOnyama Limba RENEWAL
Darci PoquetteJapanBernardo Dominic NEGOTIATION
Juan WieserArgentinaOnyama Limba RENEWAL
Smith GlickAustraliaBernardo Dominic NEW
Silvio SlusarskiJapanOnyama Limba RENEWAL
Kaitlin OstroskyFranceAsiya Javayant QUALIFIED
Clifford RimFranceAsiya Javayant RENEWAL
David DarakjySpainAmy Elsner UNQUALIFIED
Cody SaylorsUnited KingdomBernardo Dominic QUALIFIED
Maisha RulapaughBrazilOnyama Limba NEGOTIATION
David DarakjyIndiaAnna Fali RENEWAL
Jeanfrancois VenereFranceIoni Bowcher PROPOSAL
Antonio CaudyItalyStephen Shaw UNQUALIFIED
Jones VocelkaUnited KingdomOnyama Limba NEW
Frozen Columns
Name
Ivar Paprocki
Darci Poquette
Ashley Doe
Tony Foller
Stacey Maclead
Emily Whobrey
Deepesh Chui
Misaki Royster
Morrow Ruta
Leon Oldroyd
Juan Wieser
Juan Wieser
Arvin Albares
Chavez Briddick
Antonio Caudy
Salvatore Stockham
Octavia Malet
Kaitlin Ostrosky
Aruna Figeroa
James Butt
James Butt
Julie Stenseth
Mujtaba Nicka
Sinclair Waycott
Murillo Malet
Kaitlin Ostrosky
Morrow Ruta
Kadeem Flosi
Darci Poquette
Julie Stenseth
Leon Oldroyd
Isabel Bowley
Johnson Sergi
Rodrigues Campain
Alejandro Perin
Jefferson Schemmer
Tony Foller
James Butt
Emily Whobrey
Misaki Royster
Kaitlin Ostrosky
Nicolas Iturbide
Jennifer Amigon
Maisha Rulapaugh
Jones Vocelka
Chavez Briddick
Arvin Albares
Sinclair Waycott
Costa Dilliard
Juan Wieser
IdCountryDate
1000Spain2025-07-31
1001Argentina2025-08-25
1002France2025-07-27
1003Argentina2025-08-22
1004Russia2025-08-06
1005Brazil2025-07-27
1006Australia2025-08-20
1007France2025-08-17
1008United Kingdom2025-08-21
1009Spain2025-08-19
1010Japan2025-08-13
1011Argentina2025-08-22
1012India2025-08-17
1013United Kingdom2025-08-22
1014Germany2025-08-04
1015Brazil2025-08-24
1016France2025-08-12
1017Germany2025-07-27
1018Brazil2025-07-31
1019Brazil2025-08-03
1020Germany2025-08-22
1021Canada2025-08-14
1022Australia2025-08-25
1023Spain2025-08-21
1024Japan2025-08-07
1025United Kingdom2025-08-07
1026Japan2025-08-05
1027France2025-08-24
1028Germany2025-07-30
1029India2025-08-09
1030Brazil2025-08-15
1031Australia2025-08-13
1032Australia2025-08-11
1033United Kingdom2025-07-29
1034India2025-08-09
1035India2025-08-08
1036India2025-07-31
1037Argentina2025-08-16
1038Japan2025-08-09
1039Canada2025-08-05
1040Argentina2025-08-09
1041Australia2025-08-15
1042France2025-07-31
1043Australia2025-08-25
1044Italy2025-08-10
1045India2025-08-12
1046Spain2025-08-25
1047United Kingdom2025-08-14
1048Argentina2025-08-22
1049Spain2025-08-02

On-Demand Data

NameIdCountryDate
Smith Glick1000Brazil2025-08-23
Rodrigues Campain1001France2025-08-03
Jennifer Amigon1002France2025-08-16
Johnson Sergi1003Italy2025-08-24
Aruna Figeroa1004Spain2025-08-15
Aruna Figeroa1005Canada2025-08-23
Isabel Bowley1006Spain2025-08-14
Aruna Figeroa1007Italy2025-08-24
Kaitlin Ostrosky1008Canada2025-08-11
Faith Gillian1009United Kingdom2025-08-04
Faith Gillian1010Italy2025-08-15
Leon Oldroyd1011Italy2025-08-23
Ashley Doe1012India2025-08-16
Jennifer Amigon1013Germany2025-08-20
Deepesh Chui1014Argentina2025-07-31
Francesco Shinko1015Brazil2025-07-31
Ivar Paprocki1016Australia2025-08-24
Ricardo Gaucho1017Brazil2025-08-11
Tony Foller1018Russia2025-08-21
Juan Wieser1019Brazil2025-08-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Sinclair WaycottCanadaAsiya Javayant UNQUALIFIED
Jennifer AmigonIndiaAnna Fali RENEWAL
Mujtaba NickaGermanyIvan Magalhaes RENEWAL
Aditya KuskoArgentinaIoni Bowcher QUALIFIED
Tony FollerItalyAnna Fali NEW
Chavez BriddickJapanIvan Magalhaes QUALIFIED
Nicolas IturbideFranceAsiya Javayant QUALIFIED
Kadeem FlosiItalyStephen Shaw RENEWAL
Leon OldroydJapanElwin Sharvill PROPOSAL
Kaitlin OstroskyItalyAnna Fali UNQUALIFIED
Aditya KuskoRussiaAsiya Javayant UNQUALIFIED
Adams MorascaFranceIoni Bowcher NEW
Alejandro PerinFranceAnna Fali NEGOTIATION
Mayumi KolmetzJapanIoni Bowcher NEW
Ashley DoeBrazilStephen Shaw RENEWAL
Tony FollerAustraliaStephen Shaw QUALIFIED
Leon OldroydFranceBernardo Dominic NEW
Aditya KuskoGermanyStephen Shaw RENEWAL
Johnson SergiArgentinaIvan Magalhaes NEW
Munro FerenczArgentinaIvan Magalhaes PROPOSAL
Morrow RutaBrazilBernardo Dominic NEGOTIATION
Arvin AlbaresFranceAsiya Javayant PROPOSAL
Julie StensethFranceBernardo Dominic PROPOSAL
Chavez BriddickCanadaAnna Fali RENEWAL
Julie StensethFranceAmy Elsner NEGOTIATION
Faith GillianUnited KingdomIoni Bowcher NEGOTIATION
Claire TollnerJapanAmy Elsner PROPOSAL
Jones VocelkaItalyAmy Elsner NEGOTIATION
Jones VocelkaJapanStephen Shaw PROPOSAL
Munro FerenczAustraliaIoni Bowcher NEW
Aditya KuskoSpainBernardo Dominic NEGOTIATION
Ricardo GauchoCanadaElwin Sharvill PROPOSAL
David DarakjySpainXuxue Feng RENEWAL
Aditya KuskoIndiaAmy Elsner QUALIFIED
Smith GlickRussiaElwin Sharvill QUALIFIED
Clifford RimUnited KingdomXuxue Feng NEGOTIATION
Julie StensethFranceAsiya Javayant RENEWAL
Darci PoquetteCanadaElwin Sharvill PROPOSAL
Murillo MaletBrazilIoni Bowcher PROPOSAL
Deepesh ChuiArgentinaAnna Fali 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>