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
Jeanfrancois VenereArgentinaAnna Fali QUALIFIED
Faith GillianBrazilOnyama Limba RENEWAL
Silvio SlusarskiIndiaAnna Fali NEGOTIATION
Jefferson SchemmerBrazilAmy Elsner PROPOSAL
Jennifer AmigonArgentinaBernardo Dominic PROPOSAL
Maisha RulapaughCanadaElwin Sharvill PROPOSAL
Munro FerenczArgentinaOnyama Limba NEGOTIATION
Costa DilliardIndiaAmy Elsner NEW
Tony FollerBrazilIvan Magalhaes PROPOSAL
Deepesh ChuiArgentinaOnyama Limba QUALIFIED
Francesco ShinkoItalyStephen Shaw NEGOTIATION
Ashley DoeIndiaAsiya Javayant UNQUALIFIED
Aika InouyeGermanyAmy Elsner QUALIFIED
Izzy GarufiItalyElwin Sharvill NEW
Ashley DoeRussiaElwin Sharvill QUALIFIED
Salvatore StockhamBrazilIoni Bowcher RENEWAL
Rodrigues CampainGermanyXuxue Feng PROPOSAL
Aditya KuskoBrazilIoni Bowcher NEW
Antonio CaudyBrazilXuxue Feng UNQUALIFIED
Faith GillianRussiaXuxue Feng QUALIFIED
Maria MarrierUnited KingdomIvan Magalhaes UNQUALIFIED
Johnson SergiAustraliaIoni Bowcher NEW
Alejandro PerinIndiaStephen Shaw NEW
Juan WieserArgentinaIvan Magalhaes NEW
Chavez BriddickIndiaOnyama Limba NEW
Faith GillianJapanAmy Elsner NEGOTIATION
Jennifer AmigonItalyAnna Fali NEW
Antonio CaudyArgentinaStephen Shaw RENEWAL
Stacey MacleadCanadaAnna Fali QUALIFIED
Julie StensethFranceIoni Bowcher QUALIFIED
Greenwood BologniaFranceAnna Fali QUALIFIED
Leon OldroydUnited KingdomXuxue Feng UNQUALIFIED
Misaki RoysterUnited KingdomAsiya Javayant UNQUALIFIED
Aika InouyeSpainAnna Fali QUALIFIED
Johnson SergiAustraliaAnna Fali QUALIFIED
Wickens NestleAustraliaElwin Sharvill UNQUALIFIED
Octavia MaletBrazilBernardo Dominic RENEWAL
Izzy GarufiUnited KingdomIvan Magalhaes QUALIFIED
Greenwood BologniaGermanyAsiya Javayant UNQUALIFIED
Jones VocelkaArgentinaOnyama Limba PROPOSAL
Antonio CaudyGermanyStephen Shaw QUALIFIED
Nicolas IturbideItalyXuxue Feng UNQUALIFIED
Francesco ShinkoRussiaAmy Elsner NEW
Isabel BowleyAustraliaXuxue Feng NEW
Tony FollerSpainIvan Magalhaes RENEWAL
Misaki RoysterCanadaIvan Magalhaes PROPOSAL
Alejandro PerinJapanBernardo Dominic RENEWAL
Juan WieserGermanyXuxue Feng PROPOSAL
Maria MarrierFranceXuxue Feng PROPOSAL
Nicolas IturbideItalyElwin Sharvill NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Jefferson SchemmerJapanAnna Fali PROPOSAL
Jennifer AmigonJapanOnyama Limba NEW
Kaitlin OstroskyArgentinaXuxue Feng PROPOSAL
Alejandro PerinRussiaAsiya Javayant NEW
Deepesh ChuiJapanAmy Elsner QUALIFIED
Jeanfrancois VenereIndiaBernardo Dominic QUALIFIED
Isabel BowleyRussiaAsiya Javayant NEW
Chavez BriddickIndiaIvan Magalhaes UNQUALIFIED
Nicolas IturbideFranceXuxue Feng QUALIFIED
Murillo MaletCanadaElwin Sharvill NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Tony FollerItaly2025-07-24Truhlar And Truhlar Attys PROPOSAL11Onyama Limba
1001Octavia MaletBrazil2025-07-22King, Christopher A Esq QUALIFIED95Anna Fali
1002Munro FerenczBrazil2025-08-04Buckley Miller Wright QUALIFIED13Bernardo Dominic
1003Greenwood BologniaBrazil2025-07-20Feiner Bros NEGOTIATION95Xuxue Feng
1004Octavia MaletAustralia2025-08-07Chemel, James L Cpa NEGOTIATION4Anna Fali
1005Cody SaylorsSpain2025-07-18Chanay, Jeffrey A Esq NEGOTIATION81Ivan Magalhaes
1006Tony FollerAustralia2025-07-25Truhlar And Truhlar Attys NEW10Asiya Javayant
1007Nicolas IturbideCanada2025-07-26Chapman, Ross E Esq PROPOSAL83Onyama Limba
1008Wickens NestleRussia2025-07-16King, Christopher A Esq RENEWAL55Onyama Limba
1009Aruna FigeroaRussia2025-07-27Rangoni Of Florence RENEWAL3Bernardo Dominic
1010Aruna FigeroaBrazil2025-07-19Chanay, Jeffrey A Esq QUALIFIED28Amy Elsner
1011Darci PoquetteFrance2025-08-02Truhlar And Truhlar Attys RENEWAL56Stephen Shaw
1012Isabel BowleyRussia2025-07-17Truhlar And Truhlar Attys PROPOSAL87Stephen Shaw
1013Costa DilliardGermany2025-07-17King, Christopher A Esq NEGOTIATION70Xuxue Feng
1014Greenwood BologniaArgentina2025-08-01Feltz Printing Service RENEWAL68Asiya Javayant
1015Isabel BowleyIndia2025-08-02Truhlar And Truhlar Attys NEW37Asiya Javayant
1016Emily WhobreyJapan2025-08-06Benton, John B Jr NEGOTIATION61Bernardo Dominic
1017Smith GlickUnited Kingdom2025-07-28Dorl, James J Esq NEW96Elwin Sharvill
1018Chavez BriddickItaly2025-07-11Rangoni Of Florence NEW54Bernardo Dominic
1019Wickens NestleCanada2025-07-16Dorl, James J Esq NEGOTIATION54Ivan Magalhaes
1020Silvio SlusarskiCanada2025-07-11Commercial Press UNQUALIFIED8Asiya Javayant
1021Kaitlin OstroskyCanada2025-07-23Dorl, James J Esq QUALIFIED4Asiya Javayant
1022Jennifer AmigonUnited Kingdom2025-07-12Feiner Bros NEGOTIATION41Elwin Sharvill
1023Munro FerenczGermany2025-07-11King, Christopher A Esq NEGOTIATION45Onyama Limba
1024Ashley DoeGermany2025-07-22Dorl, James J Esq RENEWAL78Amy Elsner
1025Clifford RimCanada2025-07-14Commercial Press UNQUALIFIED2Anna Fali
1026Murillo MaletJapan2025-07-18Benton, John B Jr UNQUALIFIED62Onyama Limba
1027Ricardo GauchoBrazil2025-07-10Feltz Printing Service PROPOSAL95Anna Fali
1028Munro FerenczFrance2025-07-24Rousseaux, Michael Esq PROPOSAL62Ioni Bowcher
1029Darci PoquetteUnited Kingdom2025-07-26Chapman, Ross E Esq PROPOSAL2Stephen Shaw
1030Costa DilliardFrance2025-07-15King, Christopher A Esq PROPOSAL76Ioni Bowcher
1031Chavez BriddickItaly2025-07-17Rousseaux, Michael Esq NEGOTIATION37Elwin Sharvill
1032James ButtFrance2025-07-17Morlong Associates UNQUALIFIED32Elwin Sharvill
1033Maria MarrierCanada2025-07-09Buckley Miller Wright PROPOSAL88Anna Fali
1034Costa DilliardRussia2025-07-31Benton, John B Jr PROPOSAL60Stephen Shaw
1035Darci PoquetteBrazil2025-07-20Dorl, James J Esq RENEWAL38Elwin Sharvill
1036James ButtGermany2025-07-22Chemel, James L Cpa UNQUALIFIED29Amy Elsner
1037Misaki RoysterIndia2025-07-22Printing Dimensions NEGOTIATION44Elwin Sharvill
1038Francesco ShinkoCanada2025-07-09Morlong Associates UNQUALIFIED37Asiya Javayant
1039Sinclair WaycottJapan2025-07-19Buckley Miller Wright UNQUALIFIED74Ioni Bowcher
1040Leja CaldareraItaly2025-08-02Commercial Press QUALIFIED28Anna Fali
1041Johnson SergiSpain2025-08-05Feltz Printing Service NEW47Xuxue Feng
1042Smith GlickBrazil2025-07-21Commercial Press NEGOTIATION52Bernardo Dominic
1043Octavia MaletAustralia2025-08-07Printing Dimensions RENEWAL44Elwin Sharvill
1044Kadeem FlosiArgentina2025-08-02Buckley Miller Wright NEW54Asiya Javayant
1045Izzy GarufiArgentina2025-07-19Printing Dimensions UNQUALIFIED7Xuxue Feng
1046Leon OldroydItaly2025-07-30Chapman, Ross E Esq RENEWAL52Xuxue Feng
1047Chavez BriddickGermany2025-07-10Buckley Miller Wright RENEWAL60Ioni Bowcher
1048Alejandro PerinBrazil2025-07-16Feltz Printing Service QUALIFIED20Bernardo Dominic
1049Ivar PaprockiSpain2025-08-07Rousseaux, Michael Esq PROPOSAL19Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Johnson SergiAustraliaOnyama Limba RENEWAL
Maria MarrierGermanyIoni Bowcher RENEWAL
Jennifer AmigonUnited KingdomXuxue Feng PROPOSAL
James ButtCanadaAsiya Javayant NEGOTIATION
Salvatore StockhamRussiaStephen Shaw RENEWAL
Maria MarrierItalyXuxue Feng PROPOSAL
Clifford RimCanadaAsiya Javayant QUALIFIED
Sinclair WaycottAustraliaIvan Magalhaes RENEWAL
Julie StensethIndiaAnna Fali QUALIFIED
Cody SaylorsBrazilAmy Elsner QUALIFIED
Francesco ShinkoJapanXuxue Feng RENEWAL
Adams MorascaCanadaAsiya Javayant NEW
Ricardo GauchoUnited KingdomAmy Elsner PROPOSAL
Misaki RoysterFranceStephen Shaw UNQUALIFIED
Alejandro PerinRussiaStephen Shaw NEGOTIATION
Octavia MaletGermanyBernardo Dominic RENEWAL
Juan WieserFranceOnyama Limba QUALIFIED
Juan WieserRussiaAsiya Javayant UNQUALIFIED
Julie StensethUnited KingdomXuxue Feng RENEWAL
Cody SaylorsAustraliaElwin Sharvill PROPOSAL
Stacey MacleadUnited KingdomAmy Elsner QUALIFIED
Aruna FigeroaRussiaBernardo Dominic UNQUALIFIED
Munro FerenczBrazilAmy Elsner PROPOSAL
Claire TollnerCanadaBernardo Dominic PROPOSAL
Ashley DoeIndiaAnna Fali UNQUALIFIED
Leja CaldareraItalyAnna Fali UNQUALIFIED
Francesco ShinkoIndiaAnna Fali UNQUALIFIED
Mujtaba NickaIndiaAsiya Javayant NEGOTIATION
Octavia MaletCanadaAsiya Javayant NEW
Ashley DoeSpainAmy Elsner QUALIFIED
Octavia MaletRussiaAnna Fali NEGOTIATION
Morrow RutaRussiaXuxue Feng NEW
Claire TollnerRussiaIoni Bowcher UNQUALIFIED
Silvio SlusarskiArgentinaXuxue Feng UNQUALIFIED
Chavez BriddickFranceBernardo Dominic RENEWAL
Aika InouyeGermanyAmy Elsner NEGOTIATION
Misaki RoysterGermanyElwin Sharvill UNQUALIFIED
Jeanfrancois VenereSpainStephen Shaw NEW
Jennifer AmigonSpainAnna Fali UNQUALIFIED
Faith GillianArgentinaAmy Elsner NEGOTIATION
Octavia MaletSpainBernardo Dominic UNQUALIFIED
Faith GillianFranceBernardo Dominic QUALIFIED
Kaitlin OstroskyBrazilAnna Fali NEGOTIATION
Arvin AlbaresJapanAnna Fali NEGOTIATION
Faith GillianIndiaAsiya Javayant NEGOTIATION
Kadeem FlosiArgentinaBernardo Dominic NEGOTIATION
Maria MarrierFranceAsiya Javayant UNQUALIFIED
Aruna FigeroaCanadaAsiya Javayant UNQUALIFIED
Claire TollnerItalyStephen Shaw PROPOSAL
Silvio SlusarskiIndiaIvan Magalhaes NEGOTIATION
Frozen Columns
Name
Maria Marrier
Darci Poquette
Nicolas Iturbide
James Butt
James Butt
Morrow Ruta
Silvio Slusarski
Rodrigues Campain
Antonio Caudy
Antonio Caudy
Rodrigues Campain
Smith Glick
Costa Dilliard
Cody Saylors
Octavia Malet
Deepesh Chui
Aika Inouye
Salvatore Stockham
Emily Whobrey
Leon Oldroyd
Stacey Maclead
Nicolas Iturbide
Mujtaba Nicka
Isabel Bowley
Claire Tollner
Munro Ferencz
Jefferson Schemmer
Kaitlin Ostrosky
Chavez Briddick
Antonio Caudy
Aditya Kusko
Murillo Malet
Jones Vocelka
Aruna Figeroa
Silvio Slusarski
Mujtaba Nicka
Mayumi Kolmetz
Johnson Sergi
Ivar Paprocki
Jefferson Schemmer
Silvio Slusarski
Jefferson Schemmer
Jefferson Schemmer
Ricardo Gaucho
Tony Foller
Rodrigues Campain
Jones Vocelka
Morrow Ruta
David Darakjy
Izzy Garufi
IdCountryDate
1000Argentina2025-08-05
1001Germany2025-07-12
1002Brazil2025-08-01
1003France2025-07-09
1004Canada2025-07-19
1005United Kingdom2025-07-20
1006Russia2025-08-01
1007France2025-07-28
1008India2025-07-30
1009Japan2025-07-18
1010Russia2025-07-21
1011India2025-07-17
1012Canada2025-07-29
1013Canada2025-07-25
1014France2025-07-21
1015Argentina2025-07-29
1016Canada2025-08-03
1017Spain2025-08-02
1018Argentina2025-08-01
1019Japan2025-08-07
1020Japan2025-07-29
1021Argentina2025-07-29
1022Canada2025-07-14
1023Italy2025-07-12
1024Argentina2025-07-11
1025India2025-07-26
1026Brazil2025-07-21
1027Italy2025-07-29
1028Australia2025-07-13
1029France2025-07-30
1030France2025-07-29
1031Germany2025-07-17
1032India2025-07-28
1033Russia2025-07-20
1034Argentina2025-07-31
1035Germany2025-07-20
1036Spain2025-08-03
1037Italy2025-07-30
1038Japan2025-08-06
1039Argentina2025-07-22
1040India2025-07-13
1041United Kingdom2025-07-14
1042Italy2025-07-29
1043India2025-08-03
1044Argentina2025-07-21
1045Japan2025-07-23
1046India2025-08-06
1047Russia2025-07-15
1048Argentina2025-07-21
1049Brazil2025-07-17

