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
Johnson SergiSpainOnyama Limba UNQUALIFIED
Rodrigues CampainJapanIoni Bowcher NEW
Izzy GarufiArgentinaXuxue Feng QUALIFIED
Deepesh ChuiSpainIvan Magalhaes QUALIFIED
Jefferson SchemmerFranceAmy Elsner NEW
Darci PoquetteBrazilXuxue Feng UNQUALIFIED
Greenwood BologniaFranceStephen Shaw PROPOSAL
Nicolas IturbideItalyIoni Bowcher PROPOSAL
Tony FollerJapanIvan Magalhaes NEGOTIATION
Antonio CaudyJapanBernardo Dominic QUALIFIED
Tony FollerFranceIvan Magalhaes NEGOTIATION
Kaitlin OstroskyGermanyXuxue Feng NEGOTIATION
Costa DilliardJapanAnna Fali NEW
Izzy GarufiItalyAmy Elsner RENEWAL
Sinclair WaycottIndiaIvan Magalhaes RENEWAL
Salvatore StockhamRussiaAnna Fali NEGOTIATION
Ashley DoeIndiaIoni Bowcher NEW
Aditya KuskoSpainAmy Elsner UNQUALIFIED
Jones VocelkaIndiaIoni Bowcher UNQUALIFIED
Aika InouyeAustraliaBernardo Dominic NEGOTIATION
Sinclair WaycottIndiaAnna Fali PROPOSAL
Antonio CaudyCanadaXuxue Feng UNQUALIFIED
Stacey MacleadSpainAmy Elsner NEGOTIATION
Jeanfrancois VenereIndiaAsiya Javayant PROPOSAL
Izzy GarufiRussiaIvan Magalhaes UNQUALIFIED
Wickens NestleItalyIvan Magalhaes PROPOSAL
Tony FollerSpainElwin Sharvill NEW
Arvin AlbaresSpainIoni Bowcher UNQUALIFIED
Sinclair WaycottIndiaIoni Bowcher NEW
Chavez BriddickItalyAnna Fali PROPOSAL
Wickens NestleAustraliaAmy Elsner UNQUALIFIED
Alejandro PerinFranceOnyama Limba PROPOSAL
Aika InouyeBrazilStephen Shaw RENEWAL
Stacey MacleadUnited KingdomAnna Fali UNQUALIFIED
Johnson SergiFranceAnna Fali RENEWAL
Juan WieserArgentinaStephen Shaw UNQUALIFIED
Adams MorascaFranceAsiya Javayant UNQUALIFIED
Francesco ShinkoBrazilBernardo Dominic UNQUALIFIED
Aika InouyeItalyAmy Elsner RENEWAL
Leon OldroydSpainOnyama Limba NEGOTIATION
Costa DilliardItalyBernardo Dominic UNQUALIFIED
Julie StensethSpainStephen Shaw NEW
Sinclair WaycottIndiaIvan Magalhaes UNQUALIFIED
Emily WhobreyAustraliaAmy Elsner PROPOSAL
Kadeem FlosiBrazilIvan Magalhaes UNQUALIFIED
Izzy GarufiFranceAmy Elsner UNQUALIFIED
Nicolas IturbideBrazilOnyama Limba NEGOTIATION
Ashley DoeJapanAnna Fali RENEWAL
Nicolas IturbideArgentinaAsiya Javayant UNQUALIFIED
Greenwood BologniaAustraliaAsiya Javayant PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Johnson SergiFranceIoni Bowcher RENEWAL
Octavia MaletRussiaOnyama Limba PROPOSAL
Tony FollerItalyAmy Elsner UNQUALIFIED
Johnson SergiGermanyBernardo Dominic QUALIFIED
Mujtaba NickaItalyIoni Bowcher RENEWAL
Faith GillianCanadaBernardo Dominic NEGOTIATION
Juan WieserCanadaStephen Shaw QUALIFIED
Wickens NestleIndiaAnna Fali PROPOSAL
Smith GlickJapanOnyama Limba PROPOSAL
Kaitlin OstroskyRussiaAmy Elsner UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Murillo MaletBrazil2025-06-25Chemel, James L Cpa UNQUALIFIED45Stephen Shaw
1001Stacey MacleadAustralia2025-07-06Rangoni Of Florence PROPOSAL91Ioni Bowcher
1002Francesco ShinkoIndia2025-06-14Chapman, Ross E Esq QUALIFIED66Amy Elsner
1003Julie StensethUnited Kingdom2025-06-28Dorl, James J Esq RENEWAL97Stephen Shaw
1004Sinclair WaycottRussia2025-06-25Rousseaux, Michael Esq NEW71Asiya Javayant
1005Ricardo GauchoJapan2025-07-03Feiner Bros QUALIFIED27Ivan Magalhaes
1006Leja CaldareraFrance2025-06-25Truhlar And Truhlar Attys RENEWAL11Ivan Magalhaes
1007Adams MorascaSpain2025-06-17Rangoni Of Florence RENEWAL19Ivan Magalhaes
1008Juan WieserUnited Kingdom2025-06-30Feiner Bros NEW54Stephen Shaw
1009Antonio CaudyJapan2025-07-04Dorl, James J Esq QUALIFIED74Elwin Sharvill
1010Deepesh ChuiItaly2025-06-08Chanay, Jeffrey A Esq NEW83Anna Fali
1011Smith GlickJapan2025-06-24Chanay, Jeffrey A Esq QUALIFIED87Ivan Magalhaes
1012Morrow RutaCanada2025-06-21Truhlar And Truhlar Attys NEW2Xuxue Feng
1013Adams MorascaGermany2025-06-26Chapman, Ross E Esq QUALIFIED51Onyama Limba
1014David DarakjyAustralia2025-06-07Chanay, Jeffrey A Esq NEW42Stephen Shaw
1015Jefferson SchemmerGermany2025-06-11Commercial Press UNQUALIFIED75Bernardo Dominic
1016Emily WhobreyFrance2025-06-25Chanay, Jeffrey A Esq UNQUALIFIED72Bernardo Dominic
1017Smith GlickSpain2025-06-23Printing Dimensions PROPOSAL39Asiya Javayant
1018Greenwood BologniaArgentina2025-06-28Rangoni Of Florence NEGOTIATION0Asiya Javayant
1019Chavez BriddickIndia2025-07-04Rangoni Of Florence NEW19Bernardo Dominic
1020Izzy GarufiRussia2025-06-14Truhlar And Truhlar Attys NEGOTIATION87Xuxue Feng
1021Isabel BowleyCanada2025-06-09Buckley Miller Wright NEGOTIATION58Amy Elsner
1022Aruna FigeroaArgentina2025-06-07Feiner Bros NEW13Bernardo Dominic
1023Isabel BowleySpain2025-06-25King, Christopher A Esq RENEWAL27Ioni Bowcher
1024Kadeem FlosiJapan2025-06-14Chanay, Jeffrey A Esq UNQUALIFIED78Xuxue Feng
1025James ButtUnited Kingdom2025-06-29Truhlar And Truhlar Attys QUALIFIED47Elwin Sharvill
1026Clifford RimAustralia2025-06-25Truhlar And Truhlar Attys QUALIFIED26Asiya Javayant
1027Misaki RoysterItaly2025-06-17Dorl, James J Esq NEW61Bernardo Dominic
1028Darci PoquetteItaly2025-07-06Chapman, Ross E Esq UNQUALIFIED72Amy Elsner
1029Deepesh ChuiArgentina2025-06-12Buckley Miller Wright NEW99Elwin Sharvill
1030Salvatore StockhamFrance2025-07-04Feiner Bros NEW38Asiya Javayant
1031Aditya KuskoSpain2025-07-01Chapman, Ross E Esq UNQUALIFIED65Xuxue Feng
1032Aruna FigeroaJapan2025-06-24Buckley Miller Wright UNQUALIFIED40Xuxue Feng
1033Aika InouyeItaly2025-07-06Chemel, James L Cpa RENEWAL52Amy Elsner
1034Chavez BriddickFrance2025-06-27Chemel, James L Cpa NEGOTIATION93Asiya Javayant
1035Costa DilliardGermany2025-06-26Morlong Associates UNQUALIFIED64Elwin Sharvill
1036Emily WhobreyIndia2025-07-01Morlong Associates UNQUALIFIED57Ivan Magalhaes
1037Mujtaba NickaGermany2025-06-28Feiner Bros UNQUALIFIED66Anna Fali
1038Ricardo GauchoIndia2025-06-26Printing Dimensions QUALIFIED20Asiya Javayant
1039Ivar PaprockiFrance2025-06-11Benton, John B Jr UNQUALIFIED11Bernardo Dominic
1040Arvin AlbaresCanada2025-07-04Rousseaux, Michael Esq QUALIFIED5Ioni Bowcher
1041Claire TollnerItaly2025-06-23Truhlar And Truhlar Attys PROPOSAL97Ioni Bowcher
1042James ButtFrance2025-06-17Feiner Bros PROPOSAL42Anna Fali
1043Adams MorascaFrance2025-06-10Chapman, Ross E Esq RENEWAL65Xuxue Feng
1044Isabel BowleyUnited Kingdom2025-06-14Buckley Miller Wright PROPOSAL40Asiya Javayant
1045James ButtBrazil2025-07-06Chemel, James L Cpa UNQUALIFIED45Xuxue Feng
1046Johnson SergiFrance2025-06-15Printing Dimensions NEW92Onyama Limba
1047Leja CaldareraItaly2025-06-19Dorl, James J Esq RENEWAL62Anna Fali
1048Octavia MaletCanada2025-06-24Rangoni Of Florence NEGOTIATION51Elwin Sharvill
1049Isabel BowleyGermany2025-06-28Commercial Press UNQUALIFIED47Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Jefferson SchemmerGermanyStephen Shaw PROPOSAL
Nicolas IturbideAustraliaAnna Fali RENEWAL
Ashley DoeGermanyAsiya Javayant QUALIFIED
Munro FerenczArgentinaXuxue Feng PROPOSAL
Maisha RulapaughGermanyOnyama Limba UNQUALIFIED
Faith GillianRussiaAsiya Javayant NEW
Misaki RoysterAustraliaAmy Elsner RENEWAL
Misaki RoysterIndiaXuxue Feng RENEWAL
Ricardo GauchoAustraliaAnna Fali UNQUALIFIED
Clifford RimFranceIoni Bowcher PROPOSAL
Jeanfrancois VenereBrazilElwin Sharvill PROPOSAL
Jefferson SchemmerArgentinaOnyama Limba QUALIFIED
Aika InouyeSpainOnyama Limba PROPOSAL
Jones VocelkaRussiaAnna Fali PROPOSAL
Costa DilliardJapanIvan Magalhaes NEW
Kadeem FlosiBrazilXuxue Feng UNQUALIFIED
Aditya KuskoUnited KingdomBernardo Dominic RENEWAL
Isabel BowleyRussiaElwin Sharvill PROPOSAL
Alejandro PerinAustraliaAmy Elsner UNQUALIFIED
Adams MorascaIndiaAmy Elsner PROPOSAL
Murillo MaletRussiaAnna Fali QUALIFIED
Izzy GarufiRussiaIvan Magalhaes NEW
Stacey MacleadCanadaElwin Sharvill UNQUALIFIED
Johnson SergiJapanOnyama Limba UNQUALIFIED
Deepesh ChuiJapanOnyama Limba NEGOTIATION
Isabel BowleyAustraliaBernardo Dominic NEGOTIATION
Murillo MaletSpainAmy Elsner UNQUALIFIED
Arvin AlbaresRussiaIvan Magalhaes RENEWAL
Ricardo GauchoCanadaIvan Magalhaes RENEWAL
Stacey MacleadRussiaBernardo Dominic NEW
Cody SaylorsJapanStephen Shaw UNQUALIFIED
Jennifer AmigonItalyAsiya Javayant NEW
Antonio CaudyJapanAsiya Javayant PROPOSAL
Kaitlin OstroskyUnited KingdomIvan Magalhaes UNQUALIFIED
Adams MorascaSpainElwin Sharvill PROPOSAL
Murillo MaletIndiaIvan Magalhaes NEGOTIATION
James ButtCanadaStephen Shaw UNQUALIFIED
Jones VocelkaGermanyElwin Sharvill NEGOTIATION
Ashley DoeArgentinaStephen Shaw UNQUALIFIED
Nicolas IturbideIndiaIvan Magalhaes NEGOTIATION
Leon OldroydBrazilIoni Bowcher RENEWAL
Murillo MaletCanadaAsiya Javayant UNQUALIFIED
Nicolas IturbideCanadaStephen Shaw QUALIFIED
Deepesh ChuiAustraliaElwin Sharvill QUALIFIED
Cody SaylorsCanadaStephen Shaw QUALIFIED
Leon OldroydUnited KingdomAsiya Javayant PROPOSAL
Faith GillianFranceAmy Elsner QUALIFIED
Jones VocelkaRussiaIoni Bowcher NEGOTIATION
Salvatore StockhamIndiaStephen Shaw NEW
Jefferson SchemmerCanadaAmy Elsner RENEWAL
Frozen Columns
Name
Johnson Sergi
Murillo Malet
Mayumi Kolmetz
Munro Ferencz
Aditya Kusko
Izzy Garufi
Stacey Maclead
Johnson Sergi
Emily Whobrey
Murillo Malet
Leon Oldroyd
Chavez Briddick
Izzy Garufi
Octavia Malet
Smith Glick
Octavia Malet
Maria Marrier
Murillo Malet
Emily Whobrey
Murillo Malet
Arvin Albares
Jefferson Schemmer
Octavia Malet
James Butt
Kadeem Flosi
Smith Glick
Arvin Albares
Jeanfrancois Venere
Antonio Caudy
Jeanfrancois Venere
Jefferson Schemmer
Tony Foller
Rodrigues Campain
Octavia Malet
Claire Tollner
Octavia Malet
Costa Dilliard
David Darakjy
Kadeem Flosi
Isabel Bowley
Deepesh Chui
Aika Inouye
Antonio Caudy
Darci Poquette
Aditya Kusko
Rodrigues Campain
Greenwood Bolognia
Smith Glick
Cody Saylors
Leon Oldroyd
IdCountryDate
1000Japan2025-06-24
1001Brazil2025-06-20
1002Germany2025-07-06
1003Italy2025-06-16
1004Russia2025-06-13
1005Spain2025-06-28
1006Japan2025-07-01
1007Spain2025-07-05
1008Germany2025-06-18
1009Spain2025-07-04
1010France2025-06-15
1011France2025-06-15
1012Argentina2025-06-25
1013India2025-06-11
1014Argentina2025-06-21
1015Australia2025-07-04
1016United Kingdom2025-06-18
1017India2025-06-13
1018Russia2025-07-02
1019Germany2025-06-08
1020Brazil2025-06-07
1021Brazil2025-06-19
1022Italy2025-07-03
1023Canada2025-07-01
1024Brazil2025-06-17
1025Argentina2025-06-18
1026India2025-06-08
1027United Kingdom2025-06-07
1028Japan2025-07-04
1029Germany2025-06-30
1030United Kingdom2025-06-22
1031Argentina2025-06-27
1032Brazil2025-07-04
1033Japan2025-06-25
1034Brazil2025-06-13
1035Australia2025-06-22
1036United Kingdom2025-07-06
1037France2025-06-18
1038Argentina2025-06-07
1039Brazil2025-06-14
1040Italy2025-06-14
1041Australia2025-07-06
1042France2025-07-06
1043India2025-06-27
1044Australia2025-06-10
1045Argentina2025-06-25
1046Italy2025-06-17
1047Brazil2025-06-21
1048Russia2025-06-27
1049France2025-07-05

