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
Smith GlickBrazilIvan Magalhaes UNQUALIFIED
Ricardo GauchoSpainStephen Shaw PROPOSAL
Darci PoquetteIndiaAmy Elsner NEW
Kadeem FlosiArgentinaStephen Shaw QUALIFIED
Ashley DoeIndiaAsiya Javayant NEGOTIATION
Maria MarrierIndiaIoni Bowcher QUALIFIED
Isabel BowleyBrazilAmy Elsner UNQUALIFIED
Jefferson SchemmerArgentinaStephen Shaw QUALIFIED
Arvin AlbaresAustraliaAmy Elsner RENEWAL
Antonio CaudyGermanyXuxue Feng UNQUALIFIED
Nicolas IturbideBrazilIvan Magalhaes NEGOTIATION
Costa DilliardAustraliaAmy Elsner RENEWAL
Jones VocelkaSpainAnna Fali PROPOSAL
Julie StensethIndiaBernardo Dominic UNQUALIFIED
Alejandro PerinGermanyStephen Shaw PROPOSAL
Octavia MaletFranceBernardo Dominic NEGOTIATION
Claire TollnerSpainElwin Sharvill NEGOTIATION
Julie StensethIndiaAsiya Javayant NEGOTIATION
Misaki RoysterArgentinaBernardo Dominic RENEWAL
Aruna FigeroaCanadaStephen Shaw PROPOSAL
Francesco ShinkoCanadaStephen Shaw UNQUALIFIED
Tony FollerCanadaIoni Bowcher PROPOSAL
Aruna FigeroaRussiaAsiya Javayant QUALIFIED
Munro FerenczIndiaAsiya Javayant UNQUALIFIED
Ivar PaprockiJapanAnna Fali NEW
Arvin AlbaresIndiaIvan Magalhaes QUALIFIED
Mayumi KolmetzBrazilIoni Bowcher RENEWAL
Darci PoquetteAustraliaAsiya Javayant NEW
Maisha RulapaughBrazilXuxue Feng UNQUALIFIED
Leja CaldareraIndiaAsiya Javayant RENEWAL
Faith GillianSpainOnyama Limba QUALIFIED
Morrow RutaItalyElwin Sharvill RENEWAL
Mujtaba NickaJapanAnna Fali NEGOTIATION
Tony FollerCanadaIvan Magalhaes NEGOTIATION
Kadeem FlosiIndiaElwin Sharvill PROPOSAL
Alejandro PerinArgentinaBernardo Dominic RENEWAL
Smith GlickGermanyOnyama Limba PROPOSAL
Leja CaldareraCanadaXuxue Feng UNQUALIFIED
Deepesh ChuiBrazilStephen Shaw NEGOTIATION
Arvin AlbaresJapanIvan Magalhaes RENEWAL
Murillo MaletRussiaOnyama Limba RENEWAL
Aruna FigeroaRussiaAnna Fali NEGOTIATION
Faith GillianAustraliaBernardo Dominic NEW
Wickens NestleSpainAsiya Javayant RENEWAL
Nicolas IturbideUnited KingdomIvan Magalhaes QUALIFIED
Maria MarrierIndiaXuxue Feng RENEWAL
Wickens NestleRussiaXuxue Feng RENEWAL
Darci PoquetteUnited KingdomIvan Magalhaes NEW
Julie StensethRussiaAsiya Javayant NEGOTIATION
Ivar PaprockiItalyOnyama Limba NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Jones VocelkaFranceXuxue Feng UNQUALIFIED
Deepesh ChuiAustraliaXuxue Feng RENEWAL
Leja CaldareraGermanyAsiya Javayant PROPOSAL
Jennifer AmigonBrazilAnna Fali NEGOTIATION
Morrow RutaCanadaBernardo Dominic NEGOTIATION
Adams MorascaFranceStephen Shaw UNQUALIFIED
Jeanfrancois VenereIndiaBernardo Dominic NEGOTIATION
Sinclair WaycottJapanIvan Magalhaes QUALIFIED
Ricardo GauchoBrazilOnyama Limba QUALIFIED
Isabel BowleyItalyElwin Sharvill NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Morrow RutaJapan2026-04-10Chemel, James L Cpa RENEWAL13Bernardo Dominic
1001Kadeem FlosiBrazil2026-04-01Benton, John B Jr PROPOSAL5Ivan Magalhaes
1002Chavez BriddickJapan2026-04-05Chapman, Ross E Esq NEGOTIATION54Onyama Limba
1003Chavez BriddickBrazil2026-04-09Morlong Associates NEGOTIATION19Stephen Shaw
1004Claire TollnerCanada2026-04-04Chemel, James L Cpa NEGOTIATION90Amy Elsner
1005Antonio CaudyCanada2026-04-20Truhlar And Truhlar Attys UNQUALIFIED38Amy Elsner
1006Aruna FigeroaRussia2026-04-19Chapman, Ross E Esq NEGOTIATION60Xuxue Feng
1007Misaki RoysterSpain2026-04-21Truhlar And Truhlar Attys PROPOSAL69Asiya Javayant
1008Alejandro PerinRussia2026-04-06Dorl, James J Esq NEGOTIATION61Anna Fali
1009Clifford RimSpain2026-04-11Feltz Printing Service PROPOSAL31Elwin Sharvill
1010Tony FollerBrazil2026-03-30Feiner Bros UNQUALIFIED2Asiya Javayant
1011Ashley DoeSpain2026-04-05Commercial Press RENEWAL37Elwin Sharvill
1012Jeanfrancois VenereBrazil2026-03-23Chemel, James L Cpa UNQUALIFIED19Stephen Shaw
1013Izzy GarufiUnited Kingdom2026-03-25Morlong Associates RENEWAL50Xuxue Feng
1014Misaki RoysterJapan2026-04-14Chanay, Jeffrey A Esq PROPOSAL71Onyama Limba
1015Juan WieserBrazil2026-04-04Truhlar And Truhlar Attys NEW82Ioni Bowcher
1016Wickens NestleFrance2026-04-16Truhlar And Truhlar Attys RENEWAL93Stephen Shaw
1017Alejandro PerinUnited Kingdom2026-04-10Buckley Miller Wright NEGOTIATION4Bernardo Dominic
1018Rodrigues CampainBrazil2026-04-07Feltz Printing Service QUALIFIED15Onyama Limba
1019Stacey MacleadSpain2026-04-20Commercial Press UNQUALIFIED41Ioni Bowcher
1020Mujtaba NickaGermany2026-04-02Chanay, Jeffrey A Esq NEGOTIATION7Ivan Magalhaes
1021Smith GlickFrance2026-03-23Truhlar And Truhlar Attys PROPOSAL98Ivan Magalhaes
1022Munro FerenczIndia2026-04-18Printing Dimensions QUALIFIED60Stephen Shaw
1023Aika InouyeGermany2026-03-31Commercial Press PROPOSAL6Onyama Limba
1024Clifford RimIndia2026-04-14Morlong Associates NEGOTIATION80Xuxue Feng
1025Silvio SlusarskiItaly2026-03-26Chemel, James L Cpa PROPOSAL57Stephen Shaw
1026Arvin AlbaresItaly2026-04-19Chapman, Ross E Esq UNQUALIFIED56Ioni Bowcher
1027Antonio CaudyRussia2026-04-18Printing Dimensions NEW13Bernardo Dominic
1028Faith GillianAustralia2026-04-17Benton, John B Jr QUALIFIED66Anna Fali
1029Arvin AlbaresRussia2026-04-18Chapman, Ross E Esq QUALIFIED34Xuxue Feng
1030Leja CaldareraCanada2026-04-16Chapman, Ross E Esq RENEWAL98Bernardo Dominic
1031Izzy GarufiArgentina2026-04-12Buckley Miller Wright PROPOSAL78Ivan Magalhaes
1032Leja CaldareraCanada2026-04-01Feiner Bros RENEWAL34Amy Elsner
1033Juan WieserUnited Kingdom2026-04-13Rousseaux, Michael Esq UNQUALIFIED3Asiya Javayant
1034Mayumi KolmetzGermany2026-04-06Rangoni Of Florence QUALIFIED1Elwin Sharvill
1035Mayumi KolmetzFrance2026-04-16Rangoni Of Florence RENEWAL64Anna Fali
1036Chavez BriddickBrazil2026-04-18Dorl, James J Esq UNQUALIFIED92Xuxue Feng
1037Leja CaldareraRussia2026-03-26Morlong Associates RENEWAL67Xuxue Feng
1038Maria MarrierCanada2026-04-20Chapman, Ross E Esq NEGOTIATION25Asiya Javayant
1039Antonio CaudyFrance2026-03-24Feiner Bros RENEWAL94Asiya Javayant
1040Arvin AlbaresAustralia2026-04-15Rousseaux, Michael Esq QUALIFIED4Ioni Bowcher
1041Ashley DoeSpain2026-04-20Printing Dimensions NEW99Anna Fali
1042Deepesh ChuiRussia2026-04-10Feiner Bros UNQUALIFIED8Elwin Sharvill
1043Morrow RutaGermany2026-04-21Commercial Press NEW83Ivan Magalhaes
1044Cody SaylorsSpain2026-04-11Rousseaux, Michael Esq QUALIFIED72Stephen Shaw
1045Izzy GarufiRussia2026-04-18Truhlar And Truhlar Attys RENEWAL36Onyama Limba
1046Ashley DoeSpain2026-04-09Feltz Printing Service QUALIFIED23Asiya Javayant
1047Greenwood BologniaCanada2026-03-25Rousseaux, Michael Esq QUALIFIED48Ivan Magalhaes
1048Juan WieserJapan2026-03-25Commercial Press UNQUALIFIED41Bernardo Dominic
1049Maria MarrierItaly2026-04-11Rangoni Of Florence QUALIFIED7Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Kadeem FlosiBrazilBernardo Dominic NEW
Sinclair WaycottItalyAmy Elsner RENEWAL
Deepesh ChuiGermanyAnna Fali NEW
Leon OldroydIndiaOnyama Limba NEGOTIATION
Izzy GarufiFranceIvan Magalhaes NEW
Kaitlin OstroskyFranceAsiya Javayant UNQUALIFIED
Emily WhobreyIndiaAnna Fali UNQUALIFIED
Arvin AlbaresGermanyAmy Elsner NEW
Jones VocelkaCanadaIvan Magalhaes UNQUALIFIED
Ricardo GauchoIndiaOnyama Limba NEGOTIATION
Darci PoquetteAustraliaXuxue Feng NEW
Maisha RulapaughAustraliaBernardo Dominic PROPOSAL
Isabel BowleyGermanyAmy Elsner NEW
Mujtaba NickaSpainAsiya Javayant NEW
Octavia MaletBrazilAnna Fali NEGOTIATION
Antonio CaudyCanadaBernardo Dominic NEW
Ricardo GauchoRussiaStephen Shaw PROPOSAL
Kadeem FlosiJapanIoni Bowcher RENEWAL
Murillo MaletUnited KingdomAmy Elsner NEW
Adams MorascaItalyAnna Fali NEGOTIATION
Mujtaba NickaGermanyElwin Sharvill UNQUALIFIED
Ashley DoeSpainIvan Magalhaes UNQUALIFIED
Silvio SlusarskiBrazilBernardo Dominic NEW
Emily WhobreyJapanIoni Bowcher PROPOSAL
Aditya KuskoSpainXuxue Feng PROPOSAL
Kaitlin OstroskyItalyAnna Fali UNQUALIFIED
Costa DilliardJapanIoni Bowcher QUALIFIED
Izzy GarufiGermanyAnna Fali UNQUALIFIED
Costa DilliardFranceAnna Fali QUALIFIED
Jefferson SchemmerRussiaIvan Magalhaes UNQUALIFIED
Emily WhobreySpainStephen Shaw PROPOSAL
Stacey MacleadAustraliaAsiya Javayant NEW
David DarakjyBrazilOnyama Limba RENEWAL
Aika InouyeAustraliaAsiya Javayant RENEWAL
Kadeem FlosiSpainBernardo Dominic PROPOSAL
Alejandro PerinItalyAnna Fali NEGOTIATION
Arvin AlbaresSpainOnyama Limba NEW
Morrow RutaIndiaIoni Bowcher NEW
Nicolas IturbideUnited KingdomAsiya Javayant PROPOSAL
Tony FollerBrazilStephen Shaw PROPOSAL
Maria MarrierFranceAnna Fali NEW
James ButtFranceIvan Magalhaes RENEWAL
Ashley DoeArgentinaIoni Bowcher NEGOTIATION
Kaitlin OstroskyJapanStephen Shaw NEGOTIATION
Smith GlickArgentinaAsiya Javayant NEGOTIATION
Greenwood BologniaAustraliaAmy Elsner NEW
James ButtGermanyIoni Bowcher NEGOTIATION
Salvatore StockhamArgentinaXuxue Feng NEW
Kaitlin OstroskyJapanElwin Sharvill PROPOSAL
Jeanfrancois VenereAustraliaXuxue Feng QUALIFIED
Frozen Columns
Name
Leon Oldroyd
Kadeem Flosi
Clifford Rim
Claire Tollner
Stacey Maclead
Ricardo Gaucho
Alejandro Perin
Costa Dilliard
Jones Vocelka
Jennifer Amigon
Octavia Malet
Deepesh Chui
Leja Caldarera
Darci Poquette
Tony Foller
Octavia Malet
Francesco Shinko
Octavia Malet
Morrow Ruta
Ashley Doe
Clifford Rim
Jefferson Schemmer
Nicolas Iturbide
Arvin Albares
Clifford Rim
Octavia Malet
David Darakjy
Ivar Paprocki
Isabel Bowley
Silvio Slusarski
Tony Foller
Chavez Briddick
Chavez Briddick
Jefferson Schemmer
Izzy Garufi
Murillo Malet
Mujtaba Nicka
Leon Oldroyd
Nicolas Iturbide
Jefferson Schemmer
Darci Poquette
Aika Inouye
Darci Poquette
Nicolas Iturbide
Ivar Paprocki
Silvio Slusarski
Jeanfrancois Venere
Kaitlin Ostrosky
Misaki Royster
Silvio Slusarski
IdCountryDate
1000Russia2026-04-06
1001Canada2026-04-07
1002India2026-04-09
1003India2026-04-18
1004Russia2026-03-28
1005Argentina2026-03-29
1006Germany2026-03-28
1007Spain2026-04-12
1008Argentina2026-04-19
1009Italy2026-04-04
1010Japan2026-04-14
1011Argentina2026-04-03
1012Australia2026-04-12
1013Russia2026-04-08
1014Japan2026-04-21
1015France2026-04-19
1016Russia2026-03-31
1017Italy2026-04-03
1018Canada2026-04-13
1019Australia2026-03-24
1020Japan2026-04-16
1021France2026-04-06
1022Germany2026-04-05
1023Brazil2026-04-20
1024Japan2026-04-07
1025Italy2026-03-26
1026United Kingdom2026-03-28
1027Spain2026-03-30
1028Russia2026-03-30
1029Canada2026-04-12
1030Brazil2026-03-27
1031Canada2026-04-03
1032Russia2026-04-20
1033Italy2026-03-28
1034Germany2026-04-19
1035Spain2026-04-19
1036Canada2026-04-14
1037Spain2026-04-08
1038Russia2026-04-12
1039Russia2026-04-06
1040Brazil2026-03-27
1041Brazil2026-04-02
1042Italy2026-03-28
1043France2026-04-03
1044Spain2026-04-09
1045United Kingdom2026-04-03
1046Germany2026-04-18
1047Argentina2026-04-16
1048Canada2026-03-28
1049Canada2026-04-07

