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
Octavia MaletBrazilIoni Bowcher PROPOSAL
Julie StensethArgentinaAmy Elsner QUALIFIED
Rodrigues CampainItalyIvan Magalhaes PROPOSAL
Claire TollnerArgentinaIoni Bowcher QUALIFIED
James ButtFranceBernardo Dominic UNQUALIFIED
Munro FerenczSpainElwin Sharvill NEGOTIATION
Emily WhobreyItalyAsiya Javayant QUALIFIED
Stacey MacleadCanadaAmy Elsner RENEWAL
Alejandro PerinGermanyAsiya Javayant UNQUALIFIED
Chavez BriddickBrazilOnyama Limba NEGOTIATION
Johnson SergiFranceOnyama Limba UNQUALIFIED
Rodrigues CampainBrazilXuxue Feng PROPOSAL
Rodrigues CampainFranceIoni Bowcher QUALIFIED
Maria MarrierUnited KingdomIvan Magalhaes PROPOSAL
Chavez BriddickCanadaBernardo Dominic RENEWAL
Arvin AlbaresArgentinaIvan Magalhaes NEGOTIATION
Morrow RutaGermanyStephen Shaw QUALIFIED
Cody SaylorsBrazilIvan Magalhaes QUALIFIED
Murillo MaletFranceAsiya Javayant QUALIFIED
Salvatore StockhamUnited KingdomAsiya Javayant NEW
Emily WhobreyJapanIvan Magalhaes UNQUALIFIED
Jefferson SchemmerGermanyElwin Sharvill PROPOSAL
Costa DilliardRussiaAnna Fali QUALIFIED
Stacey MacleadJapanXuxue Feng NEGOTIATION
Isabel BowleyJapanAmy Elsner NEGOTIATION
Munro FerenczItalyAmy Elsner NEW
Kadeem FlosiJapanElwin Sharvill QUALIFIED
Silvio SlusarskiUnited KingdomAsiya Javayant PROPOSAL
David DarakjyItalyStephen Shaw PROPOSAL
Sinclair WaycottFranceStephen Shaw QUALIFIED
Greenwood BologniaFranceStephen Shaw RENEWAL
Emily WhobreyAustraliaIvan Magalhaes PROPOSAL
Greenwood BologniaRussiaXuxue Feng RENEWAL
Chavez BriddickBrazilIoni Bowcher PROPOSAL
Aika InouyeArgentinaAnna Fali NEW
Mayumi KolmetzUnited KingdomIoni Bowcher NEGOTIATION
Johnson SergiItalyStephen Shaw QUALIFIED
Julie StensethSpainIoni Bowcher RENEWAL
Rodrigues CampainArgentinaAnna Fali NEW
Misaki RoysterFranceIoni Bowcher RENEWAL
Jones VocelkaItalyStephen Shaw NEW
Francesco ShinkoGermanyStephen Shaw RENEWAL
Ricardo GauchoItalyElwin Sharvill UNQUALIFIED
Antonio CaudyItalyElwin Sharvill NEW
Greenwood BologniaFranceOnyama Limba NEW
Ricardo GauchoCanadaOnyama Limba NEGOTIATION
Sinclair WaycottJapanOnyama Limba RENEWAL
Maisha RulapaughGermanyStephen Shaw PROPOSAL
James ButtBrazilAmy Elsner RENEWAL
Ashley DoeAustraliaOnyama Limba QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Silvio SlusarskiCanadaAmy Elsner NEGOTIATION
Alejandro PerinFranceIoni Bowcher NEGOTIATION
Julie StensethFranceBernardo Dominic UNQUALIFIED
Cody SaylorsItalyStephen Shaw NEW
James ButtFranceStephen Shaw UNQUALIFIED
Ivar PaprockiRussiaAnna Fali NEGOTIATION
Rodrigues CampainItalyElwin Sharvill PROPOSAL
Nicolas IturbideArgentinaAmy Elsner NEGOTIATION
Johnson SergiArgentinaAmy Elsner NEW
Rodrigues CampainFranceIoni Bowcher NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jones VocelkaJapan2026-05-11Feiner Bros PROPOSAL5Stephen Shaw
1001Munro FerenczArgentina2026-05-06Truhlar And Truhlar Attys PROPOSAL50Ioni Bowcher
1002Ricardo GauchoItaly2026-05-18Feltz Printing Service NEGOTIATION78Stephen Shaw
1003Munro FerenczIndia2026-05-16Chemel, James L Cpa NEW29Xuxue Feng
1004Munro FerenczSpain2026-05-16Truhlar And Truhlar Attys PROPOSAL82Bernardo Dominic
1005Mayumi KolmetzGermany2026-05-05Chemel, James L Cpa UNQUALIFIED84Elwin Sharvill
1006Kadeem FlosiArgentina2026-05-27Rangoni Of Florence PROPOSAL7Elwin Sharvill
1007Julie StensethItaly2026-05-13Printing Dimensions RENEWAL11Stephen Shaw
1008Faith GillianUnited Kingdom2026-05-30Chapman, Ross E Esq QUALIFIED65Asiya Javayant
1009Greenwood BologniaCanada2026-05-20Chapman, Ross E Esq NEW62Ivan Magalhaes
1010Adams MorascaItaly2026-05-09Rangoni Of Florence PROPOSAL1Stephen Shaw
1011Leon OldroydFrance2026-05-04Chanay, Jeffrey A Esq RENEWAL13Elwin Sharvill
1012Mayumi KolmetzSpain2026-05-12Morlong Associates NEW56Anna Fali
1013Mujtaba NickaUnited Kingdom2026-05-26Feltz Printing Service NEGOTIATION75Asiya Javayant
1014Leon OldroydCanada2026-05-09Dorl, James J Esq PROPOSAL64Anna Fali
1015Aditya KuskoJapan2026-05-24Chanay, Jeffrey A Esq PROPOSAL54Bernardo Dominic
1016Antonio CaudyFrance2026-06-01Truhlar And Truhlar Attys NEW36Ivan Magalhaes
1017Jefferson SchemmerUnited Kingdom2026-05-15Feltz Printing Service QUALIFIED35Xuxue Feng
1018Murillo MaletItaly2026-05-23Rousseaux, Michael Esq UNQUALIFIED35Onyama Limba
1019Costa DilliardRussia2026-05-13Chemel, James L Cpa UNQUALIFIED63Stephen Shaw
1020Adams MorascaItaly2026-05-27Commercial Press NEGOTIATION30Bernardo Dominic
1021David DarakjyItaly2026-05-29Feltz Printing Service PROPOSAL26Elwin Sharvill
1022Faith GillianFrance2026-05-21Morlong Associates RENEWAL14Bernardo Dominic
1023Mujtaba NickaItaly2026-05-09Rangoni Of Florence RENEWAL12Elwin Sharvill
1024Silvio SlusarskiBrazil2026-05-12Truhlar And Truhlar Attys QUALIFIED50Anna Fali
1025Ricardo GauchoAustralia2026-05-29Buckley Miller Wright PROPOSAL94Anna Fali
1026Chavez BriddickUnited Kingdom2026-06-02Benton, John B Jr UNQUALIFIED98Stephen Shaw
1027Jeanfrancois VenereSpain2026-05-23Buckley Miller Wright NEGOTIATION39Ivan Magalhaes
1028Isabel BowleyArgentina2026-05-05Feiner Bros PROPOSAL92Ioni Bowcher
1029Francesco ShinkoArgentina2026-05-16Chemel, James L Cpa UNQUALIFIED36Stephen Shaw
1030Claire TollnerAustralia2026-05-12Feiner Bros NEGOTIATION5Onyama Limba
1031Ricardo GauchoIndia2026-05-29Buckley Miller Wright NEW70Xuxue Feng
1032Faith GillianRussia2026-05-27Buckley Miller Wright NEW62Stephen Shaw
1033Maisha RulapaughGermany2026-05-18Rousseaux, Michael Esq UNQUALIFIED82Ivan Magalhaes
1034Jones VocelkaFrance2026-05-22Rangoni Of Florence QUALIFIED89Amy Elsner
1035Silvio SlusarskiRussia2026-05-29Commercial Press UNQUALIFIED6Stephen Shaw
1036Murillo MaletSpain2026-05-27Chemel, James L Cpa RENEWAL99Anna Fali
1037James ButtCanada2026-05-31Commercial Press RENEWAL95Ivan Magalhaes
1038Clifford RimSpain2026-05-17Feiner Bros RENEWAL8Bernardo Dominic
1039Izzy GarufiGermany2026-05-20Commercial Press PROPOSAL86Amy Elsner
1040Juan WieserRussia2026-05-13Buckley Miller Wright RENEWAL46Onyama Limba
1041Rodrigues CampainUnited Kingdom2026-05-31Rousseaux, Michael Esq QUALIFIED34Onyama Limba
1042Clifford RimCanada2026-05-07Dorl, James J Esq PROPOSAL10Elwin Sharvill
1043Johnson SergiGermany2026-05-11King, Christopher A Esq RENEWAL93Elwin Sharvill
1044Cody SaylorsItaly2026-06-02King, Christopher A Esq UNQUALIFIED76Ivan Magalhaes
1045Misaki RoysterBrazil2026-05-29Feiner Bros NEGOTIATION87Xuxue Feng
1046Aruna FigeroaRussia2026-05-30Rangoni Of Florence UNQUALIFIED20Asiya Javayant
1047Aruna FigeroaArgentina2026-05-13King, Christopher A Esq QUALIFIED60Amy Elsner
1048Costa DilliardUnited Kingdom2026-05-04Feiner Bros PROPOSAL22Ivan Magalhaes
1049Kadeem FlosiGermany2026-05-27Rangoni Of Florence RENEWAL57Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Salvatore StockhamAustraliaIvan Magalhaes PROPOSAL
Leon OldroydCanadaXuxue Feng NEW
Deepesh ChuiIndiaAnna Fali QUALIFIED
Francesco ShinkoGermanyAsiya Javayant PROPOSAL
Deepesh ChuiIndiaXuxue Feng NEGOTIATION
Mayumi KolmetzSpainOnyama Limba NEGOTIATION
Ivar PaprockiUnited KingdomBernardo Dominic NEGOTIATION
Leon OldroydIndiaOnyama Limba NEW
Leon OldroydBrazilBernardo Dominic NEGOTIATION
Greenwood BologniaCanadaElwin Sharvill NEGOTIATION
Faith GillianBrazilIoni Bowcher NEGOTIATION
Misaki RoysterIndiaElwin Sharvill UNQUALIFIED
Leja CaldareraFranceStephen Shaw PROPOSAL
Morrow RutaCanadaAnna Fali QUALIFIED
Ivar PaprockiJapanAmy Elsner NEW
Maria MarrierArgentinaXuxue Feng NEGOTIATION
Ashley DoeJapanIoni Bowcher QUALIFIED
Morrow RutaAustraliaXuxue Feng QUALIFIED
Jefferson SchemmerUnited KingdomElwin Sharvill QUALIFIED
Stacey MacleadFranceIoni Bowcher NEGOTIATION
Jefferson SchemmerFranceElwin Sharvill RENEWAL
Munro FerenczCanadaStephen Shaw RENEWAL
Morrow RutaIndiaAsiya Javayant PROPOSAL
Wickens NestleGermanyBernardo Dominic QUALIFIED
Clifford RimIndiaBernardo Dominic RENEWAL
Sinclair WaycottItalyOnyama Limba NEW
Alejandro PerinBrazilXuxue Feng PROPOSAL
Claire TollnerUnited KingdomBernardo Dominic RENEWAL
Emily WhobreyItalyIoni Bowcher UNQUALIFIED
David DarakjyUnited KingdomAsiya Javayant UNQUALIFIED
Octavia MaletItalyAnna Fali RENEWAL
Wickens NestleJapanIoni Bowcher PROPOSAL
Mayumi KolmetzGermanyIvan Magalhaes RENEWAL
Juan WieserCanadaXuxue Feng UNQUALIFIED
Jones VocelkaSpainAnna Fali NEW
Kadeem FlosiAustraliaStephen Shaw RENEWAL
Aditya KuskoIndiaElwin Sharvill NEGOTIATION
Wickens NestleAustraliaStephen Shaw RENEWAL
Julie StensethBrazilAnna Fali NEGOTIATION
Chavez BriddickRussiaElwin Sharvill UNQUALIFIED
Darci PoquetteAustraliaAsiya Javayant UNQUALIFIED
Salvatore StockhamAustraliaAsiya Javayant PROPOSAL
Wickens NestleJapanXuxue Feng RENEWAL
Maisha RulapaughArgentinaBernardo Dominic PROPOSAL
Misaki RoysterIndiaElwin Sharvill NEW
Mayumi KolmetzCanadaBernardo Dominic UNQUALIFIED
Adams MorascaSpainBernardo Dominic RENEWAL
Jones VocelkaFranceXuxue Feng RENEWAL
Mujtaba NickaIndiaStephen Shaw QUALIFIED
Maisha RulapaughJapanIoni Bowcher PROPOSAL
Frozen Columns
Name
Aika Inouye
Leja Caldarera
Adams Morasca
Munro Ferencz
Antonio Caudy
Mayumi Kolmetz
Deepesh Chui
Adams Morasca
Leon Oldroyd
Tony Foller
Darci Poquette
Salvatore Stockham
Clifford Rim
Wickens Nestle
Jennifer Amigon
Kaitlin Ostrosky
Jeanfrancois Venere
Leon Oldroyd
Octavia Malet
Silvio Slusarski
Octavia Malet
David Darakjy
Octavia Malet
Aditya Kusko
Emily Whobrey
Adams Morasca
Aika Inouye
Aika Inouye
Rodrigues Campain
Johnson Sergi
Munro Ferencz
Maria Marrier
Faith Gillian
Kaitlin Ostrosky
Stacey Maclead
Stacey Maclead
Rodrigues Campain
Clifford Rim
Isabel Bowley
Julie Stenseth
Alejandro Perin
Wickens Nestle
Aditya Kusko
Leja Caldarera
Cody Saylors
Antonio Caudy
David Darakjy
Adams Morasca
Maisha Rulapaugh
Ashley Doe
IdCountryDate
1000Australia2026-05-18
1001Germany2026-06-02
1002Spain2026-05-09
1003Australia2026-05-26
1004Russia2026-05-19
1005Russia2026-06-02
1006United Kingdom2026-05-06
1007Australia2026-05-31
1008Japan2026-05-14
1009Brazil2026-05-25
1010Spain2026-05-21
1011Russia2026-05-06
1012Brazil2026-05-09
1013Japan2026-06-01
1014France2026-05-20
1015Russia2026-05-07
1016Russia2026-05-15
1017Argentina2026-05-26
1018Australia2026-05-17
1019Russia2026-05-16
1020United Kingdom2026-05-31
1021Russia2026-05-19
1022India2026-05-11
1023France2026-05-23
1024Brazil2026-05-11
1025Italy2026-05-17
1026Japan2026-05-05
1027United Kingdom2026-06-01
1028Italy2026-05-30
1029Australia2026-05-27
1030Australia2026-05-07
1031Canada2026-05-31
1032United Kingdom2026-05-19
1033Japan2026-05-07
1034Japan2026-05-19
1035India2026-05-21
1036United Kingdom2026-05-20
1037India2026-05-26
1038Spain2026-05-23
1039Germany2026-05-26
1040Spain2026-05-11
1041Brazil2026-05-25
1042Argentina2026-05-23
1043United Kingdom2026-05-19
1044Russia2026-05-21
1045Italy2026-05-31
1046Brazil2026-05-18
1047Italy2026-05-31
1048Brazil2026-05-07
1049Canada2026-05-29

