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
Misaki RoysterUnited KingdomOnyama Limba PROPOSAL
Misaki RoysterUnited KingdomElwin Sharvill UNQUALIFIED
Munro FerenczUnited KingdomIoni Bowcher PROPOSAL
Stacey MacleadSpainOnyama Limba QUALIFIED
Salvatore StockhamJapanAsiya Javayant UNQUALIFIED
Nicolas IturbideUnited KingdomAmy Elsner UNQUALIFIED
Jefferson SchemmerGermanyBernardo Dominic QUALIFIED
Julie StensethArgentinaAmy Elsner RENEWAL
Costa DilliardGermanyOnyama Limba NEW
Arvin AlbaresSpainXuxue Feng UNQUALIFIED
Deepesh ChuiRussiaElwin Sharvill NEGOTIATION
Misaki RoysterArgentinaElwin Sharvill RENEWAL
Faith GillianBrazilIoni Bowcher UNQUALIFIED
Arvin AlbaresItalyBernardo Dominic NEW
Sinclair WaycottItalyIoni Bowcher QUALIFIED
Kaitlin OstroskyArgentinaXuxue Feng QUALIFIED
Jennifer AmigonJapanAsiya Javayant UNQUALIFIED
Leja CaldareraBrazilOnyama Limba QUALIFIED
Maria MarrierItalyBernardo Dominic PROPOSAL
Antonio CaudyCanadaElwin Sharvill QUALIFIED
Cody SaylorsRussiaIoni Bowcher UNQUALIFIED
Wickens NestleJapanElwin Sharvill NEGOTIATION
Juan WieserUnited KingdomElwin Sharvill PROPOSAL
Leon OldroydArgentinaXuxue Feng NEW
Darci PoquetteGermanyIoni Bowcher PROPOSAL
Ivar PaprockiAustraliaElwin Sharvill NEW
Cody SaylorsItalyIoni Bowcher UNQUALIFIED
Wickens NestleBrazilIvan Magalhaes UNQUALIFIED
Adams MorascaJapanAmy Elsner QUALIFIED
Mayumi KolmetzGermanyStephen Shaw PROPOSAL
Silvio SlusarskiJapanXuxue Feng QUALIFIED
Wickens NestleIndiaElwin Sharvill RENEWAL
Aditya KuskoRussiaAmy Elsner UNQUALIFIED
Emily WhobreyUnited KingdomAnna Fali NEGOTIATION
Maisha RulapaughRussiaStephen Shaw RENEWAL
Silvio SlusarskiCanadaIvan Magalhaes QUALIFIED
Deepesh ChuiArgentinaBernardo Dominic UNQUALIFIED
Munro FerenczRussiaElwin Sharvill RENEWAL
Deepesh ChuiGermanyStephen Shaw QUALIFIED
Aruna FigeroaFranceIvan Magalhaes NEGOTIATION
James ButtFranceAsiya Javayant PROPOSAL
Greenwood BologniaSpainAnna Fali NEW
Kadeem FlosiBrazilXuxue Feng PROPOSAL
David DarakjyFranceOnyama Limba NEW
Morrow RutaJapanIvan Magalhaes NEW
Octavia MaletRussiaAsiya Javayant PROPOSAL
Rodrigues CampainFranceAmy Elsner PROPOSAL
Emily WhobreyIndiaIvan Magalhaes NEW
Juan WieserCanadaBernardo Dominic NEW
Misaki RoysterAustraliaElwin Sharvill PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Greenwood BologniaFranceXuxue Feng UNQUALIFIED
Salvatore StockhamArgentinaElwin Sharvill RENEWAL
Claire TollnerJapanAnna Fali NEGOTIATION
David DarakjyRussiaXuxue Feng PROPOSAL
Izzy GarufiSpainXuxue Feng RENEWAL
Silvio SlusarskiRussiaAsiya Javayant UNQUALIFIED
Salvatore StockhamCanadaOnyama Limba QUALIFIED
Cody SaylorsBrazilXuxue Feng NEGOTIATION
Silvio SlusarskiItalyIoni Bowcher NEW
Chavez BriddickRussiaXuxue Feng QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Deepesh ChuiSpain2025-08-05Rousseaux, Michael Esq NEGOTIATION94Elwin Sharvill
1001Mayumi KolmetzArgentina2025-07-26Dorl, James J Esq PROPOSAL42Amy Elsner
1002Antonio CaudyFrance2025-07-28Chanay, Jeffrey A Esq NEW29Stephen Shaw
1003Faith GillianItaly2025-07-27King, Christopher A Esq RENEWAL48Amy Elsner
1004Murillo MaletAustralia2025-08-03Truhlar And Truhlar Attys QUALIFIED65Stephen Shaw
1005Jennifer AmigonCanada2025-08-08Chanay, Jeffrey A Esq UNQUALIFIED87Asiya Javayant
1006Cody SaylorsAustralia2025-08-19Rousseaux, Michael Esq QUALIFIED87Anna Fali
1007Leja CaldareraRussia2025-08-04Chemel, James L Cpa PROPOSAL61Elwin Sharvill
1008Aditya KuskoBrazil2025-08-13King, Christopher A Esq NEW19Bernardo Dominic
1009Salvatore StockhamUnited Kingdom2025-08-17Feiner Bros QUALIFIED68Asiya Javayant
1010Wickens NestleArgentina2025-08-03Commercial Press RENEWAL51Onyama Limba
1011Jefferson SchemmerGermany2025-08-02Morlong Associates QUALIFIED82Stephen Shaw
1012David DarakjyItaly2025-08-09King, Christopher A Esq UNQUALIFIED8Onyama Limba
1013David DarakjyCanada2025-08-19Printing Dimensions PROPOSAL1Amy Elsner
1014Jeanfrancois VenereRussia2025-08-03Morlong Associates NEGOTIATION59Anna Fali
1015Alejandro PerinFrance2025-07-27Buckley Miller Wright UNQUALIFIED89Bernardo Dominic
1016Faith GillianItaly2025-08-16Commercial Press NEW87Bernardo Dominic
1017Tony FollerArgentina2025-07-29Dorl, James J Esq PROPOSAL59Ioni Bowcher
1018Mujtaba NickaJapan2025-08-07Dorl, James J Esq QUALIFIED13Anna Fali
1019Murillo MaletBrazil2025-08-23Chanay, Jeffrey A Esq QUALIFIED23Amy Elsner
1020James ButtGermany2025-08-04Feiner Bros QUALIFIED26Ivan Magalhaes
1021Kaitlin OstroskyUnited Kingdom2025-08-10Dorl, James J Esq QUALIFIED81Ivan Magalhaes
1022Jennifer AmigonRussia2025-08-21Chapman, Ross E Esq NEGOTIATION18Ioni Bowcher
1023Faith GillianRussia2025-07-30Buckley Miller Wright NEGOTIATION19Bernardo Dominic
1024James ButtFrance2025-08-02Chapman, Ross E Esq NEW45Anna Fali
1025Antonio CaudyItaly2025-07-29Rousseaux, Michael Esq NEGOTIATION8Stephen Shaw
1026Octavia MaletBrazil2025-08-15King, Christopher A Esq QUALIFIED27Onyama Limba
1027Sinclair WaycottIndia2025-08-24Buckley Miller Wright QUALIFIED87Amy Elsner
1028Ashley DoeAustralia2025-08-07Chapman, Ross E Esq NEGOTIATION18Stephen Shaw
1029Sinclair WaycottUnited Kingdom2025-07-27Truhlar And Truhlar Attys NEW77Anna Fali
1030Jefferson SchemmerIndia2025-07-30Printing Dimensions UNQUALIFIED23Amy Elsner
1031Maisha RulapaughUnited Kingdom2025-08-23Chanay, Jeffrey A Esq QUALIFIED26Onyama Limba
1032Chavez BriddickArgentina2025-08-12Morlong Associates PROPOSAL36Ivan Magalhaes
1033Greenwood BologniaJapan2025-08-05Morlong Associates PROPOSAL33Stephen Shaw
1034David DarakjyJapan2025-08-09Chanay, Jeffrey A Esq QUALIFIED76Stephen Shaw
1035Alejandro PerinFrance2025-08-06Buckley Miller Wright PROPOSAL33Asiya Javayant
1036Tony FollerCanada2025-08-04Truhlar And Truhlar Attys NEGOTIATION93Onyama Limba
1037Costa DilliardGermany2025-08-01Truhlar And Truhlar Attys RENEWAL43Anna Fali
1038Aika InouyeArgentina2025-07-27Commercial Press UNQUALIFIED60Amy Elsner
1039Francesco ShinkoRussia2025-07-26Feiner Bros UNQUALIFIED3Bernardo Dominic
1040Nicolas IturbideRussia2025-08-07Printing Dimensions NEW34Stephen Shaw
1041Aika InouyeGermany2025-07-30Rangoni Of Florence QUALIFIED49Stephen Shaw
1042Sinclair WaycottItaly2025-08-06Rousseaux, Michael Esq UNQUALIFIED76Xuxue Feng
1043Tony FollerRussia2025-08-08Chanay, Jeffrey A Esq UNQUALIFIED65Ioni Bowcher
1044Arvin AlbaresFrance2025-07-29Chemel, James L Cpa PROPOSAL38Bernardo Dominic
1045James ButtBrazil2025-08-10Benton, John B Jr NEGOTIATION90Stephen Shaw
1046Faith GillianJapan2025-07-31Rousseaux, Michael Esq PROPOSAL86Asiya Javayant
1047Tony FollerFrance2025-08-24Feiner Bros QUALIFIED2Amy Elsner
1048Emily WhobreyRussia2025-08-17Feiner Bros RENEWAL72Bernardo Dominic
1049Cody SaylorsBrazil2025-08-04Truhlar And Truhlar Attys NEW90Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Alejandro PerinCanadaAnna Fali UNQUALIFIED
Jeanfrancois VenereJapanAnna Fali RENEWAL
Chavez BriddickFranceElwin Sharvill UNQUALIFIED
Tony FollerAustraliaElwin Sharvill PROPOSAL
Leon OldroydAustraliaElwin Sharvill PROPOSAL
Wickens NestleFranceAnna Fali NEGOTIATION
Ivar PaprockiRussiaXuxue Feng NEGOTIATION
Jeanfrancois VenereAustraliaIoni Bowcher NEGOTIATION
James ButtGermanyStephen Shaw QUALIFIED
Johnson SergiIndiaIvan Magalhaes NEGOTIATION
James ButtFranceXuxue Feng QUALIFIED
Darci PoquetteBrazilElwin Sharvill NEW
Juan WieserIndiaOnyama Limba RENEWAL
Kadeem FlosiSpainStephen Shaw RENEWAL
Alejandro PerinFranceAsiya Javayant NEGOTIATION
Kaitlin OstroskyBrazilAnna Fali NEGOTIATION
Mayumi KolmetzGermanyAmy Elsner PROPOSAL
Stacey MacleadCanadaStephen Shaw PROPOSAL
Smith GlickFranceBernardo Dominic RENEWAL
Sinclair WaycottGermanyXuxue Feng NEGOTIATION
Octavia MaletArgentinaAnna Fali NEW
Greenwood BologniaIndiaStephen Shaw RENEWAL
Ivar PaprockiAustraliaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiUnited KingdomStephen Shaw NEGOTIATION
Antonio CaudySpainStephen Shaw NEW
Stacey MacleadJapanBernardo Dominic UNQUALIFIED
Stacey MacleadItalyElwin Sharvill PROPOSAL
Emily WhobreyUnited KingdomBernardo Dominic RENEWAL
Aruna FigeroaJapanOnyama Limba PROPOSAL
Ricardo GauchoItalyElwin Sharvill QUALIFIED
Arvin AlbaresAustraliaBernardo Dominic UNQUALIFIED
Octavia MaletBrazilAnna Fali NEW
Johnson SergiGermanyStephen Shaw QUALIFIED
Juan WieserIndiaAnna Fali PROPOSAL
James ButtArgentinaElwin Sharvill NEGOTIATION
Isabel BowleyGermanyIoni Bowcher RENEWAL
Ricardo GauchoFranceIoni Bowcher NEGOTIATION
Stacey MacleadItalyAsiya Javayant QUALIFIED
Rodrigues CampainUnited KingdomAnna Fali PROPOSAL
Octavia MaletAustraliaAnna Fali NEW
Munro FerenczArgentinaAmy Elsner QUALIFIED
Alejandro PerinAustraliaBernardo Dominic PROPOSAL
Maria MarrierAustraliaXuxue Feng NEGOTIATION
Maria MarrierFranceBernardo Dominic NEGOTIATION
Salvatore StockhamSpainElwin Sharvill NEW
Juan WieserItalyElwin Sharvill QUALIFIED
Claire TollnerSpainXuxue Feng NEGOTIATION
Ricardo GauchoRussiaAnna Fali RENEWAL
Ricardo GauchoBrazilAmy Elsner UNQUALIFIED
Morrow RutaGermanyOnyama Limba PROPOSAL
Frozen Columns
Name
Octavia Malet
Chavez Briddick
Faith Gillian
Adams Morasca
Emily Whobrey
Jones Vocelka
Smith Glick
Sinclair Waycott
Alejandro Perin
Rodrigues Campain
Stacey Maclead
Greenwood Bolognia
Emily Whobrey
Stacey Maclead
Octavia Malet
Isabel Bowley
Smith Glick
Isabel Bowley
Izzy Garufi
Izzy Garufi
James Butt
Antonio Caudy
David Darakjy
Adams Morasca
Munro Ferencz
Arvin Albares
Morrow Ruta
Cody Saylors
Johnson Sergi
Sinclair Waycott
Darci Poquette
Costa Dilliard
Greenwood Bolognia
Cody Saylors
Ricardo Gaucho
Faith Gillian
Mayumi Kolmetz
Silvio Slusarski
Sinclair Waycott
Morrow Ruta
Chavez Briddick
Octavia Malet
Clifford Rim
Clifford Rim
Antonio Caudy
Clifford Rim
Alejandro Perin
Silvio Slusarski
Kaitlin Ostrosky
Tony Foller
IdCountryDate
1000Brazil2025-08-09
1001Japan2025-08-23
1002Germany2025-08-24
1003Brazil2025-08-16
1004Brazil2025-08-04
1005India2025-08-08
1006Argentina2025-08-05
1007Germany2025-08-16
1008United Kingdom2025-07-31
1009Germany2025-08-22
1010Japan2025-08-16
1011France2025-08-20
1012United Kingdom2025-08-23
1013India2025-08-13
1014France2025-08-11
1015Australia2025-07-30
1016India2025-08-24
1017Spain2025-08-16
1018Spain2025-08-17
1019Germany2025-08-16
1020France2025-07-28
1021United Kingdom2025-07-31
1022Argentina2025-08-07
1023Germany2025-08-15
1024Germany2025-08-22
1025France2025-08-01
1026Japan2025-08-09
1027Brazil2025-08-01
1028Italy2025-08-04
1029Italy2025-08-21
1030Russia2025-07-31
1031Germany2025-08-24
1032Spain2025-08-18
1033Germany2025-08-19
1034Australia2025-07-31
1035United Kingdom2025-08-10
1036Spain2025-07-29
1037Brazil2025-08-03
1038United Kingdom2025-08-07
1039Brazil2025-08-13
1040Japan2025-08-12
1041Spain2025-08-11
1042Russia2025-08-02
1043Russia2025-08-14
1044France2025-08-18
1045Brazil2025-08-16
1046Brazil2025-08-20
1047Brazil2025-07-31
1048Germany2025-08-24
1049India2025-08-21

