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
Clifford RimRussiaElwin Sharvill NEW
Rodrigues CampainGermanyIoni Bowcher RENEWAL
Nicolas IturbideArgentinaIoni Bowcher RENEWAL
Emily WhobreyRussiaIvan Magalhaes RENEWAL
Jones VocelkaIndiaAsiya Javayant NEGOTIATION
Faith GillianGermanyAnna Fali PROPOSAL
Maria MarrierIndiaStephen Shaw UNQUALIFIED
Ivar PaprockiGermanyBernardo Dominic UNQUALIFIED
Francesco ShinkoArgentinaAsiya Javayant NEGOTIATION
Aika InouyeJapanIoni Bowcher PROPOSAL
Ivar PaprockiBrazilIoni Bowcher UNQUALIFIED
Alejandro PerinSpainAsiya Javayant NEW
Tony FollerCanadaBernardo Dominic PROPOSAL
Julie StensethItalyAmy Elsner QUALIFIED
Octavia MaletIndiaOnyama Limba PROPOSAL
Misaki RoysterBrazilXuxue Feng PROPOSAL
Silvio SlusarskiUnited KingdomIvan Magalhaes UNQUALIFIED
Francesco ShinkoGermanyIoni Bowcher PROPOSAL
Tony FollerAustraliaOnyama Limba NEW
Aruna FigeroaJapanAnna Fali QUALIFIED
Ashley DoeItalyBernardo Dominic RENEWAL
Munro FerenczFranceBernardo Dominic RENEWAL
Ashley DoeCanadaAmy Elsner NEW
Jefferson SchemmerAustraliaBernardo Dominic RENEWAL
Jeanfrancois VenereArgentinaXuxue Feng UNQUALIFIED
Clifford RimAustraliaAmy Elsner RENEWAL
Murillo MaletGermanyElwin Sharvill NEW
Juan WieserJapanAmy Elsner NEW
Ashley DoeCanadaIoni Bowcher RENEWAL
Alejandro PerinArgentinaBernardo Dominic RENEWAL
Antonio CaudyGermanyXuxue Feng PROPOSAL
Deepesh ChuiRussiaElwin Sharvill QUALIFIED
David DarakjySpainXuxue Feng NEGOTIATION
Claire TollnerArgentinaAmy Elsner NEGOTIATION
Ashley DoeFranceElwin Sharvill QUALIFIED
David DarakjyUnited KingdomXuxue Feng UNQUALIFIED
Deepesh ChuiUnited KingdomXuxue Feng QUALIFIED
Sinclair WaycottAustraliaAmy Elsner UNQUALIFIED
Emily WhobreyRussiaXuxue Feng NEW
Misaki RoysterCanadaElwin Sharvill QUALIFIED
Chavez BriddickBrazilOnyama Limba NEGOTIATION
Francesco ShinkoUnited KingdomStephen Shaw NEW
Antonio CaudyBrazilIvan Magalhaes UNQUALIFIED
Salvatore StockhamIndiaXuxue Feng RENEWAL
Arvin AlbaresGermanyAmy Elsner NEW
Johnson SergiIndiaIoni Bowcher RENEWAL
Isabel BowleyArgentinaOnyama Limba QUALIFIED
Morrow RutaAustraliaIvan Magalhaes NEGOTIATION
Salvatore StockhamIndiaOnyama Limba NEGOTIATION
Cody SaylorsCanadaBernardo Dominic NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Nicolas IturbideFranceIvan Magalhaes PROPOSAL
James ButtSpainXuxue Feng PROPOSAL
Claire TollnerIndiaAmy Elsner PROPOSAL
Jefferson SchemmerArgentinaBernardo Dominic RENEWAL
Arvin AlbaresCanadaStephen Shaw QUALIFIED
Faith GillianRussiaAmy Elsner RENEWAL
Isabel BowleyIndiaElwin Sharvill NEGOTIATION
Emily WhobreyCanadaAmy Elsner UNQUALIFIED
Stacey MacleadBrazilAmy Elsner QUALIFIED
Cody SaylorsUnited KingdomOnyama Limba QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickRussia2026-05-23Truhlar And Truhlar Attys RENEWAL26Bernardo Dominic
1001David DarakjyIndia2026-05-26Rousseaux, Michael Esq QUALIFIED66Anna Fali
1002Adams MorascaJapan2026-05-26Morlong Associates QUALIFIED58Stephen Shaw
1003Rodrigues CampainIndia2026-05-15Chanay, Jeffrey A Esq UNQUALIFIED4Onyama Limba
1004Murillo MaletGermany2026-06-05Truhlar And Truhlar Attys RENEWAL10Asiya Javayant
1005Nicolas IturbideItaly2026-05-30Commercial Press RENEWAL78Anna Fali
1006Sinclair WaycottJapan2026-05-14Buckley Miller Wright QUALIFIED90Elwin Sharvill
1007Chavez BriddickBrazil2026-05-30Benton, John B Jr PROPOSAL54Bernardo Dominic
1008Emily WhobreyAustralia2026-05-26Rangoni Of Florence UNQUALIFIED96Amy Elsner
1009Aditya KuskoUnited Kingdom2026-05-31Printing Dimensions NEW24Bernardo Dominic
1010Izzy GarufiUnited Kingdom2026-06-05Feltz Printing Service RENEWAL59Ivan Magalhaes
1011Jeanfrancois VenereGermany2026-06-04Chapman, Ross E Esq NEW7Anna Fali
1012Alejandro PerinBrazil2026-06-05Buckley Miller Wright NEW94Ivan Magalhaes
1013Jennifer AmigonUnited Kingdom2026-06-02King, Christopher A Esq QUALIFIED68Elwin Sharvill
1014Wickens NestleBrazil2026-05-28Commercial Press PROPOSAL1Elwin Sharvill
1015Murillo MaletCanada2026-06-04Rangoni Of Florence PROPOSAL93Ivan Magalhaes
1016Deepesh ChuiFrance2026-05-07Rangoni Of Florence NEGOTIATION31Onyama Limba
1017Maisha RulapaughSpain2026-05-23Printing Dimensions QUALIFIED64Elwin Sharvill
1018Stacey MacleadBrazil2026-05-11Benton, John B Jr NEW87Ivan Magalhaes
1019Salvatore StockhamBrazil2026-05-09Rousseaux, Michael Esq UNQUALIFIED96Xuxue Feng
1020Jones VocelkaRussia2026-05-29Feiner Bros NEW29Asiya Javayant
1021Mujtaba NickaArgentina2026-05-28Dorl, James J Esq QUALIFIED79Stephen Shaw
1022Isabel BowleyBrazil2026-05-11Benton, John B Jr PROPOSAL18Anna Fali
1023Faith GillianRussia2026-05-13Chapman, Ross E Esq PROPOSAL59Anna Fali
1024Kadeem FlosiRussia2026-05-12Rangoni Of Florence PROPOSAL18Ioni Bowcher
1025Izzy GarufiBrazil2026-05-27Rangoni Of Florence NEGOTIATION35Asiya Javayant
1026Kaitlin OstroskyJapan2026-05-14Truhlar And Truhlar Attys NEGOTIATION82Amy Elsner
1027Ivar PaprockiRussia2026-05-08Printing Dimensions QUALIFIED45Ivan Magalhaes
1028Greenwood BologniaBrazil2026-05-17Printing Dimensions PROPOSAL93Stephen Shaw
1029Deepesh ChuiBrazil2026-05-14Feltz Printing Service NEGOTIATION6Ioni Bowcher
1030Maria MarrierFrance2026-06-05Buckley Miller Wright NEGOTIATION6Ivan Magalhaes
1031Jennifer AmigonBrazil2026-06-04Buckley Miller Wright PROPOSAL69Stephen Shaw
1032Ivar PaprockiIndia2026-05-10Feltz Printing Service NEW34Ioni Bowcher
1033Adams MorascaItaly2026-05-19Benton, John B Jr NEW53Amy Elsner
1034Mujtaba NickaFrance2026-05-30Feiner Bros PROPOSAL32Elwin Sharvill
1035Deepesh ChuiCanada2026-05-29Benton, John B Jr QUALIFIED58Xuxue Feng
1036Maria MarrierIndia2026-05-30Morlong Associates UNQUALIFIED40Ioni Bowcher
1037Antonio CaudyFrance2026-05-16Printing Dimensions UNQUALIFIED36Asiya Javayant
1038Ricardo GauchoItaly2026-05-30King, Christopher A Esq QUALIFIED78Xuxue Feng
1039Costa DilliardFrance2026-05-10Commercial Press PROPOSAL49Xuxue Feng
1040Faith GillianRussia2026-05-09Morlong Associates QUALIFIED36Bernardo Dominic
1041Maria MarrierAustralia2026-05-20Dorl, James J Esq QUALIFIED3Ioni Bowcher
1042Julie StensethFrance2026-06-05Chapman, Ross E Esq RENEWAL86Anna Fali
1043Faith GillianArgentina2026-05-26Dorl, James J Esq PROPOSAL85Bernardo Dominic
1044Jones VocelkaFrance2026-05-24Feiner Bros NEGOTIATION80Elwin Sharvill
1045Smith GlickFrance2026-05-18Rousseaux, Michael Esq NEW28Bernardo Dominic
1046Greenwood BologniaAustralia2026-05-13Benton, John B Jr NEW35Amy Elsner
1047Adams MorascaItaly2026-06-05Commercial Press QUALIFIED9Stephen Shaw
1048Wickens NestleAustralia2026-05-09Feiner Bros PROPOSAL43Onyama Limba
1049Munro FerenczAustralia2026-05-08Chanay, Jeffrey A Esq QUALIFIED6Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Aika InouyeSpainAmy Elsner UNQUALIFIED
Sinclair WaycottCanadaElwin Sharvill UNQUALIFIED
Ashley DoeSpainXuxue Feng QUALIFIED
Morrow RutaCanadaOnyama Limba RENEWAL
Jeanfrancois VenereItalyStephen Shaw RENEWAL
Claire TollnerFranceStephen Shaw NEW
Octavia MaletIndiaAsiya Javayant RENEWAL
Deepesh ChuiGermanyAnna Fali UNQUALIFIED
Wickens NestleItalyAmy Elsner UNQUALIFIED
Wickens NestleAustraliaStephen Shaw UNQUALIFIED
Rodrigues CampainBrazilIoni Bowcher QUALIFIED
Costa DilliardItalyXuxue Feng RENEWAL
Maria MarrierArgentinaStephen Shaw NEGOTIATION
Clifford RimIndiaIvan Magalhaes RENEWAL
Leon OldroydUnited KingdomOnyama Limba UNQUALIFIED
Johnson SergiRussiaElwin Sharvill UNQUALIFIED
Juan WieserArgentinaAsiya Javayant NEGOTIATION
David DarakjyAustraliaStephen Shaw NEW
Octavia MaletItalyAsiya Javayant PROPOSAL
Alejandro PerinSpainOnyama Limba PROPOSAL
Maria MarrierUnited KingdomAnna Fali PROPOSAL
Stacey MacleadIndiaXuxue Feng RENEWAL
Tony FollerIndiaAnna Fali QUALIFIED
Francesco ShinkoFranceAsiya Javayant UNQUALIFIED
Maisha RulapaughUnited KingdomStephen Shaw NEGOTIATION
Jefferson SchemmerJapanBernardo Dominic PROPOSAL
Nicolas IturbideUnited KingdomAnna Fali NEW
Izzy GarufiRussiaAmy Elsner RENEWAL
Leon OldroydCanadaAnna Fali QUALIFIED
Jeanfrancois VenereUnited KingdomAsiya Javayant NEGOTIATION
Ivar PaprockiSpainAnna Fali QUALIFIED
Claire TollnerFranceAsiya Javayant RENEWAL
Mujtaba NickaGermanyAsiya Javayant QUALIFIED
Ashley DoeAustraliaAmy Elsner RENEWAL
James ButtSpainElwin Sharvill PROPOSAL
Izzy GarufiBrazilXuxue Feng QUALIFIED
Maisha RulapaughIndiaBernardo Dominic QUALIFIED
Ashley DoeJapanAnna Fali UNQUALIFIED
Stacey MacleadAustraliaBernardo Dominic QUALIFIED
Jones VocelkaGermanyStephen Shaw UNQUALIFIED
Silvio SlusarskiJapanIvan Magalhaes RENEWAL
Emily WhobreyBrazilIvan Magalhaes RENEWAL
Mayumi KolmetzGermanyAnna Fali QUALIFIED
Arvin AlbaresSpainBernardo Dominic UNQUALIFIED
Murillo MaletBrazilIvan Magalhaes UNQUALIFIED
Faith GillianCanadaIoni Bowcher QUALIFIED
Cody SaylorsFranceXuxue Feng PROPOSAL
Silvio SlusarskiJapanIvan Magalhaes PROPOSAL
Salvatore StockhamBrazilOnyama Limba RENEWAL
Aruna FigeroaBrazilOnyama Limba PROPOSAL
Frozen Columns
Name
Maisha Rulapaugh
Clifford Rim
Emily Whobrey
Nicolas Iturbide
Deepesh Chui
Maria Marrier
Kadeem Flosi
Wickens Nestle
Jennifer Amigon
Greenwood Bolognia
Aruna Figeroa
Darci Poquette
Adams Morasca
Darci Poquette
Deepesh Chui
Nicolas Iturbide
Jeanfrancois Venere
Misaki Royster
Francesco Shinko
Costa Dilliard
Mayumi Kolmetz
Nicolas Iturbide
Ashley Doe
Alejandro Perin
Ivar Paprocki
Jennifer Amigon
Misaki Royster
James Butt
Morrow Ruta
Antonio Caudy
Aditya Kusko
Aruna Figeroa
Claire Tollner
Greenwood Bolognia
Misaki Royster
Francesco Shinko
Johnson Sergi
Silvio Slusarski
Cody Saylors
Jennifer Amigon
Ivar Paprocki
Silvio Slusarski
Isabel Bowley
Silvio Slusarski
David Darakjy
Tony Foller
Jeanfrancois Venere
Jeanfrancois Venere
Octavia Malet
Salvatore Stockham
IdCountryDate
1000France2026-05-20
1001Argentina2026-05-26
1002Spain2026-05-29
1003Japan2026-05-07
1004France2026-05-07
1005Brazil2026-05-26
1006Italy2026-06-02
1007Germany2026-05-20
1008Germany2026-05-15
1009Japan2026-05-18
1010Spain2026-05-29
1011Argentina2026-05-15
1012Argentina2026-05-07
1013France2026-06-04
1014Spain2026-06-04
1015Canada2026-05-11
1016United Kingdom2026-05-11
1017Germany2026-05-07
1018Germany2026-05-09
1019Australia2026-05-22
1020Italy2026-06-03
1021Argentina2026-06-02
1022Canada2026-05-27
1023Argentina2026-05-16
1024India2026-05-27
1025Australia2026-05-07
1026United Kingdom2026-05-13
1027France2026-05-19
1028Italy2026-05-26
1029Germany2026-05-26
1030Japan2026-05-31
1031France2026-05-30
1032Russia2026-06-05
1033Spain2026-05-29
1034United Kingdom2026-05-18
1035Australia2026-05-13
1036Brazil2026-05-15
1037Italy2026-05-08
1038Germany2026-06-05
1039United Kingdom2026-05-25
1040Brazil2026-05-30
1041Brazil2026-06-01
1042Spain2026-05-19
1043Brazil2026-05-21
1044India2026-06-01
1045Australia2026-05-25
1046Italy2026-05-07
1047Canada2026-05-28
1048France2026-06-03
1049Brazil2026-05-08

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000United Kingdom2026-05-22
Darci Poquette1001France2026-05-14
Sinclair Waycott1002France2026-06-03
Munro Ferencz1003Germany2026-05-17
Jeanfrancois Venere1004United Kingdom2026-05-29
Nicolas Iturbide1005Canada2026-05-17
Sinclair Waycott1006United Kingdom2026-05-24
Leon Oldroyd1007Canada2026-05-27
Ashley Doe1008Brazil2026-05-13
Clifford Rim1009Brazil2026-05-13
Maria Marrier1010Spain2026-05-25
Ashley Doe1011Canada2026-06-01
Antonio Caudy1012Russia2026-05-13
Octavia Malet1013Germany2026-05-25
Clifford Rim1014Australia2026-05-21
Juan Wieser1015Argentina2026-05-21
Salvatore Stockham1016Canada2026-05-25
Stacey Maclead1017United Kingdom2026-05-18
Kaitlin Ostrosky1018Canada2026-05-22
Morrow Ruta1019Germany2026-05-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ivar PaprockiUnited KingdomAnna Fali PROPOSAL
Aika InouyeGermanyStephen Shaw RENEWAL
Julie StensethCanadaAmy Elsner PROPOSAL
David DarakjyRussiaBernardo Dominic UNQUALIFIED
Ricardo GauchoAustraliaAsiya Javayant QUALIFIED
Aditya KuskoArgentinaIoni Bowcher NEW
Sinclair WaycottSpainAsiya Javayant RENEWAL
Isabel BowleyRussiaIoni Bowcher UNQUALIFIED
Adams MorascaItalyAnna Fali RENEWAL
Octavia MaletSpainElwin Sharvill NEW
Aruna FigeroaCanadaStephen Shaw PROPOSAL
Misaki RoysterSpainAmy Elsner QUALIFIED
Faith GillianArgentinaAmy Elsner NEW
Adams MorascaGermanyElwin Sharvill NEGOTIATION
Emily WhobreyBrazilAmy Elsner RENEWAL
Misaki RoysterBrazilOnyama Limba UNQUALIFIED
Maria MarrierItalyStephen Shaw UNQUALIFIED
Salvatore StockhamRussiaAmy Elsner NEGOTIATION
Stacey MacleadCanadaIvan Magalhaes RENEWAL
Antonio CaudyItalyIoni Bowcher PROPOSAL
Maria MarrierFranceAnna Fali NEW
Arvin AlbaresUnited KingdomAnna Fali PROPOSAL
Wickens NestleAustraliaXuxue Feng NEGOTIATION
Sinclair WaycottItalyAmy Elsner RENEWAL
Deepesh ChuiFranceIoni Bowcher QUALIFIED
Arvin AlbaresCanadaIvan Magalhaes UNQUALIFIED
Kaitlin OstroskyJapanIoni Bowcher UNQUALIFIED
Maisha RulapaughItalyStephen Shaw NEW
Darci PoquetteGermanyOnyama Limba NEW
Mayumi KolmetzFranceAmy Elsner NEW
Silvio SlusarskiJapanOnyama Limba NEW
Ivar PaprockiGermanyIoni Bowcher NEGOTIATION
Francesco ShinkoJapanOnyama Limba NEW
Darci PoquetteIndiaXuxue Feng PROPOSAL
Rodrigues CampainSpainStephen Shaw UNQUALIFIED
Wickens NestleAustraliaIoni Bowcher NEGOTIATION
Maisha RulapaughAustraliaOnyama Limba NEW
Francesco ShinkoAustraliaAnna Fali NEGOTIATION
Aruna FigeroaBrazilAmy Elsner QUALIFIED
Jones VocelkaGermanyElwin Sharvill 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>