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
Rodrigues CampainCanadaAnna Fali UNQUALIFIED
Leja CaldareraRussiaStephen Shaw NEGOTIATION
Sinclair WaycottJapanOnyama Limba RENEWAL
James ButtSpainOnyama Limba QUALIFIED
Claire TollnerUnited KingdomIoni Bowcher QUALIFIED
Ivar PaprockiCanadaElwin Sharvill NEW
Julie StensethCanadaXuxue Feng QUALIFIED
Greenwood BologniaSpainAsiya Javayant RENEWAL
Aika InouyeJapanBernardo Dominic RENEWAL
Isabel BowleyGermanyIoni Bowcher NEW
Sinclair WaycottItalyAmy Elsner NEGOTIATION
Emily WhobreyRussiaAnna Fali NEW
Faith GillianFranceElwin Sharvill QUALIFIED
Isabel BowleyAustraliaStephen Shaw NEGOTIATION
Costa DilliardRussiaAnna Fali RENEWAL
Ricardo GauchoGermanyAsiya Javayant NEGOTIATION
James ButtFranceStephen Shaw UNQUALIFIED
Octavia MaletIndiaIoni Bowcher PROPOSAL
Claire TollnerRussiaXuxue Feng RENEWAL
Nicolas IturbideRussiaOnyama Limba UNQUALIFIED
Ashley DoeBrazilIvan Magalhaes UNQUALIFIED
Jones VocelkaFranceAsiya Javayant UNQUALIFIED
Clifford RimRussiaIoni Bowcher NEGOTIATION
David DarakjyBrazilElwin Sharvill RENEWAL
Juan WieserSpainAsiya Javayant QUALIFIED
Adams MorascaUnited KingdomIvan Magalhaes PROPOSAL
Clifford RimCanadaBernardo Dominic UNQUALIFIED
Jefferson SchemmerFranceXuxue Feng UNQUALIFIED
Sinclair WaycottFranceXuxue Feng PROPOSAL
Sinclair WaycottUnited KingdomAmy Elsner NEW
Francesco ShinkoUnited KingdomIvan Magalhaes NEGOTIATION
Leja CaldareraJapanAmy Elsner RENEWAL
Kaitlin OstroskyGermanyIvan Magalhaes QUALIFIED
Adams MorascaGermanyElwin Sharvill NEGOTIATION
Sinclair WaycottSpainStephen Shaw PROPOSAL
Ashley DoeJapanIvan Magalhaes RENEWAL
Aika InouyeGermanyXuxue Feng NEW
Izzy GarufiSpainIvan Magalhaes UNQUALIFIED
Faith GillianFranceAsiya Javayant QUALIFIED
Mujtaba NickaItalyStephen Shaw NEW
Maisha RulapaughFranceStephen Shaw NEW
Costa DilliardIndiaBernardo Dominic NEGOTIATION
Clifford RimSpainAsiya Javayant QUALIFIED
James ButtItalyXuxue Feng RENEWAL
Deepesh ChuiFranceOnyama Limba RENEWAL
Jefferson SchemmerFranceElwin Sharvill UNQUALIFIED
Deepesh ChuiCanadaStephen Shaw UNQUALIFIED
Murillo MaletGermanyElwin Sharvill NEW
Salvatore StockhamUnited KingdomStephen Shaw QUALIFIED
Aditya KuskoItalyElwin Sharvill NEW
Horizontal
NameCountryRepresentativeStatus
Isabel BowleyGermanyXuxue Feng PROPOSAL
Jones VocelkaCanadaElwin Sharvill NEW
Nicolas IturbideUnited KingdomOnyama Limba NEW
Mayumi KolmetzCanadaAnna Fali UNQUALIFIED
Ashley DoeBrazilAnna Fali PROPOSAL
Kadeem FlosiAustraliaAmy Elsner UNQUALIFIED
Wickens NestleSpainXuxue Feng RENEWAL
Antonio CaudyCanadaAsiya Javayant UNQUALIFIED
Tony FollerItalyAsiya Javayant PROPOSAL
Kaitlin OstroskyJapanAmy Elsner RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Deepesh ChuiAustralia2026-06-10Printing Dimensions NEGOTIATION62Xuxue Feng
1001Jennifer AmigonCanada2026-06-11Printing Dimensions UNQUALIFIED16Xuxue Feng
1002Cody SaylorsGermany2026-06-12Chemel, James L Cpa NEW5Amy Elsner
1003Sinclair WaycottIndia2026-06-02Feltz Printing Service QUALIFIED9Amy Elsner
1004Aruna FigeroaFrance2026-06-01Morlong Associates PROPOSAL69Amy Elsner
1005Jefferson SchemmerIndia2026-05-22Rousseaux, Michael Esq NEW23Amy Elsner
1006Arvin AlbaresUnited Kingdom2026-06-09Chanay, Jeffrey A Esq PROPOSAL70Elwin Sharvill
1007Morrow RutaGermany2026-05-31Truhlar And Truhlar Attys UNQUALIFIED6Asiya Javayant
1008Sinclair WaycottCanada2026-05-19Printing Dimensions UNQUALIFIED50Ivan Magalhaes
1009Julie StensethCanada2026-05-15Rangoni Of Florence PROPOSAL24Ioni Bowcher
1010Silvio SlusarskiCanada2026-05-26Commercial Press QUALIFIED56Anna Fali
1011Antonio CaudyIndia2026-06-10Buckley Miller Wright PROPOSAL52Ivan Magalhaes
1012Clifford RimSpain2026-06-02Rousseaux, Michael Esq NEGOTIATION63Stephen Shaw
1013James ButtUnited Kingdom2026-05-16Truhlar And Truhlar Attys UNQUALIFIED63Stephen Shaw
1014Antonio CaudyGermany2026-05-27Rangoni Of Florence RENEWAL15Xuxue Feng
1015Kadeem FlosiBrazil2026-06-02Chanay, Jeffrey A Esq NEW8Ioni Bowcher
1016Francesco ShinkoRussia2026-05-23Rousseaux, Michael Esq PROPOSAL74Anna Fali
1017Mayumi KolmetzCanada2026-05-29Benton, John B Jr PROPOSAL45Anna Fali
1018Aika InouyeGermany2026-05-16Chapman, Ross E Esq UNQUALIFIED5Bernardo Dominic
1019Silvio SlusarskiArgentina2026-05-14Rangoni Of Florence QUALIFIED7Elwin Sharvill
1020Cody SaylorsRussia2026-05-30Chanay, Jeffrey A Esq NEGOTIATION49Stephen Shaw
1021Octavia MaletIndia2026-06-11Rousseaux, Michael Esq UNQUALIFIED89Ivan Magalhaes
1022Deepesh ChuiFrance2026-06-10Rangoni Of Florence NEW34Onyama Limba
1023Juan WieserJapan2026-06-01Truhlar And Truhlar Attys RENEWAL2Amy Elsner
1024David DarakjyArgentina2026-05-26Feiner Bros NEW86Elwin Sharvill
1025Aditya KuskoUnited Kingdom2026-06-10Rangoni Of Florence QUALIFIED49Asiya Javayant
1026Jeanfrancois VenereUnited Kingdom2026-06-07Commercial Press NEGOTIATION45Anna Fali
1027Jennifer AmigonArgentina2026-06-12Printing Dimensions UNQUALIFIED65Asiya Javayant
1028Arvin AlbaresBrazil2026-06-07Rousseaux, Michael Esq NEGOTIATION23Ioni Bowcher
1029Mujtaba NickaArgentina2026-05-16Rousseaux, Michael Esq QUALIFIED75Ioni Bowcher
1030Johnson SergiItaly2026-05-26Printing Dimensions NEGOTIATION92Anna Fali
1031Juan WieserIndia2026-05-22King, Christopher A Esq QUALIFIED11Ivan Magalhaes
1032Aruna FigeroaJapan2026-06-09Feiner Bros NEGOTIATION32Anna Fali
1033Murillo MaletBrazil2026-05-14Commercial Press NEW98Ivan Magalhaes
1034Juan WieserRussia2026-06-02Feltz Printing Service QUALIFIED41Elwin Sharvill
1035David DarakjyIndia2026-05-17Chapman, Ross E Esq RENEWAL86Ioni Bowcher
1036Silvio SlusarskiAustralia2026-05-20Chemel, James L Cpa RENEWAL80Elwin Sharvill
1037Julie StensethItaly2026-06-03Morlong Associates NEGOTIATION17Ivan Magalhaes
1038Ricardo GauchoIndia2026-05-26Feiner Bros QUALIFIED33Bernardo Dominic
1039Silvio SlusarskiArgentina2026-05-14Benton, John B Jr PROPOSAL65Xuxue Feng
1040Ivar PaprockiUnited Kingdom2026-06-03Printing Dimensions UNQUALIFIED53Asiya Javayant
1041Greenwood BologniaAustralia2026-05-21Buckley Miller Wright NEW25Bernardo Dominic
1042Clifford RimFrance2026-06-07Printing Dimensions RENEWAL4Ioni Bowcher
1043Greenwood BologniaArgentina2026-06-03Dorl, James J Esq NEW59Anna Fali
1044Stacey MacleadCanada2026-05-25Buckley Miller Wright RENEWAL71Xuxue Feng
1045Morrow RutaFrance2026-06-12Commercial Press PROPOSAL89Anna Fali
1046Deepesh ChuiSpain2026-05-30Truhlar And Truhlar Attys NEGOTIATION94Bernardo Dominic
1047Cody SaylorsIndia2026-05-30Printing Dimensions RENEWAL52Stephen Shaw
1048Jefferson SchemmerJapan2026-06-09Rousseaux, Michael Esq NEW28Xuxue Feng
1049Aika InouyeArgentina2026-05-21Printing Dimensions NEGOTIATION4Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Jennifer AmigonFranceStephen Shaw NEW
Nicolas IturbideFranceXuxue Feng NEGOTIATION
Mayumi KolmetzArgentinaAnna Fali NEGOTIATION
Leon OldroydIndiaAnna Fali UNQUALIFIED
Greenwood BologniaArgentinaOnyama Limba NEW
Costa DilliardItalyXuxue Feng NEGOTIATION
Greenwood BologniaBrazilIoni Bowcher QUALIFIED
Kaitlin OstroskySpainAsiya Javayant NEW
Tony FollerSpainElwin Sharvill UNQUALIFIED
Jefferson SchemmerGermanyAmy Elsner PROPOSAL
Munro FerenczCanadaAmy Elsner PROPOSAL
Silvio SlusarskiUnited KingdomAmy Elsner QUALIFIED
Maisha RulapaughArgentinaElwin Sharvill QUALIFIED
Mujtaba NickaArgentinaStephen Shaw QUALIFIED
Rodrigues CampainAustraliaIoni Bowcher QUALIFIED
Antonio CaudyGermanyIvan Magalhaes NEW
Julie StensethIndiaXuxue Feng QUALIFIED
Mayumi KolmetzCanadaElwin Sharvill RENEWAL
Murillo MaletItalyIvan Magalhaes UNQUALIFIED
Isabel BowleyArgentinaXuxue Feng QUALIFIED
Francesco ShinkoJapanAsiya Javayant RENEWAL
Jeanfrancois VenereFranceBernardo Dominic RENEWAL
David DarakjyItalyAsiya Javayant PROPOSAL
Juan WieserArgentinaAsiya Javayant NEW
Leja CaldareraCanadaXuxue Feng NEGOTIATION
Sinclair WaycottIndiaXuxue Feng PROPOSAL
Tony FollerJapanElwin Sharvill UNQUALIFIED
Isabel BowleyJapanStephen Shaw NEW
Mayumi KolmetzIndiaOnyama Limba NEW
Ivar PaprockiArgentinaAmy Elsner RENEWAL
Deepesh ChuiFranceBernardo Dominic PROPOSAL
Jefferson SchemmerJapanIvan Magalhaes QUALIFIED
Isabel BowleySpainIoni Bowcher PROPOSAL
Greenwood BologniaIndiaAmy Elsner UNQUALIFIED
Ricardo GauchoItalyBernardo Dominic PROPOSAL
Arvin AlbaresRussiaAmy Elsner RENEWAL
Cody SaylorsItalyAnna Fali QUALIFIED
Stacey MacleadSpainBernardo Dominic NEW
Munro FerenczRussiaIvan Magalhaes QUALIFIED
Jeanfrancois VenereAustraliaAsiya Javayant PROPOSAL
Adams MorascaBrazilAmy Elsner NEGOTIATION
Murillo MaletRussiaOnyama Limba UNQUALIFIED
Mayumi KolmetzSpainIoni Bowcher RENEWAL
Johnson SergiJapanBernardo Dominic NEGOTIATION
Isabel BowleyJapanElwin Sharvill NEW
Francesco ShinkoFranceAsiya Javayant QUALIFIED
Smith GlickUnited KingdomAnna Fali RENEWAL
Mayumi KolmetzCanadaAsiya Javayant PROPOSAL
Claire TollnerBrazilAmy Elsner NEW
Murillo MaletAustraliaXuxue Feng PROPOSAL
Frozen Columns
Name
Faith Gillian
Clifford Rim
Octavia Malet
Mayumi Kolmetz
Silvio Slusarski
Jennifer Amigon
Ricardo Gaucho
Mayumi Kolmetz
Chavez Briddick
Kadeem Flosi
Jefferson Schemmer
Kaitlin Ostrosky
Alejandro Perin
Julie Stenseth
Francesco Shinko
James Butt
Aditya Kusko
Mujtaba Nicka
Tony Foller
Munro Ferencz
Adams Morasca
Ashley Doe
Cody Saylors
Emily Whobrey
Tony Foller
Julie Stenseth
Julie Stenseth
Aditya Kusko
Maisha Rulapaugh
Rodrigues Campain
Kaitlin Ostrosky
James Butt
Jones Vocelka
Tony Foller
Alejandro Perin
Chavez Briddick
Ivar Paprocki
Faith Gillian
Alejandro Perin
Deepesh Chui
Misaki Royster
Francesco Shinko
Clifford Rim
Mujtaba Nicka
Aditya Kusko
Stacey Maclead
Aika Inouye
Claire Tollner
Greenwood Bolognia
Mayumi Kolmetz
IdCountryDate
1000Canada2026-05-18
1001India2026-06-07
1002France2026-05-18
1003France2026-06-11
1004Argentina2026-05-22
1005France2026-06-03
1006Australia2026-05-28
1007Argentina2026-06-04
1008United Kingdom2026-06-07
1009United Kingdom2026-06-06
1010Australia2026-06-04
1011Australia2026-05-21
1012Italy2026-06-12
1013United Kingdom2026-06-11
1014Argentina2026-06-03
1015France2026-06-04
1016Australia2026-05-18
1017India2026-06-12
1018Argentina2026-06-07
1019Brazil2026-06-04
1020Germany2026-05-19
1021India2026-05-29
1022Canada2026-05-25
1023France2026-06-10
1024France2026-05-25
1025Canada2026-06-03
1026Canada2026-06-05
1027United Kingdom2026-05-30
1028Brazil2026-05-23
1029Japan2026-05-18
1030United Kingdom2026-05-22
1031Germany2026-06-03
1032Russia2026-05-25
1033Spain2026-06-09
1034Russia2026-05-29
1035Brazil2026-05-26
1036Italy2026-05-16
1037Italy2026-05-22
1038Australia2026-06-12
1039Italy2026-05-22
1040Russia2026-05-18
1041United Kingdom2026-05-14
1042France2026-05-16
1043Spain2026-05-23
1044United Kingdom2026-06-02
1045Italy2026-05-20
1046Australia2026-05-25
1047Spain2026-06-08
1048Brazil2026-06-01
1049Australia2026-05-22

