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
Deepesh ChuiIndiaIoni Bowcher NEW
Murillo MaletAustraliaAmy Elsner PROPOSAL
Juan WieserItalyIvan Magalhaes QUALIFIED
Jefferson SchemmerRussiaIvan Magalhaes RENEWAL
Leja CaldareraRussiaOnyama Limba PROPOSAL
Jennifer AmigonUnited KingdomAnna Fali RENEWAL
Nicolas IturbideFranceStephen Shaw NEGOTIATION
Greenwood BologniaFranceAsiya Javayant QUALIFIED
Kaitlin OstroskyFranceStephen Shaw NEW
Izzy GarufiCanadaBernardo Dominic PROPOSAL
Tony FollerFranceBernardo Dominic NEW
Kadeem FlosiArgentinaElwin Sharvill UNQUALIFIED
Morrow RutaIndiaOnyama Limba NEW
Izzy GarufiIndiaXuxue Feng PROPOSAL
Tony FollerItalyOnyama Limba UNQUALIFIED
Deepesh ChuiGermanyElwin Sharvill NEGOTIATION
Ashley DoeAustraliaBernardo Dominic RENEWAL
Arvin AlbaresBrazilStephen Shaw RENEWAL
Julie StensethUnited KingdomOnyama Limba NEGOTIATION
Nicolas IturbideArgentinaOnyama Limba UNQUALIFIED
Emily WhobreyBrazilAsiya Javayant QUALIFIED
Faith GillianItalyStephen Shaw NEGOTIATION
Rodrigues CampainItalyIvan Magalhaes RENEWAL
Ivar PaprockiAustraliaOnyama Limba QUALIFIED
Kaitlin OstroskyRussiaAmy Elsner NEGOTIATION
Sinclair WaycottBrazilAnna Fali NEW
Adams MorascaIndiaElwin Sharvill PROPOSAL
Wickens NestleCanadaBernardo Dominic PROPOSAL
Julie StensethItalyAmy Elsner NEGOTIATION
Mujtaba NickaArgentinaIvan Magalhaes RENEWAL
Tony FollerIndiaIvan Magalhaes QUALIFIED
Aruna FigeroaArgentinaAsiya Javayant PROPOSAL
Octavia MaletItalyElwin Sharvill UNQUALIFIED
David DarakjyCanadaIoni Bowcher PROPOSAL
Mujtaba NickaRussiaStephen Shaw NEGOTIATION
Faith GillianAustraliaIoni Bowcher QUALIFIED
Alejandro PerinFranceElwin Sharvill NEW
Aruna FigeroaAustraliaXuxue Feng PROPOSAL
Rodrigues CampainJapanOnyama Limba RENEWAL
Isabel BowleyFranceAmy Elsner UNQUALIFIED
David DarakjyArgentinaIvan Magalhaes UNQUALIFIED
David DarakjySpainStephen Shaw QUALIFIED
Maisha RulapaughCanadaXuxue Feng NEW
Sinclair WaycottCanadaIvan Magalhaes UNQUALIFIED
Johnson SergiJapanBernardo Dominic NEW
Isabel BowleyItalyIvan Magalhaes RENEWAL
Kaitlin OstroskyRussiaIvan Magalhaes UNQUALIFIED
Chavez BriddickArgentinaOnyama Limba NEW
Julie StensethRussiaElwin Sharvill UNQUALIFIED
Munro FerenczArgentinaStephen Shaw PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Juan WieserGermanyXuxue Feng QUALIFIED
Misaki RoysterAustraliaBernardo Dominic NEW
Julie StensethIndiaAmy Elsner PROPOSAL
Leja CaldareraSpainAsiya Javayant RENEWAL
Jefferson SchemmerJapanIvan Magalhaes RENEWAL
Jeanfrancois VenereAustraliaElwin Sharvill QUALIFIED
Leon OldroydAustraliaAnna Fali NEGOTIATION
Jennifer AmigonCanadaXuxue Feng QUALIFIED
Jefferson SchemmerFranceBernardo Dominic RENEWAL
Wickens NestleBrazilAnna Fali PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Isabel BowleyFrance2025-09-28King, Christopher A Esq PROPOSAL3Ivan Magalhaes
1001Antonio CaudyUnited Kingdom2025-09-29Chapman, Ross E Esq NEGOTIATION76Amy Elsner
1002Silvio SlusarskiRussia2025-10-09Dorl, James J Esq UNQUALIFIED56Stephen Shaw
1003Jennifer AmigonCanada2025-10-08Benton, John B Jr PROPOSAL82Xuxue Feng
1004Mayumi KolmetzBrazil2025-10-21Rangoni Of Florence UNQUALIFIED6Asiya Javayant
1005Arvin AlbaresFrance2025-10-01Commercial Press RENEWAL28Asiya Javayant
1006Jones VocelkaRussia2025-10-10Rousseaux, Michael Esq RENEWAL35Ivan Magalhaes
1007Sinclair WaycottJapan2025-09-25Rousseaux, Michael Esq QUALIFIED36Xuxue Feng
1008Greenwood BologniaSpain2025-10-03Printing Dimensions NEGOTIATION20Onyama Limba
1009Faith GillianIndia2025-10-20Commercial Press UNQUALIFIED16Xuxue Feng
1010David DarakjyBrazil2025-10-15King, Christopher A Esq QUALIFIED82Asiya Javayant
1011Chavez BriddickBrazil2025-10-22King, Christopher A Esq NEW39Ivan Magalhaes
1012Claire TollnerCanada2025-10-10Morlong Associates UNQUALIFIED97Xuxue Feng
1013Maisha RulapaughGermany2025-10-13Chemel, James L Cpa UNQUALIFIED81Bernardo Dominic
1014Maria MarrierCanada2025-09-30Chemel, James L Cpa NEGOTIATION71Asiya Javayant
1015Deepesh ChuiAustralia2025-10-17Chanay, Jeffrey A Esq PROPOSAL31Asiya Javayant
1016Maria MarrierUnited Kingdom2025-10-02Chemel, James L Cpa UNQUALIFIED79Ioni Bowcher
1017Julie StensethSpain2025-10-04Buckley Miller Wright UNQUALIFIED8Ioni Bowcher
1018Smith GlickAustralia2025-10-21Commercial Press RENEWAL13Stephen Shaw
1019Kadeem FlosiItaly2025-10-15Rousseaux, Michael Esq UNQUALIFIED98Onyama Limba
1020James ButtGermany2025-10-11Dorl, James J Esq QUALIFIED1Ivan Magalhaes
1021Aika InouyeGermany2025-09-25King, Christopher A Esq QUALIFIED86Elwin Sharvill
1022Kaitlin OstroskyGermany2025-10-13Dorl, James J Esq RENEWAL38Xuxue Feng
1023Arvin AlbaresArgentina2025-09-28Rangoni Of Florence UNQUALIFIED22Onyama Limba
1024Ashley DoeBrazil2025-10-14Feltz Printing Service NEW3Xuxue Feng
1025Leja CaldareraFrance2025-10-15Feltz Printing Service NEW40Elwin Sharvill
1026Isabel BowleyIndia2025-09-28Rousseaux, Michael Esq NEGOTIATION40Elwin Sharvill
1027Alejandro PerinAustralia2025-10-05Feiner Bros QUALIFIED94Bernardo Dominic
1028Kaitlin OstroskyRussia2025-10-02Chemel, James L Cpa QUALIFIED77Stephen Shaw
1029Darci PoquetteGermany2025-10-21Rangoni Of Florence QUALIFIED52Onyama Limba
1030Darci PoquetteGermany2025-09-28Printing Dimensions RENEWAL27Bernardo Dominic
1031Maisha RulapaughSpain2025-10-14Truhlar And Truhlar Attys UNQUALIFIED79Bernardo Dominic
1032Misaki RoysterJapan2025-09-27Truhlar And Truhlar Attys RENEWAL59Stephen Shaw
1033Deepesh ChuiGermany2025-10-02Truhlar And Truhlar Attys PROPOSAL2Onyama Limba
1034Aika InouyeGermany2025-10-14Morlong Associates RENEWAL53Onyama Limba
1035Chavez BriddickAustralia2025-10-14Feltz Printing Service RENEWAL64Onyama Limba
1036Maisha RulapaughIndia2025-10-05Dorl, James J Esq QUALIFIED84Ioni Bowcher
1037Aika InouyeFrance2025-09-25Chapman, Ross E Esq PROPOSAL32Bernardo Dominic
1038Clifford RimAustralia2025-10-11Chemel, James L Cpa NEGOTIATION70Stephen Shaw
1039Ricardo GauchoFrance2025-10-07Rousseaux, Michael Esq PROPOSAL66Ioni Bowcher
1040James ButtSpain2025-09-29Buckley Miller Wright NEW48Amy Elsner
1041Misaki RoysterAustralia2025-09-28Feltz Printing Service RENEWAL96Stephen Shaw
1042Francesco ShinkoIndia2025-10-09Rangoni Of Florence NEGOTIATION68Anna Fali
1043Emily WhobreyJapan2025-10-11Feltz Printing Service NEW58Ioni Bowcher
1044Francesco ShinkoUnited Kingdom2025-10-11Benton, John B Jr RENEWAL27Ioni Bowcher
1045Faith GillianAustralia2025-10-10Dorl, James J Esq NEW75Ioni Bowcher
1046Julie StensethBrazil2025-10-20Buckley Miller Wright RENEWAL57Ivan Magalhaes
1047Alejandro PerinSpain2025-10-23King, Christopher A Esq NEW79Onyama Limba
1048Alejandro PerinCanada2025-10-01Chemel, James L Cpa QUALIFIED23Onyama Limba
1049Smith GlickRussia2025-10-02Rousseaux, Michael Esq QUALIFIED80Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Greenwood BologniaRussiaBernardo Dominic UNQUALIFIED
Jefferson SchemmerIndiaAnna Fali UNQUALIFIED
Aditya KuskoBrazilAnna Fali PROPOSAL
Jefferson SchemmerCanadaXuxue Feng NEGOTIATION
Juan WieserRussiaAnna Fali PROPOSAL
Claire TollnerJapanElwin Sharvill QUALIFIED
Costa DilliardItalyBernardo Dominic PROPOSAL
Izzy GarufiCanadaElwin Sharvill RENEWAL
Izzy GarufiItalyIvan Magalhaes QUALIFIED
Silvio SlusarskiFranceStephen Shaw NEW
Ashley DoeAustraliaIoni Bowcher PROPOSAL
Sinclair WaycottFranceAmy Elsner QUALIFIED
James ButtRussiaIvan Magalhaes RENEWAL
Jeanfrancois VenereJapanAsiya Javayant NEGOTIATION
Julie StensethUnited KingdomStephen Shaw NEGOTIATION
Juan WieserRussiaAsiya Javayant NEW
Wickens NestleBrazilXuxue Feng PROPOSAL
Stacey MacleadIndiaAmy Elsner RENEWAL
Tony FollerArgentinaStephen Shaw PROPOSAL
Kaitlin OstroskyAustraliaIvan Magalhaes PROPOSAL
Salvatore StockhamCanadaXuxue Feng UNQUALIFIED
Clifford RimCanadaAsiya Javayant RENEWAL
Arvin AlbaresArgentinaElwin Sharvill NEW
Stacey MacleadUnited KingdomStephen Shaw NEW
Misaki RoysterArgentinaIoni Bowcher NEGOTIATION
Kaitlin OstroskyUnited KingdomXuxue Feng NEGOTIATION
Jefferson SchemmerSpainIoni Bowcher NEGOTIATION
Isabel BowleyCanadaIvan Magalhaes NEGOTIATION
James ButtFranceElwin Sharvill UNQUALIFIED
Clifford RimBrazilOnyama Limba RENEWAL
Francesco ShinkoSpainStephen Shaw QUALIFIED
Isabel BowleyJapanBernardo Dominic NEGOTIATION
Jeanfrancois VenereItalyBernardo Dominic RENEWAL
Jennifer AmigonFranceAsiya Javayant UNQUALIFIED
Munro FerenczCanadaElwin Sharvill PROPOSAL
Mujtaba NickaJapanIoni Bowcher NEW
Jeanfrancois VenereBrazilAnna Fali NEW
Arvin AlbaresAustraliaIoni Bowcher QUALIFIED
Deepesh ChuiAustraliaOnyama Limba RENEWAL
Claire TollnerCanadaBernardo Dominic NEW
Tony FollerSpainElwin Sharvill RENEWAL
Wickens NestleCanadaBernardo Dominic NEW
Ricardo GauchoUnited KingdomElwin Sharvill PROPOSAL
Clifford RimCanadaElwin Sharvill NEW
Sinclair WaycottRussiaBernardo Dominic UNQUALIFIED
Maisha RulapaughIndiaIoni Bowcher PROPOSAL
Munro FerenczUnited KingdomIoni Bowcher RENEWAL
Kaitlin OstroskyCanadaIvan Magalhaes PROPOSAL
Alejandro PerinArgentinaXuxue Feng NEW
Nicolas IturbideIndiaAsiya Javayant QUALIFIED
Frozen Columns
Name
Octavia Malet
Ricardo Gaucho
Kaitlin Ostrosky
James Butt
Adams Morasca
Maisha Rulapaugh
Morrow Ruta
Sinclair Waycott
Faith Gillian
Francesco Shinko
Stacey Maclead
Emily Whobrey
Kadeem Flosi
Smith Glick
Jones Vocelka
Darci Poquette
Rodrigues Campain
Claire Tollner
Jefferson Schemmer
Clifford Rim
Izzy Garufi
Maisha Rulapaugh
Alejandro Perin
Maisha Rulapaugh
Isabel Bowley
Isabel Bowley
Juan Wieser
Jones Vocelka
Sinclair Waycott
Jennifer Amigon
Wickens Nestle
Octavia Malet
Antonio Caudy
Rodrigues Campain
Mayumi Kolmetz
David Darakjy
Clifford Rim
Ivar Paprocki
Jeanfrancois Venere
Ashley Doe
Tony Foller
Silvio Slusarski
Tony Foller
Ricardo Gaucho
Sinclair Waycott
David Darakjy
Ashley Doe
Claire Tollner
James Butt
Jones Vocelka
IdCountryDate
1000Italy2025-10-21
1001Spain2025-10-14
1002Russia2025-10-13
1003Russia2025-10-18
1004Japan2025-10-19
1005Russia2025-10-10
1006Russia2025-10-02
1007Brazil2025-10-12
1008Australia2025-10-20
1009Russia2025-10-19
1010India2025-10-06
1011United Kingdom2025-10-09
1012Canada2025-10-10
1013Spain2025-09-25
1014Brazil2025-10-09
1015Brazil2025-10-08
1016Japan2025-10-20
1017Brazil2025-10-14
1018Australia2025-10-11
1019Russia2025-10-18
1020Japan2025-10-20
1021India2025-10-08
1022Argentina2025-10-13
1023Canada2025-09-29
1024France2025-09-25
1025Australia2025-10-08
1026Australia2025-10-05
1027United Kingdom2025-09-26
1028United Kingdom2025-09-26
1029Argentina2025-09-30
1030India2025-09-27
1031United Kingdom2025-10-15
1032Russia2025-10-19
1033India2025-10-13
1034Japan2025-10-17
1035Australia2025-09-25
1036Spain2025-10-13
1037Japan2025-10-12
1038Germany2025-10-04
1039Canada2025-09-25
1040Argentina2025-10-01
1041Australia2025-09-30
1042India2025-10-07
1043Germany2025-10-05
1044Canada2025-10-05
1045Russia2025-10-20
1046United Kingdom2025-10-05
1047France2025-10-10
1048Japan2025-09-27
1049France2025-10-15

