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
Antonio CaudyGermanyOnyama Limba PROPOSAL
Chavez BriddickCanadaAsiya Javayant RENEWAL
Francesco ShinkoRussiaAsiya Javayant NEGOTIATION
Clifford RimUnited KingdomAmy Elsner RENEWAL
Munro FerenczJapanAsiya Javayant NEGOTIATION
Mujtaba NickaFranceIvan Magalhaes PROPOSAL
Jones VocelkaFranceBernardo Dominic PROPOSAL
Munro FerenczBrazilAsiya Javayant PROPOSAL
Cody SaylorsBrazilAsiya Javayant NEW
Leon OldroydIndiaStephen Shaw NEW
Kadeem FlosiJapanOnyama Limba QUALIFIED
James ButtRussiaOnyama Limba NEW
Smith GlickCanadaAmy Elsner NEGOTIATION
Stacey MacleadJapanIvan Magalhaes PROPOSAL
Juan WieserFranceXuxue Feng PROPOSAL
Salvatore StockhamSpainBernardo Dominic QUALIFIED
Cody SaylorsItalyIvan Magalhaes PROPOSAL
Izzy GarufiItalyIoni Bowcher NEW
Deepesh ChuiBrazilBernardo Dominic RENEWAL
Greenwood BologniaRussiaElwin Sharvill UNQUALIFIED
Octavia MaletRussiaAsiya Javayant NEGOTIATION
Aditya KuskoUnited KingdomStephen Shaw NEW
James ButtJapanXuxue Feng PROPOSAL
Jefferson SchemmerFranceAmy Elsner NEW
David DarakjyJapanIoni Bowcher QUALIFIED
Isabel BowleyBrazilStephen Shaw PROPOSAL
Jeanfrancois VenereGermanyBernardo Dominic NEW
Darci PoquetteArgentinaAmy Elsner PROPOSAL
Jones VocelkaCanadaAnna Fali NEGOTIATION
James ButtUnited KingdomAmy Elsner PROPOSAL
Francesco ShinkoItalyBernardo Dominic PROPOSAL
Francesco ShinkoBrazilStephen Shaw QUALIFIED
Francesco ShinkoAustraliaIvan Magalhaes QUALIFIED
Morrow RutaCanadaIoni Bowcher UNQUALIFIED
Claire TollnerUnited KingdomXuxue Feng PROPOSAL
Ivar PaprockiJapanAsiya Javayant PROPOSAL
James ButtBrazilAmy Elsner NEGOTIATION
Darci PoquetteSpainXuxue Feng UNQUALIFIED
Alejandro PerinJapanAmy Elsner UNQUALIFIED
Darci PoquetteJapanIvan Magalhaes QUALIFIED
Jennifer AmigonCanadaXuxue Feng RENEWAL
Johnson SergiCanadaStephen Shaw PROPOSAL
Darci PoquetteFranceStephen Shaw UNQUALIFIED
Johnson SergiIndiaAnna Fali RENEWAL
Jones VocelkaJapanBernardo Dominic QUALIFIED
Rodrigues CampainBrazilAmy Elsner NEW
Deepesh ChuiSpainAmy Elsner RENEWAL
Smith GlickRussiaAmy Elsner NEGOTIATION
Darci PoquetteItalyIoni Bowcher UNQUALIFIED
Isabel BowleyGermanyElwin Sharvill NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Sinclair WaycottRussiaXuxue Feng NEGOTIATION
Clifford RimIndiaAmy Elsner RENEWAL
Chavez BriddickItalyIoni Bowcher UNQUALIFIED
Murillo MaletArgentinaBernardo Dominic RENEWAL
Deepesh ChuiArgentinaAmy Elsner QUALIFIED
Greenwood BologniaArgentinaXuxue Feng NEGOTIATION
Wickens NestleGermanyAnna Fali UNQUALIFIED
Clifford RimGermanyIoni Bowcher QUALIFIED
Leon OldroydRussiaAmy Elsner PROPOSAL
Salvatore StockhamFranceIvan Magalhaes UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000David DarakjyGermany2025-05-12Printing Dimensions UNQUALIFIED35Ivan Magalhaes
1001Leon OldroydItaly2025-05-22Buckley Miller Wright PROPOSAL71Xuxue Feng
1002James ButtSpain2025-05-06Chapman, Ross E Esq PROPOSAL58Bernardo Dominic
1003James ButtCanada2025-05-20Dorl, James J Esq NEGOTIATION63Ioni Bowcher
1004Cody SaylorsBrazil2025-05-05Chemel, James L Cpa NEGOTIATION15Onyama Limba
1005Antonio CaudyArgentina2025-06-02Feiner Bros PROPOSAL25Anna Fali
1006Mujtaba NickaItaly2025-05-25Chapman, Ross E Esq UNQUALIFIED72Bernardo Dominic
1007Mayumi KolmetzIndia2025-05-21Feiner Bros RENEWAL42Stephen Shaw
1008Chavez BriddickSpain2025-05-27Feltz Printing Service NEGOTIATION5Anna Fali
1009Antonio CaudyRussia2025-05-06Chapman, Ross E Esq NEW91Ioni Bowcher
1010Costa DilliardFrance2025-05-07Feiner Bros NEW18Ioni Bowcher
1011Deepesh ChuiFrance2025-05-30Rangoni Of Florence NEGOTIATION77Elwin Sharvill
1012Jennifer AmigonIndia2025-05-19Truhlar And Truhlar Attys QUALIFIED41Xuxue Feng
1013Aika InouyeJapan2025-05-29Buckley Miller Wright UNQUALIFIED57Ioni Bowcher
1014Faith GillianArgentina2025-05-05Chemel, James L Cpa QUALIFIED91Ivan Magalhaes
1015Kaitlin OstroskyUnited Kingdom2025-05-05Chapman, Ross E Esq RENEWAL14Asiya Javayant
1016Arvin AlbaresJapan2025-05-26Morlong Associates PROPOSAL5Amy Elsner
1017James ButtCanada2025-05-11Buckley Miller Wright QUALIFIED6Ivan Magalhaes
1018Alejandro PerinRussia2025-05-11Truhlar And Truhlar Attys RENEWAL77Stephen Shaw
1019James ButtArgentina2025-05-14Truhlar And Truhlar Attys NEGOTIATION2Asiya Javayant
1020Cody SaylorsAustralia2025-05-04Truhlar And Truhlar Attys RENEWAL6Bernardo Dominic
1021Aditya KuskoArgentina2025-05-25Rousseaux, Michael Esq QUALIFIED15Stephen Shaw
1022Aditya KuskoGermany2025-05-04Truhlar And Truhlar Attys NEW78Amy Elsner
1023Juan WieserGermany2025-05-22Printing Dimensions PROPOSAL11Ivan Magalhaes
1024Leon OldroydIndia2025-05-23Truhlar And Truhlar Attys PROPOSAL98Ioni Bowcher
1025Salvatore StockhamGermany2025-05-14King, Christopher A Esq NEGOTIATION80Elwin Sharvill
1026Leja CaldareraJapan2025-05-09Rousseaux, Michael Esq UNQUALIFIED93Onyama Limba
1027Cody SaylorsCanada2025-05-18Morlong Associates NEW66Xuxue Feng
1028Smith GlickBrazil2025-05-28Feltz Printing Service RENEWAL20Ivan Magalhaes
1029Octavia MaletFrance2025-05-04Feiner Bros QUALIFIED63Xuxue Feng
1030Morrow RutaJapan2025-05-06Benton, John B Jr NEW56Asiya Javayant
1031Jones VocelkaIndia2025-05-23King, Christopher A Esq NEGOTIATION23Ivan Magalhaes
1032Jeanfrancois VenereRussia2025-05-24Rousseaux, Michael Esq UNQUALIFIED33Ivan Magalhaes
1033Rodrigues CampainFrance2025-05-29Printing Dimensions UNQUALIFIED15Asiya Javayant
1034Isabel BowleyUnited Kingdom2025-05-15Chemel, James L Cpa NEGOTIATION48Onyama Limba
1035Jeanfrancois VenereRussia2025-05-10Chanay, Jeffrey A Esq QUALIFIED56Stephen Shaw
1036Juan WieserJapan2025-05-04Commercial Press RENEWAL55Ioni Bowcher
1037Munro FerenczBrazil2025-05-31Dorl, James J Esq QUALIFIED0Asiya Javayant
1038Claire TollnerAustralia2025-05-15Buckley Miller Wright NEW49Asiya Javayant
1039Jennifer AmigonUnited Kingdom2025-05-09Printing Dimensions QUALIFIED11Anna Fali
1040Greenwood BologniaArgentina2025-06-01Feiner Bros NEGOTIATION57Ioni Bowcher
1041Smith GlickSpain2025-05-05Chemel, James L Cpa QUALIFIED24Bernardo Dominic
1042Deepesh ChuiJapan2025-05-05Benton, John B Jr RENEWAL10Amy Elsner
1043Claire TollnerFrance2025-05-29Chanay, Jeffrey A Esq RENEWAL89Amy Elsner
1044Morrow RutaJapan2025-05-04Rangoni Of Florence UNQUALIFIED85Amy Elsner
1045Stacey MacleadJapan2025-05-28King, Christopher A Esq QUALIFIED17Onyama Limba
1046Aika InouyeJapan2025-05-24Chapman, Ross E Esq UNQUALIFIED96Ivan Magalhaes
1047Darci PoquetteAustralia2025-05-13Dorl, James J Esq PROPOSAL44Bernardo Dominic
1048Rodrigues CampainArgentina2025-05-06Feltz Printing Service NEGOTIATION50Ioni Bowcher
1049Murillo MaletBrazil2025-05-31Buckley Miller Wright UNQUALIFIED35Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Jennifer AmigonAustraliaIvan Magalhaes RENEWAL
David DarakjyAustraliaXuxue Feng RENEWAL
Isabel BowleyUnited KingdomStephen Shaw NEGOTIATION
Rodrigues CampainSpainAmy Elsner PROPOSAL
Clifford RimSpainAmy Elsner NEW
Antonio CaudyJapanIoni Bowcher UNQUALIFIED
Jefferson SchemmerIndiaStephen Shaw UNQUALIFIED
Stacey MacleadSpainAsiya Javayant QUALIFIED
Leon OldroydGermanyXuxue Feng QUALIFIED
Juan WieserCanadaIoni Bowcher QUALIFIED
Octavia MaletItalyXuxue Feng PROPOSAL
Claire TollnerAustraliaAmy Elsner RENEWAL
Darci PoquetteRussiaAsiya Javayant NEGOTIATION
Kadeem FlosiCanadaAmy Elsner UNQUALIFIED
Murillo MaletAustraliaIvan Magalhaes PROPOSAL
Claire TollnerRussiaIvan Magalhaes UNQUALIFIED
Aika InouyeUnited KingdomBernardo Dominic NEW
Faith GillianSpainIvan Magalhaes PROPOSAL
Francesco ShinkoGermanyAsiya Javayant NEW
Johnson SergiGermanyIoni Bowcher NEGOTIATION
Cody SaylorsSpainXuxue Feng PROPOSAL
Juan WieserBrazilAmy Elsner NEGOTIATION
Claire TollnerGermanyXuxue Feng NEW
Costa DilliardBrazilIoni Bowcher NEGOTIATION
Rodrigues CampainArgentinaIvan Magalhaes NEW
Ivar PaprockiBrazilIvan Magalhaes RENEWAL
Arvin AlbaresUnited KingdomAnna Fali NEGOTIATION
Jeanfrancois VenereCanadaOnyama Limba QUALIFIED
Isabel BowleyFranceOnyama Limba QUALIFIED
Maria MarrierSpainStephen Shaw RENEWAL
Morrow RutaRussiaAmy Elsner NEW
Murillo MaletGermanyIvan Magalhaes PROPOSAL
Chavez BriddickUnited KingdomOnyama Limba NEGOTIATION
Cody SaylorsCanadaIvan Magalhaes NEW
Nicolas IturbideArgentinaBernardo Dominic NEW
Francesco ShinkoRussiaAsiya Javayant NEW
Silvio SlusarskiItalyAmy Elsner NEGOTIATION
Murillo MaletRussiaIvan Magalhaes NEW
Nicolas IturbideUnited KingdomOnyama Limba NEGOTIATION
Mujtaba NickaGermanyElwin Sharvill PROPOSAL
Greenwood BologniaJapanIvan Magalhaes UNQUALIFIED
Octavia MaletRussiaXuxue Feng PROPOSAL
Wickens NestleUnited KingdomStephen Shaw QUALIFIED
Kaitlin OstroskyGermanyAmy Elsner RENEWAL
Stacey MacleadSpainAmy Elsner RENEWAL
James ButtJapanOnyama Limba NEGOTIATION
Juan WieserCanadaAsiya Javayant UNQUALIFIED
Octavia MaletBrazilIoni Bowcher NEGOTIATION
Clifford RimItalyXuxue Feng UNQUALIFIED
Silvio SlusarskiIndiaStephen Shaw QUALIFIED
Frozen Columns
Name
Misaki Royster
Mujtaba Nicka
Salvatore Stockham
Arvin Albares
Octavia Malet
Leon Oldroyd
James Butt
Chavez Briddick
Aruna Figeroa
Rodrigues Campain
Sinclair Waycott
Ashley Doe
Greenwood Bolognia
Antonio Caudy
Costa Dilliard
Ashley Doe
Chavez Briddick
Tony Foller
Salvatore Stockham
Jeanfrancois Venere
Ricardo Gaucho
Aditya Kusko
Murillo Malet
Leja Caldarera
Emily Whobrey
Izzy Garufi
James Butt
Greenwood Bolognia
Leja Caldarera
Jefferson Schemmer
James Butt
Emily Whobrey
Murillo Malet
Faith Gillian
Adams Morasca
Jefferson Schemmer
Arvin Albares
Arvin Albares
Mayumi Kolmetz
Wickens Nestle
Greenwood Bolognia
Salvatore Stockham
Isabel Bowley
Sinclair Waycott
Octavia Malet
Jennifer Amigon
Maria Marrier
Tony Foller
Kadeem Flosi
Jones Vocelka
IdCountryDate
1000Italy2025-05-05
1001Spain2025-05-09
1002India2025-05-17
1003India2025-06-02
1004Canada2025-05-12
1005France2025-05-04
1006Germany2025-05-23
1007Spain2025-05-19
1008India2025-05-17
1009France2025-05-07
1010Canada2025-05-24
1011Germany2025-05-14
1012Japan2025-05-11
1013Argentina2025-05-17
1014Canada2025-05-27
1015Italy2025-05-11
1016France2025-05-11
1017Argentina2025-05-04
1018Canada2025-05-17
1019Germany2025-05-04
1020Italy2025-05-28
1021Germany2025-05-20
1022India2025-05-30
1023Brazil2025-05-26
1024Japan2025-05-09
1025Russia2025-05-21
1026Japan2025-05-10
1027Russia2025-06-01
1028Australia2025-05-29
1029Russia2025-05-13
1030Argentina2025-05-08
1031Germany2025-05-25
1032Spain2025-05-29
1033Italy2025-06-01
1034Italy2025-05-12
1035Japan2025-05-08
1036Japan2025-05-20
1037Germany2025-05-17
1038Canada2025-05-31
1039Canada2025-05-26
1040Australia2025-05-12
1041Argentina2025-05-05
1042Germany2025-05-31
1043United Kingdom2025-05-10
1044Germany2025-05-16
1045Spain2025-05-08
1046Spain2025-05-09
1047Argentina2025-05-23
1048Italy2025-05-17
1049France2025-06-01

