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
Arvin AlbaresFranceAmy Elsner NEW
Silvio SlusarskiIndiaAmy Elsner NEW
Julie StensethBrazilElwin Sharvill PROPOSAL
Juan WieserGermanyElwin Sharvill QUALIFIED
Faith GillianCanadaAsiya Javayant NEW
Octavia MaletJapanOnyama Limba NEGOTIATION
Stacey MacleadArgentinaOnyama Limba RENEWAL
Jones VocelkaCanadaAsiya Javayant NEW
Jefferson SchemmerUnited KingdomAmy Elsner UNQUALIFIED
Darci PoquetteItalyAsiya Javayant UNQUALIFIED
Jennifer AmigonBrazilStephen Shaw QUALIFIED
Octavia MaletJapanAmy Elsner PROPOSAL
Jeanfrancois VenereGermanyStephen Shaw QUALIFIED
Emily WhobreyRussiaAnna Fali RENEWAL
Leja CaldareraCanadaBernardo Dominic PROPOSAL
Alejandro PerinArgentinaIvan Magalhaes RENEWAL
Mujtaba NickaCanadaStephen Shaw UNQUALIFIED
Jennifer AmigonRussiaAnna Fali NEGOTIATION
Julie StensethGermanyIvan Magalhaes UNQUALIFIED
Aditya KuskoIndiaAsiya Javayant QUALIFIED
David DarakjyArgentinaElwin Sharvill RENEWAL
Chavez BriddickSpainIoni Bowcher NEW
Leon OldroydJapanIvan Magalhaes PROPOSAL
Silvio SlusarskiArgentinaAmy Elsner PROPOSAL
Ivar PaprockiAustraliaAsiya Javayant RENEWAL
Alejandro PerinIndiaIoni Bowcher PROPOSAL
Octavia MaletItalyIoni Bowcher NEGOTIATION
Wickens NestleCanadaStephen Shaw PROPOSAL
Maisha RulapaughGermanyBernardo Dominic NEGOTIATION
James ButtJapanElwin Sharvill RENEWAL
Munro FerenczFranceElwin Sharvill RENEWAL
Aruna FigeroaIndiaOnyama Limba NEGOTIATION
Isabel BowleyBrazilIoni Bowcher NEGOTIATION
Maria MarrierAustraliaOnyama Limba RENEWAL
Faith GillianUnited KingdomOnyama Limba UNQUALIFIED
Jeanfrancois VenereBrazilXuxue Feng RENEWAL
Johnson SergiGermanyAnna Fali RENEWAL
Antonio CaudyBrazilElwin Sharvill PROPOSAL
Stacey MacleadGermanyAmy Elsner NEGOTIATION
Claire TollnerAustraliaIvan Magalhaes QUALIFIED
Munro FerenczUnited KingdomXuxue Feng RENEWAL
Jeanfrancois VenereUnited KingdomIvan Magalhaes RENEWAL
Izzy GarufiItalyAnna Fali NEW
Sinclair WaycottBrazilAsiya Javayant PROPOSAL
Munro FerenczUnited KingdomIoni Bowcher NEGOTIATION
Mujtaba NickaItalyXuxue Feng NEW
Maria MarrierCanadaAmy Elsner PROPOSAL
Deepesh ChuiJapanIoni Bowcher QUALIFIED
Ashley DoeFranceStephen Shaw PROPOSAL
Isabel BowleyUnited KingdomIoni Bowcher NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Clifford RimUnited KingdomElwin Sharvill RENEWAL
Leon OldroydCanadaStephen Shaw UNQUALIFIED
Kaitlin OstroskyRussiaAsiya Javayant QUALIFIED
Jones VocelkaAustraliaOnyama Limba NEW
Faith GillianArgentinaAmy Elsner UNQUALIFIED
Jeanfrancois VenereGermanyIvan Magalhaes QUALIFIED
Johnson SergiSpainAnna Fali RENEWAL
Francesco ShinkoArgentinaAnna Fali RENEWAL
Leon OldroydIndiaAmy Elsner NEW
Kaitlin OstroskyFranceAsiya Javayant PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kaitlin OstroskyArgentina2026-05-28Morlong Associates NEGOTIATION34Xuxue Feng
1001Claire TollnerRussia2026-05-28Morlong Associates NEGOTIATION99Onyama Limba
1002Izzy GarufiAustralia2026-05-28Chemel, James L Cpa RENEWAL6Onyama Limba
1003Maria MarrierAustralia2026-06-15Feiner Bros QUALIFIED45Asiya Javayant
1004Emily WhobreyArgentina2026-05-31Feiner Bros UNQUALIFIED56Xuxue Feng
1005Munro FerenczSpain2026-06-19Morlong Associates NEGOTIATION38Amy Elsner
1006Alejandro PerinArgentina2026-06-17Truhlar And Truhlar Attys NEGOTIATION44Onyama Limba
1007Maisha RulapaughAustralia2026-06-11Chapman, Ross E Esq RENEWAL0Anna Fali
1008Jefferson SchemmerCanada2026-06-17Chapman, Ross E Esq PROPOSAL48Xuxue Feng
1009Kaitlin OstroskyItaly2026-06-02King, Christopher A Esq NEGOTIATION9Ivan Magalhaes
1010Salvatore StockhamCanada2026-05-25Feiner Bros UNQUALIFIED28Anna Fali
1011Isabel BowleyUnited Kingdom2026-06-13Feiner Bros NEW50Asiya Javayant
1012Jones VocelkaUnited Kingdom2026-06-11King, Christopher A Esq PROPOSAL83Anna Fali
1013Jones VocelkaItaly2026-06-03Chapman, Ross E Esq NEGOTIATION81Bernardo Dominic
1014Rodrigues CampainRussia2026-06-09Benton, John B Jr NEGOTIATION36Onyama Limba
1015Juan WieserItaly2026-06-19Chapman, Ross E Esq QUALIFIED49Onyama Limba
1016Francesco ShinkoUnited Kingdom2026-06-01Chanay, Jeffrey A Esq RENEWAL28Bernardo Dominic
1017Izzy GarufiUnited Kingdom2026-06-12Chanay, Jeffrey A Esq NEW93Asiya Javayant
1018Clifford RimItaly2026-06-10Commercial Press QUALIFIED3Anna Fali
1019Munro FerenczItaly2026-05-31Rousseaux, Michael Esq PROPOSAL1Ioni Bowcher
1020Clifford RimItaly2026-06-10Buckley Miller Wright UNQUALIFIED29Asiya Javayant
1021Ivar PaprockiBrazil2026-06-18Chemel, James L Cpa NEW13Bernardo Dominic
1022Kaitlin OstroskyJapan2026-05-23Buckley Miller Wright QUALIFIED85Anna Fali
1023Faith GillianJapan2026-06-14Commercial Press RENEWAL80Ivan Magalhaes
1024Murillo MaletFrance2026-05-31Morlong Associates QUALIFIED5Ivan Magalhaes
1025Morrow RutaUnited Kingdom2026-06-14Dorl, James J Esq NEW71Amy Elsner
1026Ricardo GauchoGermany2026-05-24Rousseaux, Michael Esq UNQUALIFIED48Xuxue Feng
1027James ButtFrance2026-05-29King, Christopher A Esq NEW72Asiya Javayant
1028Stacey MacleadSpain2026-06-13Commercial Press NEGOTIATION68Amy Elsner
1029Isabel BowleyRussia2026-05-27Buckley Miller Wright NEW50Amy Elsner
1030Murillo MaletGermany2026-06-13Truhlar And Truhlar Attys QUALIFIED79Stephen Shaw
1031Ricardo GauchoArgentina2026-06-13Morlong Associates RENEWAL19Stephen Shaw
1032Leja CaldareraRussia2026-05-30Dorl, James J Esq RENEWAL42Ivan Magalhaes
1033Maisha RulapaughSpain2026-05-29Feltz Printing Service PROPOSAL73Xuxue Feng
1034Morrow RutaGermany2026-06-10King, Christopher A Esq QUALIFIED79Elwin Sharvill
1035Francesco ShinkoIndia2026-06-19Printing Dimensions UNQUALIFIED34Amy Elsner
1036Julie StensethCanada2026-06-08Chemel, James L Cpa NEGOTIATION75Anna Fali
1037Francesco ShinkoItaly2026-06-16Chanay, Jeffrey A Esq PROPOSAL92Ioni Bowcher
1038Julie StensethSpain2026-06-02Feltz Printing Service QUALIFIED56Ivan Magalhaes
1039Smith GlickUnited Kingdom2026-06-07Feiner Bros NEW75Stephen Shaw
1040Kaitlin OstroskySpain2026-05-28King, Christopher A Esq RENEWAL58Onyama Limba
1041Isabel BowleyItaly2026-06-21Benton, John B Jr NEGOTIATION71Asiya Javayant
1042Julie StensethCanada2026-06-05Chanay, Jeffrey A Esq QUALIFIED60Stephen Shaw
1043Stacey MacleadBrazil2026-05-27Chemel, James L Cpa NEGOTIATION48Anna Fali
1044Isabel BowleyIndia2026-05-23Feiner Bros PROPOSAL18Xuxue Feng
1045Maisha RulapaughFrance2026-05-27Printing Dimensions QUALIFIED73Anna Fali
1046Emily WhobreySpain2026-06-10Commercial Press QUALIFIED24Asiya Javayant
1047Deepesh ChuiFrance2026-06-01Feiner Bros NEGOTIATION40Elwin Sharvill
1048Adams MorascaRussia2026-06-10Rangoni Of Florence RENEWAL70Stephen Shaw
1049Octavia MaletIndia2026-05-26Buckley Miller Wright QUALIFIED99Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Claire TollnerCanadaElwin Sharvill NEGOTIATION
Silvio SlusarskiFranceBernardo Dominic NEW
Emily WhobreyCanadaStephen Shaw NEGOTIATION
Ivar PaprockiItalyXuxue Feng QUALIFIED
Aruna FigeroaItalyElwin Sharvill QUALIFIED
Izzy GarufiArgentinaOnyama Limba NEW
Adams MorascaGermanyXuxue Feng UNQUALIFIED
Mayumi KolmetzBrazilAmy Elsner QUALIFIED
Claire TollnerUnited KingdomAmy Elsner RENEWAL
Smith GlickFranceStephen Shaw PROPOSAL
Arvin AlbaresArgentinaIoni Bowcher QUALIFIED
Kadeem FlosiFranceBernardo Dominic QUALIFIED
Emily WhobreyGermanyBernardo Dominic RENEWAL
Emily WhobreySpainStephen Shaw NEW
Morrow RutaRussiaBernardo Dominic QUALIFIED
Maisha RulapaughSpainAnna Fali QUALIFIED
Rodrigues CampainGermanyIvan Magalhaes RENEWAL
Antonio CaudyArgentinaBernardo Dominic UNQUALIFIED
Claire TollnerItalyAsiya Javayant PROPOSAL
Jennifer AmigonJapanAsiya Javayant QUALIFIED
Cody SaylorsCanadaIvan Magalhaes NEGOTIATION
Cody SaylorsItalyAmy Elsner PROPOSAL
Maisha RulapaughFranceAsiya Javayant NEW
Leja CaldareraFranceIvan Magalhaes PROPOSAL
Mujtaba NickaIndiaXuxue Feng NEGOTIATION
Antonio CaudyArgentinaAnna Fali NEGOTIATION
Greenwood BologniaArgentinaAsiya Javayant QUALIFIED
Silvio SlusarskiIndiaAsiya Javayant QUALIFIED
Antonio CaudySpainAsiya Javayant UNQUALIFIED
Claire TollnerGermanyElwin Sharvill RENEWAL
Smith GlickAustraliaIvan Magalhaes QUALIFIED
Adams MorascaSpainBernardo Dominic QUALIFIED
Ashley DoeFranceAmy Elsner NEGOTIATION
Jefferson SchemmerBrazilAmy Elsner NEW
Jefferson SchemmerJapanXuxue Feng NEW
Jefferson SchemmerSpainBernardo Dominic NEW
Aditya KuskoArgentinaOnyama Limba NEW
Morrow RutaItalyBernardo Dominic PROPOSAL
Kadeem FlosiIndiaAsiya Javayant NEW
Morrow RutaJapanBernardo Dominic NEGOTIATION
Costa DilliardBrazilIoni Bowcher QUALIFIED
Clifford RimIndiaAmy Elsner NEW
Jones VocelkaBrazilXuxue Feng RENEWAL
Mujtaba NickaUnited KingdomStephen Shaw RENEWAL
Alejandro PerinAustraliaBernardo Dominic NEGOTIATION
Leja CaldareraCanadaAsiya Javayant NEGOTIATION
Isabel BowleyItalyAsiya Javayant PROPOSAL
Claire TollnerItalyOnyama Limba NEGOTIATION
Jefferson SchemmerJapanXuxue Feng RENEWAL
Silvio SlusarskiSpainAnna Fali QUALIFIED
Frozen Columns
Name
Stacey Maclead
Greenwood Bolognia
Misaki Royster
Francesco Shinko
Tony Foller
Jones Vocelka
Murillo Malet
Cody Saylors
Jeanfrancois Venere
Rodrigues Campain
Misaki Royster
Jeanfrancois Venere
Wickens Nestle
Izzy Garufi
Nicolas Iturbide
Stacey Maclead
Faith Gillian
Faith Gillian
Jefferson Schemmer
Wickens Nestle
Ashley Doe
Darci Poquette
Maisha Rulapaugh
David Darakjy
Alejandro Perin
Jennifer Amigon
Aditya Kusko
Kaitlin Ostrosky
Mayumi Kolmetz
Morrow Ruta
Jennifer Amigon
Wickens Nestle
Darci Poquette
Jennifer Amigon
Ashley Doe
Greenwood Bolognia
Maisha Rulapaugh
Stacey Maclead
Greenwood Bolognia
Julie Stenseth
Alejandro Perin
Sinclair Waycott
Mayumi Kolmetz
Darci Poquette
Leon Oldroyd
Mayumi Kolmetz
Kadeem Flosi
Munro Ferencz
Ashley Doe
Maisha Rulapaugh
IdCountryDate
1000United Kingdom2026-06-11
1001Brazil2026-06-11
1002France2026-05-24
1003Russia2026-06-08
1004Australia2026-06-05
1005Canada2026-06-12
1006France2026-05-26
1007Russia2026-06-14
1008Italy2026-06-18
1009India2026-06-02
1010India2026-06-03
1011Spain2026-05-24
1012Germany2026-05-27
1013Italy2026-05-27
1014Germany2026-06-10
1015India2026-06-08
1016Japan2026-05-26
1017Germany2026-06-20
1018France2026-05-25
1019Germany2026-05-31
1020India2026-06-17
1021Argentina2026-06-11
1022Canada2026-05-28
1023United Kingdom2026-06-12
1024Argentina2026-06-12
1025France2026-05-23
1026Argentina2026-06-08
1027Australia2026-06-13
1028India2026-05-28
1029Spain2026-05-26
1030India2026-06-20
1031Italy2026-06-04
1032Brazil2026-05-29
1033Spain2026-06-17
1034Argentina2026-05-25
1035Brazil2026-05-23
1036Italy2026-06-04
1037India2026-06-07
1038Australia2026-05-30
1039India2026-05-30
1040Japan2026-06-16
1041Japan2026-05-28
1042Canada2026-05-30
1043Canada2026-06-15
1044Canada2026-06-20
1045Japan2026-06-11
1046Russia2026-06-05
1047Argentina2026-06-02
1048Germany2026-05-28
1049Germany2026-05-23