On-Demand Data

NameIdCountryDate
Claire Tollner1000Japan2025-08-14
Aika Inouye1001United Kingdom2025-08-22
Kaitlin Ostrosky1002Germany2025-08-10
Ivar Paprocki1003Canada2025-08-01
Stacey Maclead1004India2025-08-15
Smith Glick1005Australia2025-08-05
Francesco Shinko1006Italy2025-08-23
Deepesh Chui1007Spain2025-08-14
Deepesh Chui1008United Kingdom2025-08-10
Kaitlin Ostrosky1009Australia2025-07-31
Jones Vocelka1010Spain2025-08-13
Aditya Kusko1011India2025-08-23
Murillo Malet1012India2025-08-09
Julie Stenseth1013Italy2025-08-07
Darci Poquette1014Argentina2025-08-24
Jefferson Schemmer1015France2025-08-05
Johnson Sergi1016Italy2025-08-14
Morrow Ruta1017Japan2025-08-14
Costa Dilliard1018Italy2025-08-02
Johnson Sergi1019India2025-08-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Antonio CaudyUnited KingdomStephen Shaw QUALIFIED
Isabel BowleyUnited KingdomBernardo Dominic NEW
Aditya KuskoSpainOnyama Limba UNQUALIFIED
Wickens NestleItalyStephen Shaw NEGOTIATION
Greenwood BologniaIndiaAmy Elsner PROPOSAL
Antonio CaudySpainIvan Magalhaes NEW
Adams MorascaBrazilBernardo Dominic RENEWAL
James ButtArgentinaElwin Sharvill PROPOSAL
Wickens NestleArgentinaIvan Magalhaes QUALIFIED
Wickens NestleCanadaIoni Bowcher PROPOSAL
Juan WieserArgentinaIvan Magalhaes NEGOTIATION
Julie StensethAustraliaAsiya Javayant UNQUALIFIED
Tony FollerRussiaIvan Magalhaes PROPOSAL
Aruna FigeroaBrazilAmy Elsner UNQUALIFIED
Tony FollerCanadaIvan Magalhaes PROPOSAL
Rodrigues CampainRussiaElwin Sharvill QUALIFIED
Jeanfrancois VenereAustraliaElwin Sharvill UNQUALIFIED
Kadeem FlosiItalyIoni Bowcher NEGOTIATION
Izzy GarufiBrazilXuxue Feng QUALIFIED
Arvin AlbaresArgentinaStephen Shaw QUALIFIED
Salvatore StockhamAustraliaBernardo Dominic RENEWAL
Murillo MaletGermanyAmy Elsner UNQUALIFIED
Costa DilliardAustraliaAnna Fali NEW
Clifford RimCanadaElwin Sharvill RENEWAL
Wickens NestleRussiaIvan Magalhaes RENEWAL
Aika InouyeAustraliaAmy Elsner NEGOTIATION
David DarakjyIndiaOnyama Limba RENEWAL
Mayumi KolmetzArgentinaAmy Elsner NEGOTIATION
Adams MorascaBrazilAmy Elsner NEW
Greenwood BologniaFranceAsiya Javayant QUALIFIED
Darci PoquetteArgentinaXuxue Feng QUALIFIED
Nicolas IturbideSpainIoni Bowcher QUALIFIED
Izzy GarufiRussiaIvan Magalhaes UNQUALIFIED
Kaitlin OstroskyFranceAsiya Javayant PROPOSAL
Morrow RutaFranceOnyama Limba NEW
Aruna FigeroaJapanIvan Magalhaes PROPOSAL
Chavez BriddickItalyAmy Elsner RENEWAL
Smith GlickJapanBernardo Dominic UNQUALIFIED
Kadeem FlosiItalyBernardo Dominic PROPOSAL
James ButtItalyAnna Fali 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>