On-Demand Data

NameIdCountryDate
Izzy Garufi1000Canada2026-05-18
Kadeem Flosi1001Russia2026-06-01
Costa Dilliard1002Canada2026-05-27
Emily Whobrey1003France2026-05-14
Leon Oldroyd1004India2026-05-20
Smith Glick1005Brazil2026-05-13
Morrow Ruta1006Russia2026-05-22
Morrow Ruta1007Japan2026-05-26
Stacey Maclead1008Canada2026-05-12
Isabel Bowley1009Spain2026-05-16
Salvatore Stockham1010France2026-05-30
David Darakjy1011India2026-05-29
Deepesh Chui1012Brazil2026-05-09
Alejandro Perin1013Germany2026-05-23
Stacey Maclead1014Japan2026-05-15
Faith Gillian1015Australia2026-05-07
Chavez Briddick1016Argentina2026-05-07
Mayumi Kolmetz1017France2026-05-15
Silvio Slusarski1018India2026-05-08
Kaitlin Ostrosky1019France2026-05-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Smith GlickAustraliaIoni Bowcher NEW
Silvio SlusarskiItalyBernardo Dominic NEGOTIATION
Adams MorascaAustraliaIoni Bowcher PROPOSAL
Octavia MaletArgentinaStephen Shaw UNQUALIFIED
Izzy GarufiBrazilAsiya Javayant NEW
Misaki RoysterItalyIoni Bowcher PROPOSAL
Maisha RulapaughIndiaXuxue Feng NEW
Jeanfrancois VenereJapanBernardo Dominic RENEWAL
Murillo MaletItalyIvan Magalhaes NEW
Johnson SergiAustraliaBernardo Dominic UNQUALIFIED
Kaitlin OstroskyJapanOnyama Limba RENEWAL
Jennifer AmigonGermanyStephen Shaw UNQUALIFIED
David DarakjyAustraliaAmy Elsner NEW
Julie StensethFranceIoni Bowcher NEGOTIATION
Kadeem FlosiBrazilXuxue Feng NEW
Antonio CaudyUnited KingdomBernardo Dominic PROPOSAL
Antonio CaudyBrazilAsiya Javayant RENEWAL
Chavez BriddickFranceElwin Sharvill PROPOSAL
Rodrigues CampainRussiaXuxue Feng NEGOTIATION
Jefferson SchemmerJapanXuxue Feng RENEWAL
Francesco ShinkoUnited KingdomAsiya Javayant RENEWAL
Jones VocelkaItalyAnna Fali QUALIFIED
Arvin AlbaresArgentinaAmy Elsner NEGOTIATION
Munro FerenczCanadaElwin Sharvill RENEWAL
Juan WieserSpainBernardo Dominic PROPOSAL
Mayumi KolmetzGermanyIoni Bowcher NEW
Aika InouyeSpainAnna Fali NEGOTIATION
Jefferson SchemmerAustraliaOnyama Limba NEW
Costa DilliardItalyIoni Bowcher PROPOSAL
Munro FerenczUnited KingdomAsiya Javayant NEW
Stacey MacleadJapanXuxue Feng RENEWAL
Salvatore StockhamGermanyXuxue Feng QUALIFIED
Adams MorascaIndiaElwin Sharvill QUALIFIED
Octavia MaletRussiaAnna Fali NEW
Munro FerenczJapanStephen Shaw RENEWAL
Johnson SergiJapanAmy Elsner NEGOTIATION
Silvio SlusarskiItalyAmy Elsner PROPOSAL
Mayumi KolmetzSpainOnyama Limba PROPOSAL
Greenwood BologniaFranceStephen Shaw NEW
Rodrigues CampainAustraliaOnyama Limba 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>