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
Aika InouyeArgentinaIoni Bowcher UNQUALIFIED
Salvatore StockhamSpainIvan Magalhaes RENEWAL
Maria MarrierAustraliaOnyama Limba NEGOTIATION
Rodrigues CampainAustraliaOnyama Limba NEGOTIATION
Darci PoquetteBrazilStephen Shaw QUALIFIED
Chavez BriddickFranceElwin Sharvill NEGOTIATION
Deepesh ChuiUnited KingdomBernardo Dominic UNQUALIFIED
Johnson SergiAustraliaXuxue Feng NEW
Stacey MacleadAustraliaElwin Sharvill RENEWAL
Faith GillianItalyXuxue Feng QUALIFIED
Ivar PaprockiRussiaAsiya Javayant NEGOTIATION
Cody SaylorsItalyElwin Sharvill QUALIFIED
Kaitlin OstroskyUnited KingdomAnna Fali QUALIFIED
Cody SaylorsFranceIoni Bowcher NEGOTIATION
Chavez BriddickIndiaIoni Bowcher NEW
Kaitlin OstroskyCanadaElwin Sharvill QUALIFIED
Claire TollnerBrazilAsiya Javayant UNQUALIFIED
Jeanfrancois VenereItalyAmy Elsner QUALIFIED
Aika InouyeUnited KingdomAnna Fali RENEWAL
Julie StensethRussiaAsiya Javayant NEGOTIATION
Costa DilliardUnited KingdomAsiya Javayant QUALIFIED
Isabel BowleyAustraliaOnyama Limba QUALIFIED
Izzy GarufiJapanIoni Bowcher QUALIFIED
Ashley DoeAustraliaAmy Elsner NEW
Claire TollnerArgentinaAmy Elsner NEGOTIATION
Jones VocelkaBrazilOnyama Limba PROPOSAL
Maisha RulapaughBrazilOnyama Limba QUALIFIED
Ashley DoeUnited KingdomStephen Shaw NEW
Alejandro PerinRussiaAmy Elsner RENEWAL
Darci PoquetteIndiaOnyama Limba UNQUALIFIED
Faith GillianBrazilStephen Shaw NEW
Mayumi KolmetzItalyElwin Sharvill UNQUALIFIED
Tony FollerRussiaIoni Bowcher NEGOTIATION
Wickens NestleIndiaOnyama Limba QUALIFIED
Sinclair WaycottRussiaXuxue Feng RENEWAL
James ButtIndiaIoni Bowcher UNQUALIFIED
Darci PoquetteArgentinaIvan Magalhaes RENEWAL
Clifford RimBrazilAmy Elsner NEW
Jones VocelkaRussiaXuxue Feng RENEWAL
Maria MarrierFranceOnyama Limba UNQUALIFIED
Leon OldroydJapanAsiya Javayant PROPOSAL
Jefferson SchemmerArgentinaAmy Elsner RENEWAL
Ashley DoeUnited KingdomXuxue Feng NEGOTIATION
Murillo MaletRussiaAnna Fali PROPOSAL
Salvatore StockhamRussiaIvan Magalhaes QUALIFIED
Aika InouyeBrazilElwin Sharvill UNQUALIFIED
Emily WhobreySpainXuxue Feng RENEWAL
Isabel BowleyIndiaBernardo Dominic NEW
Leja CaldareraAustraliaIoni Bowcher NEGOTIATION
Aditya KuskoBrazilElwin Sharvill RENEWAL
Horizontal
NameCountryRepresentativeStatus
Leon OldroydFranceXuxue Feng PROPOSAL
Nicolas IturbideRussiaOnyama Limba NEGOTIATION
Mayumi KolmetzItalyOnyama Limba NEW
James ButtRussiaOnyama Limba UNQUALIFIED
David DarakjyGermanyElwin Sharvill NEW
Jones VocelkaArgentinaBernardo Dominic NEGOTIATION
Darci PoquetteGermanyStephen Shaw NEW
Izzy GarufiBrazilElwin Sharvill NEW
Jeanfrancois VenereAustraliaAsiya Javayant RENEWAL
Izzy GarufiFranceStephen Shaw PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Clifford RimIndia2026-04-21Dorl, James J Esq UNQUALIFIED63Bernardo Dominic
1001Sinclair WaycottGermany2026-04-22Chemel, James L Cpa NEW59Xuxue Feng
1002Arvin AlbaresFrance2026-04-24Rousseaux, Michael Esq QUALIFIED6Amy Elsner
1003Sinclair WaycottFrance2026-04-21Morlong Associates NEW84Amy Elsner
1004Morrow RutaArgentina2026-04-12Benton, John B Jr NEGOTIATION29Anna Fali
1005Cody SaylorsArgentina2026-04-12Chanay, Jeffrey A Esq RENEWAL40Elwin Sharvill
1006Silvio SlusarskiFrance2026-04-18Morlong Associates NEW70Asiya Javayant
1007Jeanfrancois VenereArgentina2026-03-29Rousseaux, Michael Esq RENEWAL31Anna Fali
1008Claire TollnerCanada2026-04-18Morlong Associates QUALIFIED0Asiya Javayant
1009Juan WieserJapan2026-04-07Buckley Miller Wright QUALIFIED26Onyama Limba
1010Wickens NestleItaly2026-04-09Dorl, James J Esq RENEWAL11Stephen Shaw
1011Sinclair WaycottFrance2026-04-22Rangoni Of Florence QUALIFIED77Stephen Shaw
1012Isabel BowleyUnited Kingdom2026-04-15Chapman, Ross E Esq RENEWAL88Amy Elsner
1013Maisha RulapaughUnited Kingdom2026-04-15Chanay, Jeffrey A Esq RENEWAL30Stephen Shaw
1014Faith GillianBrazil2026-04-01Chemel, James L Cpa NEGOTIATION93Ivan Magalhaes
1015Jeanfrancois VenereGermany2026-04-22Chapman, Ross E Esq UNQUALIFIED32Bernardo Dominic
1016Faith GillianSpain2026-04-11Buckley Miller Wright NEGOTIATION18Onyama Limba
1017Jefferson SchemmerUnited Kingdom2026-04-08Rousseaux, Michael Esq QUALIFIED99Xuxue Feng
1018Maria MarrierRussia2026-04-24Buckley Miller Wright NEGOTIATION39Anna Fali
1019Munro FerenczRussia2026-03-30Chapman, Ross E Esq UNQUALIFIED98Ioni Bowcher
1020Darci PoquetteSpain2026-03-26Truhlar And Truhlar Attys NEGOTIATION48Anna Fali
1021Sinclair WaycottAustralia2026-04-23Feiner Bros PROPOSAL14Ivan Magalhaes
1022Alejandro PerinSpain2026-04-15King, Christopher A Esq UNQUALIFIED57Xuxue Feng
1023Jennifer AmigonCanada2026-03-30Printing Dimensions UNQUALIFIED10Xuxue Feng
1024Costa DilliardArgentina2026-04-23Chapman, Ross E Esq QUALIFIED46Stephen Shaw
1025Kadeem FlosiUnited Kingdom2026-04-05Truhlar And Truhlar Attys UNQUALIFIED4Amy Elsner
1026Maria MarrierCanada2026-04-10Morlong Associates RENEWAL7Stephen Shaw
1027Arvin AlbaresItaly2026-04-19Benton, John B Jr NEW63Bernardo Dominic
1028Izzy GarufiIndia2026-04-20Truhlar And Truhlar Attys RENEWAL97Ioni Bowcher
1029Jones VocelkaFrance2026-04-12Truhlar And Truhlar Attys NEW68Bernardo Dominic
1030Clifford RimArgentina2026-04-11Rousseaux, Michael Esq PROPOSAL42Bernardo Dominic
1031Aruna FigeroaUnited Kingdom2026-03-29Chanay, Jeffrey A Esq PROPOSAL81Anna Fali
1032Julie StensethCanada2026-04-06Buckley Miller Wright QUALIFIED87Onyama Limba
1033Mayumi KolmetzIndia2026-04-15Feltz Printing Service NEW87Stephen Shaw
1034Leon OldroydRussia2026-04-03Rousseaux, Michael Esq RENEWAL70Amy Elsner
1035Antonio CaudyBrazil2026-03-31King, Christopher A Esq QUALIFIED25Bernardo Dominic
1036Jones VocelkaAustralia2026-03-29Commercial Press NEGOTIATION22Onyama Limba
1037Jefferson SchemmerItaly2026-03-31Buckley Miller Wright QUALIFIED88Amy Elsner
1038Nicolas IturbideUnited Kingdom2026-04-19Rangoni Of Florence PROPOSAL28Anna Fali
1039Isabel BowleyArgentina2026-04-12Rangoni Of Florence NEW38Ioni Bowcher
1040Sinclair WaycottSpain2026-03-29Dorl, James J Esq UNQUALIFIED11Anna Fali
1041Jeanfrancois VenereIndia2026-04-08Chanay, Jeffrey A Esq RENEWAL26Ivan Magalhaes
1042Jefferson SchemmerRussia2026-04-15Chemel, James L Cpa PROPOSAL26Onyama Limba
1043Emily WhobreyFrance2026-04-17Feiner Bros PROPOSAL96Ivan Magalhaes
1044Clifford RimCanada2026-04-11Chemel, James L Cpa UNQUALIFIED91Amy Elsner
1045Smith GlickBrazil2026-04-08Truhlar And Truhlar Attys NEW75Ioni Bowcher
1046Misaki RoysterFrance2026-04-08Morlong Associates RENEWAL81Elwin Sharvill
1047Tony FollerSpain2026-04-05Dorl, James J Esq RENEWAL89Asiya Javayant
1048Jefferson SchemmerFrance2026-04-22Feiner Bros QUALIFIED60Onyama Limba
1049Aika InouyeItaly2026-04-10Truhlar And Truhlar Attys NEW36Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Izzy GarufiIndiaBernardo Dominic RENEWAL
Francesco ShinkoFranceIvan Magalhaes PROPOSAL
Smith GlickSpainElwin Sharvill NEGOTIATION
Darci PoquetteBrazilIvan Magalhaes NEW
Silvio SlusarskiGermanyAsiya Javayant RENEWAL
James ButtSpainXuxue Feng NEGOTIATION
Jones VocelkaIndiaOnyama Limba PROPOSAL
Ivar PaprockiItalyOnyama Limba RENEWAL
Antonio CaudyCanadaIvan Magalhaes NEW
James ButtJapanAsiya Javayant RENEWAL
Ricardo GauchoFranceIvan Magalhaes UNQUALIFIED
Francesco ShinkoIndiaXuxue Feng PROPOSAL
Aruna FigeroaIndiaOnyama Limba NEGOTIATION
Maisha RulapaughGermanyIvan Magalhaes PROPOSAL
Morrow RutaBrazilXuxue Feng QUALIFIED
Jones VocelkaAustraliaStephen Shaw PROPOSAL
Emily WhobreyIndiaOnyama Limba QUALIFIED
Kaitlin OstroskyIndiaAmy Elsner UNQUALIFIED
Deepesh ChuiItalyAmy Elsner NEW
Cody SaylorsBrazilXuxue Feng UNQUALIFIED
Leon OldroydItalyAnna Fali NEGOTIATION
Aruna FigeroaFranceStephen Shaw PROPOSAL
Silvio SlusarskiJapanStephen Shaw QUALIFIED
Izzy GarufiItalyXuxue Feng QUALIFIED
Izzy GarufiSpainIvan Magalhaes QUALIFIED
Faith GillianArgentinaIvan Magalhaes RENEWAL
Isabel BowleyJapanIoni Bowcher UNQUALIFIED
Octavia MaletSpainXuxue Feng NEGOTIATION
Misaki RoysterFranceElwin Sharvill PROPOSAL
Kaitlin OstroskyRussiaXuxue Feng NEW
Alejandro PerinFranceStephen Shaw PROPOSAL
Silvio SlusarskiRussiaXuxue Feng QUALIFIED
Deepesh ChuiIndiaBernardo Dominic UNQUALIFIED
Aika InouyeRussiaElwin Sharvill RENEWAL
Murillo MaletGermanyStephen Shaw RENEWAL
Jefferson SchemmerCanadaAmy Elsner PROPOSAL
James ButtUnited KingdomAmy Elsner QUALIFIED
Mayumi KolmetzFranceIvan Magalhaes QUALIFIED
David DarakjyAustraliaOnyama Limba QUALIFIED
Izzy GarufiCanadaAsiya Javayant NEGOTIATION
Ashley DoeSpainIoni Bowcher NEW
Claire TollnerAustraliaElwin Sharvill PROPOSAL
Smith GlickAustraliaAsiya Javayant UNQUALIFIED
Costa DilliardRussiaOnyama Limba NEW
Alejandro PerinArgentinaOnyama Limba NEGOTIATION
David DarakjySpainXuxue Feng QUALIFIED
Salvatore StockhamIndiaIvan Magalhaes NEGOTIATION
Octavia MaletItalyAsiya Javayant PROPOSAL
Greenwood BologniaBrazilAmy Elsner UNQUALIFIED
Cody SaylorsBrazilIoni Bowcher QUALIFIED
Frozen Columns
Name
Leon Oldroyd
Kaitlin Ostrosky
Aruna Figeroa
Octavia Malet
Greenwood Bolognia
Francesco Shinko
Jennifer Amigon
Octavia Malet
Alejandro Perin
Wickens Nestle
Darci Poquette
Francesco Shinko
Izzy Garufi
Chavez Briddick
Darci Poquette
Greenwood Bolognia
Murillo Malet
Chavez Briddick
Kadeem Flosi
Chavez Briddick
Izzy Garufi
Johnson Sergi
Rodrigues Campain
Isabel Bowley
Arvin Albares
Kadeem Flosi
Alejandro Perin
Claire Tollner
Julie Stenseth
Silvio Slusarski
Adams Morasca
Smith Glick
Jefferson Schemmer
Juan Wieser
Leja Caldarera
Antonio Caudy
Ricardo Gaucho
Aruna Figeroa
Stacey Maclead
Aditya Kusko
Mujtaba Nicka
Ricardo Gaucho
Nicolas Iturbide
Darci Poquette
Greenwood Bolognia
Darci Poquette
Munro Ferencz
Emily Whobrey
Adams Morasca
Chavez Briddick
IdCountryDate
1000United Kingdom2026-03-27
1001Spain2026-04-15
1002Spain2026-04-14
1003France2026-04-16
1004Argentina2026-04-13
1005United Kingdom2026-04-22
1006Japan2026-04-05
1007Germany2026-04-05
1008Japan2026-03-27
1009Spain2026-04-04
1010Germany2026-03-28
1011Argentina2026-04-07
1012Argentina2026-03-27
1013France2026-04-16
1014Germany2026-04-18
1015Australia2026-04-04
1016Brazil2026-03-26
1017Argentina2026-04-11
1018Argentina2026-03-26
1019United Kingdom2026-04-15
1020India2026-04-09
1021Russia2026-03-29
1022Spain2026-04-22
1023Australia2026-03-29
1024Germany2026-04-09
1025India2026-04-04
1026Canada2026-04-07
1027India2026-04-14
1028France2026-04-16
1029Germany2026-04-08
1030Australia2026-04-24
1031Argentina2026-03-28
1032United Kingdom2026-04-17
1033India2026-04-17
1034Canada2026-04-09
1035Japan2026-04-18
1036India2026-03-27
1037Australia2026-03-30
1038Japan2026-04-04
1039France2026-04-07
1040Spain2026-04-06
1041Italy2026-04-16
1042Russia2026-04-07
1043United Kingdom2026-04-21
1044Germany2026-03-31
1045Russia2026-04-03
1046Japan2026-04-07
1047Spain2026-03-26
1048Russia2026-03-30
1049India2026-03-26

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000Japan2026-03-28
Cody Saylors1001Canada2026-04-06
Deepesh Chui1002Italy2026-04-24
Darci Poquette1003France2026-04-23
Mayumi Kolmetz1004Italy2026-03-31
Deepesh Chui1005India2026-04-19
Octavia Malet1006Spain2026-04-23
Juan Wieser1007Germany2026-04-05
Smith Glick1008Germany2026-04-08
Octavia Malet1009France2026-03-31
Murillo Malet1010Russia2026-04-01
Munro Ferencz1011Australia2026-04-05
Izzy Garufi1012United Kingdom2026-04-20
Kadeem Flosi1013Australia2026-03-26
Francesco Shinko1014United Kingdom2026-04-06
Smith Glick1015Italy2026-04-08
Isabel Bowley1016Germany2026-04-10
Chavez Briddick1017United Kingdom2026-04-01
Mujtaba Nicka1018Russia2026-04-13
Smith Glick1019Australia2026-04-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jefferson SchemmerBrazilAmy Elsner UNQUALIFIED
Ashley DoeJapanIoni Bowcher NEW
Juan WieserCanadaIvan Magalhaes NEW
Silvio SlusarskiUnited KingdomIoni Bowcher NEW
Darci PoquetteGermanyAmy Elsner RENEWAL
Aditya KuskoJapanXuxue Feng NEW
Aruna FigeroaGermanyAnna Fali UNQUALIFIED
Faith GillianFranceAnna Fali QUALIFIED
Ashley DoeAustraliaOnyama Limba RENEWAL
Leja CaldareraAustraliaIoni Bowcher RENEWAL
Smith GlickItalyIvan Magalhaes NEGOTIATION
Isabel BowleyArgentinaAnna Fali NEW
Leja CaldareraGermanyAsiya Javayant NEW
Clifford RimIndiaOnyama Limba PROPOSAL
Murillo MaletJapanAnna Fali NEW
Maisha RulapaughRussiaAnna Fali UNQUALIFIED
Jeanfrancois VenereUnited KingdomAsiya Javayant QUALIFIED
Aditya KuskoCanadaXuxue Feng QUALIFIED
Maria MarrierJapanIvan Magalhaes NEGOTIATION
Aditya KuskoRussiaStephen Shaw NEGOTIATION
Salvatore StockhamJapanXuxue Feng NEGOTIATION
Emily WhobreyGermanyBernardo Dominic QUALIFIED
Misaki RoysterItalyAmy Elsner NEW
Chavez BriddickArgentinaBernardo Dominic PROPOSAL
Jennifer AmigonJapanElwin Sharvill QUALIFIED
Costa DilliardSpainIvan Magalhaes RENEWAL
Clifford RimIndiaOnyama Limba NEGOTIATION
Jennifer AmigonSpainIvan Magalhaes QUALIFIED
Munro FerenczFranceIvan Magalhaes NEW
Tony FollerItalyXuxue Feng UNQUALIFIED
Costa DilliardGermanyOnyama Limba UNQUALIFIED
Antonio CaudyGermanyElwin Sharvill PROPOSAL
Francesco ShinkoGermanyAmy Elsner RENEWAL
Ivar PaprockiUnited KingdomStephen Shaw UNQUALIFIED
Aditya KuskoIndiaAnna Fali RENEWAL
Deepesh ChuiCanadaXuxue Feng NEW
Munro FerenczRussiaBernardo Dominic UNQUALIFIED
Juan WieserItalyIvan Magalhaes UNQUALIFIED
Deepesh ChuiGermanyAmy Elsner UNQUALIFIED
Morrow RutaBrazilIvan Magalhaes 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>