On-Demand Data

NameIdCountryDate
Juan Wieser1000Spain2025-07-09
Ashley Doe1001Japan2025-07-20
Julie Stenseth1002Argentina2025-07-13
Kaitlin Ostrosky1003Argentina2025-07-09
Ashley Doe1004Spain2025-08-02
Darci Poquette1005United Kingdom2025-07-18
Alejandro Perin1006United Kingdom2025-08-03
Emily Whobrey1007Russia2025-08-01
Adams Morasca1008Italy2025-07-29
Claire Tollner1009Spain2025-07-15
Greenwood Bolognia1010France2025-07-25
Emily Whobrey1011Spain2025-08-02
Kaitlin Ostrosky1012Germany2025-07-26
Julie Stenseth1013Australia2025-07-16
Cody Saylors1014Italy2025-07-23
Octavia Malet1015Italy2025-07-17
Cody Saylors1016Australia2025-07-10
Ricardo Gaucho1017Russia2025-07-17
Silvio Slusarski1018Japan2025-07-15
Wickens Nestle1019Germany2025-07-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyGermanyAmy Elsner NEGOTIATION
Costa DilliardCanadaIvan Magalhaes NEW
Stacey MacleadRussiaAmy Elsner NEGOTIATION
Deepesh ChuiItalyXuxue Feng UNQUALIFIED
Juan WieserJapanAnna Fali UNQUALIFIED
Octavia MaletGermanyOnyama Limba NEW
Aika InouyeFranceStephen Shaw NEW
Aika InouyeRussiaBernardo Dominic NEGOTIATION
Emily WhobreyRussiaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiCanadaStephen Shaw NEGOTIATION
Sinclair WaycottArgentinaStephen Shaw UNQUALIFIED
Arvin AlbaresGermanyIoni Bowcher NEGOTIATION
Nicolas IturbideCanadaAmy Elsner QUALIFIED
Tony FollerRussiaOnyama Limba PROPOSAL
Leon OldroydSpainElwin Sharvill RENEWAL
Cody SaylorsArgentinaElwin Sharvill NEGOTIATION
Maria MarrierIndiaElwin Sharvill NEW
Isabel BowleyJapanStephen Shaw UNQUALIFIED
Jennifer AmigonGermanyAmy Elsner PROPOSAL
Rodrigues CampainItalyXuxue Feng PROPOSAL
Adams MorascaItalyIoni Bowcher NEW
Deepesh ChuiCanadaAsiya Javayant NEW
Munro FerenczJapanIvan Magalhaes UNQUALIFIED
Deepesh ChuiJapanElwin Sharvill PROPOSAL
Stacey MacleadItalyOnyama Limba UNQUALIFIED
Kadeem FlosiBrazilBernardo Dominic NEGOTIATION
Leja CaldareraGermanyStephen Shaw UNQUALIFIED
Costa DilliardIndiaIvan Magalhaes UNQUALIFIED
Aruna FigeroaGermanyBernardo Dominic RENEWAL
Jeanfrancois VenereSpainElwin Sharvill UNQUALIFIED
Deepesh ChuiCanadaIvan Magalhaes PROPOSAL
Sinclair WaycottFranceBernardo Dominic NEGOTIATION
Rodrigues CampainArgentinaAmy Elsner QUALIFIED
Francesco ShinkoItalyOnyama Limba QUALIFIED
David DarakjyArgentinaIoni Bowcher QUALIFIED
Mujtaba NickaBrazilXuxue Feng PROPOSAL
Smith GlickRussiaElwin Sharvill UNQUALIFIED
Leja CaldareraIndiaXuxue Feng NEGOTIATION
Darci PoquetteAustraliaIoni Bowcher RENEWAL
David DarakjyAustraliaXuxue Feng RENEWAL

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