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
Leja CaldareraJapanIoni Bowcher UNQUALIFIED
Chavez BriddickUnited KingdomBernardo Dominic RENEWAL
Cody SaylorsGermanyStephen Shaw PROPOSAL
James ButtRussiaAnna Fali QUALIFIED
Murillo MaletFranceIoni Bowcher UNQUALIFIED
Aditya KuskoBrazilIvan Magalhaes UNQUALIFIED
Rodrigues CampainRussiaAnna Fali PROPOSAL
Izzy GarufiAustraliaIoni Bowcher QUALIFIED
Silvio SlusarskiItalyAsiya Javayant NEGOTIATION
Juan WieserSpainElwin Sharvill RENEWAL
Leon OldroydGermanyIvan Magalhaes QUALIFIED
Emily WhobreyIndiaAnna Fali PROPOSAL
Silvio SlusarskiJapanElwin Sharvill NEGOTIATION
Kadeem FlosiItalyIoni Bowcher NEW
Ricardo GauchoUnited KingdomAmy Elsner QUALIFIED
Deepesh ChuiGermanyAsiya Javayant QUALIFIED
Darci PoquetteCanadaOnyama Limba NEW
Misaki RoysterRussiaIvan Magalhaes UNQUALIFIED
Wickens NestleAustraliaAsiya Javayant RENEWAL
David DarakjyRussiaAsiya Javayant RENEWAL
Sinclair WaycottBrazilOnyama Limba PROPOSAL
Octavia MaletRussiaAnna Fali RENEWAL
Costa DilliardGermanyElwin Sharvill RENEWAL
Julie StensethUnited KingdomIoni Bowcher RENEWAL
Sinclair WaycottArgentinaOnyama Limba QUALIFIED
Emily WhobreyFranceElwin Sharvill QUALIFIED
Aditya KuskoRussiaXuxue Feng NEGOTIATION
Clifford RimBrazilIoni Bowcher QUALIFIED
Nicolas IturbideSpainXuxue Feng PROPOSAL
Salvatore StockhamUnited KingdomOnyama Limba QUALIFIED
David DarakjyArgentinaBernardo Dominic NEGOTIATION
Nicolas IturbideJapanIvan Magalhaes QUALIFIED
Maria MarrierArgentinaIvan Magalhaes UNQUALIFIED
Munro FerenczAustraliaAmy Elsner NEW
Jefferson SchemmerAustraliaAsiya Javayant RENEWAL
Munro FerenczArgentinaIvan Magalhaes RENEWAL
Leon OldroydGermanyIoni Bowcher NEGOTIATION
Kadeem FlosiGermanyElwin Sharvill UNQUALIFIED
Jennifer AmigonJapanAmy Elsner NEW
Ricardo GauchoBrazilIvan Magalhaes NEW
Mujtaba NickaArgentinaAnna Fali UNQUALIFIED
Rodrigues CampainArgentinaIoni Bowcher QUALIFIED
Aika InouyeGermanyAmy Elsner QUALIFIED
Leon OldroydArgentinaOnyama Limba UNQUALIFIED
Stacey MacleadBrazilAmy Elsner UNQUALIFIED
Misaki RoysterAustraliaIvan Magalhaes UNQUALIFIED
Misaki RoysterArgentinaAsiya Javayant UNQUALIFIED
Mayumi KolmetzUnited KingdomXuxue Feng QUALIFIED
Misaki RoysterItalyOnyama Limba UNQUALIFIED
Nicolas IturbideCanadaXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Morrow RutaBrazilBernardo Dominic NEW
Octavia MaletRussiaOnyama Limba NEW
Antonio CaudyItalyAnna Fali QUALIFIED
Deepesh ChuiBrazilIvan Magalhaes RENEWAL
Johnson SergiArgentinaXuxue Feng PROPOSAL
Arvin AlbaresCanadaElwin Sharvill QUALIFIED
Wickens NestleBrazilElwin Sharvill QUALIFIED
Ivar PaprockiRussiaIvan Magalhaes PROPOSAL
Izzy GarufiRussiaAnna Fali RENEWAL
Nicolas IturbideFranceAnna Fali UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Murillo MaletIndia2025-09-27Morlong Associates RENEWAL47Xuxue Feng
1001Ricardo GauchoItaly2025-10-06Feltz Printing Service UNQUALIFIED49Xuxue Feng
1002Julie StensethGermany2025-09-17Chapman, Ross E Esq NEW61Bernardo Dominic
1003Johnson SergiArgentina2025-09-27Rousseaux, Michael Esq NEW96Onyama Limba
1004James ButtGermany2025-10-02Chemel, James L Cpa NEW43Stephen Shaw
1005Costa DilliardItaly2025-09-14Dorl, James J Esq UNQUALIFIED18Ioni Bowcher
1006Jones VocelkaIndia2025-09-24Chemel, James L Cpa QUALIFIED93Ivan Magalhaes
1007Stacey MacleadFrance2025-09-27Morlong Associates NEW31Stephen Shaw
1008Jennifer AmigonFrance2025-10-07Commercial Press NEGOTIATION57Anna Fali
1009Tony FollerJapan2025-09-24Rangoni Of Florence PROPOSAL36Ivan Magalhaes
1010Darci PoquetteArgentina2025-09-29Feltz Printing Service UNQUALIFIED44Elwin Sharvill
1011Greenwood BologniaUnited Kingdom2025-09-18Buckley Miller Wright NEGOTIATION83Elwin Sharvill
1012Leon OldroydGermany2025-10-07Rousseaux, Michael Esq UNQUALIFIED62Xuxue Feng
1013Salvatore StockhamBrazil2025-10-05King, Christopher A Esq PROPOSAL29Asiya Javayant
1014Isabel BowleyBrazil2025-09-22Feiner Bros NEGOTIATION59Elwin Sharvill
1015Kadeem FlosiGermany2025-09-30Dorl, James J Esq RENEWAL80Asiya Javayant
1016Juan WieserFrance2025-10-08King, Christopher A Esq QUALIFIED81Xuxue Feng
1017Nicolas IturbideSpain2025-09-11Commercial Press NEW85Asiya Javayant
1018Silvio SlusarskiJapan2025-09-17Chapman, Ross E Esq NEGOTIATION42Amy Elsner
1019Deepesh ChuiGermany2025-10-01Dorl, James J Esq PROPOSAL76Elwin Sharvill
1020Rodrigues CampainArgentina2025-09-26Feiner Bros QUALIFIED78Stephen Shaw
1021Costa DilliardAustralia2025-09-18Dorl, James J Esq RENEWAL84Bernardo Dominic
1022Kadeem FlosiFrance2025-09-24Feltz Printing Service NEW50Stephen Shaw
1023Jefferson SchemmerSpain2025-10-09Buckley Miller Wright NEGOTIATION2Ivan Magalhaes
1024Isabel BowleyIndia2025-09-14Feiner Bros QUALIFIED38Stephen Shaw
1025Chavez BriddickUnited Kingdom2025-09-17Chemel, James L Cpa RENEWAL55Ioni Bowcher
1026Darci PoquetteIndia2025-09-12Benton, John B Jr UNQUALIFIED49Amy Elsner
1027Clifford RimUnited Kingdom2025-09-25Commercial Press QUALIFIED58Stephen Shaw
1028Kadeem FlosiCanada2025-10-05Printing Dimensions UNQUALIFIED27Amy Elsner
1029Munro FerenczBrazil2025-10-03Buckley Miller Wright RENEWAL86Ivan Magalhaes
1030Jeanfrancois VenereGermany2025-09-20Chanay, Jeffrey A Esq PROPOSAL14Stephen Shaw
1031Adams MorascaUnited Kingdom2025-09-18King, Christopher A Esq NEGOTIATION88Ivan Magalhaes
1032Aika InouyeGermany2025-09-23Chanay, Jeffrey A Esq NEGOTIATION68Onyama Limba
1033Greenwood BologniaCanada2025-09-11Chanay, Jeffrey A Esq RENEWAL33Xuxue Feng
1034Kaitlin OstroskyCanada2025-10-08Feltz Printing Service UNQUALIFIED42Stephen Shaw
1035Silvio SlusarskiCanada2025-09-24Feltz Printing Service NEW38Anna Fali
1036Silvio SlusarskiUnited Kingdom2025-09-21Buckley Miller Wright PROPOSAL51Asiya Javayant
1037Cody SaylorsFrance2025-09-14Truhlar And Truhlar Attys QUALIFIED6Ivan Magalhaes
1038Silvio SlusarskiSpain2025-09-14Benton, John B Jr PROPOSAL62Onyama Limba
1039Francesco ShinkoCanada2025-09-14Feiner Bros QUALIFIED59Amy Elsner
1040Antonio CaudyUnited Kingdom2025-09-24Printing Dimensions UNQUALIFIED59Stephen Shaw
1041Aditya KuskoJapan2025-10-02Morlong Associates PROPOSAL77Xuxue Feng
1042Darci PoquetteAustralia2025-10-04Benton, John B Jr NEW75Stephen Shaw
1043Costa DilliardUnited Kingdom2025-09-17Chemel, James L Cpa NEW41Bernardo Dominic
1044Ashley DoeJapan2025-10-01Chemel, James L Cpa QUALIFIED48Ivan Magalhaes
1045Leja CaldareraUnited Kingdom2025-10-03Morlong Associates QUALIFIED79Elwin Sharvill
1046Silvio SlusarskiFrance2025-10-09Rousseaux, Michael Esq NEGOTIATION37Elwin Sharvill
1047Deepesh ChuiSpain2025-10-06Chapman, Ross E Esq PROPOSAL82Elwin Sharvill
1048Costa DilliardBrazil2025-09-28Chanay, Jeffrey A Esq QUALIFIED45Asiya Javayant
1049Murillo MaletItaly2025-10-04Chemel, James L Cpa UNQUALIFIED11Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Emily WhobreyUnited KingdomXuxue Feng RENEWAL
Aika InouyeIndiaBernardo Dominic QUALIFIED
Mujtaba NickaAustraliaIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereGermanyIvan Magalhaes RENEWAL
Deepesh ChuiItalyAnna Fali NEW
Adams MorascaArgentinaStephen Shaw NEGOTIATION
Sinclair WaycottRussiaAnna Fali RENEWAL
Rodrigues CampainGermanyOnyama Limba UNQUALIFIED
James ButtFranceOnyama Limba UNQUALIFIED
Faith GillianAustraliaAmy Elsner NEW
Jennifer AmigonUnited KingdomIoni Bowcher RENEWAL
Mayumi KolmetzRussiaIoni Bowcher PROPOSAL
Sinclair WaycottFranceElwin Sharvill NEW
Jeanfrancois VenereAustraliaIoni Bowcher NEGOTIATION
Clifford RimSpainAnna Fali NEW
Sinclair WaycottBrazilIvan Magalhaes QUALIFIED
Aruna FigeroaJapanOnyama Limba RENEWAL
Aruna FigeroaFranceElwin Sharvill NEW
Ricardo GauchoRussiaStephen Shaw NEW
Maria MarrierItalyAsiya Javayant QUALIFIED
Octavia MaletIndiaBernardo Dominic NEGOTIATION
Jennifer AmigonRussiaAmy Elsner RENEWAL
James ButtIndiaBernardo Dominic NEW
Juan WieserFranceElwin Sharvill QUALIFIED
Isabel BowleyFranceStephen Shaw NEW
Smith GlickAustraliaIvan Magalhaes PROPOSAL
Munro FerenczJapanAnna Fali QUALIFIED
Ashley DoeBrazilAsiya Javayant UNQUALIFIED
Clifford RimArgentinaXuxue Feng NEW
Silvio SlusarskiJapanIvan Magalhaes PROPOSAL
Clifford RimCanadaElwin Sharvill UNQUALIFIED
Misaki RoysterUnited KingdomStephen Shaw NEGOTIATION
Jennifer AmigonArgentinaIvan Magalhaes NEGOTIATION
Salvatore StockhamUnited KingdomAmy Elsner QUALIFIED
Emily WhobreyBrazilStephen Shaw PROPOSAL
Maisha RulapaughJapanXuxue Feng QUALIFIED
Jefferson SchemmerArgentinaOnyama Limba PROPOSAL
Chavez BriddickItalyXuxue Feng NEGOTIATION
Aruna FigeroaGermanyAnna Fali PROPOSAL
Mayumi KolmetzArgentinaElwin Sharvill UNQUALIFIED
Arvin AlbaresFranceIoni Bowcher QUALIFIED
Ashley DoeCanadaXuxue Feng NEW
Stacey MacleadItalyBernardo Dominic PROPOSAL
Jennifer AmigonJapanBernardo Dominic PROPOSAL
Leja CaldareraGermanyIoni Bowcher PROPOSAL
Isabel BowleyAustraliaAnna Fali NEGOTIATION
Stacey MacleadJapanAsiya Javayant UNQUALIFIED
Jennifer AmigonJapanOnyama Limba QUALIFIED
Jones VocelkaRussiaOnyama Limba NEGOTIATION
Smith GlickFranceElwin Sharvill NEW
Frozen Columns
Name
Octavia Malet
Izzy Garufi
Maisha Rulapaugh
David Darakjy
Mujtaba Nicka
Kaitlin Ostrosky
Aika Inouye
Jennifer Amigon
Leon Oldroyd
Kaitlin Ostrosky
Darci Poquette
Stacey Maclead
Silvio Slusarski
Maria Marrier
Juan Wieser
Silvio Slusarski
Leon Oldroyd
Ashley Doe
Jones Vocelka
Kadeem Flosi
Misaki Royster
Jefferson Schemmer
Maria Marrier
Aditya Kusko
Alejandro Perin
Jones Vocelka
Arvin Albares
Silvio Slusarski
Mujtaba Nicka
Emily Whobrey
Tony Foller
Jefferson Schemmer
David Darakjy
Darci Poquette
Tony Foller
Aditya Kusko
Julie Stenseth
Mayumi Kolmetz
Silvio Slusarski
Darci Poquette
Kaitlin Ostrosky
Silvio Slusarski
Kaitlin Ostrosky
Chavez Briddick
Aika Inouye
Ashley Doe
Greenwood Bolognia
Mujtaba Nicka
Izzy Garufi
Mayumi Kolmetz
IdCountryDate
1000Brazil2025-09-28
1001Japan2025-10-10
1002Argentina2025-10-02
1003Italy2025-10-09
1004Japan2025-09-25
1005France2025-10-07
1006Germany2025-09-11
1007Russia2025-09-26
1008Russia2025-09-23
1009Spain2025-09-21
1010Spain2025-09-24
1011Spain2025-10-10
1012Argentina2025-09-16
1013Brazil2025-09-29
1014India2025-09-17
1015Russia2025-10-03
1016Germany2025-09-29
1017Japan2025-10-10
1018Australia2025-09-11
1019Argentina2025-09-24
1020United Kingdom2025-09-26
1021Italy2025-09-17
1022France2025-09-16
1023Japan2025-09-25
1024France2025-09-27
1025Germany2025-09-25
1026Spain2025-09-29
1027Italy2025-09-21
1028Brazil2025-09-29
1029Canada2025-10-01
1030Germany2025-10-06
1031Australia2025-10-04
1032India2025-10-07
1033France2025-09-18
1034Italy2025-10-10
1035France2025-09-18
1036United Kingdom2025-09-20
1037Argentina2025-09-29
1038Australia2025-09-26
1039Spain2025-10-06
1040India2025-09-22
1041United Kingdom2025-10-04
1042Japan2025-09-12
1043Russia2025-09-26
1044Spain2025-10-04
1045Japan2025-10-05
1046Italy2025-10-04
1047India2025-09-28
1048Japan2025-10-05
1049United Kingdom2025-09-26