On-Demand Data

NameIdCountryDate
Francesco Shinko1000France2025-05-30
Kadeem Flosi1001Italy2025-05-11
Aditya Kusko1002Brazil2025-06-01
Rodrigues Campain1003Russia2025-05-29
Nicolas Iturbide1004India2025-05-16
Morrow Ruta1005Germany2025-05-04
Murillo Malet1006Japan2025-05-21
Jones Vocelka1007Germany2025-06-02
Aditya Kusko1008Argentina2025-05-28
Aika Inouye1009India2025-05-17
Alejandro Perin1010Spain2025-05-26
Morrow Ruta1011Argentina2025-05-14
Deepesh Chui1012Japan2025-05-05
Izzy Garufi1013Russia2025-06-01
Morrow Ruta1014Argentina2025-05-13
Misaki Royster1015Brazil2025-05-27
Ivar Paprocki1016India2025-05-14
Kaitlin Ostrosky1017Canada2025-05-12
Mayumi Kolmetz1018United Kingdom2025-05-23
Arvin Albares1019Australia2025-05-13
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Rodrigues CampainSpainIvan Magalhaes RENEWAL
Cody SaylorsCanadaIoni Bowcher UNQUALIFIED
Deepesh ChuiJapanElwin Sharvill NEW
Izzy GarufiSpainStephen Shaw QUALIFIED
David DarakjyCanadaElwin Sharvill RENEWAL
Wickens NestleAustraliaAnna Fali NEGOTIATION
Isabel BowleyFranceAmy Elsner QUALIFIED
Deepesh ChuiBrazilAsiya Javayant NEW
Ivar PaprockiFranceAmy Elsner NEGOTIATION
Deepesh ChuiGermanyAsiya Javayant PROPOSAL
Arvin AlbaresJapanAnna Fali RENEWAL
Costa DilliardFranceAnna Fali QUALIFIED
Johnson SergiArgentinaIvan Magalhaes NEW
Juan WieserArgentinaElwin Sharvill QUALIFIED
Julie StensethItalyAmy Elsner NEW
Antonio CaudyItalyAnna Fali UNQUALIFIED
Greenwood BologniaSpainXuxue Feng UNQUALIFIED
Wickens NestleGermanyStephen Shaw PROPOSAL
James ButtUnited KingdomIvan Magalhaes NEW
Murillo MaletItalyIvan Magalhaes NEGOTIATION
Julie StensethAustraliaOnyama Limba QUALIFIED
Claire TollnerIndiaXuxue Feng NEGOTIATION
Mayumi KolmetzArgentinaIvan Magalhaes NEW
Rodrigues CampainRussiaAmy Elsner RENEWAL
Maisha RulapaughRussiaStephen Shaw UNQUALIFIED
James ButtArgentinaAnna Fali QUALIFIED
Francesco ShinkoSpainAnna Fali QUALIFIED
Cody SaylorsSpainOnyama Limba NEGOTIATION
Izzy GarufiIndiaElwin Sharvill NEGOTIATION
Emily WhobreyJapanAsiya Javayant UNQUALIFIED
Emily WhobreyGermanyStephen Shaw NEGOTIATION
Claire TollnerJapanAnna Fali NEW
Greenwood BologniaGermanyOnyama Limba NEGOTIATION
Ashley DoeBrazilIvan Magalhaes NEW
Claire TollnerItalyAmy Elsner UNQUALIFIED
Sinclair WaycottCanadaAsiya Javayant QUALIFIED
Smith GlickGermanyStephen Shaw NEGOTIATION
Jennifer AmigonJapanAsiya Javayant RENEWAL
Ashley DoeAustraliaAnna Fali RENEWAL
Smith GlickIndiaAnna 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>