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 AlbaresRussiaAsiya Javayant RENEWAL
Misaki RoysterIndiaAnna Fali RENEWAL
Salvatore StockhamJapanIoni Bowcher RENEWAL
Jefferson SchemmerJapanOnyama Limba PROPOSAL
Maria MarrierItalyIvan Magalhaes RENEWAL
Francesco ShinkoUnited KingdomElwin Sharvill PROPOSAL
Ricardo GauchoRussiaElwin Sharvill QUALIFIED
Jones VocelkaFranceIvan Magalhaes UNQUALIFIED
Ricardo GauchoUnited KingdomAsiya Javayant RENEWAL
Octavia MaletCanadaOnyama Limba PROPOSAL
Smith GlickFranceIvan Magalhaes NEGOTIATION
Salvatore StockhamFranceAsiya Javayant UNQUALIFIED
Ricardo GauchoIndiaAmy Elsner RENEWAL
Costa DilliardIndiaBernardo Dominic NEW
Maria MarrierRussiaAsiya Javayant QUALIFIED
Ivar PaprockiFranceBernardo Dominic NEGOTIATION
Munro FerenczAustraliaAmy Elsner NEW
Alejandro PerinUnited KingdomAmy Elsner QUALIFIED
Maria MarrierItalyAnna Fali QUALIFIED
Rodrigues CampainBrazilBernardo Dominic RENEWAL
Julie StensethIndiaXuxue Feng QUALIFIED
Alejandro PerinSpainElwin Sharvill PROPOSAL
Mujtaba NickaUnited KingdomXuxue Feng UNQUALIFIED
Aditya KuskoUnited KingdomElwin Sharvill NEGOTIATION
Jefferson SchemmerGermanyBernardo Dominic NEW
Misaki RoysterRussiaBernardo Dominic NEW
Isabel BowleyIndiaStephen Shaw PROPOSAL
Nicolas IturbideAustraliaElwin Sharvill UNQUALIFIED
Sinclair WaycottRussiaBernardo Dominic QUALIFIED
Arvin AlbaresFranceBernardo Dominic NEGOTIATION
Izzy GarufiCanadaIvan Magalhaes PROPOSAL
Morrow RutaRussiaStephen Shaw NEGOTIATION
Adams MorascaFranceElwin Sharvill NEW
Antonio CaudyGermanyOnyama Limba PROPOSAL
Jeanfrancois VenereIndiaAsiya Javayant RENEWAL
Ricardo GauchoIndiaAsiya Javayant UNQUALIFIED
Costa DilliardFranceXuxue Feng RENEWAL
Ricardo GauchoSpainIoni Bowcher NEW
Mujtaba NickaItalyIvan Magalhaes PROPOSAL
Emily WhobreyBrazilIvan Magalhaes RENEWAL
Ashley DoeCanadaStephen Shaw NEGOTIATION
Smith GlickSpainElwin Sharvill PROPOSAL
Smith GlickItalyAnna Fali QUALIFIED
Jefferson SchemmerBrazilElwin Sharvill PROPOSAL
Izzy GarufiArgentinaXuxue Feng QUALIFIED
Ricardo GauchoFranceBernardo Dominic NEGOTIATION
Faith GillianRussiaAnna Fali PROPOSAL
Cody SaylorsItalyAsiya Javayant RENEWAL
Arvin AlbaresCanadaIoni Bowcher UNQUALIFIED
Johnson SergiRussiaIoni Bowcher RENEWAL
Horizontal
NameCountryRepresentativeStatus
Johnson SergiItalyIvan Magalhaes NEW
Tony FollerJapanBernardo Dominic PROPOSAL
Adams MorascaJapanBernardo Dominic PROPOSAL
Clifford RimBrazilAnna Fali PROPOSAL
Izzy GarufiUnited KingdomIvan Magalhaes UNQUALIFIED
Maisha RulapaughBrazilAsiya Javayant PROPOSAL
Rodrigues CampainIndiaIvan Magalhaes RENEWAL
Cody SaylorsIndiaElwin Sharvill RENEWAL
Aruna FigeroaGermanyXuxue Feng NEW
Nicolas IturbideSpainIoni Bowcher NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000David DarakjyAustralia2026-05-31Dorl, James J Esq QUALIFIED85Ioni Bowcher
1001Francesco ShinkoRussia2026-05-13Chanay, Jeffrey A Esq PROPOSAL81Amy Elsner
1002Mujtaba NickaAustralia2026-05-18Rangoni Of Florence UNQUALIFIED55Ivan Magalhaes
1003Kaitlin OstroskyItaly2026-06-05Rousseaux, Michael Esq RENEWAL36Bernardo Dominic
1004Salvatore StockhamCanada2026-05-18King, Christopher A Esq QUALIFIED76Anna Fali
1005Darci PoquetteAustralia2026-05-30King, Christopher A Esq NEW2Ioni Bowcher
1006Izzy GarufiArgentina2026-05-25Rousseaux, Michael Esq PROPOSAL2Ivan Magalhaes
1007Cody SaylorsJapan2026-05-31Truhlar And Truhlar Attys QUALIFIED16Stephen Shaw
1008Clifford RimJapan2026-05-18King, Christopher A Esq UNQUALIFIED68Onyama Limba
1009Chavez BriddickJapan2026-05-25Chanay, Jeffrey A Esq NEGOTIATION86Asiya Javayant
1010Jennifer AmigonArgentina2026-05-24Rousseaux, Michael Esq UNQUALIFIED2Ioni Bowcher
1011Julie StensethFrance2026-05-11Dorl, James J Esq NEGOTIATION4Asiya Javayant
1012Johnson SergiIndia2026-05-28Feiner Bros QUALIFIED45Amy Elsner
1013Emily WhobreyArgentina2026-05-30Feiner Bros PROPOSAL19Stephen Shaw
1014Stacey MacleadFrance2026-05-29Truhlar And Truhlar Attys NEGOTIATION63Anna Fali
1015Maria MarrierArgentina2026-05-28Chemel, James L Cpa RENEWAL19Asiya Javayant
1016Aika InouyeCanada2026-06-03King, Christopher A Esq UNQUALIFIED58Ioni Bowcher
1017Maisha RulapaughItaly2026-06-04Rousseaux, Michael Esq PROPOSAL80Bernardo Dominic
1018Darci PoquetteItaly2026-05-14Chanay, Jeffrey A Esq NEW3Bernardo Dominic
1019Aruna FigeroaItaly2026-05-26Chanay, Jeffrey A Esq RENEWAL63Ivan Magalhaes
1020Leon OldroydItaly2026-05-11Rangoni Of Florence RENEWAL66Onyama Limba
1021Stacey MacleadIndia2026-05-08Morlong Associates UNQUALIFIED74Xuxue Feng
1022Johnson SergiFrance2026-05-27King, Christopher A Esq UNQUALIFIED66Ioni Bowcher
1023Aika InouyeItaly2026-05-15Printing Dimensions NEGOTIATION82Ioni Bowcher
1024James ButtArgentina2026-05-26Printing Dimensions UNQUALIFIED23Onyama Limba
1025Johnson SergiIndia2026-05-09Chapman, Ross E Esq RENEWAL1Bernardo Dominic
1026Arvin AlbaresGermany2026-05-12Buckley Miller Wright RENEWAL78Asiya Javayant
1027Silvio SlusarskiFrance2026-05-07Dorl, James J Esq RENEWAL40Ioni Bowcher
1028Aruna FigeroaFrance2026-05-07Truhlar And Truhlar Attys UNQUALIFIED10Onyama Limba
1029Faith GillianRussia2026-05-17Commercial Press UNQUALIFIED32Ivan Magalhaes
1030Jones VocelkaFrance2026-05-22Benton, John B Jr RENEWAL12Asiya Javayant
1031Francesco ShinkoGermany2026-06-01Morlong Associates NEW45Elwin Sharvill
1032Emily WhobreyCanada2026-05-16Commercial Press NEGOTIATION62Ioni Bowcher
1033Izzy GarufiGermany2026-05-25Feltz Printing Service UNQUALIFIED71Bernardo Dominic
1034Murillo MaletFrance2026-05-26Benton, John B Jr NEW33Onyama Limba
1035James ButtSpain2026-05-09Feiner Bros PROPOSAL69Onyama Limba
1036James ButtIndia2026-05-21Rangoni Of Florence NEGOTIATION24Ivan Magalhaes
1037Aruna FigeroaArgentina2026-05-26Rangoni Of Florence PROPOSAL0Anna Fali
1038Wickens NestleItaly2026-05-14Rangoni Of Florence UNQUALIFIED67Asiya Javayant
1039Leon OldroydSpain2026-05-18Chapman, Ross E Esq NEW58Stephen Shaw
1040Tony FollerFrance2026-05-31Truhlar And Truhlar Attys PROPOSAL19Ivan Magalhaes
1041Isabel BowleyFrance2026-05-23Chanay, Jeffrey A Esq NEW45Asiya Javayant
1042Izzy GarufiArgentina2026-05-20Buckley Miller Wright NEW91Asiya Javayant
1043Greenwood BologniaJapan2026-05-10Dorl, James J Esq NEGOTIATION11Onyama Limba
1044Ivar PaprockiArgentina2026-05-14Printing Dimensions PROPOSAL96Elwin Sharvill
1045Johnson SergiIndia2026-05-12Morlong Associates RENEWAL87Stephen Shaw
1046Jefferson SchemmerSpain2026-06-01Feltz Printing Service UNQUALIFIED1Elwin Sharvill
1047Jones VocelkaUnited Kingdom2026-05-15Printing Dimensions NEW7Elwin Sharvill
1048Adams MorascaCanada2026-05-14Morlong Associates RENEWAL22Stephen Shaw
1049James ButtJapan2026-06-03Chemel, James L Cpa NEGOTIATION50Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Ivar PaprockiJapanAsiya Javayant NEW
Maisha RulapaughArgentinaAnna Fali UNQUALIFIED
Murillo MaletRussiaAmy Elsner NEW
Octavia MaletFranceElwin Sharvill NEGOTIATION
Wickens NestleSpainXuxue Feng PROPOSAL
Smith GlickItalyAnna Fali QUALIFIED
Nicolas IturbideRussiaAmy Elsner PROPOSAL
Cody SaylorsArgentinaAmy Elsner QUALIFIED
Clifford RimFranceAnna Fali RENEWAL
David DarakjyArgentinaXuxue Feng QUALIFIED
Johnson SergiIndiaBernardo Dominic NEW
Salvatore StockhamCanadaOnyama Limba QUALIFIED
Aika InouyeIndiaOnyama Limba RENEWAL
Emily WhobreyGermanyIvan Magalhaes RENEWAL
Francesco ShinkoItalyAsiya Javayant UNQUALIFIED
Alejandro PerinAustraliaBernardo Dominic QUALIFIED
Maria MarrierJapanOnyama Limba QUALIFIED
Leon OldroydFranceIoni Bowcher NEGOTIATION
Morrow RutaSpainAnna Fali UNQUALIFIED
Mujtaba NickaItalyXuxue Feng RENEWAL
Misaki RoysterJapanIoni Bowcher QUALIFIED
Juan WieserFranceBernardo Dominic UNQUALIFIED
Jennifer AmigonIndiaAmy Elsner NEW
Leja CaldareraUnited KingdomIvan Magalhaes NEGOTIATION
Jones VocelkaUnited KingdomIoni Bowcher QUALIFIED
Misaki RoysterUnited KingdomIvan Magalhaes QUALIFIED
Mujtaba NickaRussiaIvan Magalhaes NEW
Alejandro PerinCanadaElwin Sharvill NEW
Stacey MacleadCanadaAmy Elsner NEW
Johnson SergiSpainElwin Sharvill NEW
Jones VocelkaSpainBernardo Dominic QUALIFIED
Chavez BriddickBrazilIoni Bowcher RENEWAL
Leja CaldareraAustraliaStephen Shaw UNQUALIFIED
Leja CaldareraArgentinaStephen Shaw PROPOSAL
Costa DilliardBrazilAnna Fali QUALIFIED
Kadeem FlosiGermanyStephen Shaw NEW
Jennifer AmigonCanadaXuxue Feng NEW
Stacey MacleadRussiaBernardo Dominic QUALIFIED
Deepesh ChuiFranceOnyama Limba NEGOTIATION
Aditya KuskoUnited KingdomAnna Fali PROPOSAL
Aruna FigeroaCanadaBernardo Dominic PROPOSAL
Rodrigues CampainAustraliaElwin Sharvill QUALIFIED
Leja CaldareraAustraliaIoni Bowcher UNQUALIFIED
Jennifer AmigonRussiaAmy Elsner NEGOTIATION
Adams MorascaGermanyIoni Bowcher QUALIFIED
Deepesh ChuiJapanOnyama Limba NEW
Ricardo GauchoArgentinaAsiya Javayant RENEWAL
Claire TollnerUnited KingdomBernardo Dominic QUALIFIED
Darci PoquetteArgentinaXuxue Feng NEW
Isabel BowleyAustraliaIvan Magalhaes RENEWAL
Frozen Columns
Name
Kadeem Flosi
James Butt
Claire Tollner
Johnson Sergi
Alejandro Perin
Izzy Garufi
Leon Oldroyd
Francesco Shinko
Jeanfrancois Venere
Munro Ferencz
Mayumi Kolmetz
Ashley Doe
Chavez Briddick
Mayumi Kolmetz
Tony Foller
Stacey Maclead
Sinclair Waycott
Izzy Garufi
Clifford Rim
Adams Morasca
Juan Wieser
Wickens Nestle
Jennifer Amigon
Leon Oldroyd
Faith Gillian
Jeanfrancois Venere
Stacey Maclead
Morrow Ruta
Jeanfrancois Venere
Aika Inouye
Octavia Malet
Arvin Albares
Ashley Doe
Leja Caldarera
Johnson Sergi
Greenwood Bolognia
Kadeem Flosi
Greenwood Bolognia
Aditya Kusko
Chavez Briddick
Cody Saylors
Mujtaba Nicka
Chavez Briddick
Clifford Rim
Ivar Paprocki
Leon Oldroyd
Maria Marrier
Costa Dilliard
Juan Wieser
Arvin Albares
IdCountryDate
1000United Kingdom2026-05-16
1001Japan2026-05-11
1002Japan2026-05-17
1003Italy2026-06-03
1004Canada2026-05-20
1005Brazil2026-05-24
1006Germany2026-05-07
1007Russia2026-06-04
1008United Kingdom2026-06-02
1009Germany2026-05-11
1010Russia2026-05-14
1011Brazil2026-05-24
1012Japan2026-05-12
1013Argentina2026-05-10
1014Germany2026-06-05
1015Spain2026-05-10
1016Canada2026-05-24
1017Brazil2026-05-19
1018Germany2026-05-15
1019Japan2026-05-10
1020France2026-05-22
1021Russia2026-06-05
1022India2026-05-22
1023France2026-05-23
1024Argentina2026-05-07
1025Canada2026-05-09
1026Brazil2026-06-03
1027Russia2026-05-12
1028Canada2026-05-15
1029Argentina2026-05-29
1030Australia2026-05-07
1031United Kingdom2026-05-29
1032Australia2026-05-09
1033Russia2026-05-15
1034Japan2026-05-19
1035Brazil2026-05-08
1036Japan2026-05-27
1037Brazil2026-05-19
1038India2026-05-22
1039France2026-05-22
1040Canada2026-06-04
1041Italy2026-05-29
1042Germany2026-05-29
1043Japan2026-06-05
1044Spain2026-06-03
1045United Kingdom2026-05-28
1046Argentina2026-06-03
1047Italy2026-05-29
1048Italy2026-05-31
1049France2026-05-10

