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
Darci PoquetteFranceBernardo Dominic RENEWAL
Mujtaba NickaSpainBernardo Dominic NEW
Juan WieserUnited KingdomIvan Magalhaes UNQUALIFIED
Johnson SergiJapanAnna Fali PROPOSAL
Aika InouyeRussiaIoni Bowcher UNQUALIFIED
Aruna FigeroaArgentinaElwin Sharvill RENEWAL
Julie StensethFranceBernardo Dominic NEGOTIATION
Claire TollnerSpainElwin Sharvill PROPOSAL
Chavez BriddickArgentinaElwin Sharvill PROPOSAL
Maisha RulapaughArgentinaAsiya Javayant PROPOSAL
Nicolas IturbideIndiaIvan Magalhaes RENEWAL
Leja CaldareraGermanyOnyama Limba RENEWAL
Juan WieserSpainOnyama Limba NEW
Faith GillianCanadaIoni Bowcher QUALIFIED
Antonio CaudyItalyOnyama Limba RENEWAL
Octavia MaletJapanIoni Bowcher RENEWAL
Jeanfrancois VenereUnited KingdomAmy Elsner RENEWAL
Arvin AlbaresBrazilIoni Bowcher NEGOTIATION
Munro FerenczGermanyIoni Bowcher NEW
Johnson SergiJapanOnyama Limba PROPOSAL
Smith GlickItalyOnyama Limba RENEWAL
Wickens NestleGermanyElwin Sharvill PROPOSAL
Nicolas IturbideRussiaAsiya Javayant QUALIFIED
Faith GillianUnited KingdomOnyama Limba NEGOTIATION
Maisha RulapaughJapanStephen Shaw PROPOSAL
Ricardo GauchoAustraliaIoni Bowcher RENEWAL
Adams MorascaIndiaBernardo Dominic UNQUALIFIED
Ashley DoeAustraliaXuxue Feng PROPOSAL
Wickens NestleBrazilAsiya Javayant NEW
David DarakjyFranceElwin Sharvill RENEWAL
Misaki RoysterArgentinaAsiya Javayant UNQUALIFIED
Smith GlickJapanOnyama Limba UNQUALIFIED
Tony FollerFranceAnna Fali PROPOSAL
Alejandro PerinArgentinaBernardo Dominic QUALIFIED
Emily WhobreyRussiaOnyama Limba PROPOSAL
Tony FollerBrazilIoni Bowcher PROPOSAL
Octavia MaletItalyAnna Fali NEW
Chavez BriddickGermanyAmy Elsner QUALIFIED
Tony FollerCanadaIoni Bowcher NEGOTIATION
Isabel BowleySpainIoni Bowcher NEW
Silvio SlusarskiCanadaOnyama Limba UNQUALIFIED
Kadeem FlosiCanadaIoni Bowcher RENEWAL
Leon OldroydRussiaAmy Elsner PROPOSAL
Tony FollerSpainAmy Elsner NEGOTIATION
Leon OldroydCanadaAsiya Javayant QUALIFIED
Rodrigues CampainItalyAnna Fali PROPOSAL
Darci PoquetteUnited KingdomStephen Shaw RENEWAL
Juan WieserSpainAmy Elsner NEGOTIATION
Isabel BowleyUnited KingdomXuxue Feng UNQUALIFIED
Costa DilliardAustraliaElwin Sharvill UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Emily WhobreyGermanyOnyama Limba NEGOTIATION
Cody SaylorsGermanyOnyama Limba PROPOSAL
Jennifer AmigonArgentinaXuxue Feng QUALIFIED
Jeanfrancois VenereIndiaIoni Bowcher PROPOSAL
Stacey MacleadUnited KingdomAmy Elsner PROPOSAL
Juan WieserIndiaIvan Magalhaes RENEWAL
Clifford RimCanadaOnyama Limba NEW
Ashley DoeItalyXuxue Feng PROPOSAL
Emily WhobreyAustraliaElwin Sharvill UNQUALIFIED
Deepesh ChuiArgentinaAmy Elsner RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Faith GillianSpain2026-05-16Rangoni Of Florence PROPOSAL52Bernardo Dominic
1001Rodrigues CampainUnited Kingdom2026-05-17Commercial Press PROPOSAL78Anna Fali
1002Johnson SergiGermany2026-06-01Rangoni Of Florence PROPOSAL71Stephen Shaw
1003Morrow RutaArgentina2026-05-20Dorl, James J Esq NEGOTIATION24Amy Elsner
1004Maisha RulapaughUnited Kingdom2026-05-09Rousseaux, Michael Esq NEW73Bernardo Dominic
1005Leon OldroydSpain2026-05-19Chapman, Ross E Esq UNQUALIFIED86Elwin Sharvill
1006Tony FollerArgentina2026-05-26Benton, John B Jr RENEWAL75Anna Fali
1007Julie StensethArgentina2026-05-26Chapman, Ross E Esq PROPOSAL73Bernardo Dominic
1008Julie StensethGermany2026-05-18Printing Dimensions QUALIFIED99Asiya Javayant
1009Juan WieserAustralia2026-05-31Benton, John B Jr QUALIFIED68Elwin Sharvill
1010Chavez BriddickBrazil2026-05-11Chanay, Jeffrey A Esq NEW6Anna Fali
1011Chavez BriddickAustralia2026-05-07Chemel, James L Cpa PROPOSAL44Asiya Javayant
1012Ricardo GauchoAustralia2026-05-05Benton, John B Jr PROPOSAL5Onyama Limba
1013Munro FerenczUnited Kingdom2026-05-21Morlong Associates NEW0Ioni Bowcher
1014Antonio CaudyJapan2026-05-13Chapman, Ross E Esq NEGOTIATION97Elwin Sharvill
1015Stacey MacleadRussia2026-05-24Chanay, Jeffrey A Esq NEW74Elwin Sharvill
1016Jennifer AmigonArgentina2026-05-10Rousseaux, Michael Esq PROPOSAL15Stephen Shaw
1017Jefferson SchemmerItaly2026-05-27Dorl, James J Esq RENEWAL35Ioni Bowcher
1018Emily WhobreyUnited Kingdom2026-05-23Chanay, Jeffrey A Esq RENEWAL20Xuxue Feng
1019Chavez BriddickSpain2026-06-03Commercial Press NEGOTIATION31Xuxue Feng
1020Wickens NestleSpain2026-05-08Feiner Bros NEGOTIATION1Amy Elsner
1021Ricardo GauchoAustralia2026-05-31Benton, John B Jr NEW64Asiya Javayant
1022Juan WieserBrazil2026-05-24King, Christopher A Esq UNQUALIFIED84Anna Fali
1023Maria MarrierRussia2026-05-17Chapman, Ross E Esq NEGOTIATION40Onyama Limba
1024Jeanfrancois VenereSpain2026-05-08King, Christopher A Esq QUALIFIED87Amy Elsner
1025Misaki RoysterGermany2026-06-01Truhlar And Truhlar Attys PROPOSAL43Asiya Javayant
1026Maria MarrierItaly2026-05-29Buckley Miller Wright RENEWAL13Xuxue Feng
1027Claire TollnerSpain2026-05-24Truhlar And Truhlar Attys UNQUALIFIED32Bernardo Dominic
1028Mujtaba NickaFrance2026-05-07Chapman, Ross E Esq UNQUALIFIED15Ioni Bowcher
1029Octavia MaletArgentina2026-05-30Truhlar And Truhlar Attys PROPOSAL76Stephen Shaw
1030Ivar PaprockiArgentina2026-05-24Rangoni Of Florence UNQUALIFIED10Ioni Bowcher
1031Izzy GarufiCanada2026-05-23King, Christopher A Esq UNQUALIFIED10Stephen Shaw
1032Mayumi KolmetzArgentina2026-05-23Morlong Associates PROPOSAL18Ivan Magalhaes
1033Leon OldroydJapan2026-05-10Morlong Associates PROPOSAL20Xuxue Feng
1034Ricardo GauchoJapan2026-05-25Dorl, James J Esq QUALIFIED8Stephen Shaw
1035Salvatore StockhamFrance2026-05-24Chemel, James L Cpa QUALIFIED71Asiya Javayant
1036Silvio SlusarskiBrazil2026-05-16Benton, John B Jr NEGOTIATION10Asiya Javayant
1037Clifford RimIndia2026-05-29Morlong Associates PROPOSAL22Elwin Sharvill
1038Salvatore StockhamGermany2026-05-19Feiner Bros UNQUALIFIED85Ioni Bowcher
1039Morrow RutaItaly2026-05-10King, Christopher A Esq RENEWAL77Xuxue Feng
1040Greenwood BologniaIndia2026-05-19Chanay, Jeffrey A Esq NEGOTIATION97Elwin Sharvill
1041Octavia MaletArgentina2026-05-22Benton, John B Jr RENEWAL55Stephen Shaw
1042Claire TollnerGermany2026-05-07Printing Dimensions QUALIFIED25Bernardo Dominic
1043Sinclair WaycottArgentina2026-05-15Feltz Printing Service NEGOTIATION18Amy Elsner
1044Juan WieserSpain2026-05-10Benton, John B Jr UNQUALIFIED54Elwin Sharvill
1045Cody SaylorsJapan2026-05-21Morlong Associates NEGOTIATION83Ioni Bowcher
1046Jennifer AmigonArgentina2026-05-31Chemel, James L Cpa QUALIFIED82Bernardo Dominic
1047Stacey MacleadArgentina2026-05-26King, Christopher A Esq QUALIFIED82Xuxue Feng
1048Deepesh ChuiAustralia2026-05-25Buckley Miller Wright PROPOSAL51Xuxue Feng
1049Ricardo GauchoGermany2026-05-19Benton, John B Jr QUALIFIED32Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Ivar PaprockiFranceIvan Magalhaes UNQUALIFIED
Ivar PaprockiRussiaXuxue Feng QUALIFIED
Deepesh ChuiFranceIvan Magalhaes QUALIFIED
Ashley DoeAustraliaElwin Sharvill QUALIFIED
Deepesh ChuiItalyBernardo Dominic PROPOSAL
Salvatore StockhamIndiaAsiya Javayant NEW
Kaitlin OstroskySpainXuxue Feng NEGOTIATION
Clifford RimRussiaStephen Shaw NEGOTIATION
Aika InouyeFranceAsiya Javayant UNQUALIFIED
Wickens NestleSpainElwin Sharvill QUALIFIED
Morrow RutaFranceXuxue Feng QUALIFIED
Octavia MaletArgentinaElwin Sharvill RENEWAL
James ButtSpainAsiya Javayant PROPOSAL
Julie StensethFranceStephen Shaw QUALIFIED
Emily WhobreyItalyAnna Fali NEW
Kadeem FlosiAustraliaStephen Shaw RENEWAL
Claire TollnerGermanyXuxue Feng PROPOSAL
Kadeem FlosiAustraliaAnna Fali QUALIFIED
James ButtIndiaBernardo Dominic NEW
Wickens NestleRussiaBernardo Dominic QUALIFIED
Aika InouyeArgentinaStephen Shaw RENEWAL
Arvin AlbaresUnited KingdomBernardo Dominic QUALIFIED
Jennifer AmigonAustraliaIvan Magalhaes RENEWAL
Salvatore StockhamSpainIoni Bowcher NEW
Arvin AlbaresFranceOnyama Limba NEGOTIATION
Francesco ShinkoItalyElwin Sharvill RENEWAL
Leja CaldareraArgentinaStephen Shaw NEW
Cody SaylorsUnited KingdomIvan Magalhaes NEGOTIATION
David DarakjySpainAmy Elsner NEGOTIATION
Wickens NestleUnited KingdomBernardo Dominic UNQUALIFIED
Jennifer AmigonArgentinaAsiya Javayant QUALIFIED
Darci PoquetteUnited KingdomAsiya Javayant UNQUALIFIED
Clifford RimFranceXuxue Feng QUALIFIED
Chavez BriddickAustraliaOnyama Limba QUALIFIED
Sinclair WaycottRussiaBernardo Dominic PROPOSAL
Jeanfrancois VenereIndiaAnna Fali QUALIFIED
Isabel BowleyFranceBernardo Dominic UNQUALIFIED
Darci PoquetteGermanyAmy Elsner NEGOTIATION
Aika InouyeIndiaOnyama Limba NEGOTIATION
Clifford RimJapanIoni Bowcher RENEWAL
Izzy GarufiUnited KingdomElwin Sharvill NEW
Jeanfrancois VenereIndiaAnna Fali NEW
Tony FollerIndiaIvan Magalhaes QUALIFIED
Deepesh ChuiRussiaIvan Magalhaes RENEWAL
Claire TollnerFranceXuxue Feng UNQUALIFIED
Izzy GarufiBrazilBernardo Dominic PROPOSAL
Sinclair WaycottUnited KingdomAmy Elsner PROPOSAL
Nicolas IturbideJapanIoni Bowcher NEW
Smith GlickGermanyElwin Sharvill NEW
Johnson SergiBrazilXuxue Feng RENEWAL
Frozen Columns
Name
James Butt
Ashley Doe
Arvin Albares
Clifford Rim
Rodrigues Campain
Cody Saylors
Emily Whobrey
Wickens Nestle
Stacey Maclead
Jeanfrancois Venere
Juan Wieser
Claire Tollner
Sinclair Waycott
Maria Marrier
Maisha Rulapaugh
Jones Vocelka
Aika Inouye
Claire Tollner
Emily Whobrey
Greenwood Bolognia
Aruna Figeroa
Juan Wieser
Deepesh Chui
Jefferson Schemmer
Leja Caldarera
Murillo Malet
Izzy Garufi
Munro Ferencz
James Butt
Faith Gillian
Jefferson Schemmer
Jennifer Amigon
Salvatore Stockham
Costa Dilliard
Adams Morasca
Misaki Royster
Izzy Garufi
Maisha Rulapaugh
Octavia Malet
Emily Whobrey
Ivar Paprocki
Munro Ferencz
James Butt
Emily Whobrey
Salvatore Stockham
David Darakjy
Izzy Garufi
Stacey Maclead
Isabel Bowley
Jefferson Schemmer
IdCountryDate
1000United Kingdom2026-05-20
1001Brazil2026-05-14
1002Brazil2026-05-28
1003Argentina2026-05-12
1004Canada2026-05-14
1005Japan2026-05-27
1006Italy2026-05-17
1007India2026-05-24
1008Spain2026-05-12
1009Canada2026-05-17
1010Brazil2026-05-15
1011Japan2026-05-18
1012Argentina2026-05-29
1013United Kingdom2026-05-08
1014France2026-05-25
1015France2026-05-27
1016France2026-05-25
1017France2026-05-15
1018Japan2026-05-14
1019Germany2026-05-17
1020Australia2026-05-08
1021Brazil2026-05-08
1022India2026-05-07
1023Germany2026-05-16
1024Brazil2026-05-22
1025Argentina2026-05-07
1026Argentina2026-05-17
1027Germany2026-05-07
1028Canada2026-05-12
1029Japan2026-05-19
1030Russia2026-05-26
1031Italy2026-05-28
1032Germany2026-05-06
1033Canada2026-05-12
1034Spain2026-05-22
1035United Kingdom2026-05-28
1036Argentina2026-05-08
1037France2026-05-27
1038Russia2026-05-08
1039France2026-05-08
1040Australia2026-06-03
1041Brazil2026-05-12
1042France2026-05-27
1043Japan2026-05-09
1044Brazil2026-05-31
1045Brazil2026-06-02
1046Brazil2026-05-14
1047Argentina2026-05-13
1048France2026-05-11
1049India2026-05-15

