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
Rodrigues CampainJapanXuxue Feng PROPOSAL
Octavia MaletArgentinaAsiya Javayant NEW
Adams MorascaJapanBernardo Dominic PROPOSAL
Chavez BriddickFranceStephen Shaw NEW
Mayumi KolmetzGermanyStephen Shaw RENEWAL
Munro FerenczUnited KingdomAnna Fali PROPOSAL
Kaitlin OstroskyBrazilIvan Magalhaes UNQUALIFIED
Ashley DoeAustraliaIvan Magalhaes UNQUALIFIED
Mujtaba NickaBrazilStephen Shaw RENEWAL
David DarakjyItalyIvan Magalhaes NEW
James ButtArgentinaElwin Sharvill QUALIFIED
Chavez BriddickAustraliaElwin Sharvill RENEWAL
Wickens NestleSpainElwin Sharvill NEW
Chavez BriddickArgentinaBernardo Dominic QUALIFIED
Mujtaba NickaArgentinaIoni Bowcher RENEWAL
Leon OldroydBrazilIoni Bowcher NEW
Deepesh ChuiAustraliaElwin Sharvill QUALIFIED
Murillo MaletUnited KingdomStephen Shaw PROPOSAL
Ashley DoeGermanyAmy Elsner QUALIFIED
Ashley DoeBrazilAnna Fali UNQUALIFIED
Jeanfrancois VenereJapanStephen Shaw NEGOTIATION
Stacey MacleadCanadaXuxue Feng NEGOTIATION
Misaki RoysterRussiaElwin Sharvill NEW
Ivar PaprockiIndiaOnyama Limba NEGOTIATION
Juan WieserCanadaBernardo Dominic NEGOTIATION
Leja CaldareraJapanAnna Fali RENEWAL
Clifford RimBrazilAnna Fali QUALIFIED
Smith GlickUnited KingdomAnna Fali QUALIFIED
Stacey MacleadAustraliaIvan Magalhaes NEW
Leon OldroydIndiaAnna Fali NEGOTIATION
Mayumi KolmetzJapanOnyama Limba PROPOSAL
Francesco ShinkoRussiaAmy Elsner NEW
Stacey MacleadSpainAsiya Javayant QUALIFIED
Silvio SlusarskiFranceBernardo Dominic NEW
Jennifer AmigonRussiaAsiya Javayant RENEWAL
Cody SaylorsCanadaXuxue Feng PROPOSAL
Silvio SlusarskiIndiaAnna Fali PROPOSAL
Chavez BriddickRussiaAsiya Javayant PROPOSAL
Deepesh ChuiBrazilAmy Elsner NEGOTIATION
Adams MorascaUnited KingdomBernardo Dominic UNQUALIFIED
Ricardo GauchoRussiaStephen Shaw RENEWAL
Aika InouyeGermanyIoni Bowcher PROPOSAL
Johnson SergiCanadaAnna Fali RENEWAL
Leja CaldareraBrazilIvan Magalhaes NEGOTIATION
Aditya KuskoUnited KingdomIvan Magalhaes NEGOTIATION
Arvin AlbaresUnited KingdomXuxue Feng QUALIFIED
Morrow RutaRussiaAsiya Javayant UNQUALIFIED
Deepesh ChuiAustraliaAmy Elsner NEW
Johnson SergiGermanyElwin Sharvill PROPOSAL
Ricardo GauchoIndiaIoni Bowcher NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Clifford RimBrazilBernardo Dominic NEGOTIATION
Arvin AlbaresBrazilOnyama Limba RENEWAL
Mayumi KolmetzAustraliaElwin Sharvill PROPOSAL
Aika InouyeArgentinaOnyama Limba UNQUALIFIED
Aditya KuskoGermanyBernardo Dominic QUALIFIED
Ricardo GauchoSpainElwin Sharvill QUALIFIED
Francesco ShinkoRussiaAnna Fali UNQUALIFIED
Kadeem FlosiUnited KingdomBernardo Dominic UNQUALIFIED
Leja CaldareraRussiaStephen Shaw UNQUALIFIED
Juan WieserUnited KingdomAnna Fali UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Leon OldroydUnited Kingdom2025-08-14Benton, John B Jr QUALIFIED14Asiya Javayant
1001Francesco ShinkoJapan2025-08-11Feiner Bros NEGOTIATION2Asiya Javayant
1002Isabel BowleyCanada2025-08-04Chemel, James L Cpa UNQUALIFIED80Stephen Shaw
1003Chavez BriddickIndia2025-08-06Chemel, James L Cpa NEGOTIATION19Stephen Shaw
1004Silvio SlusarskiRussia2025-08-09Feiner Bros NEGOTIATION26Onyama Limba
1005Morrow RutaItaly2025-08-12Morlong Associates RENEWAL25Asiya Javayant
1006Aika InouyeRussia2025-08-20Commercial Press PROPOSAL22Xuxue Feng
1007Deepesh ChuiArgentina2025-07-31Chanay, Jeffrey A Esq RENEWAL26Stephen Shaw
1008Julie StensethAustralia2025-08-14Feiner Bros PROPOSAL97Onyama Limba
1009Wickens NestleJapan2025-08-14Morlong Associates UNQUALIFIED83Onyama Limba
1010Munro FerenczArgentina2025-08-03Dorl, James J Esq PROPOSAL89Asiya Javayant
1011Maisha RulapaughSpain2025-07-31Rangoni Of Florence RENEWAL11Asiya Javayant
1012Aika InouyeGermany2025-08-08King, Christopher A Esq NEW67Ivan Magalhaes
1013Aika InouyeUnited Kingdom2025-08-13Chanay, Jeffrey A Esq PROPOSAL24Elwin Sharvill
1014Nicolas IturbideCanada2025-07-24Truhlar And Truhlar Attys UNQUALIFIED70Stephen Shaw
1015Juan WieserRussia2025-07-30Feiner Bros PROPOSAL52Amy Elsner
1016Maria MarrierIndia2025-07-24Feltz Printing Service QUALIFIED29Xuxue Feng
1017Misaki RoysterIndia2025-08-18Dorl, James J Esq RENEWAL45Stephen Shaw
1018Murillo MaletFrance2025-08-10Dorl, James J Esq PROPOSAL78Onyama Limba
1019Sinclair WaycottArgentina2025-08-12Benton, John B Jr NEW3Anna Fali
1020Maisha RulapaughFrance2025-07-26Feltz Printing Service QUALIFIED94Amy Elsner
1021Clifford RimRussia2025-08-13King, Christopher A Esq NEGOTIATION15Ivan Magalhaes
1022Chavez BriddickRussia2025-08-15Rangoni Of Florence NEGOTIATION94Ivan Magalhaes
1023Aditya KuskoSpain2025-08-14Rangoni Of Florence QUALIFIED71Ioni Bowcher
1024Maria MarrierIndia2025-07-31Chapman, Ross E Esq RENEWAL27Ivan Magalhaes
1025Emily WhobreySpain2025-08-06Dorl, James J Esq PROPOSAL78Onyama Limba
1026Kadeem FlosiFrance2025-07-29Chapman, Ross E Esq QUALIFIED60Asiya Javayant
1027Emily WhobreyItaly2025-08-19Rangoni Of Florence QUALIFIED51Xuxue Feng
1028Faith GillianSpain2025-07-26Chemel, James L Cpa QUALIFIED9Ivan Magalhaes
1029Claire TollnerGermany2025-08-10Chemel, James L Cpa NEW88Ivan Magalhaes
1030Leon OldroydBrazil2025-08-15Chemel, James L Cpa NEGOTIATION99Asiya Javayant
1031Costa DilliardFrance2025-08-11Dorl, James J Esq QUALIFIED98Onyama Limba
1032Emily WhobreySpain2025-08-10Truhlar And Truhlar Attys PROPOSAL96Ivan Magalhaes
1033Leon OldroydIndia2025-08-16Printing Dimensions UNQUALIFIED24Ivan Magalhaes
1034Mayumi KolmetzGermany2025-08-02Benton, John B Jr NEW99Anna Fali
1035Juan WieserJapan2025-08-18Benton, John B Jr UNQUALIFIED75Ivan Magalhaes
1036Salvatore StockhamSpain2025-08-11Printing Dimensions UNQUALIFIED45Xuxue Feng
1037Leon OldroydSpain2025-08-09Chapman, Ross E Esq QUALIFIED87Amy Elsner
1038Wickens NestleRussia2025-08-15Commercial Press UNQUALIFIED94Amy Elsner
1039Kaitlin OstroskyRussia2025-07-27Benton, John B Jr NEW59Onyama Limba
1040Nicolas IturbideJapan2025-08-11Printing Dimensions NEGOTIATION50Onyama Limba
1041Ivar PaprockiJapan2025-08-11Commercial Press QUALIFIED31Ivan Magalhaes
1042Julie StensethCanada2025-08-04Chapman, Ross E Esq QUALIFIED76Anna Fali
1043Maisha RulapaughJapan2025-08-10Printing Dimensions QUALIFIED18Anna Fali
1044Misaki RoysterFrance2025-07-24Rangoni Of Florence QUALIFIED26Anna Fali
1045Jones VocelkaIndia2025-08-10Feltz Printing Service UNQUALIFIED46Stephen Shaw
1046Faith GillianGermany2025-07-26Dorl, James J Esq NEGOTIATION89Ivan Magalhaes
1047Jones VocelkaAustralia2025-08-20Feltz Printing Service PROPOSAL22Ioni Bowcher
1048Stacey MacleadUnited Kingdom2025-07-28Rangoni Of Florence NEGOTIATION4Onyama Limba
1049Jones VocelkaCanada2025-08-09King, Christopher A Esq UNQUALIFIED22Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Maria MarrierGermanyBernardo Dominic PROPOSAL
Aditya KuskoAustraliaAnna Fali UNQUALIFIED
Nicolas IturbideIndiaElwin Sharvill NEW
Claire TollnerItalyAnna Fali UNQUALIFIED
Sinclair WaycottUnited KingdomBernardo Dominic NEGOTIATION
Smith GlickSpainAsiya Javayant RENEWAL
Tony FollerItalyIoni Bowcher RENEWAL
Deepesh ChuiJapanAnna Fali QUALIFIED
Nicolas IturbideSpainIvan Magalhaes NEGOTIATION
Munro FerenczRussiaBernardo Dominic NEW
Deepesh ChuiFranceElwin Sharvill NEGOTIATION
Aditya KuskoAustraliaAsiya Javayant NEGOTIATION
Faith GillianIndiaOnyama Limba RENEWAL
Morrow RutaUnited KingdomXuxue Feng QUALIFIED
Sinclair WaycottGermanyAsiya Javayant UNQUALIFIED
Smith GlickRussiaOnyama Limba PROPOSAL
Izzy GarufiAustraliaAnna Fali NEW
Isabel BowleyCanadaAsiya Javayant NEW
Aditya KuskoItalyAnna Fali NEGOTIATION
Octavia MaletAustraliaStephen Shaw UNQUALIFIED
Munro FerenczUnited KingdomAnna Fali NEGOTIATION
Silvio SlusarskiArgentinaBernardo Dominic PROPOSAL
Ashley DoeCanadaIvan Magalhaes QUALIFIED
Darci PoquetteAustraliaIvan Magalhaes RENEWAL
Jones VocelkaArgentinaBernardo Dominic NEGOTIATION
Clifford RimGermanyStephen Shaw UNQUALIFIED
Jones VocelkaBrazilElwin Sharvill NEGOTIATION
Ashley DoeIndiaElwin Sharvill NEGOTIATION
Francesco ShinkoBrazilIvan Magalhaes UNQUALIFIED
Salvatore StockhamCanadaXuxue Feng NEGOTIATION
Maisha RulapaughIndiaIoni Bowcher NEGOTIATION
Kadeem FlosiSpainAmy Elsner RENEWAL
Arvin AlbaresJapanAnna Fali NEGOTIATION
Kadeem FlosiIndiaAmy Elsner UNQUALIFIED
Aika InouyeRussiaBernardo Dominic UNQUALIFIED
James ButtJapanAmy Elsner PROPOSAL
Morrow RutaJapanXuxue Feng NEW
Morrow RutaItalyAnna Fali NEGOTIATION
Ricardo GauchoAustraliaOnyama Limba RENEWAL
Silvio SlusarskiArgentinaAmy Elsner RENEWAL
Darci PoquetteUnited KingdomElwin Sharvill NEGOTIATION
Antonio CaudyUnited KingdomIvan Magalhaes NEGOTIATION
Claire TollnerAustraliaOnyama Limba QUALIFIED
Francesco ShinkoAustraliaAmy Elsner NEW
Jefferson SchemmerItalyBernardo Dominic QUALIFIED
Sinclair WaycottBrazilIoni Bowcher QUALIFIED
Mujtaba NickaAustraliaIoni Bowcher NEW
Johnson SergiAustraliaXuxue Feng NEGOTIATION
Juan WieserJapanIoni Bowcher NEW
Mujtaba NickaItalyOnyama Limba NEGOTIATION
Frozen Columns
Name
Mayumi Kolmetz
Alejandro Perin
Murillo Malet
Aruna Figeroa
Adams Morasca
Greenwood Bolognia
Ashley Doe
Ashley Doe
Ashley Doe
James Butt
Rodrigues Campain
Octavia Malet
Murillo Malet
Ivar Paprocki
Clifford Rim
Claire Tollner
Jeanfrancois Venere
Smith Glick
Greenwood Bolognia
Mayumi Kolmetz
Aika Inouye
Greenwood Bolognia
Kaitlin Ostrosky
Misaki Royster
Izzy Garufi
Stacey Maclead
Mayumi Kolmetz
Aruna Figeroa
Maisha Rulapaugh
Clifford Rim
Mayumi Kolmetz
Alejandro Perin
Kaitlin Ostrosky
Rodrigues Campain
Octavia Malet
Francesco Shinko
Octavia Malet
Nicolas Iturbide
Arvin Albares
Arvin Albares
Rodrigues Campain
Mayumi Kolmetz
Chavez Briddick
Leon Oldroyd
Cody Saylors
Silvio Slusarski
Maisha Rulapaugh
Aika Inouye
Misaki Royster
Isabel Bowley
IdCountryDate
1000Italy2025-08-15
1001France2025-07-24
1002Australia2025-08-09
1003Germany2025-08-22
1004Argentina2025-08-16
1005France2025-07-28
1006Brazil2025-08-19
1007Canada2025-08-17
1008Spain2025-08-13
1009Brazil2025-07-28
1010Spain2025-08-14
1011Italy2025-08-21
1012Australia2025-07-28
1013Germany2025-07-25
1014United Kingdom2025-07-28
1015Spain2025-08-08
1016Brazil2025-08-18
1017Australia2025-08-21
1018Japan2025-08-14
1019Germany2025-08-11
1020Canada2025-08-10
1021Canada2025-08-17
1022Spain2025-07-30
1023Italy2025-08-16
1024India2025-08-13
1025Australia2025-08-07
1026Russia2025-08-16
1027Brazil2025-08-20
1028India2025-08-17
1029Japan2025-08-21
1030Spain2025-08-04
1031Brazil2025-08-02
1032Canada2025-08-03
1033Japan2025-08-02
1034Russia2025-08-17
1035Australia2025-08-20
1036Brazil2025-07-28
1037Japan2025-08-14
1038Argentina2025-07-31
1039Brazil2025-08-06
1040United Kingdom2025-08-08
1041Canada2025-08-11
1042Canada2025-08-10
1043Italy2025-08-07
1044India2025-08-21
1045Canada2025-08-21
1046Germany2025-08-21
1047Brazil2025-08-03
1048India2025-08-04
1049Brazil2025-08-04

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000Germany2025-08-06
David Darakjy1001France2025-07-27
Silvio Slusarski1002Brazil2025-08-15
James Butt1003Russia2025-08-15
Morrow Ruta1004Brazil2025-08-22
Munro Ferencz1005Spain2025-08-10
Nicolas Iturbide1006Spain2025-08-01
Juan Wieser1007Spain2025-07-30
Deepesh Chui1008Argentina2025-08-09
Deepesh Chui1009Germany2025-08-15
Tony Foller1010India2025-08-18
Antonio Caudy1011Australia2025-08-09
Munro Ferencz1012India2025-07-28
Ricardo Gaucho1013India2025-08-08
Leja Caldarera1014Italy2025-08-22
Rodrigues Campain1015Canada2025-08-12
Octavia Malet1016France2025-08-10
Maria Marrier1017Australia2025-08-08
Costa Dilliard1018Japan2025-07-26
Octavia Malet1019Japan2025-08-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Morrow RutaIndiaXuxue Feng RENEWAL
James ButtGermanyStephen Shaw NEW
Mujtaba NickaBrazilElwin Sharvill PROPOSAL
Izzy GarufiFranceIoni Bowcher QUALIFIED
Jeanfrancois VenereGermanyBernardo Dominic NEW
Ricardo GauchoUnited KingdomElwin Sharvill RENEWAL
Kaitlin OstroskyJapanBernardo Dominic QUALIFIED
James ButtCanadaOnyama Limba PROPOSAL
Antonio CaudySpainAmy Elsner NEW
Adams MorascaIndiaAsiya Javayant NEGOTIATION
Kadeem FlosiBrazilElwin Sharvill PROPOSAL
Antonio CaudyCanadaStephen Shaw PROPOSAL
Ashley DoeBrazilElwin Sharvill RENEWAL
Francesco ShinkoIndiaXuxue Feng NEW
Chavez BriddickJapanAmy Elsner RENEWAL
Adams MorascaJapanAnna Fali RENEWAL
Aditya KuskoUnited KingdomAmy Elsner RENEWAL
Jennifer AmigonJapanOnyama Limba NEGOTIATION
Claire TollnerUnited KingdomXuxue Feng RENEWAL
Adams MorascaItalyAmy Elsner PROPOSAL
Smith GlickRussiaAsiya Javayant NEGOTIATION
Deepesh ChuiSpainOnyama Limba UNQUALIFIED
Darci PoquetteUnited KingdomIoni Bowcher PROPOSAL
Salvatore StockhamCanadaOnyama Limba NEGOTIATION
Wickens NestleJapanOnyama Limba PROPOSAL
Ivar PaprockiUnited KingdomElwin Sharvill RENEWAL
Morrow RutaSpainXuxue Feng QUALIFIED
Claire TollnerArgentinaElwin Sharvill UNQUALIFIED
Francesco ShinkoArgentinaIoni Bowcher NEGOTIATION
Emily WhobreyRussiaAmy Elsner UNQUALIFIED
Jeanfrancois VenereItalyAnna Fali UNQUALIFIED
Francesco ShinkoItalyIvan Magalhaes NEGOTIATION
Johnson SergiItalyAnna Fali UNQUALIFIED
Adams MorascaAustraliaOnyama Limba RENEWAL
Emily WhobreyJapanElwin Sharvill PROPOSAL
Alejandro PerinSpainElwin Sharvill NEW
Clifford RimSpainIoni Bowcher NEW
Izzy GarufiIndiaAnna Fali RENEWAL
Smith GlickIndiaStephen Shaw RENEWAL
Mujtaba NickaCanadaAnna Fali 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>