On-Demand Data

NameIdCountryDate
Salvatore Stockham1000France2025-06-12
Adams Morasca1001Canada2025-06-25
Leon Oldroyd1002Argentina2025-07-02
Jones Vocelka1003France2025-06-15
Francesco Shinko1004Argentina2025-06-21
Emily Whobrey1005Australia2025-06-07
Silvio Slusarski1006Spain2025-06-13
Maria Marrier1007Japan2025-06-30
Mujtaba Nicka1008Japan2025-06-10
Kaitlin Ostrosky1009Russia2025-07-05
Faith Gillian1010Japan2025-06-27
Aruna Figeroa1011Russia2025-06-11
Alejandro Perin1012Australia2025-06-07
Clifford Rim1013Germany2025-06-11
Wickens Nestle1014Argentina2025-06-16
Kaitlin Ostrosky1015Argentina2025-07-05
Arvin Albares1016Argentina2025-07-06
Sinclair Waycott1017Italy2025-06-10
Ivar Paprocki1018Argentina2025-07-06
Tony Foller1019Brazil2025-06-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ricardo GauchoArgentinaAsiya Javayant QUALIFIED
Julie StensethIndiaAsiya Javayant PROPOSAL
Mayumi KolmetzUnited KingdomXuxue Feng NEGOTIATION
Adams MorascaGermanyElwin Sharvill QUALIFIED
Ivar PaprockiUnited KingdomAmy Elsner NEGOTIATION
Jefferson SchemmerIndiaIoni Bowcher RENEWAL
Clifford RimAustraliaIoni Bowcher NEW
Francesco ShinkoJapanAnna Fali NEGOTIATION
Juan WieserJapanElwin Sharvill NEW
Jeanfrancois VenereRussiaAmy Elsner NEW
Greenwood BologniaItalyAsiya Javayant UNQUALIFIED
Aditya KuskoArgentinaAnna Fali RENEWAL
Morrow RutaUnited KingdomStephen Shaw RENEWAL
Smith GlickSpainXuxue Feng NEW
Johnson SergiIndiaAsiya Javayant UNQUALIFIED
Emily WhobreySpainAnna Fali RENEWAL
Faith GillianIndiaAnna Fali UNQUALIFIED
Tony FollerIndiaStephen Shaw PROPOSAL
Julie StensethCanadaStephen Shaw PROPOSAL
Leja CaldareraIndiaOnyama Limba NEGOTIATION
Jeanfrancois VenereUnited KingdomElwin Sharvill NEW
Maisha RulapaughBrazilOnyama Limba PROPOSAL
Maisha RulapaughSpainOnyama Limba NEW
Smith GlickBrazilAmy Elsner NEW
Jeanfrancois VenereUnited KingdomElwin Sharvill NEGOTIATION
Leon OldroydAustraliaAnna Fali QUALIFIED
Arvin AlbaresIndiaXuxue Feng PROPOSAL
Chavez BriddickItalyElwin Sharvill NEGOTIATION
Octavia MaletSpainIvan Magalhaes UNQUALIFIED
Deepesh ChuiAustraliaAmy Elsner UNQUALIFIED
Arvin AlbaresIndiaElwin Sharvill RENEWAL
Tony FollerRussiaOnyama Limba QUALIFIED
Greenwood BologniaSpainAsiya Javayant NEW
Antonio CaudySpainOnyama Limba UNQUALIFIED
Murillo MaletIndiaAmy Elsner PROPOSAL
Ricardo GauchoFranceIvan Magalhaes QUALIFIED
Maisha RulapaughBrazilStephen Shaw NEGOTIATION
Johnson SergiRussiaElwin Sharvill PROPOSAL
Izzy GarufiBrazilIvan Magalhaes PROPOSAL
Jones VocelkaGermanyAnna Fali PROPOSAL

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