Locale

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Bangla
Bosnian
Czech
Greek
Persian
Finnish
Danish
Hindi
Indonesian
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
Julie StensethIndiaAmy Elsner NEGOTIATION
Jones VocelkaFranceElwin Sharvill QUALIFIED
Emily WhobreyRussiaIoni Bowcher UNQUALIFIED
Mayumi KolmetzAustraliaAmy Elsner RENEWAL
Claire TollnerUnited KingdomAnna Fali NEW
Ricardo GauchoBrazilOnyama Limba PROPOSAL
Leon OldroydFranceIvan Magalhaes QUALIFIED
Jennifer AmigonGermanyStephen Shaw PROPOSAL
Aika InouyeJapanElwin Sharvill NEGOTIATION
Izzy GarufiFranceXuxue Feng QUALIFIED
Kadeem FlosiBrazilAsiya Javayant RENEWAL
Deepesh ChuiIndiaAsiya Javayant NEGOTIATION
Mayumi KolmetzCanadaAmy Elsner PROPOSAL
Aditya KuskoIndiaElwin Sharvill QUALIFIED
Ivar PaprockiUnited KingdomElwin Sharvill QUALIFIED
Jennifer AmigonBrazilAnna Fali PROPOSAL
Johnson SergiSpainElwin Sharvill RENEWAL
Mayumi KolmetzGermanyStephen Shaw NEW
Jennifer AmigonArgentinaElwin Sharvill NEGOTIATION
Arvin AlbaresRussiaBernardo Dominic NEGOTIATION
Darci PoquetteRussiaIvan Magalhaes NEW
Wickens NestleCanadaAmy Elsner UNQUALIFIED
Jones VocelkaFranceAsiya Javayant NEGOTIATION
Wickens NestleSpainElwin Sharvill NEGOTIATION
Sinclair WaycottArgentinaOnyama Limba UNQUALIFIED
Aika InouyeCanadaElwin Sharvill NEW
James ButtFranceXuxue Feng UNQUALIFIED
Greenwood BologniaSpainAmy Elsner UNQUALIFIED
Johnson SergiItalyXuxue Feng UNQUALIFIED
Chavez BriddickBrazilAsiya Javayant QUALIFIED
Jones VocelkaJapanIvan Magalhaes QUALIFIED
Ashley DoeRussiaAnna Fali UNQUALIFIED
Tony FollerRussiaIvan Magalhaes RENEWAL
Munro FerenczUnited KingdomOnyama Limba RENEWAL
Darci PoquetteArgentinaXuxue Feng UNQUALIFIED
Deepesh ChuiCanadaStephen Shaw PROPOSAL
Ricardo GauchoRussiaAnna Fali NEW
Francesco ShinkoArgentinaStephen Shaw RENEWAL
Juan WieserArgentinaOnyama Limba QUALIFIED
Clifford RimAustraliaBernardo Dominic UNQUALIFIED
Kadeem FlosiArgentinaOnyama Limba QUALIFIED
Darci PoquetteBrazilOnyama Limba NEGOTIATION
Darci PoquetteRussiaStephen Shaw RENEWAL
Aika InouyeAustraliaAsiya Javayant NEW
Smith GlickRussiaOnyama Limba UNQUALIFIED
Aditya KuskoArgentinaIvan Magalhaes NEGOTIATION
Costa DilliardSpainOnyama Limba QUALIFIED
Murillo MaletItalyElwin Sharvill PROPOSAL
Isabel BowleySpainAmy Elsner RENEWAL
Leja CaldareraBrazilElwin Sharvill QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Sinclair WaycottFranceAsiya Javayant NEW
Ivar PaprockiAustraliaIvan Magalhaes RENEWAL
Jones VocelkaRussiaStephen Shaw UNQUALIFIED
Johnson SergiAustraliaIvan Magalhaes NEW
Silvio SlusarskiIndiaIoni Bowcher UNQUALIFIED
Adams MorascaItalyOnyama Limba QUALIFIED
David DarakjyItalyIoni Bowcher QUALIFIED
Deepesh ChuiSpainIvan Magalhaes QUALIFIED
Costa DilliardUnited KingdomIoni Bowcher NEGOTIATION
Johnson SergiArgentinaBernardo Dominic NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Munro FerenczJapan2025-01-27King, Christopher A Esq NEGOTIATION44Stephen Shaw
1001Alejandro PerinJapan2025-01-25Chapman, Ross E Esq PROPOSAL47Ivan Magalhaes
1002Smith GlickBrazil2025-01-30Chemel, James L Cpa NEW36Anna Fali
1003Chavez BriddickFrance2025-01-28Chapman, Ross E Esq NEW5Elwin Sharvill
1004Leja CaldareraJapan2025-01-30Commercial Press RENEWAL12Ioni Bowcher
1005Munro FerenczIndia2025-02-21Rangoni Of Florence PROPOSAL76Onyama Limba
1006Leon OldroydSpain2025-02-23Truhlar And Truhlar Attys NEGOTIATION47Ioni Bowcher
1007Munro FerenczUnited Kingdom2025-02-06Feiner Bros NEGOTIATION88Asiya Javayant
1008Kadeem FlosiUnited Kingdom2025-02-20Rousseaux, Michael Esq RENEWAL35Xuxue Feng
1009Misaki RoysterBrazil2025-02-07Chanay, Jeffrey A Esq QUALIFIED55Ioni Bowcher
1010Leja CaldareraJapan2025-02-10Buckley Miller Wright UNQUALIFIED76Bernardo Dominic
1011Leon OldroydFrance2025-02-13Chapman, Ross E Esq NEGOTIATION52Amy Elsner
1012Munro FerenczItaly2025-01-25Rangoni Of Florence QUALIFIED49Asiya Javayant
1013Mayumi KolmetzSpain2025-01-31Benton, John B Jr UNQUALIFIED46Amy Elsner
1014Silvio SlusarskiIndia2025-01-30Dorl, James J Esq QUALIFIED68Amy Elsner
1015Cody SaylorsGermany2025-02-10Morlong Associates PROPOSAL86Ivan Magalhaes
1016Johnson SergiSpain2025-02-07Feiner Bros RENEWAL53Stephen Shaw
1017Kaitlin OstroskyCanada2025-02-01Rangoni Of Florence PROPOSAL57Anna Fali
1018Claire TollnerUnited Kingdom2025-02-15Rangoni Of Florence NEGOTIATION24Stephen Shaw
1019Clifford RimUnited Kingdom2025-01-27Printing Dimensions PROPOSAL21Stephen Shaw
1020Arvin AlbaresGermany2025-02-11Buckley Miller Wright NEGOTIATION22Ivan Magalhaes
1021Francesco ShinkoArgentina2025-02-13Buckley Miller Wright NEW97Stephen Shaw
1022Ricardo GauchoItaly2025-02-09Dorl, James J Esq UNQUALIFIED40Elwin Sharvill
1023Stacey MacleadBrazil2025-01-30Chemel, James L Cpa PROPOSAL98Anna Fali
1024Antonio CaudyAustralia2025-02-06Chanay, Jeffrey A Esq UNQUALIFIED37Ioni Bowcher
1025Aditya KuskoItaly2025-02-01Rousseaux, Michael Esq UNQUALIFIED28Ivan Magalhaes
1026Arvin AlbaresSpain2025-01-26Benton, John B Jr RENEWAL46Stephen Shaw
1027Tony FollerRussia2025-02-05Feltz Printing Service RENEWAL14Bernardo Dominic
1028Francesco ShinkoIndia2025-02-08King, Christopher A Esq NEGOTIATION71Anna Fali
1029Ivar PaprockiBrazil2025-02-10Buckley Miller Wright UNQUALIFIED62Stephen Shaw
1030Ricardo GauchoAustralia2025-01-28Commercial Press NEGOTIATION81Ioni Bowcher
1031Kaitlin OstroskyFrance2025-02-19Chapman, Ross E Esq NEW84Bernardo Dominic
1032Morrow RutaItaly2025-02-02Buckley Miller Wright UNQUALIFIED13Asiya Javayant
1033Leja CaldareraGermany2025-01-30Feltz Printing Service UNQUALIFIED26Onyama Limba
1034Kadeem FlosiGermany2025-02-19Rousseaux, Michael Esq UNQUALIFIED68Anna Fali
1035Nicolas IturbideFrance2025-01-27Printing Dimensions NEGOTIATION0Stephen Shaw
1036Francesco ShinkoBrazil2025-01-25Benton, John B Jr NEGOTIATION38Asiya Javayant
1037Misaki RoysterItaly2025-02-10Rangoni Of Florence NEW37Ioni Bowcher
1038Deepesh ChuiRussia2025-01-29Chapman, Ross E Esq PROPOSAL13Anna Fali
1039Rodrigues CampainUnited Kingdom2025-02-16Buckley Miller Wright RENEWAL66Ioni Bowcher
1040Francesco ShinkoCanada2025-02-04Benton, John B Jr NEGOTIATION70Ioni Bowcher
1041Alejandro PerinFrance2025-02-04Truhlar And Truhlar Attys NEW67Asiya Javayant
1042Stacey MacleadIndia2025-01-30Chanay, Jeffrey A Esq QUALIFIED14Asiya Javayant
1043Leja CaldareraBrazil2025-02-16King, Christopher A Esq UNQUALIFIED85Amy Elsner
1044Tony FollerGermany2025-01-30Chemel, James L Cpa UNQUALIFIED23Anna Fali
1045Greenwood BologniaBrazil2025-02-02Commercial Press RENEWAL35Onyama Limba
1046Ivar PaprockiCanada2025-02-15Truhlar And Truhlar Attys RENEWAL84Stephen Shaw
1047Maria MarrierCanada2025-01-26Feiner Bros UNQUALIFIED59Stephen Shaw
1048Aditya KuskoSpain2025-02-10Chapman, Ross E Esq UNQUALIFIED54Amy Elsner
1049Aika InouyeCanada2025-02-01Chanay, Jeffrey A Esq NEGOTIATION87Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Maisha RulapaughRussiaBernardo Dominic UNQUALIFIED
Cody SaylorsAustraliaIoni Bowcher QUALIFIED
Jefferson SchemmerUnited KingdomAnna Fali NEGOTIATION
Maisha RulapaughUnited KingdomAsiya Javayant RENEWAL
Aruna FigeroaBrazilAnna Fali RENEWAL
Misaki RoysterRussiaIoni Bowcher UNQUALIFIED
Maisha RulapaughJapanIoni Bowcher RENEWAL
Stacey MacleadJapanAmy Elsner NEW
Alejandro PerinBrazilAmy Elsner NEW
Emily WhobreyBrazilIoni Bowcher PROPOSAL
Darci PoquetteCanadaXuxue Feng QUALIFIED
Mayumi KolmetzGermanyStephen Shaw NEGOTIATION
Clifford RimFranceStephen Shaw NEW
Isabel BowleyJapanElwin Sharvill NEGOTIATION
David DarakjyItalyOnyama Limba NEW
Smith GlickBrazilIoni Bowcher NEW
Isabel BowleyUnited KingdomElwin Sharvill NEGOTIATION
Salvatore StockhamJapanStephen Shaw NEW
Ricardo GauchoCanadaAnna Fali NEW
Maria MarrierUnited KingdomOnyama Limba UNQUALIFIED
Misaki RoysterCanadaIoni Bowcher RENEWAL
Ivar PaprockiJapanIvan Magalhaes NEW
Leon OldroydCanadaAsiya Javayant UNQUALIFIED
Arvin AlbaresUnited KingdomStephen Shaw RENEWAL
Morrow RutaItalyIvan Magalhaes PROPOSAL
Sinclair WaycottArgentinaStephen Shaw PROPOSAL
Jefferson SchemmerRussiaAnna Fali QUALIFIED
Smith GlickRussiaIvan Magalhaes NEGOTIATION
Deepesh ChuiRussiaAmy Elsner NEW
Aika InouyeSpainXuxue Feng QUALIFIED
Murillo MaletJapanAnna Fali UNQUALIFIED
Jennifer AmigonJapanXuxue Feng NEGOTIATION
Costa DilliardAustraliaIoni Bowcher RENEWAL
Mayumi KolmetzJapanAmy Elsner NEGOTIATION
Mujtaba NickaFranceElwin Sharvill NEGOTIATION
Nicolas IturbideSpainAnna Fali QUALIFIED
Claire TollnerSpainIvan Magalhaes QUALIFIED
Mujtaba NickaItalyXuxue Feng QUALIFIED
Jeanfrancois VenereFranceStephen Shaw QUALIFIED
Maisha RulapaughAustraliaAsiya Javayant UNQUALIFIED
Aika InouyeGermanyStephen Shaw UNQUALIFIED
Jennifer AmigonUnited KingdomIoni Bowcher RENEWAL
Costa DilliardJapanStephen Shaw RENEWAL
Sinclair WaycottBrazilOnyama Limba UNQUALIFIED
Salvatore StockhamFranceElwin Sharvill UNQUALIFIED
Leon OldroydFranceAnna Fali PROPOSAL
Ricardo GauchoCanadaIvan Magalhaes NEW
Aika InouyeRussiaXuxue Feng PROPOSAL
Aika InouyeAustraliaIoni Bowcher QUALIFIED
Maisha RulapaughSpainIvan Magalhaes QUALIFIED
Frozen Columns
Name
Izzy Garufi
Johnson Sergi
Aditya Kusko
Salvatore Stockham
Smith Glick
Octavia Malet
Murillo Malet
Claire Tollner
Isabel Bowley
Juan Wieser
Cody Saylors
Stacey Maclead
Izzy Garufi
Aika Inouye
Rodrigues Campain
Aika Inouye
Octavia Malet
Leja Caldarera
Silvio Slusarski
Izzy Garufi
Jeanfrancois Venere
Aika Inouye
Juan Wieser
Deepesh Chui
James Butt
Jones Vocelka
Izzy Garufi
Costa Dilliard
Ricardo Gaucho
Johnson Sergi
Cody Saylors
Jeanfrancois Venere
Tony Foller
Jones Vocelka
James Butt
Kadeem Flosi
Kaitlin Ostrosky
Nicolas Iturbide
Tony Foller
Ivar Paprocki
Deepesh Chui
James Butt
Cody Saylors
Adams Morasca
Aruna Figeroa
Clifford Rim
Misaki Royster
Smith Glick
Ricardo Gaucho
Chavez Briddick
IdCountryDate
1000Argentina2025-02-01
1001France2025-02-03
1002Russia2025-02-03
1003Spain2025-02-12
1004Canada2025-01-27
1005Italy2025-02-15
1006Australia2025-01-27
1007Australia2025-01-27
1008France2025-02-09
1009India2025-02-08
1010Australia2025-02-11
1011India2025-01-30
1012Spain2025-02-05
1013India2025-01-29
1014Spain2025-02-05
1015Brazil2025-02-08
1016Japan2025-02-01
1017Australia2025-02-11
1018India2025-02-09
1019Russia2025-01-28
1020India2025-02-13
1021Australia2025-01-30
1022Italy2025-02-22
1023Argentina2025-02-08
1024Germany2025-02-03
1025Australia2025-02-16
1026Canada2025-02-10
1027France2025-02-03
1028United Kingdom2025-02-08
1029Australia2025-02-20
1030Russia2025-02-19
1031Italy2025-02-04
1032Japan2025-02-13
1033Germany2025-01-25
1034Russia2025-02-11
1035Australia2025-01-25
1036Italy2025-01-31
1037Russia2025-02-09
1038Spain2025-02-20
1039India2025-01-27
1040Russia2025-02-11
1041India2025-02-21
1042Argentina2025-02-12
1043Canada2025-02-22
1044Russia2025-02-07
1045Brazil2025-02-20
1046Canada2025-02-15
1047Russia2025-01-28
1048Argentina2025-02-19
1049India2025-02-07

