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
Kadeem FlosiRussiaIoni Bowcher QUALIFIED
Claire TollnerItalyOnyama Limba QUALIFIED
Adams MorascaFranceAnna Fali NEGOTIATION
Kaitlin OstroskyIndiaXuxue Feng UNQUALIFIED
Silvio SlusarskiItalyAnna Fali PROPOSAL
Silvio SlusarskiItalyOnyama Limba UNQUALIFIED
Costa DilliardFranceAsiya Javayant NEW
Leja CaldareraAustraliaIoni Bowcher PROPOSAL
Kadeem FlosiArgentinaStephen Shaw UNQUALIFIED
Arvin AlbaresJapanElwin Sharvill NEW
Kadeem FlosiGermanyStephen Shaw RENEWAL
Maria MarrierIndiaAnna Fali NEGOTIATION
Julie StensethCanadaOnyama Limba UNQUALIFIED
Antonio CaudySpainXuxue Feng RENEWAL
Alejandro PerinBrazilAsiya Javayant NEW
Claire TollnerFranceStephen Shaw NEGOTIATION
Ricardo GauchoSpainAmy Elsner RENEWAL
Juan WieserSpainOnyama Limba QUALIFIED
Salvatore StockhamFranceIoni Bowcher UNQUALIFIED
Wickens NestleRussiaAmy Elsner UNQUALIFIED
Rodrigues CampainIndiaOnyama Limba RENEWAL
Aruna FigeroaRussiaStephen Shaw NEGOTIATION
Jones VocelkaJapanIvan Magalhaes UNQUALIFIED
Arvin AlbaresCanadaBernardo Dominic RENEWAL
Johnson SergiAustraliaXuxue Feng UNQUALIFIED
Stacey MacleadIndiaIvan Magalhaes PROPOSAL
Leja CaldareraAustraliaAsiya Javayant NEW
Murillo MaletBrazilElwin Sharvill UNQUALIFIED
Adams MorascaIndiaAnna Fali PROPOSAL
Stacey MacleadSpainBernardo Dominic QUALIFIED
Darci PoquetteCanadaBernardo Dominic RENEWAL
Tony FollerBrazilIoni Bowcher UNQUALIFIED
Johnson SergiCanadaIvan Magalhaes QUALIFIED
Jefferson SchemmerUnited KingdomXuxue Feng RENEWAL
Morrow RutaArgentinaAmy Elsner QUALIFIED
Jeanfrancois VenereCanadaXuxue Feng UNQUALIFIED
Misaki RoysterItalyAnna Fali NEW
Kadeem FlosiUnited KingdomBernardo Dominic PROPOSAL
Johnson SergiItalyAsiya Javayant RENEWAL
Maria MarrierIndiaOnyama Limba QUALIFIED
Antonio CaudyArgentinaIvan Magalhaes QUALIFIED
Aika InouyeItalyStephen Shaw PROPOSAL
Maisha RulapaughUnited KingdomStephen Shaw NEW
Salvatore StockhamAustraliaIoni Bowcher UNQUALIFIED
Emily WhobreyFranceIvan Magalhaes NEW
Ashley DoeItalyXuxue Feng PROPOSAL
Costa DilliardFranceOnyama Limba QUALIFIED
Munro FerenczRussiaBernardo Dominic UNQUALIFIED
Darci PoquetteRussiaAnna Fali QUALIFIED
Antonio CaudyBrazilBernardo Dominic QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Jeanfrancois VenereAustraliaStephen Shaw RENEWAL
Faith GillianRussiaXuxue Feng NEW
Misaki RoysterRussiaOnyama Limba UNQUALIFIED
Munro FerenczArgentinaXuxue Feng PROPOSAL
Chavez BriddickIndiaElwin Sharvill UNQUALIFIED
Juan WieserBrazilElwin Sharvill NEGOTIATION
Stacey MacleadSpainIvan Magalhaes NEW
Munro FerenczItalyStephen Shaw NEW
Greenwood BologniaRussiaBernardo Dominic NEW
Darci PoquetteJapanBernardo Dominic NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Izzy GarufiItaly2025-09-12Feltz Printing Service UNQUALIFIED18Elwin Sharvill
1001Cody SaylorsBrazil2025-08-24Chanay, Jeffrey A Esq UNQUALIFIED35Ioni Bowcher
1002Murillo MaletSpain2025-09-01Truhlar And Truhlar Attys QUALIFIED18Anna Fali
1003Antonio CaudyRussia2025-09-16Truhlar And Truhlar Attys PROPOSAL48Stephen Shaw
1004Rodrigues CampainIndia2025-08-24Benton, John B Jr RENEWAL72Ioni Bowcher
1005Clifford RimIndia2025-08-24Feiner Bros RENEWAL2Ivan Magalhaes
1006Claire TollnerArgentina2025-09-15Chapman, Ross E Esq RENEWAL99Ivan Magalhaes
1007Misaki RoysterJapan2025-09-11Benton, John B Jr RENEWAL36Xuxue Feng
1008Wickens NestleCanada2025-08-25King, Christopher A Esq RENEWAL67Xuxue Feng
1009Clifford RimArgentina2025-09-03Rangoni Of Florence QUALIFIED35Xuxue Feng
1010Munro FerenczSpain2025-09-16Feltz Printing Service RENEWAL28Anna Fali
1011Ivar PaprockiRussia2025-09-08King, Christopher A Esq PROPOSAL54Amy Elsner
1012Leja CaldareraArgentina2025-08-23Printing Dimensions RENEWAL21Onyama Limba
1013Isabel BowleyGermany2025-08-27Chanay, Jeffrey A Esq NEW26Amy Elsner
1014Julie StensethAustralia2025-08-24Benton, John B Jr PROPOSAL63Xuxue Feng
1015Stacey MacleadItaly2025-08-24Chapman, Ross E Esq RENEWAL41Elwin Sharvill
1016Aika InouyeSpain2025-09-14Chemel, James L Cpa NEW61Bernardo Dominic
1017Murillo MaletAustralia2025-09-21Rousseaux, Michael Esq RENEWAL41Onyama Limba
1018Tony FollerCanada2025-08-31Chapman, Ross E Esq PROPOSAL85Asiya Javayant
1019Morrow RutaArgentina2025-09-18Printing Dimensions PROPOSAL52Bernardo Dominic
1020Aika InouyeArgentina2025-08-28Dorl, James J Esq UNQUALIFIED71Anna Fali
1021Salvatore StockhamBrazil2025-09-02King, Christopher A Esq UNQUALIFIED18Onyama Limba
1022Mujtaba NickaBrazil2025-09-14Chanay, Jeffrey A Esq NEW47Anna Fali
1023Arvin AlbaresCanada2025-08-25Rousseaux, Michael Esq NEGOTIATION94Anna Fali
1024Darci PoquetteArgentina2025-08-27Rousseaux, Michael Esq RENEWAL95Ivan Magalhaes
1025Julie StensethBrazil2025-09-12King, Christopher A Esq UNQUALIFIED67Asiya Javayant
1026Faith GillianBrazil2025-08-31Rangoni Of Florence PROPOSAL2Elwin Sharvill
1027Murillo MaletIndia2025-09-04Buckley Miller Wright UNQUALIFIED86Bernardo Dominic
1028Misaki RoysterUnited Kingdom2025-09-04Rousseaux, Michael Esq PROPOSAL73Xuxue Feng
1029Morrow RutaAustralia2025-09-20Dorl, James J Esq NEGOTIATION96Onyama Limba
1030Morrow RutaCanada2025-08-24Dorl, James J Esq NEGOTIATION0Elwin Sharvill
1031Ivar PaprockiUnited Kingdom2025-09-01King, Christopher A Esq NEW77Amy Elsner
1032Maria MarrierFrance2025-09-16Feltz Printing Service PROPOSAL94Stephen Shaw
1033Aditya KuskoFrance2025-09-20Rangoni Of Florence PROPOSAL97Asiya Javayant
1034Faith GillianJapan2025-09-02Truhlar And Truhlar Attys QUALIFIED72Asiya Javayant
1035Costa DilliardArgentina2025-09-07Chemel, James L Cpa UNQUALIFIED0Elwin Sharvill
1036Jennifer AmigonFrance2025-08-26Commercial Press NEW80Onyama Limba
1037Ricardo GauchoJapan2025-09-09Feltz Printing Service RENEWAL56Ivan Magalhaes
1038Deepesh ChuiItaly2025-09-15King, Christopher A Esq NEW71Elwin Sharvill
1039Silvio SlusarskiRussia2025-09-06Truhlar And Truhlar Attys UNQUALIFIED38Ioni Bowcher
1040Juan WieserSpain2025-09-13Feltz Printing Service UNQUALIFIED87Elwin Sharvill
1041Juan WieserAustralia2025-09-04Truhlar And Truhlar Attys PROPOSAL97Stephen Shaw
1042Jennifer AmigonSpain2025-09-05Printing Dimensions UNQUALIFIED29Ivan Magalhaes
1043James ButtAustralia2025-09-12Dorl, James J Esq PROPOSAL82Asiya Javayant
1044Jefferson SchemmerIndia2025-09-16Benton, John B Jr PROPOSAL39Elwin Sharvill
1045Silvio SlusarskiBrazil2025-09-13Buckley Miller Wright QUALIFIED23Xuxue Feng
1046Aika InouyeArgentina2025-08-23King, Christopher A Esq UNQUALIFIED32Asiya Javayant
1047Clifford RimJapan2025-08-27Dorl, James J Esq PROPOSAL57Amy Elsner
1048Claire TollnerGermany2025-09-07Rousseaux, Michael Esq RENEWAL21Bernardo Dominic
1049Antonio CaudyJapan2025-09-18Feiner Bros NEGOTIATION80Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Maria MarrierItalyOnyama Limba NEGOTIATION
Ivar PaprockiBrazilIvan Magalhaes NEGOTIATION
Aika InouyeBrazilAsiya Javayant NEW
Smith GlickBrazilIvan Magalhaes NEW
Ashley DoeItalyElwin Sharvill QUALIFIED
James ButtItalyIvan Magalhaes RENEWAL
Ricardo GauchoBrazilXuxue Feng PROPOSAL
Morrow RutaUnited KingdomBernardo Dominic RENEWAL
Maria MarrierCanadaAmy Elsner PROPOSAL
James ButtRussiaOnyama Limba NEW
Wickens NestleFranceIvan Magalhaes NEGOTIATION
Ivar PaprockiItalyIvan Magalhaes PROPOSAL
Claire TollnerJapanOnyama Limba NEW
Greenwood BologniaBrazilIoni Bowcher QUALIFIED
Leja CaldareraJapanElwin Sharvill UNQUALIFIED
Kaitlin OstroskySpainIvan Magalhaes NEGOTIATION
Maisha RulapaughFranceXuxue Feng PROPOSAL
Chavez BriddickGermanyOnyama Limba PROPOSAL
Octavia MaletIndiaOnyama Limba NEW
Claire TollnerJapanBernardo Dominic NEGOTIATION
Leon OldroydItalyBernardo Dominic NEW
Alejandro PerinSpainXuxue Feng UNQUALIFIED
Mayumi KolmetzGermanyElwin Sharvill RENEWAL
Johnson SergiGermanyAnna Fali NEGOTIATION
Wickens NestleJapanXuxue Feng UNQUALIFIED
Chavez BriddickArgentinaOnyama Limba QUALIFIED
Morrow RutaGermanyElwin Sharvill RENEWAL
Faith GillianBrazilOnyama Limba UNQUALIFIED
Aruna FigeroaIndiaAsiya Javayant PROPOSAL
Greenwood BologniaJapanElwin Sharvill QUALIFIED
Jennifer AmigonCanadaAmy Elsner UNQUALIFIED
James ButtIndiaStephen Shaw PROPOSAL
Francesco ShinkoUnited KingdomAnna Fali QUALIFIED
Deepesh ChuiCanadaAmy Elsner NEGOTIATION
Murillo MaletRussiaElwin Sharvill NEW
Salvatore StockhamBrazilElwin Sharvill NEW
Antonio CaudyJapanAmy Elsner NEGOTIATION
Jones VocelkaRussiaAsiya Javayant QUALIFIED
Claire TollnerUnited KingdomAnna Fali RENEWAL
Nicolas IturbideAustraliaIoni Bowcher UNQUALIFIED
Maria MarrierRussiaStephen Shaw QUALIFIED
Munro FerenczUnited KingdomStephen Shaw NEGOTIATION
Greenwood BologniaRussiaAsiya Javayant NEW
Julie StensethSpainBernardo Dominic QUALIFIED
Maria MarrierArgentinaAsiya Javayant UNQUALIFIED
Tony FollerCanadaIvan Magalhaes RENEWAL
Rodrigues CampainAustraliaXuxue Feng NEW
Kaitlin OstroskyUnited KingdomOnyama Limba RENEWAL
Johnson SergiFranceBernardo Dominic RENEWAL
Aruna FigeroaSpainIoni Bowcher QUALIFIED
Frozen Columns
Name
Rodrigues Campain
Jeanfrancois Venere
Ivar Paprocki
Faith Gillian
Nicolas Iturbide
Nicolas Iturbide
Ashley Doe
Greenwood Bolognia
Salvatore Stockham
Ashley Doe
Aditya Kusko
Deepesh Chui
Stacey Maclead
Alejandro Perin
Kaitlin Ostrosky
Aika Inouye
Octavia Malet
Faith Gillian
Johnson Sergi
Nicolas Iturbide
Rodrigues Campain
Johnson Sergi
Aika Inouye
Isabel Bowley
Ivar Paprocki
Ivar Paprocki
Ashley Doe
Misaki Royster
Smith Glick
Jennifer Amigon
Ivar Paprocki
Maria Marrier
Wickens Nestle
Nicolas Iturbide
Darci Poquette
Aditya Kusko
Nicolas Iturbide
Smith Glick
Johnson Sergi
Leja Caldarera
Kaitlin Ostrosky
Jefferson Schemmer
Ivar Paprocki
Alejandro Perin
Aika Inouye
Johnson Sergi
Ashley Doe
Jennifer Amigon
Costa Dilliard
Arvin Albares
IdCountryDate
1000Japan2025-09-20
1001Brazil2025-08-24
1002France2025-08-31
1003Japan2025-09-05
1004Italy2025-09-17
1005United Kingdom2025-08-23
1006United Kingdom2025-09-04
1007United Kingdom2025-09-01
1008Italy2025-09-06
1009India2025-09-17
1010United Kingdom2025-08-25
1011Brazil2025-09-06
1012Germany2025-09-15
1013Canada2025-08-31
1014Russia2025-08-29
1015Italy2025-09-12
1016Canada2025-09-21
1017India2025-09-17
1018Russia2025-09-13
1019Russia2025-09-13
1020Australia2025-09-01
1021Canada2025-09-17
1022Brazil2025-09-16
1023Russia2025-09-17
1024United Kingdom2025-09-05
1025Brazil2025-08-28
1026Germany2025-09-08
1027Japan2025-08-23
1028Spain2025-09-19
1029India2025-09-17
1030France2025-08-30
1031Russia2025-09-20
1032Australia2025-09-06
1033Australia2025-09-17
1034Russia2025-09-15
1035Spain2025-09-09
1036France2025-09-06
1037Canada2025-09-19
1038Italy2025-09-10
1039United Kingdom2025-09-14
1040Germany2025-08-28
1041Spain2025-09-11
1042Australia2025-08-29
1043Brazil2025-09-15
1044Brazil2025-08-23
1045Australia2025-08-25
1046Italy2025-09-02
1047France2025-08-28
1048United Kingdom2025-08-30
1049Japan2025-08-24