On-Demand Data

NameIdCountryDate
Chavez Briddick1000United Kingdom2026-06-04
Rodrigues Campain1001Argentina2026-06-13
Nicolas Iturbide1002Canada2026-05-31
Maisha Rulapaugh1003France2026-06-13
Mayumi Kolmetz1004Russia2026-06-08
Claire Tollner1005Canada2026-05-24
Maria Marrier1006Spain2026-06-18
Rodrigues Campain1007Brazil2026-06-10
Claire Tollner1008Spain2026-06-15
Leja Caldarera1009Australia2026-05-30
Aditya Kusko1010Japan2026-06-13
Kadeem Flosi1011Canada2026-06-02
Juan Wieser1012Brazil2026-06-04
Rodrigues Campain1013Russia2026-06-10
Mayumi Kolmetz1014India2026-06-19
Costa Dilliard1015Italy2026-05-25
Izzy Garufi1016India2026-06-21
Tony Foller1017Germany2026-05-31
Deepesh Chui1018Argentina2026-06-21
Aruna Figeroa1019Brazil2026-06-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Munro FerenczCanadaIvan Magalhaes UNQUALIFIED
Cody SaylorsCanadaAsiya Javayant NEGOTIATION
Tony FollerItalyAmy Elsner NEGOTIATION
Morrow RutaFranceAnna Fali QUALIFIED
Silvio SlusarskiItalyOnyama Limba QUALIFIED
Mujtaba NickaRussiaAnna Fali NEGOTIATION
Deepesh ChuiItalyXuxue Feng PROPOSAL
Ivar PaprockiFranceAnna Fali PROPOSAL
Stacey MacleadUnited KingdomElwin Sharvill NEW
Isabel BowleyAustraliaAnna Fali RENEWAL
Jefferson SchemmerRussiaStephen Shaw NEGOTIATION
David DarakjyItalyBernardo Dominic NEW
Octavia MaletSpainBernardo Dominic NEW
Leja CaldareraIndiaIvan Magalhaes NEGOTIATION
Izzy GarufiArgentinaIoni Bowcher PROPOSAL
David DarakjyArgentinaElwin Sharvill QUALIFIED
Aika InouyeBrazilIvan Magalhaes NEW
Johnson SergiArgentinaStephen Shaw QUALIFIED
Leja CaldareraSpainBernardo Dominic QUALIFIED
Aditya KuskoIndiaIvan Magalhaes NEW
Isabel BowleyGermanyAsiya Javayant RENEWAL
Murillo MaletRussiaAmy Elsner QUALIFIED
James ButtBrazilIvan Magalhaes RENEWAL
Jennifer AmigonIndiaAmy Elsner UNQUALIFIED
Tony FollerCanadaStephen Shaw QUALIFIED
Leja CaldareraBrazilIvan Magalhaes RENEWAL
Jeanfrancois VenereSpainAmy Elsner QUALIFIED
Smith GlickItalyIoni Bowcher RENEWAL
Leja CaldareraAustraliaAmy Elsner UNQUALIFIED
Maisha RulapaughUnited KingdomElwin Sharvill NEGOTIATION
Arvin AlbaresCanadaXuxue Feng QUALIFIED
Smith GlickGermanyAnna Fali NEW
Nicolas IturbideIndiaAsiya Javayant RENEWAL
Adams MorascaArgentinaAnna Fali NEW
Munro FerenczFranceIvan Magalhaes NEGOTIATION
Costa DilliardArgentinaXuxue Feng RENEWAL
Kaitlin OstroskyItalyAsiya Javayant PROPOSAL
Jennifer AmigonCanadaIvan Magalhaes NEW
Adams MorascaCanadaXuxue Feng NEW
Stacey MacleadItalyStephen Shaw NEW

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