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
Tony FollerBrazilElwin Sharvill QUALIFIED
Murillo MaletCanadaAmy Elsner PROPOSAL
Mujtaba NickaIndiaStephen Shaw PROPOSAL
Costa DilliardFranceIvan Magalhaes QUALIFIED
Silvio SlusarskiCanadaElwin Sharvill PROPOSAL
Mayumi KolmetzUnited KingdomAnna Fali NEW
Kadeem FlosiJapanStephen Shaw PROPOSAL
Leja CaldareraJapanAsiya Javayant PROPOSAL
Jeanfrancois VenereJapanOnyama Limba UNQUALIFIED
Leja CaldareraIndiaBernardo Dominic UNQUALIFIED
Ivar PaprockiArgentinaAnna Fali NEGOTIATION
Stacey MacleadIndiaAsiya Javayant QUALIFIED
Nicolas IturbideJapanXuxue Feng QUALIFIED
Kadeem FlosiUnited KingdomIvan Magalhaes NEW
Izzy GarufiAustraliaIvan Magalhaes RENEWAL
Ivar PaprockiJapanIvan Magalhaes UNQUALIFIED
Sinclair WaycottUnited KingdomAmy Elsner NEW
Maisha RulapaughArgentinaIvan Magalhaes NEGOTIATION
Mujtaba NickaSpainBernardo Dominic QUALIFIED
Leja CaldareraAustraliaXuxue Feng PROPOSAL
Maria MarrierGermanyBernardo Dominic UNQUALIFIED
Smith GlickJapanAnna Fali NEGOTIATION
Rodrigues CampainFranceAmy Elsner PROPOSAL
Aditya KuskoFranceAsiya Javayant PROPOSAL
Maria MarrierGermanyBernardo Dominic RENEWAL
Octavia MaletBrazilAmy Elsner RENEWAL
Juan WieserFranceAmy Elsner PROPOSAL
Aditya KuskoBrazilAsiya Javayant QUALIFIED
Aditya KuskoAustraliaElwin Sharvill NEGOTIATION
Maisha RulapaughSpainXuxue Feng PROPOSAL
Cody SaylorsItalyXuxue Feng RENEWAL
Julie StensethItalyAnna Fali NEW
Jennifer AmigonBrazilIvan Magalhaes NEW
Ivar PaprockiSpainStephen Shaw NEGOTIATION
Izzy GarufiAustraliaBernardo Dominic UNQUALIFIED
Octavia MaletCanadaIvan Magalhaes UNQUALIFIED
Octavia MaletJapanStephen Shaw QUALIFIED
Murillo MaletIndiaAmy Elsner UNQUALIFIED
Julie StensethRussiaAmy Elsner NEW
Isabel BowleyRussiaAmy Elsner NEW
Costa DilliardJapanOnyama Limba NEW
Faith GillianGermanyAnna Fali NEW
Ivar PaprockiSpainElwin Sharvill QUALIFIED
Julie StensethBrazilElwin Sharvill UNQUALIFIED
Munro FerenczFranceElwin Sharvill NEGOTIATION
Isabel BowleyArgentinaIvan Magalhaes UNQUALIFIED
Maria MarrierUnited KingdomOnyama Limba NEGOTIATION
Faith GillianCanadaOnyama Limba NEW
Aditya KuskoSpainAnna Fali UNQUALIFIED
Antonio CaudyIndiaAnna Fali NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Kaitlin OstroskyIndiaAsiya Javayant QUALIFIED
Leja CaldareraFranceAmy Elsner RENEWAL
Rodrigues CampainFranceAmy Elsner UNQUALIFIED
Costa DilliardArgentinaXuxue Feng QUALIFIED
Leja CaldareraBrazilBernardo Dominic PROPOSAL
Ashley DoeAustraliaStephen Shaw PROPOSAL
Aruna FigeroaGermanyIoni Bowcher RENEWAL
Aika InouyeCanadaAsiya Javayant NEGOTIATION
Murillo MaletRussiaElwin Sharvill RENEWAL
Ricardo GauchoJapanAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jennifer AmigonCanada2026-04-30Commercial Press NEGOTIATION67Xuxue Feng
1001Alejandro PerinCanada2026-05-11Commercial Press QUALIFIED20Anna Fali
1002Morrow RutaJapan2026-04-20Rousseaux, Michael Esq NEGOTIATION78Anna Fali
1003Octavia MaletGermany2026-05-06Printing Dimensions NEW95Asiya Javayant
1004Jefferson SchemmerItaly2026-04-25Buckley Miller Wright PROPOSAL6Elwin Sharvill
1005Aika InouyeIndia2026-04-29Feiner Bros QUALIFIED24Onyama Limba
1006Sinclair WaycottArgentina2026-04-18Dorl, James J Esq PROPOSAL42Xuxue Feng
1007Antonio CaudyBrazil2026-04-30Printing Dimensions UNQUALIFIED83Bernardo Dominic
1008Darci PoquetteAustralia2026-04-19Feiner Bros NEGOTIATION69Ioni Bowcher
1009Silvio SlusarskiIndia2026-05-11Dorl, James J Esq NEGOTIATION3Asiya Javayant
1010Francesco ShinkoCanada2026-04-20Rousseaux, Michael Esq UNQUALIFIED61Elwin Sharvill
1011Deepesh ChuiJapan2026-04-23Rousseaux, Michael Esq NEW93Anna Fali
1012Kadeem FlosiArgentina2026-04-15Rangoni Of Florence UNQUALIFIED4Stephen Shaw
1013Arvin AlbaresFrance2026-05-04Truhlar And Truhlar Attys QUALIFIED41Onyama Limba
1014Leon OldroydAustralia2026-05-12Rousseaux, Michael Esq NEGOTIATION17Onyama Limba
1015Kaitlin OstroskyIndia2026-04-16Morlong Associates PROPOSAL57Stephen Shaw
1016Aika InouyeCanada2026-04-30King, Christopher A Esq NEW66Xuxue Feng
1017Arvin AlbaresIndia2026-05-01Printing Dimensions NEW82Anna Fali
1018Ashley DoeAustralia2026-04-16Buckley Miller Wright PROPOSAL20Ivan Magalhaes
1019Julie StensethGermany2026-04-20Morlong Associates QUALIFIED0Anna Fali
1020Costa DilliardJapan2026-04-17Morlong Associates NEGOTIATION62Xuxue Feng
1021Adams MorascaCanada2026-04-17Rousseaux, Michael Esq RENEWAL96Stephen Shaw
1022Tony FollerCanada2026-04-20Chapman, Ross E Esq PROPOSAL31Ivan Magalhaes
1023Salvatore StockhamJapan2026-04-18Printing Dimensions NEGOTIATION41Bernardo Dominic
1024Silvio SlusarskiFrance2026-05-09Buckley Miller Wright NEGOTIATION7Ioni Bowcher
1025Julie StensethUnited Kingdom2026-04-17Morlong Associates NEGOTIATION68Bernardo Dominic
1026Cody SaylorsGermany2026-05-10Chanay, Jeffrey A Esq NEGOTIATION35Stephen Shaw
1027Julie StensethCanada2026-05-10Commercial Press PROPOSAL41Xuxue Feng
1028Ricardo GauchoRussia2026-04-27Commercial Press RENEWAL73Ivan Magalhaes
1029Jones VocelkaGermany2026-05-13Feiner Bros NEW63Stephen Shaw
1030Kaitlin OstroskyJapan2026-04-22Dorl, James J Esq UNQUALIFIED95Ioni Bowcher
1031Morrow RutaBrazil2026-05-07Feltz Printing Service RENEWAL10Stephen Shaw
1032Smith GlickUnited Kingdom2026-05-02Dorl, James J Esq UNQUALIFIED37Bernardo Dominic
1033Greenwood BologniaUnited Kingdom2026-05-09Rangoni Of Florence NEW7Anna Fali
1034Salvatore StockhamItaly2026-04-27Morlong Associates QUALIFIED11Amy Elsner
1035Izzy GarufiIndia2026-04-28Rousseaux, Michael Esq PROPOSAL79Elwin Sharvill
1036Darci PoquetteGermany2026-04-25Buckley Miller Wright PROPOSAL87Ivan Magalhaes
1037Claire TollnerAustralia2026-04-18Truhlar And Truhlar Attys UNQUALIFIED93Ioni Bowcher
1038James ButtItaly2026-04-19Dorl, James J Esq NEGOTIATION99Stephen Shaw
1039Ricardo GauchoItaly2026-05-06Buckley Miller Wright UNQUALIFIED88Bernardo Dominic
1040Salvatore StockhamJapan2026-05-08Dorl, James J Esq UNQUALIFIED58Elwin Sharvill
1041Leon OldroydSpain2026-04-28Chemel, James L Cpa QUALIFIED55Elwin Sharvill
1042Adams MorascaArgentina2026-04-17Printing Dimensions NEGOTIATION32Ivan Magalhaes
1043Isabel BowleyCanada2026-04-22Rangoni Of Florence NEGOTIATION51Amy Elsner
1044Maria MarrierFrance2026-04-23King, Christopher A Esq RENEWAL50Ioni Bowcher
1045Silvio SlusarskiRussia2026-04-17Printing Dimensions NEW90Asiya Javayant
1046Francesco ShinkoJapan2026-04-28Chapman, Ross E Esq NEW66Onyama Limba
1047Murillo MaletUnited Kingdom2026-04-24Feiner Bros UNQUALIFIED46Stephen Shaw
1048Nicolas IturbideGermany2026-04-27Commercial Press RENEWAL74Ivan Magalhaes
1049Antonio CaudyJapan2026-05-06Commercial Press NEGOTIATION84Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Jefferson SchemmerArgentinaIvan Magalhaes NEW
David DarakjySpainIoni Bowcher UNQUALIFIED
Ashley DoeAustraliaAnna Fali QUALIFIED
Silvio SlusarskiGermanyBernardo Dominic QUALIFIED
Maisha RulapaughIndiaAmy Elsner QUALIFIED
Jennifer AmigonAustraliaAmy Elsner QUALIFIED
Antonio CaudyItalyXuxue Feng RENEWAL
Ivar PaprockiFranceStephen Shaw UNQUALIFIED
Silvio SlusarskiUnited KingdomStephen Shaw RENEWAL
Silvio SlusarskiItalyAmy Elsner NEGOTIATION
Misaki RoysterRussiaBernardo Dominic NEW
Octavia MaletIndiaBernardo Dominic NEGOTIATION
Octavia MaletFranceElwin Sharvill PROPOSAL
Darci PoquetteCanadaIvan Magalhaes UNQUALIFIED
Claire TollnerJapanElwin Sharvill PROPOSAL
Ricardo GauchoAustraliaStephen Shaw NEW
Faith GillianIndiaIvan Magalhaes UNQUALIFIED
Misaki RoysterAustraliaStephen Shaw PROPOSAL
Johnson SergiRussiaOnyama Limba NEW
Faith GillianAustraliaOnyama Limba QUALIFIED
Greenwood BologniaUnited KingdomXuxue Feng RENEWAL
Mujtaba NickaIndiaStephen Shaw PROPOSAL
Aruna FigeroaIndiaAsiya Javayant NEW
Johnson SergiUnited KingdomOnyama Limba NEW
Arvin AlbaresGermanyOnyama Limba QUALIFIED
Mujtaba NickaItalyElwin Sharvill PROPOSAL
Maisha RulapaughUnited KingdomIoni Bowcher RENEWAL
Murillo MaletAustraliaXuxue Feng PROPOSAL
Adams MorascaBrazilAsiya Javayant PROPOSAL
Munro FerenczFranceIvan Magalhaes PROPOSAL
Francesco ShinkoCanadaIvan Magalhaes QUALIFIED
Arvin AlbaresCanadaXuxue Feng RENEWAL
Antonio CaudyAustraliaBernardo Dominic NEGOTIATION
Jennifer AmigonIndiaIvan Magalhaes UNQUALIFIED
Cody SaylorsSpainAmy Elsner NEGOTIATION
Izzy GarufiItalyIvan Magalhaes NEGOTIATION
Isabel BowleyBrazilAmy Elsner RENEWAL
Wickens NestleGermanyIoni Bowcher UNQUALIFIED
Darci PoquetteArgentinaAnna Fali UNQUALIFIED
Morrow RutaSpainXuxue Feng QUALIFIED
Clifford RimUnited KingdomIoni Bowcher PROPOSAL
Jefferson SchemmerRussiaIvan Magalhaes UNQUALIFIED
Antonio CaudyCanadaElwin Sharvill QUALIFIED
Leja CaldareraFranceOnyama Limba PROPOSAL
James ButtRussiaIoni Bowcher PROPOSAL
Munro FerenczRussiaIvan Magalhaes NEW
Julie StensethFranceAsiya Javayant NEW
Jennifer AmigonUnited KingdomOnyama Limba NEGOTIATION
Chavez BriddickFranceOnyama Limba NEW
Maisha RulapaughBrazilOnyama Limba QUALIFIED
Frozen Columns
Name
Nicolas Iturbide
Jones Vocelka
Stacey Maclead
Costa Dilliard
Aruna Figeroa
Rodrigues Campain
Munro Ferencz
Francesco Shinko
Rodrigues Campain
Kaitlin Ostrosky
Munro Ferencz
Ricardo Gaucho
Chavez Briddick
Misaki Royster
Ricardo Gaucho
Julie Stenseth
David Darakjy
Costa Dilliard
Kaitlin Ostrosky
Ashley Doe
Julie Stenseth
Wickens Nestle
Emily Whobrey
Johnson Sergi
Wickens Nestle
Smith Glick
Darci Poquette
Deepesh Chui
Emily Whobrey
Costa Dilliard
Tony Foller
Juan Wieser
Jennifer Amigon
Leon Oldroyd
Octavia Malet
Wickens Nestle
Ricardo Gaucho
Ivar Paprocki
Munro Ferencz
Ivar Paprocki
Faith Gillian
Kaitlin Ostrosky
Morrow Ruta
Mujtaba Nicka
Francesco Shinko
Arvin Albares
Nicolas Iturbide
Jones Vocelka
Octavia Malet
Jefferson Schemmer
IdCountryDate
1000Germany2026-04-30
1001France2026-04-26
1002Spain2026-04-26
1003Canada2026-04-19
1004Germany2026-04-22
1005Canada2026-04-17
1006Spain2026-04-18
1007Spain2026-04-29
1008Brazil2026-05-04
1009Japan2026-04-16
1010Spain2026-05-09
1011Germany2026-05-06
1012Russia2026-05-12
1013Australia2026-05-13
1014Russia2026-04-20
1015Canada2026-04-25
1016France2026-05-07
1017United Kingdom2026-05-08
1018Argentina2026-04-16
1019Japan2026-05-10
1020India2026-04-16
1021France2026-04-26
1022France2026-04-28
1023Italy2026-05-02
1024Canada2026-05-11
1025Argentina2026-04-21
1026Canada2026-05-04
1027Canada2026-05-04
1028Russia2026-05-11
1029Spain2026-04-30
1030Spain2026-04-22
1031Spain2026-05-03
1032Spain2026-04-14
1033Argentina2026-05-01
1034India2026-05-01
1035Germany2026-04-25
1036Russia2026-05-03
1037Italy2026-04-17
1038Italy2026-04-29
1039France2026-04-20
1040Australia2026-04-16
1041France2026-05-03
1042Japan2026-04-20
1043Spain2026-05-13
1044Brazil2026-04-18
1045Germany2026-04-18
1046Argentina2026-05-07
1047Spain2026-04-23
1048Russia2026-04-20
1049Italy2026-05-12