On-Demand Data

NameIdCountryDate
Arvin Albares1000France2026-06-10
Mujtaba Nicka1001Russia2026-05-16
Ivar Paprocki1002France2026-06-03
Mayumi Kolmetz1003Argentina2026-05-14
Izzy Garufi1004Brazil2026-06-11
Alejandro Perin1005France2026-06-05
Darci Poquette1006Russia2026-06-07
Maisha Rulapaugh1007Italy2026-05-26
Munro Ferencz1008Spain2026-05-31
Antonio Caudy1009Japan2026-06-05
Leon Oldroyd1010Spain2026-05-26
Aditya Kusko1011India2026-05-26
Jefferson Schemmer1012Australia2026-06-04
Nicolas Iturbide1013United Kingdom2026-06-11
Smith Glick1014Japan2026-05-31
Leon Oldroyd1015India2026-05-22
Ricardo Gaucho1016Japan2026-05-22
Claire Tollner1017Brazil2026-05-18
James Butt1018Germany2026-05-29
Wickens Nestle1019France2026-05-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Alejandro PerinSpainStephen Shaw NEW
Munro FerenczAustraliaAnna Fali UNQUALIFIED
Juan WieserGermanyBernardo Dominic PROPOSAL
Jones VocelkaSpainAnna Fali QUALIFIED
Cody SaylorsJapanIvan Magalhaes PROPOSAL
Jefferson SchemmerItalyIvan Magalhaes NEW
Emily WhobreyCanadaBernardo Dominic PROPOSAL
Silvio SlusarskiCanadaStephen Shaw NEW
James ButtIndiaElwin Sharvill RENEWAL
Aika InouyeIndiaBernardo Dominic NEW
Aika InouyeItalyAsiya Javayant QUALIFIED
Kaitlin OstroskyAustraliaAnna Fali NEW
Izzy GarufiJapanAmy Elsner NEW
Mayumi KolmetzIndiaIvan Magalhaes UNQUALIFIED
Morrow RutaUnited KingdomAmy Elsner QUALIFIED
Mayumi KolmetzAustraliaElwin Sharvill PROPOSAL
Francesco ShinkoItalyBernardo Dominic PROPOSAL
Costa DilliardIndiaIvan Magalhaes QUALIFIED
Octavia MaletIndiaStephen Shaw PROPOSAL
Leja CaldareraFranceOnyama Limba NEW
Tony FollerJapanOnyama Limba UNQUALIFIED
Stacey MacleadAustraliaElwin Sharvill UNQUALIFIED
Jefferson SchemmerRussiaIoni Bowcher UNQUALIFIED
Stacey MacleadItalyElwin Sharvill RENEWAL
Adams MorascaRussiaOnyama Limba PROPOSAL
Smith GlickJapanAsiya Javayant NEGOTIATION
Jeanfrancois VenereGermanyElwin Sharvill NEGOTIATION
Claire TollnerAustraliaStephen Shaw RENEWAL
Salvatore StockhamUnited KingdomElwin Sharvill PROPOSAL
Stacey MacleadSpainAmy Elsner NEGOTIATION
Mujtaba NickaAustraliaElwin Sharvill UNQUALIFIED
Isabel BowleySpainAmy Elsner NEGOTIATION
Leon OldroydSpainBernardo Dominic QUALIFIED
Rodrigues CampainItalyXuxue Feng NEGOTIATION
Aditya KuskoJapanOnyama Limba NEGOTIATION
Faith GillianSpainElwin Sharvill RENEWAL
Darci PoquetteArgentinaIvan Magalhaes NEGOTIATION
Antonio CaudyArgentinaIoni Bowcher NEGOTIATION
Alejandro PerinIndiaStephen Shaw UNQUALIFIED
Salvatore StockhamIndiaXuxue Feng PROPOSAL

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