On-Demand Data

NameIdCountryDate
Alejandro Perin1000Japan2026-05-24
Kaitlin Ostrosky1001Spain2026-05-23
Darci Poquette1002Italy2026-05-21
Arvin Albares1003Germany2026-05-28
Clifford Rim1004United Kingdom2026-06-01
Johnson Sergi1005Italy2026-05-12
Misaki Royster1006Canada2026-05-10
Ashley Doe1007Australia2026-05-27
Stacey Maclead1008Japan2026-05-12
Aditya Kusko1009Australia2026-05-25
Leon Oldroyd1010Germany2026-05-26
Izzy Garufi1011Spain2026-05-25
Jennifer Amigon1012India2026-06-03
Arvin Albares1013United Kingdom2026-05-11
Mayumi Kolmetz1014Brazil2026-05-13
Wickens Nestle1015India2026-05-12
Misaki Royster1016Spain2026-05-16
Misaki Royster1017Brazil2026-05-19
Octavia Malet1018United Kingdom2026-05-18
Morrow Ruta1019Japan2026-05-09
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Greenwood BologniaJapanIvan Magalhaes NEW
Greenwood BologniaJapanOnyama Limba NEW
Silvio SlusarskiItalyStephen Shaw UNQUALIFIED
Costa DilliardJapanOnyama Limba PROPOSAL
Leja CaldareraIndiaAnna Fali PROPOSAL
Morrow RutaRussiaAmy Elsner NEW
Tony FollerCanadaIoni Bowcher QUALIFIED
Mayumi KolmetzUnited KingdomIvan Magalhaes NEW
Maria MarrierAustraliaStephen Shaw UNQUALIFIED
Morrow RutaItalyElwin Sharvill UNQUALIFIED
Maria MarrierAustraliaElwin Sharvill PROPOSAL
Francesco ShinkoAustraliaAsiya Javayant PROPOSAL
Misaki RoysterItalyStephen Shaw UNQUALIFIED
Antonio CaudyUnited KingdomIoni Bowcher QUALIFIED
Adams MorascaBrazilStephen Shaw RENEWAL
David DarakjyArgentinaAmy Elsner UNQUALIFIED
Rodrigues CampainRussiaXuxue Feng NEGOTIATION
Isabel BowleyBrazilIoni Bowcher UNQUALIFIED
Chavez BriddickSpainBernardo Dominic RENEWAL
Arvin AlbaresSpainAnna Fali QUALIFIED
Rodrigues CampainCanadaXuxue Feng UNQUALIFIED
Murillo MaletArgentinaStephen Shaw RENEWAL
Emily WhobreyCanadaIoni Bowcher UNQUALIFIED
Darci PoquetteUnited KingdomAsiya Javayant PROPOSAL
Ivar PaprockiGermanyXuxue Feng NEGOTIATION
Izzy GarufiIndiaXuxue Feng NEW
Ashley DoeItalyAnna Fali UNQUALIFIED
Greenwood BologniaSpainElwin Sharvill NEW
Leon OldroydFranceIvan Magalhaes NEW
Kaitlin OstroskySpainAmy Elsner UNQUALIFIED
Smith GlickUnited KingdomBernardo Dominic PROPOSAL
Maisha RulapaughAustraliaIvan Magalhaes PROPOSAL
Tony FollerRussiaOnyama Limba QUALIFIED
Aditya KuskoIndiaOnyama Limba NEW
Octavia MaletGermanyIoni Bowcher PROPOSAL
Antonio CaudyFranceStephen Shaw PROPOSAL
Clifford RimAustraliaBernardo Dominic QUALIFIED
Maria MarrierBrazilIoni Bowcher PROPOSAL
Smith GlickJapanOnyama Limba RENEWAL
Maria MarrierBrazilIoni Bowcher 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>