On-Demand Data

NameIdCountryDate
Nicolas Iturbide1000Russia2026-04-17
Aditya Kusko1001Brazil2026-03-28
Sinclair Waycott1002India2026-04-02
Munro Ferencz1003Argentina2026-03-24
Maria Marrier1004Spain2026-03-23
Emily Whobrey1005Canada2026-03-31
Murillo Malet1006France2026-04-02
Chavez Briddick1007Brazil2026-04-13
Ashley Doe1008Canada2026-03-26
Ivar Paprocki1009France2026-04-06
Stacey Maclead1010United Kingdom2026-03-29
Julie Stenseth1011Brazil2026-04-13
Aruna Figeroa1012United Kingdom2026-03-31
Julie Stenseth1013Italy2026-03-25
Ivar Paprocki1014Argentina2026-03-29
Greenwood Bolognia1015Australia2026-03-25
Clifford Rim1016Brazil2026-04-21
Claire Tollner1017Argentina2026-03-30
Costa Dilliard1018Australia2026-03-25
Jeanfrancois Venere1019Japan2026-04-18
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Cody SaylorsJapanIoni Bowcher NEGOTIATION
Adams MorascaFranceStephen Shaw NEGOTIATION
Emily WhobreyFranceAsiya Javayant RENEWAL
Clifford RimIndiaAnna Fali PROPOSAL
Ashley DoeSpainAmy Elsner UNQUALIFIED
Mujtaba NickaAustraliaAnna Fali NEGOTIATION
Jones VocelkaItalyIvan Magalhaes QUALIFIED
Rodrigues CampainCanadaAmy Elsner RENEWAL
Francesco ShinkoSpainAnna Fali RENEWAL
Rodrigues CampainArgentinaElwin Sharvill UNQUALIFIED
Leon OldroydIndiaAnna Fali NEW
Aika InouyeGermanyAmy Elsner PROPOSAL
Mayumi KolmetzGermanyElwin Sharvill RENEWAL
Aditya KuskoIndiaIvan Magalhaes PROPOSAL
Salvatore StockhamItalyStephen Shaw QUALIFIED
Rodrigues CampainFranceElwin Sharvill QUALIFIED
Mujtaba NickaGermanyXuxue Feng PROPOSAL
Julie StensethRussiaXuxue Feng QUALIFIED
James ButtJapanOnyama Limba NEW
Aditya KuskoArgentinaBernardo Dominic UNQUALIFIED
Isabel BowleyArgentinaOnyama Limba NEW
Antonio CaudyBrazilAmy Elsner NEW
Salvatore StockhamFranceElwin Sharvill QUALIFIED
Cody SaylorsRussiaXuxue Feng RENEWAL
David DarakjySpainElwin Sharvill UNQUALIFIED
Johnson SergiUnited KingdomIoni Bowcher NEGOTIATION
Octavia MaletItalyIoni Bowcher PROPOSAL
Greenwood BologniaJapanAsiya Javayant PROPOSAL
Octavia MaletCanadaXuxue Feng RENEWAL
Aika InouyeUnited KingdomAsiya Javayant NEW
Silvio SlusarskiFranceIvan Magalhaes PROPOSAL
Deepesh ChuiCanadaIoni Bowcher QUALIFIED
Arvin AlbaresGermanyAsiya Javayant NEGOTIATION
Kaitlin OstroskyGermanyStephen Shaw QUALIFIED
Claire TollnerGermanyIvan Magalhaes NEW
Mujtaba NickaItalyIoni Bowcher UNQUALIFIED
Sinclair WaycottArgentinaIvan Magalhaes NEW
Jefferson SchemmerGermanyAnna Fali QUALIFIED
Jennifer AmigonIndiaBernardo Dominic QUALIFIED
Deepesh ChuiUnited KingdomAsiya Javayant QUALIFIED

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