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
Izzy GarufiFranceOnyama Limba PROPOSAL
Mujtaba NickaItalyIvan Magalhaes RENEWAL
James ButtAustraliaOnyama Limba QUALIFIED
Aditya KuskoJapanElwin Sharvill NEW
Jennifer AmigonJapanStephen Shaw UNQUALIFIED
Ashley DoeBrazilAsiya Javayant NEGOTIATION
Aditya KuskoIndiaXuxue Feng NEW
Aditya KuskoUnited KingdomIoni Bowcher RENEWAL
Murillo MaletRussiaAmy Elsner RENEWAL
Octavia MaletItalyStephen Shaw NEW
Arvin AlbaresItalyIvan Magalhaes NEW
David DarakjyItalyXuxue Feng UNQUALIFIED
Smith GlickUnited KingdomElwin Sharvill UNQUALIFIED
Francesco ShinkoFranceIoni Bowcher QUALIFIED
Greenwood BologniaCanadaAmy Elsner NEGOTIATION
Morrow RutaUnited KingdomIvan Magalhaes PROPOSAL
James ButtAustraliaBernardo Dominic RENEWAL
Misaki RoysterAustraliaElwin Sharvill UNQUALIFIED
Misaki RoysterArgentinaBernardo Dominic RENEWAL
Tony FollerFranceOnyama Limba NEGOTIATION
Jeanfrancois VenereCanadaIvan Magalhaes RENEWAL
Rodrigues CampainCanadaAmy Elsner NEGOTIATION
Rodrigues CampainSpainAsiya Javayant RENEWAL
Julie StensethSpainStephen Shaw NEGOTIATION
Silvio SlusarskiJapanOnyama Limba PROPOSAL
Izzy GarufiCanadaIoni Bowcher QUALIFIED
Aika InouyeArgentinaAnna Fali UNQUALIFIED
Jennifer AmigonItalyIvan Magalhaes RENEWAL
Cody SaylorsUnited KingdomOnyama Limba NEGOTIATION
Leja CaldareraArgentinaIoni Bowcher UNQUALIFIED
Julie StensethGermanyOnyama Limba RENEWAL
Francesco ShinkoFranceBernardo Dominic QUALIFIED
Maisha RulapaughBrazilIvan Magalhaes NEGOTIATION
Aruna FigeroaJapanAnna Fali PROPOSAL
Ashley DoeFranceIvan Magalhaes RENEWAL
Jeanfrancois VenereJapanBernardo Dominic NEGOTIATION
Jennifer AmigonBrazilBernardo Dominic UNQUALIFIED
Ricardo GauchoArgentinaXuxue Feng UNQUALIFIED
Jones VocelkaJapanAsiya Javayant RENEWAL
Adams MorascaFranceElwin Sharvill QUALIFIED
Aika InouyeArgentinaAsiya Javayant QUALIFIED
Jennifer AmigonUnited KingdomElwin Sharvill QUALIFIED
Wickens NestleIndiaXuxue Feng NEGOTIATION
Ashley DoeArgentinaAmy Elsner UNQUALIFIED
Ivar PaprockiRussiaXuxue Feng UNQUALIFIED
Izzy GarufiGermanyBernardo Dominic NEGOTIATION
James ButtRussiaIoni Bowcher QUALIFIED
James ButtBrazilStephen Shaw PROPOSAL
Aditya KuskoRussiaXuxue Feng PROPOSAL
Mayumi KolmetzAustraliaAsiya Javayant PROPOSAL
Horizontal
NameCountryRepresentativeStatus
David DarakjyBrazilIoni Bowcher RENEWAL
Smith GlickFranceAmy Elsner NEGOTIATION
Rodrigues CampainIndiaIoni Bowcher RENEWAL
Maria MarrierIndiaStephen Shaw NEW
Jeanfrancois VenereUnited KingdomOnyama Limba NEW
Emily WhobreyIndiaIvan Magalhaes PROPOSAL
Jones VocelkaSpainStephen Shaw RENEWAL
Aika InouyeArgentinaXuxue Feng QUALIFIED
Francesco ShinkoBrazilIoni Bowcher RENEWAL
Leja CaldareraCanadaBernardo Dominic RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Nicolas IturbideIndia2025-08-28Feltz Printing Service RENEWAL75Xuxue Feng
1001Nicolas IturbideAustralia2025-08-31Chemel, James L Cpa UNQUALIFIED44Ioni Bowcher
1002Adams MorascaIndia2025-09-20Feltz Printing Service PROPOSAL25Onyama Limba
1003Isabel BowleyJapan2025-08-30Feiner Bros NEGOTIATION12Ivan Magalhaes
1004Antonio CaudyFrance2025-08-30Dorl, James J Esq NEGOTIATION10Elwin Sharvill
1005Antonio CaudyJapan2025-09-08Printing Dimensions QUALIFIED13Asiya Javayant
1006Aika InouyeBrazil2025-09-21Printing Dimensions QUALIFIED20Elwin Sharvill
1007Misaki RoysterBrazil2025-08-27Morlong Associates RENEWAL73Stephen Shaw
1008Cody SaylorsJapan2025-09-01Buckley Miller Wright NEGOTIATION85Anna Fali
1009Leja CaldareraBrazil2025-09-12Feltz Printing Service PROPOSAL34Onyama Limba
1010Isabel BowleyCanada2025-09-03Truhlar And Truhlar Attys QUALIFIED3Ioni Bowcher
1011Tony FollerBrazil2025-09-08Chapman, Ross E Esq PROPOSAL96Amy Elsner
1012Costa DilliardCanada2025-09-03Feiner Bros QUALIFIED66Anna Fali
1013Aruna FigeroaGermany2025-08-29Dorl, James J Esq NEGOTIATION92Amy Elsner
1014Ashley DoeSpain2025-09-20Chapman, Ross E Esq NEW41Bernardo Dominic
1015James ButtJapan2025-09-22Feltz Printing Service QUALIFIED72Amy Elsner
1016Stacey MacleadFrance2025-08-27Rousseaux, Michael Esq UNQUALIFIED77Elwin Sharvill
1017Jones VocelkaCanada2025-09-25Chemel, James L Cpa UNQUALIFIED27Onyama Limba
1018Izzy GarufiGermany2025-09-08Feiner Bros PROPOSAL49Xuxue Feng
1019Sinclair WaycottJapan2025-09-24Chapman, Ross E Esq RENEWAL15Ivan Magalhaes
1020Wickens NestleItaly2025-09-01Truhlar And Truhlar Attys UNQUALIFIED19Anna Fali
1021Jennifer AmigonBrazil2025-09-25Dorl, James J Esq UNQUALIFIED40Stephen Shaw
1022Cody SaylorsGermany2025-09-03Rousseaux, Michael Esq QUALIFIED60Ivan Magalhaes
1023Jones VocelkaAustralia2025-09-04Printing Dimensions PROPOSAL92Asiya Javayant
1024Jeanfrancois VenereGermany2025-09-14Chapman, Ross E Esq RENEWAL18Amy Elsner
1025Stacey MacleadAustralia2025-09-10Chemel, James L Cpa QUALIFIED25Bernardo Dominic
1026Nicolas IturbideUnited Kingdom2025-09-09Benton, John B Jr UNQUALIFIED65Stephen Shaw
1027Alejandro PerinItaly2025-09-25Rangoni Of Florence PROPOSAL63Ioni Bowcher
1028Jones VocelkaBrazil2025-09-22Printing Dimensions PROPOSAL10Stephen Shaw
1029Kaitlin OstroskyJapan2025-09-16Chemel, James L Cpa QUALIFIED44Asiya Javayant
1030Misaki RoysterRussia2025-09-10King, Christopher A Esq PROPOSAL78Stephen Shaw
1031Leja CaldareraSpain2025-08-27Rangoni Of Florence NEW46Amy Elsner
1032Juan WieserUnited Kingdom2025-09-15Commercial Press RENEWAL41Onyama Limba
1033Aruna FigeroaUnited Kingdom2025-09-08King, Christopher A Esq NEW90Asiya Javayant
1034Alejandro PerinArgentina2025-09-16Feiner Bros RENEWAL2Elwin Sharvill
1035Smith GlickUnited Kingdom2025-09-18Rangoni Of Florence PROPOSAL22Onyama Limba
1036Arvin AlbaresItaly2025-09-18Truhlar And Truhlar Attys UNQUALIFIED59Anna Fali
1037Costa DilliardRussia2025-09-19Printing Dimensions NEGOTIATION83Bernardo Dominic
1038Francesco ShinkoAustralia2025-09-08Rangoni Of Florence NEW10Ioni Bowcher
1039Rodrigues CampainRussia2025-09-23Chapman, Ross E Esq RENEWAL13Onyama Limba
1040Tony FollerRussia2025-09-22Commercial Press UNQUALIFIED37Onyama Limba
1041Adams MorascaGermany2025-09-11Rousseaux, Michael Esq QUALIFIED83Ivan Magalhaes
1042Jones VocelkaCanada2025-09-22Chapman, Ross E Esq PROPOSAL11Amy Elsner
1043Ivar PaprockiGermany2025-08-30Buckley Miller Wright NEGOTIATION82Onyama Limba
1044Kadeem FlosiItaly2025-09-22Printing Dimensions NEGOTIATION13Xuxue Feng
1045Costa DilliardCanada2025-08-30Dorl, James J Esq PROPOSAL21Anna Fali
1046Morrow RutaUnited Kingdom2025-09-06Chapman, Ross E Esq NEGOTIATION60Xuxue Feng
1047Ivar PaprockiFrance2025-08-31Morlong Associates NEGOTIATION80Onyama Limba
1048Isabel BowleyGermany2025-09-03Rangoni Of Florence NEW25Amy Elsner
1049Francesco ShinkoFrance2025-09-10Buckley Miller Wright QUALIFIED78Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Munro FerenczSpainAsiya Javayant QUALIFIED
Adams MorascaJapanIvan Magalhaes PROPOSAL
Jones VocelkaBrazilIvan Magalhaes UNQUALIFIED
Jefferson SchemmerGermanyStephen Shaw UNQUALIFIED
Murillo MaletJapanElwin Sharvill PROPOSAL
Jeanfrancois VenereRussiaIoni Bowcher PROPOSAL
Jeanfrancois VenereGermanyAsiya Javayant PROPOSAL
Costa DilliardIndiaXuxue Feng QUALIFIED
Morrow RutaAustraliaAsiya Javayant RENEWAL
Misaki RoysterAustraliaAmy Elsner NEW
Ashley DoeGermanyAnna Fali PROPOSAL
Greenwood BologniaItalyStephen Shaw NEGOTIATION
Aditya KuskoFranceBernardo Dominic QUALIFIED
Ricardo GauchoItalyAmy Elsner QUALIFIED
Isabel BowleyUnited KingdomStephen Shaw PROPOSAL
Mujtaba NickaIndiaAsiya Javayant NEGOTIATION
Clifford RimBrazilAsiya Javayant UNQUALIFIED
Murillo MaletSpainIvan Magalhaes QUALIFIED
Ivar PaprockiSpainAnna Fali NEW
Johnson SergiAustraliaXuxue Feng UNQUALIFIED
Cody SaylorsJapanBernardo Dominic NEGOTIATION
Morrow RutaAustraliaElwin Sharvill NEW
Aditya KuskoIndiaStephen Shaw NEGOTIATION
Greenwood BologniaFranceXuxue Feng UNQUALIFIED
Aika InouyeJapanOnyama Limba QUALIFIED
Nicolas IturbideJapanXuxue Feng QUALIFIED
Mayumi KolmetzItalyOnyama Limba NEGOTIATION
Julie StensethJapanIvan Magalhaes QUALIFIED
Emily WhobreyIndiaIvan Magalhaes NEGOTIATION
Alejandro PerinJapanElwin Sharvill QUALIFIED
Deepesh ChuiSpainOnyama Limba NEW
Munro FerenczGermanyStephen Shaw NEW
Smith GlickAustraliaOnyama Limba RENEWAL
Julie StensethIndiaStephen Shaw NEW
Maria MarrierBrazilElwin Sharvill QUALIFIED
Julie StensethIndiaAmy Elsner NEW
Morrow RutaItalyBernardo Dominic QUALIFIED
David DarakjySpainElwin Sharvill NEGOTIATION
Isabel BowleyRussiaBernardo Dominic PROPOSAL
Murillo MaletItalyXuxue Feng PROPOSAL
Johnson SergiSpainAnna Fali PROPOSAL
Kadeem FlosiRussiaBernardo Dominic RENEWAL
Izzy GarufiCanadaAsiya Javayant RENEWAL
Adams MorascaCanadaElwin Sharvill UNQUALIFIED
Chavez BriddickRussiaIvan Magalhaes PROPOSAL
Smith GlickBrazilIvan Magalhaes NEGOTIATION
Aditya KuskoCanadaXuxue Feng PROPOSAL
Mayumi KolmetzRussiaElwin Sharvill QUALIFIED
Ricardo GauchoItalyBernardo Dominic NEW
Ashley DoeRussiaAsiya Javayant NEGOTIATION
Frozen Columns
Name
Clifford Rim
Arvin Albares
Alejandro Perin
Murillo Malet
Sinclair Waycott
David Darakjy
Smith Glick
Nicolas Iturbide
Clifford Rim
Antonio Caudy
Mayumi Kolmetz
Mayumi Kolmetz
Darci Poquette
Nicolas Iturbide
Misaki Royster
Sinclair Waycott
Francesco Shinko
Emily Whobrey
Claire Tollner
Johnson Sergi
Francesco Shinko
Aruna Figeroa
Francesco Shinko
Leon Oldroyd
Emily Whobrey
Octavia Malet
Greenwood Bolognia
Maisha Rulapaugh
Aika Inouye
David Darakjy
Faith Gillian
Jones Vocelka
Claire Tollner
Francesco Shinko
Mujtaba Nicka
Julie Stenseth
Ricardo Gaucho
Smith Glick
Claire Tollner
Sinclair Waycott
Sinclair Waycott
Salvatore Stockham
Adams Morasca
Murillo Malet
Mujtaba Nicka
Leja Caldarera
Cody Saylors
Aruna Figeroa
Leon Oldroyd
Deepesh Chui
IdCountryDate
1000Brazil2025-09-14
1001India2025-09-05
1002Russia2025-09-16
1003Argentina2025-09-09
1004France2025-09-14
1005United Kingdom2025-09-10
1006United Kingdom2025-09-05
1007France2025-08-28
1008Italy2025-09-22
1009Brazil2025-09-01
1010Japan2025-09-01
1011United Kingdom2025-09-25
1012Japan2025-09-11
1013Brazil2025-09-04
1014Canada2025-08-27
1015United Kingdom2025-09-01
1016Australia2025-09-25
1017Spain2025-09-14
1018Argentina2025-09-25
1019United Kingdom2025-08-30
1020France2025-09-14
1021Russia2025-09-06
1022Russia2025-09-10
1023Argentina2025-09-23
1024Italy2025-08-27
1025Brazil2025-09-24
1026Russia2025-09-01
1027Italy2025-09-16
1028United Kingdom2025-09-03
1029Russia2025-09-09
1030Russia2025-09-20
1031India2025-09-04
1032Italy2025-09-21
1033Argentina2025-09-18
1034Japan2025-09-18
1035United Kingdom2025-09-22
1036Japan2025-09-03
1037Italy2025-09-13
1038Australia2025-09-12
1039Argentina2025-09-06
1040Australia2025-09-15
1041Spain2025-09-08
1042Italy2025-08-28
1043Germany2025-09-06
1044Brazil2025-09-03
1045France2025-09-24
1046Australia2025-09-01
1047United Kingdom2025-08-27
1048Spain2025-08-31
1049India2025-08-30