On-Demand Data

NameIdCountryDate
Clifford Rim1000Russia2026-05-28
Munro Ferencz1001Spain2026-05-10
Ashley Doe1002Brazil2026-05-06
Ivar Paprocki1003Brazil2026-05-24
Kaitlin Ostrosky1004Germany2026-05-18
Salvatore Stockham1005Russia2026-06-03
Chavez Briddick1006Japan2026-05-18
Ashley Doe1007Argentina2026-05-26
Silvio Slusarski1008Brazil2026-06-03
Juan Wieser1009France2026-05-19
Maria Marrier1010Brazil2026-05-25
Rodrigues Campain1011France2026-05-06
Aruna Figeroa1012Japan2026-05-28
Kadeem Flosi1013India2026-05-26
Jefferson Schemmer1014Argentina2026-05-23
Mayumi Kolmetz1015India2026-05-31
Ashley Doe1016India2026-05-14
Salvatore Stockham1017United Kingdom2026-05-09
Nicolas Iturbide1018Brazil2026-05-05
Munro Ferencz1019Russia2026-05-13
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereJapanIvan Magalhaes NEW
Stacey MacleadCanadaBernardo Dominic NEW
Ivar PaprockiFranceXuxue Feng UNQUALIFIED
Nicolas IturbideIndiaElwin Sharvill NEGOTIATION
Sinclair WaycottBrazilAmy Elsner NEGOTIATION
Alejandro PerinBrazilBernardo Dominic NEW
James ButtArgentinaIvan Magalhaes NEGOTIATION
Ricardo GauchoArgentinaXuxue Feng NEW
Adams MorascaAustraliaXuxue Feng UNQUALIFIED
Smith GlickArgentinaElwin Sharvill UNQUALIFIED
Ashley DoeAustraliaOnyama Limba UNQUALIFIED
Faith GillianJapanXuxue Feng NEGOTIATION
Leja CaldareraSpainIvan Magalhaes RENEWAL
Alejandro PerinGermanyAnna Fali NEW
Ricardo GauchoBrazilBernardo Dominic PROPOSAL
Stacey MacleadUnited KingdomIvan Magalhaes UNQUALIFIED
Morrow RutaFranceElwin Sharvill QUALIFIED
Ricardo GauchoJapanBernardo Dominic RENEWAL
James ButtCanadaAmy Elsner NEGOTIATION
Wickens NestleAustraliaIoni Bowcher UNQUALIFIED
Jeanfrancois VenereArgentinaIoni Bowcher QUALIFIED
Aruna FigeroaJapanAsiya Javayant QUALIFIED
Alejandro PerinItalyOnyama Limba UNQUALIFIED
Ivar PaprockiJapanOnyama Limba NEGOTIATION
Wickens NestleGermanyAsiya Javayant NEW
Arvin AlbaresUnited KingdomOnyama Limba UNQUALIFIED
Clifford RimJapanAsiya Javayant UNQUALIFIED
Faith GillianArgentinaIvan Magalhaes RENEWAL
Leja CaldareraSpainAsiya Javayant UNQUALIFIED
Jeanfrancois VenereArgentinaAmy Elsner PROPOSAL
Ashley DoeAustraliaElwin Sharvill QUALIFIED
Kadeem FlosiSpainIvan Magalhaes NEGOTIATION
Leon OldroydItalyBernardo Dominic RENEWAL
Silvio SlusarskiRussiaAsiya Javayant QUALIFIED
Ivar PaprockiUnited KingdomAmy Elsner UNQUALIFIED
Silvio SlusarskiItalyBernardo Dominic QUALIFIED
Arvin AlbaresItalyAsiya Javayant QUALIFIED
Nicolas IturbideRussiaElwin Sharvill QUALIFIED
Francesco ShinkoUnited KingdomAmy Elsner PROPOSAL
Arvin AlbaresFranceOnyama Limba UNQUALIFIED

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