On-Demand Data

NameIdCountryDate
Cody Saylors1000Japan2025-02-23
Costa Dilliard1001Russia2025-02-11
James Butt1002India2025-02-19
Smith Glick1003United Kingdom2025-02-21
Adams Morasca1004Spain2025-02-10
Alejandro Perin1005United Kingdom2025-02-06
Arvin Albares1006Argentina2025-02-07
Sinclair Waycott1007Spain2025-02-18
Chavez Briddick1008Canada2025-02-22
Adams Morasca1009Italy2025-01-27
Mayumi Kolmetz1010Argentina2025-02-06
Aika Inouye1011Argentina2025-02-06
Mayumi Kolmetz1012Italy2025-02-07
Maisha Rulapaugh1013Germany2025-02-23
Leon Oldroyd1014Italy2025-02-07
Munro Ferencz1015Italy2025-02-06
Silvio Slusarski1016Italy2025-01-25
Emily Whobrey1017Spain2025-02-02
Aruna Figeroa1018United Kingdom2025-02-19
Murillo Malet1019Brazil2025-02-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Wickens NestleRussiaElwin Sharvill NEGOTIATION
Salvatore StockhamIndiaAsiya Javayant UNQUALIFIED
Izzy GarufiRussiaAnna Fali UNQUALIFIED
Jefferson SchemmerItalyBernardo Dominic QUALIFIED
Antonio CaudyIndiaIvan Magalhaes UNQUALIFIED
James ButtUnited KingdomOnyama Limba NEGOTIATION
Jones VocelkaIndiaIoni Bowcher UNQUALIFIED
Claire TollnerIndiaAsiya Javayant PROPOSAL
Ivar PaprockiJapanBernardo Dominic PROPOSAL
Aika InouyeArgentinaAmy Elsner NEW
Juan WieserCanadaStephen Shaw NEGOTIATION
Leon OldroydSpainBernardo Dominic NEGOTIATION
Jeanfrancois VenereAustraliaStephen Shaw NEGOTIATION
Isabel BowleyRussiaAmy Elsner RENEWAL
Chavez BriddickFranceOnyama Limba PROPOSAL
Kaitlin OstroskyFranceAsiya Javayant UNQUALIFIED
Juan WieserSpainXuxue Feng RENEWAL
Kadeem FlosiItalyAnna Fali UNQUALIFIED
Mujtaba NickaIndiaIoni Bowcher PROPOSAL
Arvin AlbaresAustraliaAmy Elsner NEGOTIATION
Cody SaylorsRussiaIoni Bowcher NEGOTIATION
Leja CaldareraAustraliaOnyama Limba NEW
Smith GlickJapanIvan Magalhaes QUALIFIED
Clifford RimUnited KingdomIvan Magalhaes NEW
Greenwood BologniaCanadaXuxue Feng RENEWAL
Kaitlin OstroskyRussiaOnyama Limba NEGOTIATION
Juan WieserIndiaAsiya Javayant UNQUALIFIED
Jeanfrancois VenereCanadaAsiya Javayant RENEWAL
Emily WhobreyArgentinaElwin Sharvill NEGOTIATION
Misaki RoysterArgentinaIoni Bowcher QUALIFIED
Murillo MaletIndiaElwin Sharvill NEGOTIATION
Aruna FigeroaRussiaXuxue Feng NEGOTIATION
Kaitlin OstroskyArgentinaElwin Sharvill NEW
Octavia MaletAustraliaXuxue Feng RENEWAL
Jones VocelkaItalyXuxue Feng NEW
Isabel BowleyArgentinaAsiya Javayant NEW
Maisha RulapaughJapanXuxue Feng RENEWAL
Stacey MacleadUnited KingdomStephen Shaw UNQUALIFIED
Salvatore StockhamGermanyBernardo Dominic PROPOSAL
Aruna FigeroaFranceElwin Sharvill 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>