On-Demand Data

NameIdCountryDate
Leja Caldarera1000Russia2025-09-19
Smith Glick1001Australia2025-09-12
Antonio Caudy1002Italy2025-09-17
Misaki Royster1003Australia2025-09-21
Leon Oldroyd1004Russia2025-09-09
Mujtaba Nicka1005Canada2025-09-04
Greenwood Bolognia1006Italy2025-09-02
Stacey Maclead1007Japan2025-09-04
Johnson Sergi1008Argentina2025-09-01
Smith Glick1009Russia2025-09-12
Mujtaba Nicka1010Japan2025-09-04
Emily Whobrey1011Brazil2025-09-19
Emily Whobrey1012Brazil2025-09-07
Morrow Ruta1013Australia2025-09-13
Mujtaba Nicka1014Italy2025-09-25
Maria Marrier1015Germany2025-09-16
Isabel Bowley1016Canada2025-09-18
Murillo Malet1017Brazil2025-09-07
Jones Vocelka1018Argentina2025-09-03
Stacey Maclead1019India2025-09-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerArgentinaXuxue Feng RENEWAL
Izzy GarufiJapanIoni Bowcher NEW
Aditya KuskoIndiaStephen Shaw NEW
David DarakjyBrazilAnna Fali NEGOTIATION
Murillo MaletRussiaOnyama Limba PROPOSAL
Maisha RulapaughSpainElwin Sharvill QUALIFIED
Tony FollerBrazilElwin Sharvill QUALIFIED
Nicolas IturbideFranceElwin Sharvill NEGOTIATION
Smith GlickAustraliaElwin Sharvill PROPOSAL
Costa DilliardItalyBernardo Dominic NEW
Adams MorascaIndiaOnyama Limba PROPOSAL
Mujtaba NickaCanadaIoni Bowcher NEW
Ricardo GauchoItalyOnyama Limba RENEWAL
Rodrigues CampainCanadaElwin Sharvill PROPOSAL
Jefferson SchemmerUnited KingdomIvan Magalhaes NEGOTIATION
Nicolas IturbideFranceIoni Bowcher UNQUALIFIED
Jefferson SchemmerGermanyAmy Elsner NEGOTIATION
Ricardo GauchoCanadaXuxue Feng NEW
Mujtaba NickaSpainIoni Bowcher UNQUALIFIED
Rodrigues CampainBrazilIoni Bowcher NEGOTIATION
Silvio SlusarskiSpainIvan Magalhaes PROPOSAL
Salvatore StockhamArgentinaStephen Shaw QUALIFIED
Nicolas IturbideFranceBernardo Dominic NEGOTIATION
Chavez BriddickArgentinaAsiya Javayant NEW
Greenwood BologniaGermanyAnna Fali PROPOSAL
Leon OldroydSpainIoni Bowcher PROPOSAL
James ButtAustraliaAnna Fali QUALIFIED
Emily WhobreyAustraliaAsiya Javayant UNQUALIFIED
Mayumi KolmetzBrazilIvan Magalhaes NEW
Faith GillianIndiaAnna Fali UNQUALIFIED
Chavez BriddickSpainStephen Shaw NEW
Julie StensethCanadaElwin Sharvill NEGOTIATION
Jefferson SchemmerArgentinaElwin Sharvill RENEWAL
Silvio SlusarskiSpainBernardo Dominic NEW
Jefferson SchemmerItalyStephen Shaw PROPOSAL
Emily WhobreySpainBernardo Dominic QUALIFIED
Juan WieserCanadaAmy Elsner RENEWAL
Costa DilliardIndiaAmy Elsner NEGOTIATION
Tony FollerGermanyIvan Magalhaes NEW
Mayumi KolmetzUnited KingdomIoni Bowcher NEGOTIATION

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