On-Demand Data

NameIdCountryDate
Kaitlin Ostrosky1000France2025-09-19
David Darakjy1001France2025-09-26
Chavez Briddick1002Brazil2025-10-06
Maria Marrier1003Australia2025-09-16
Antonio Caudy1004Spain2025-09-27
Jones Vocelka1005Germany2025-09-25
Izzy Garufi1006Russia2025-09-16
Jeanfrancois Venere1007Italy2025-10-05
Emily Whobrey1008United Kingdom2025-10-04
Faith Gillian1009France2025-10-01
Mujtaba Nicka1010India2025-09-15
Aika Inouye1011United Kingdom2025-10-01
Ricardo Gaucho1012Canada2025-09-25
Chavez Briddick1013Australia2025-10-05
Sinclair Waycott1014United Kingdom2025-09-17
Leja Caldarera1015Argentina2025-09-22
Murillo Malet1016Spain2025-09-19
Clifford Rim1017India2025-10-03
Francesco Shinko1018Spain2025-09-26
Silvio Slusarski1019Germany2025-09-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ivar PaprockiAustraliaAmy Elsner NEW
Adams MorascaItalyElwin Sharvill PROPOSAL
David DarakjyGermanyAmy Elsner RENEWAL
Ivar PaprockiJapanBernardo Dominic PROPOSAL
Aika InouyeFranceAsiya Javayant PROPOSAL
Jones VocelkaItalyStephen Shaw UNQUALIFIED
Jefferson SchemmerGermanyIoni Bowcher NEGOTIATION
Ricardo GauchoFranceAmy Elsner NEW
Ricardo GauchoRussiaAnna Fali UNQUALIFIED
Mayumi KolmetzAustraliaAmy Elsner QUALIFIED
Darci PoquetteRussiaIoni Bowcher NEW
Mujtaba NickaRussiaStephen Shaw RENEWAL
Tony FollerCanadaStephen Shaw NEW
Izzy GarufiFranceAnna Fali NEGOTIATION
Costa DilliardCanadaStephen Shaw UNQUALIFIED
Wickens NestleArgentinaBernardo Dominic PROPOSAL
James ButtGermanyElwin Sharvill NEW
David DarakjyRussiaIvan Magalhaes NEGOTIATION
Nicolas IturbideRussiaAnna Fali NEGOTIATION
Ivar PaprockiAustraliaAnna Fali NEGOTIATION
Octavia MaletUnited KingdomOnyama Limba UNQUALIFIED
Munro FerenczArgentinaOnyama Limba NEW
James ButtBrazilAsiya Javayant NEW
Tony FollerCanadaIvan Magalhaes RENEWAL
Costa DilliardGermanyBernardo Dominic QUALIFIED
Clifford RimCanadaStephen Shaw QUALIFIED
Tony FollerBrazilElwin Sharvill NEW
Julie StensethIndiaAsiya Javayant QUALIFIED
Maria MarrierSpainElwin Sharvill NEGOTIATION
Aruna FigeroaGermanyAsiya Javayant RENEWAL
Juan WieserArgentinaAsiya Javayant RENEWAL
Ivar PaprockiAustraliaElwin Sharvill RENEWAL
Nicolas IturbideRussiaIoni Bowcher NEGOTIATION
Darci PoquetteRussiaAmy Elsner QUALIFIED
Antonio CaudyFranceXuxue Feng NEGOTIATION
Sinclair WaycottAustraliaAnna Fali PROPOSAL
Jones VocelkaRussiaStephen Shaw UNQUALIFIED
Misaki RoysterFranceStephen Shaw PROPOSAL
Sinclair WaycottRussiaElwin Sharvill QUALIFIED
Darci PoquetteItalyAmy Elsner 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>