On-Demand Data

NameIdCountryDate
Munro Ferencz1000France2026-05-02
Silvio Slusarski1001Spain2026-05-08
Morrow Ruta1002India2026-05-06
Isabel Bowley1003Australia2026-04-15
Kaitlin Ostrosky1004France2026-04-15
Alejandro Perin1005Russia2026-04-25
Wickens Nestle1006Brazil2026-04-30
Julie Stenseth1007Spain2026-04-14
Tony Foller1008Russia2026-05-04
Salvatore Stockham1009United Kingdom2026-04-30
Chavez Briddick1010Russia2026-04-21
Maisha Rulapaugh1011Brazil2026-05-06
Jones Vocelka1012United Kingdom2026-04-27
Deepesh Chui1013Argentina2026-04-28
Rodrigues Campain1014Brazil2026-04-21
Chavez Briddick1015Japan2026-05-02
Maria Marrier1016Australia2026-05-08
Deepesh Chui1017United Kingdom2026-05-02
Leon Oldroyd1018Italy2026-04-15
Jefferson Schemmer1019Russia2026-04-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aditya KuskoFranceAmy Elsner PROPOSAL
Sinclair WaycottSpainBernardo Dominic PROPOSAL
Aruna FigeroaIndiaStephen Shaw NEGOTIATION
Silvio SlusarskiItalyAmy Elsner PROPOSAL
Maria MarrierGermanyIoni Bowcher PROPOSAL
Ricardo GauchoAustraliaAsiya Javayant PROPOSAL
Darci PoquetteItalyAsiya Javayant NEGOTIATION
Misaki RoysterRussiaAmy Elsner PROPOSAL
Misaki RoysterItalyAsiya Javayant NEGOTIATION
Misaki RoysterItalyStephen Shaw PROPOSAL
Cody SaylorsSpainStephen Shaw NEGOTIATION
Chavez BriddickSpainAnna Fali NEGOTIATION
Maria MarrierRussiaAsiya Javayant QUALIFIED
Faith GillianAustraliaStephen Shaw PROPOSAL
Antonio CaudyBrazilStephen Shaw PROPOSAL
Izzy GarufiCanadaOnyama Limba UNQUALIFIED
Octavia MaletArgentinaIoni Bowcher NEW
Wickens NestleGermanyXuxue Feng QUALIFIED
Johnson SergiItalyAsiya Javayant PROPOSAL
Maria MarrierUnited KingdomStephen Shaw NEGOTIATION
Leon OldroydItalyBernardo Dominic NEW
Sinclair WaycottGermanyBernardo Dominic NEGOTIATION
Mayumi KolmetzIndiaAsiya Javayant QUALIFIED
Johnson SergiItalyAmy Elsner NEW
Izzy GarufiUnited KingdomAmy Elsner UNQUALIFIED
Leon OldroydFranceAsiya Javayant NEW
Aika InouyeJapanAsiya Javayant QUALIFIED
Juan WieserCanadaXuxue Feng UNQUALIFIED
Cody SaylorsAustraliaIvan Magalhaes NEW
Rodrigues CampainRussiaAnna Fali RENEWAL
Izzy GarufiSpainIvan Magalhaes QUALIFIED
Ricardo GauchoSpainAsiya Javayant RENEWAL
Mayumi KolmetzFranceAnna Fali NEGOTIATION
Emily WhobreyItalyAmy Elsner RENEWAL
Maisha RulapaughIndiaAmy Elsner NEGOTIATION
Leon OldroydJapanAnna Fali QUALIFIED
Maria MarrierBrazilStephen Shaw QUALIFIED
Costa DilliardCanadaIoni Bowcher QUALIFIED
Clifford RimJapanBernardo Dominic UNQUALIFIED
Greenwood BologniaJapanBernardo Dominic 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>