On-Demand Data

NameIdCountryDate
Ivar Paprocki1000Canada2025-10-20
Salvatore Stockham1001Brazil2025-10-16
Juan Wieser1002France2025-10-09
Jennifer Amigon1003Canada2025-10-20
Stacey Maclead1004India2025-10-18
Jones Vocelka1005Italy2025-10-20
Claire Tollner1006Canada2025-10-23
Adams Morasca1007Australia2025-10-12
Juan Wieser1008India2025-10-04
Kaitlin Ostrosky1009Italy2025-09-28
Jeanfrancois Venere1010Russia2025-09-27
Leon Oldroyd1011Spain2025-10-10
Greenwood Bolognia1012Japan2025-10-07
Antonio Caudy1013United Kingdom2025-10-05
Murillo Malet1014Spain2025-09-29
Wickens Nestle1015Argentina2025-10-18
Costa Dilliard1016United Kingdom2025-10-07
Isabel Bowley1017Australia2025-10-21
Isabel Bowley1018Italy2025-10-15
Francesco Shinko1019Brazil2025-10-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Arvin AlbaresAustraliaAnna Fali NEW
Octavia MaletIndiaOnyama Limba UNQUALIFIED
Nicolas IturbideUnited KingdomBernardo Dominic PROPOSAL
Greenwood BologniaGermanyStephen Shaw QUALIFIED
Stacey MacleadFranceAmy Elsner NEGOTIATION
Juan WieserSpainAsiya Javayant PROPOSAL
Morrow RutaJapanStephen Shaw NEGOTIATION
Mayumi KolmetzJapanXuxue Feng UNQUALIFIED
Leon OldroydAustraliaIoni Bowcher NEGOTIATION
Izzy GarufiUnited KingdomIvan Magalhaes QUALIFIED
Alejandro PerinSpainAnna Fali NEGOTIATION
Wickens NestleUnited KingdomXuxue Feng QUALIFIED
Mujtaba NickaAustraliaStephen Shaw QUALIFIED
Jefferson SchemmerItalyAmy Elsner PROPOSAL
Mayumi KolmetzFranceOnyama Limba PROPOSAL
Rodrigues CampainBrazilXuxue Feng NEW
Cody SaylorsFranceXuxue Feng RENEWAL
Silvio SlusarskiAustraliaAsiya Javayant UNQUALIFIED
Johnson SergiGermanyAsiya Javayant NEW
Wickens NestleAustraliaElwin Sharvill NEW
Tony FollerArgentinaBernardo Dominic NEGOTIATION
Aditya KuskoIndiaBernardo Dominic PROPOSAL
Juan WieserUnited KingdomAnna Fali NEW
Cody SaylorsJapanAmy Elsner QUALIFIED
Wickens NestleJapanStephen Shaw RENEWAL
Kaitlin OstroskyArgentinaAnna Fali NEW
Julie StensethItalyAnna Fali RENEWAL
Jones VocelkaArgentinaIoni Bowcher QUALIFIED
Salvatore StockhamGermanyStephen Shaw NEW
Kaitlin OstroskyFranceXuxue Feng QUALIFIED
Kadeem FlosiJapanOnyama Limba RENEWAL
Cody SaylorsGermanyXuxue Feng QUALIFIED
Ivar PaprockiAustraliaAmy Elsner QUALIFIED
Antonio CaudyArgentinaAsiya Javayant NEW
Wickens NestleRussiaAmy Elsner NEGOTIATION
Ivar PaprockiCanadaXuxue Feng UNQUALIFIED
Ashley DoeSpainIvan Magalhaes UNQUALIFIED
Silvio SlusarskiAustraliaIvan Magalhaes UNQUALIFIED
Aruna FigeroaSpainOnyama Limba UNQUALIFIED
Ivar PaprockiRussiaAnna Fali 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>