On-Demand Data

NameIdCountryDate
Murillo Malet1000France2025-08-27
Johnson Sergi1001Canada2025-08-27
Misaki Royster1002India2025-08-28
Rodrigues Campain1003Japan2025-09-18
Nicolas Iturbide1004India2025-09-01
Greenwood Bolognia1005India2025-09-18
Julie Stenseth1006United Kingdom2025-08-23
Wickens Nestle1007United Kingdom2025-08-23
Mujtaba Nicka1008India2025-09-10
Alejandro Perin1009Italy2025-08-30
Murillo Malet1010India2025-09-05
Aika Inouye1011Brazil2025-09-06
Morrow Ruta1012Japan2025-08-29
Jeanfrancois Venere1013United Kingdom2025-09-17
Julie Stenseth1014Japan2025-09-13
Kadeem Flosi1015France2025-09-16
Octavia Malet1016Spain2025-08-29
Deepesh Chui1017Canada2025-09-07
Smith Glick1018India2025-08-23
Aditya Kusko1019Germany2025-09-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Smith GlickBrazilIvan Magalhaes UNQUALIFIED
Francesco ShinkoRussiaAmy Elsner NEW
Rodrigues CampainGermanyAmy Elsner RENEWAL
Deepesh ChuiCanadaBernardo Dominic PROPOSAL
Kaitlin OstroskySpainXuxue Feng UNQUALIFIED
Maria MarrierArgentinaIoni Bowcher QUALIFIED
Arvin AlbaresFranceElwin Sharvill QUALIFIED
Claire TollnerAustraliaIoni Bowcher UNQUALIFIED
Cody SaylorsArgentinaAmy Elsner NEW
Smith GlickSpainAmy Elsner NEGOTIATION
Munro FerenczBrazilOnyama Limba NEW
Jones VocelkaIndiaIvan Magalhaes PROPOSAL
Leon OldroydCanadaXuxue Feng PROPOSAL
Jefferson SchemmerFranceElwin Sharvill UNQUALIFIED
David DarakjySpainAsiya Javayant RENEWAL
Wickens NestleItalyXuxue Feng RENEWAL
Costa DilliardItalyXuxue Feng RENEWAL
Isabel BowleyFranceXuxue Feng NEGOTIATION
Costa DilliardFranceAnna Fali RENEWAL
Stacey MacleadItalyIoni Bowcher PROPOSAL
Juan WieserArgentinaAmy Elsner RENEWAL
Stacey MacleadFranceIoni Bowcher QUALIFIED
Jennifer AmigonArgentinaBernardo Dominic NEGOTIATION
Julie StensethUnited KingdomXuxue Feng PROPOSAL
Costa DilliardAustraliaIoni Bowcher PROPOSAL
Ashley DoeFranceAmy Elsner NEGOTIATION
Aruna FigeroaCanadaAmy Elsner NEGOTIATION
Costa DilliardFranceAsiya Javayant RENEWAL
Murillo MaletUnited KingdomAnna Fali NEGOTIATION
Jeanfrancois VenereSpainIoni Bowcher NEW
Kadeem FlosiArgentinaAmy Elsner PROPOSAL
Murillo MaletBrazilBernardo Dominic RENEWAL
James ButtBrazilIvan Magalhaes QUALIFIED
Clifford RimJapanStephen Shaw UNQUALIFIED
Ricardo GauchoUnited KingdomAsiya Javayant QUALIFIED
Claire TollnerAustraliaOnyama Limba PROPOSAL
Alejandro PerinGermanyAsiya Javayant QUALIFIED
Izzy GarufiCanadaAsiya Javayant RENEWAL
Julie StensethUnited KingdomAsiya Javayant QUALIFIED
Silvio SlusarskiArgentinaStephen Shaw UNQUALIFIED

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