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
Salvatore StockhamSpainOnyama Limba RENEWAL
Murillo MaletItalyElwin Sharvill UNQUALIFIED
Jeanfrancois VenereArgentinaElwin Sharvill RENEWAL
Salvatore StockhamCanadaBernardo Dominic NEGOTIATION
Smith GlickBrazilStephen Shaw NEGOTIATION
Darci PoquetteRussiaAmy Elsner NEW
Faith GillianBrazilStephen Shaw NEGOTIATION
Juan WieserGermanyElwin Sharvill NEGOTIATION
Ivar PaprockiCanadaStephen Shaw QUALIFIED
Leja CaldareraGermanyXuxue Feng RENEWAL
Sinclair WaycottGermanyAsiya Javayant RENEWAL
Cody SaylorsFranceOnyama Limba UNQUALIFIED
Cody SaylorsBrazilAsiya Javayant UNQUALIFIED
Claire TollnerAustraliaOnyama Limba NEGOTIATION
Morrow RutaSpainAmy Elsner NEW
Maria MarrierUnited KingdomAsiya Javayant RENEWAL
Alejandro PerinUnited KingdomIoni Bowcher UNQUALIFIED
Clifford RimJapanStephen Shaw RENEWAL
Nicolas IturbideGermanyElwin Sharvill QUALIFIED
Rodrigues CampainFranceAmy Elsner QUALIFIED
Arvin AlbaresFranceAnna Fali RENEWAL
James ButtAustraliaAnna Fali PROPOSAL
Octavia MaletBrazilXuxue Feng UNQUALIFIED
Alejandro PerinIndiaBernardo Dominic UNQUALIFIED
Ashley DoeBrazilOnyama Limba UNQUALIFIED
Tony FollerFranceIvan Magalhaes RENEWAL
Alejandro PerinBrazilAmy Elsner RENEWAL
Alejandro PerinBrazilOnyama Limba NEW
Arvin AlbaresFranceOnyama Limba RENEWAL
Leja CaldareraItalyAsiya Javayant UNQUALIFIED
Leja CaldareraFranceBernardo Dominic RENEWAL
Isabel BowleyItalyElwin Sharvill UNQUALIFIED
Julie StensethArgentinaBernardo Dominic NEGOTIATION
Ivar PaprockiCanadaIvan Magalhaes NEW
Emily WhobreyUnited KingdomBernardo Dominic RENEWAL
Mujtaba NickaBrazilIvan Magalhaes PROPOSAL
Aika InouyeIndiaIvan Magalhaes UNQUALIFIED
Misaki RoysterGermanyIvan Magalhaes NEW
Clifford RimGermanyElwin Sharvill QUALIFIED
Munro FerenczFranceElwin Sharvill RENEWAL
Jefferson SchemmerUnited KingdomElwin Sharvill NEGOTIATION
Arvin AlbaresFranceAnna Fali RENEWAL
Deepesh ChuiArgentinaBernardo Dominic QUALIFIED
Nicolas IturbideAustraliaAmy Elsner NEW
Jefferson SchemmerBrazilOnyama Limba NEW
Emily WhobreyArgentinaStephen Shaw PROPOSAL
Salvatore StockhamBrazilStephen Shaw NEGOTIATION
Aditya KuskoItalyBernardo Dominic NEW
Aruna FigeroaBrazilAnna Fali UNQUALIFIED
Isabel BowleyBrazilStephen Shaw PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Ricardo GauchoAustraliaAmy Elsner RENEWAL
Costa DilliardFranceStephen Shaw QUALIFIED
Emily WhobreyRussiaAsiya Javayant RENEWAL
Francesco ShinkoCanadaStephen Shaw RENEWAL
Jeanfrancois VenereFranceBernardo Dominic PROPOSAL
Alejandro PerinIndiaBernardo Dominic NEW
Silvio SlusarskiBrazilAnna Fali NEW
Rodrigues CampainGermanyOnyama Limba NEW
Leja CaldareraBrazilElwin Sharvill QUALIFIED
Antonio CaudyGermanyAmy Elsner NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Francesco ShinkoGermany2026-05-27Printing Dimensions NEW34Xuxue Feng
1001Smith GlickBrazil2026-05-14Chanay, Jeffrey A Esq NEGOTIATION51Bernardo Dominic
1002Stacey MacleadIndia2026-06-05King, Christopher A Esq UNQUALIFIED47Xuxue Feng
1003Francesco ShinkoUnited Kingdom2026-05-25Printing Dimensions NEW23Xuxue Feng
1004Kaitlin OstroskyItaly2026-05-22Commercial Press UNQUALIFIED19Anna Fali
1005Kaitlin OstroskySpain2026-05-11Rousseaux, Michael Esq QUALIFIED92Xuxue Feng
1006Chavez BriddickGermany2026-06-04Rangoni Of Florence NEW97Onyama Limba
1007Jones VocelkaArgentina2026-06-08Chemel, James L Cpa NEW77Anna Fali
1008Cody SaylorsSpain2026-05-29Morlong Associates UNQUALIFIED45Bernardo Dominic
1009Kaitlin OstroskyGermany2026-06-02Benton, John B Jr NEW58Stephen Shaw
1010Maria MarrierFrance2026-05-19Chapman, Ross E Esq UNQUALIFIED68Anna Fali
1011Faith GillianSpain2026-05-27Dorl, James J Esq NEW43Ivan Magalhaes
1012Jennifer AmigonCanada2026-05-31Benton, John B Jr NEW86Anna Fali
1013Stacey MacleadCanada2026-05-30Chapman, Ross E Esq NEGOTIATION28Elwin Sharvill
1014Costa DilliardCanada2026-05-10Buckley Miller Wright UNQUALIFIED84Elwin Sharvill
1015Jefferson SchemmerAustralia2026-05-26Morlong Associates UNQUALIFIED59Bernardo Dominic
1016Arvin AlbaresUnited Kingdom2026-05-12Chapman, Ross E Esq NEGOTIATION81Bernardo Dominic
1017David DarakjyItaly2026-06-01Buckley Miller Wright QUALIFIED36Asiya Javayant
1018James ButtBrazil2026-05-21Chapman, Ross E Esq RENEWAL67Asiya Javayant
1019Smith GlickFrance2026-05-31Chemel, James L Cpa RENEWAL73Amy Elsner
1020Izzy GarufiRussia2026-06-03Truhlar And Truhlar Attys UNQUALIFIED4Anna Fali
1021Adams MorascaGermany2026-05-22Benton, John B Jr UNQUALIFIED12Ivan Magalhaes
1022Mayumi KolmetzSpain2026-06-08Rangoni Of Florence UNQUALIFIED79Stephen Shaw
1023Misaki RoysterIndia2026-05-24Truhlar And Truhlar Attys NEGOTIATION52Stephen Shaw
1024Francesco ShinkoJapan2026-05-12Feltz Printing Service QUALIFIED55Amy Elsner
1025Isabel BowleyRussia2026-05-12Buckley Miller Wright NEGOTIATION32Asiya Javayant
1026Smith GlickCanada2026-05-31King, Christopher A Esq RENEWAL27Bernardo Dominic
1027Smith GlickAustralia2026-05-12Dorl, James J Esq RENEWAL94Elwin Sharvill
1028Isabel BowleyItaly2026-05-25Buckley Miller Wright NEGOTIATION17Asiya Javayant
1029Misaki RoysterIndia2026-05-21Morlong Associates RENEWAL51Ioni Bowcher
1030Tony FollerUnited Kingdom2026-05-10Benton, John B Jr NEW41Amy Elsner
1031Darci PoquetteArgentina2026-06-07Printing Dimensions UNQUALIFIED65Asiya Javayant
1032Johnson SergiJapan2026-05-24Chapman, Ross E Esq NEW18Bernardo Dominic
1033Arvin AlbaresAustralia2026-06-01Buckley Miller Wright PROPOSAL68Stephen Shaw
1034Ashley DoeJapan2026-05-30Feltz Printing Service QUALIFIED93Onyama Limba
1035Misaki RoysterIndia2026-06-08Truhlar And Truhlar Attys PROPOSAL29Anna Fali
1036Aruna FigeroaSpain2026-05-20Printing Dimensions PROPOSAL44Amy Elsner
1037Aruna FigeroaAustralia2026-06-06Rangoni Of Florence UNQUALIFIED52Onyama Limba
1038Kaitlin OstroskyItaly2026-05-27Chapman, Ross E Esq UNQUALIFIED55Anna Fali
1039Clifford RimIndia2026-06-02Morlong Associates RENEWAL67Amy Elsner
1040Jefferson SchemmerSpain2026-05-30Printing Dimensions QUALIFIED3Anna Fali
1041Morrow RutaSpain2026-05-13Feltz Printing Service QUALIFIED38Bernardo Dominic
1042Cody SaylorsGermany2026-05-26Rousseaux, Michael Esq RENEWAL84Onyama Limba
1043Faith GillianIndia2026-06-08Chemel, James L Cpa PROPOSAL88Asiya Javayant
1044Deepesh ChuiUnited Kingdom2026-05-24Buckley Miller Wright NEGOTIATION77Onyama Limba
1045Wickens NestleJapan2026-05-30Truhlar And Truhlar Attys RENEWAL2Ivan Magalhaes
1046Aruna FigeroaBrazil2026-05-22Benton, John B Jr NEGOTIATION24Amy Elsner
1047Alejandro PerinRussia2026-06-03Feltz Printing Service UNQUALIFIED19Stephen Shaw
1048Maria MarrierIndia2026-05-17Truhlar And Truhlar Attys QUALIFIED11Amy Elsner
1049Chavez BriddickBrazil2026-06-08Dorl, James J Esq NEW43Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Misaki RoysterFranceIvan Magalhaes NEGOTIATION
Clifford RimGermanyIvan Magalhaes QUALIFIED
Wickens NestleIndiaElwin Sharvill PROPOSAL
Leon OldroydAustraliaOnyama Limba NEW
Morrow RutaCanadaOnyama Limba NEGOTIATION
Murillo MaletArgentinaIvan Magalhaes PROPOSAL
Aruna FigeroaRussiaAnna Fali QUALIFIED
Jones VocelkaSpainElwin Sharvill PROPOSAL
Mayumi KolmetzArgentinaStephen Shaw PROPOSAL
Izzy GarufiRussiaBernardo Dominic QUALIFIED
Adams MorascaItalyIoni Bowcher RENEWAL
Isabel BowleyBrazilOnyama Limba QUALIFIED
Antonio CaudyAustraliaIoni Bowcher UNQUALIFIED
Octavia MaletUnited KingdomXuxue Feng QUALIFIED
Cody SaylorsFranceAnna Fali UNQUALIFIED
Antonio CaudyGermanyXuxue Feng RENEWAL
Aruna FigeroaAustraliaIvan Magalhaes UNQUALIFIED
Claire TollnerBrazilAmy Elsner PROPOSAL
Arvin AlbaresArgentinaAsiya Javayant NEGOTIATION
Aruna FigeroaJapanIvan Magalhaes NEGOTIATION
Faith GillianJapanAmy Elsner PROPOSAL
Antonio CaudyAustraliaAnna Fali NEGOTIATION
Wickens NestleGermanyAsiya Javayant UNQUALIFIED
Adams MorascaUnited KingdomXuxue Feng NEW
Chavez BriddickItalyAsiya Javayant QUALIFIED
Adams MorascaFranceXuxue Feng NEW
Johnson SergiBrazilStephen Shaw UNQUALIFIED
Aruna FigeroaJapanAnna Fali PROPOSAL
Kadeem FlosiAustraliaXuxue Feng UNQUALIFIED
James ButtItalyIoni Bowcher PROPOSAL
Murillo MaletIndiaAsiya Javayant UNQUALIFIED
Murillo MaletRussiaXuxue Feng RENEWAL
Aruna FigeroaCanadaBernardo Dominic PROPOSAL
Misaki RoysterRussiaIoni Bowcher QUALIFIED
Deepesh ChuiAustraliaBernardo Dominic NEW
Ricardo GauchoFranceXuxue Feng PROPOSAL
Tony FollerItalyIoni Bowcher UNQUALIFIED
Ricardo GauchoArgentinaIvan Magalhaes UNQUALIFIED
Clifford RimSpainIvan Magalhaes QUALIFIED
Faith GillianSpainXuxue Feng PROPOSAL
Murillo MaletCanadaStephen Shaw QUALIFIED
Mujtaba NickaSpainOnyama Limba RENEWAL
Kadeem FlosiFranceIvan Magalhaes RENEWAL
Greenwood BologniaUnited KingdomXuxue Feng NEGOTIATION
Stacey MacleadBrazilXuxue Feng NEGOTIATION
Adams MorascaArgentinaBernardo Dominic UNQUALIFIED
Julie StensethBrazilIoni Bowcher RENEWAL
Rodrigues CampainAustraliaElwin Sharvill QUALIFIED
Johnson SergiUnited KingdomStephen Shaw QUALIFIED
Jennifer AmigonBrazilAmy Elsner RENEWAL
Frozen Columns
Name
Kaitlin Ostrosky
Aruna Figeroa
Ricardo Gaucho
Ivar Paprocki
Mujtaba Nicka
Johnson Sergi
Misaki Royster
Julie Stenseth
Rodrigues Campain
Johnson Sergi
Munro Ferencz
Juan Wieser
David Darakjy
Costa Dilliard
Mayumi Kolmetz
Leja Caldarera
David Darakjy
Arvin Albares
Deepesh Chui
Claire Tollner
Octavia Malet
Rodrigues Campain
Johnson Sergi
Johnson Sergi
Rodrigues Campain
Aruna Figeroa
Jeanfrancois Venere
Misaki Royster
Jeanfrancois Venere
Isabel Bowley
Misaki Royster
Nicolas Iturbide
Clifford Rim
Emily Whobrey
Jennifer Amigon
Claire Tollner
Aika Inouye
Aditya Kusko
Francesco Shinko
Kaitlin Ostrosky
Jefferson Schemmer
Ricardo Gaucho
Tony Foller
Izzy Garufi
Faith Gillian
Greenwood Bolognia
Wickens Nestle
Smith Glick
Greenwood Bolognia
Cody Saylors
IdCountryDate
1000Japan2026-05-28
1001India2026-05-11
1002Australia2026-05-11
1003Italy2026-05-21
1004Spain2026-05-29
1005United Kingdom2026-06-03
1006Argentina2026-06-01
1007Italy2026-05-14
1008Russia2026-05-19
1009Brazil2026-05-31
1010Russia2026-05-26
1011India2026-05-31
1012Italy2026-05-22
1013India2026-05-24
1014Brazil2026-06-07
1015Germany2026-06-01
1016Russia2026-05-31
1017Italy2026-05-23
1018Argentina2026-05-18
1019Japan2026-06-01
1020India2026-05-10
1021Japan2026-05-12
1022India2026-05-18
1023United Kingdom2026-05-29
1024Japan2026-05-12
1025Argentina2026-05-14
1026Canada2026-05-14
1027India2026-05-15
1028Argentina2026-05-21
1029Germany2026-05-15
1030Japan2026-06-01
1031India2026-05-29
1032Argentina2026-05-13
1033Australia2026-05-27
1034Brazil2026-05-19
1035India2026-05-26
1036United Kingdom2026-06-01
1037Canada2026-06-05
1038Spain2026-05-21
1039Canada2026-06-03
1040Brazil2026-05-13
1041Japan2026-05-31
1042France2026-06-05
1043United Kingdom2026-05-18
1044France2026-05-12
1045Brazil2026-05-30
1046Japan2026-06-01
1047Australia2026-05-23
1048Canada2026-05-16
1049France2026-05-17

On-Demand Data

NameIdCountryDate
Ashley Doe1000Spain2026-05-24
Tony Foller1001Italy2026-05-24
Jefferson Schemmer1002Japan2026-06-05
Arvin Albares1003Italy2026-05-11
Isabel Bowley1004Brazil2026-05-14
Munro Ferencz1005Japan2026-05-22
Cody Saylors1006France2026-05-10
Ricardo Gaucho1007India2026-06-03
Chavez Briddick1008Italy2026-05-18
Isabel Bowley1009United Kingdom2026-05-23
Izzy Garufi1010Canada2026-05-19
Morrow Ruta1011Germany2026-05-25
Alejandro Perin1012Brazil2026-05-24
Kaitlin Ostrosky1013Australia2026-05-21
Ricardo Gaucho1014Russia2026-05-24
Ivar Paprocki1015United Kingdom2026-05-18
Smith Glick1016Argentina2026-05-14
Ashley Doe1017Brazil2026-05-10
Nicolas Iturbide1018United Kingdom2026-05-10
Tony Foller1019Germany2026-05-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Antonio CaudyFranceAnna Fali QUALIFIED
Tony FollerCanadaOnyama Limba QUALIFIED
Ivar PaprockiArgentinaStephen Shaw QUALIFIED
Ricardo GauchoJapanAmy Elsner UNQUALIFIED
Isabel BowleyIndiaElwin Sharvill QUALIFIED
Octavia MaletSpainAmy Elsner NEGOTIATION
Jones VocelkaCanadaOnyama Limba NEGOTIATION
Arvin AlbaresBrazilBernardo Dominic PROPOSAL
Izzy GarufiAustraliaIvan Magalhaes UNQUALIFIED
Chavez BriddickGermanyIvan Magalhaes QUALIFIED
Misaki RoysterIndiaIvan Magalhaes PROPOSAL
Aditya KuskoIndiaAnna Fali NEGOTIATION
Misaki RoysterFranceElwin Sharvill UNQUALIFIED
Juan WieserItalyAmy Elsner UNQUALIFIED
James ButtBrazilAmy Elsner UNQUALIFIED
Nicolas IturbideItalyIvan Magalhaes NEW
Munro FerenczArgentinaIoni Bowcher NEW
Rodrigues CampainFranceStephen Shaw NEW
Faith GillianUnited KingdomBernardo Dominic UNQUALIFIED
Mujtaba NickaCanadaAnna Fali UNQUALIFIED
Stacey MacleadJapanOnyama Limba UNQUALIFIED
Octavia MaletUnited KingdomIoni Bowcher UNQUALIFIED
Tony FollerSpainIoni Bowcher UNQUALIFIED
Antonio CaudyIndiaOnyama Limba NEGOTIATION
Mayumi KolmetzSpainElwin Sharvill QUALIFIED
Jeanfrancois VenereCanadaAsiya Javayant PROPOSAL
Darci PoquetteItalyStephen Shaw NEGOTIATION
Aruna FigeroaAustraliaIoni Bowcher UNQUALIFIED
Antonio CaudyBrazilBernardo Dominic NEGOTIATION
Darci PoquetteFranceOnyama Limba UNQUALIFIED
Stacey MacleadFranceAsiya Javayant UNQUALIFIED
Deepesh ChuiItalyElwin Sharvill PROPOSAL
Adams MorascaUnited KingdomIoni Bowcher NEW
David DarakjyFranceIvan Magalhaes RENEWAL
Morrow RutaGermanyXuxue Feng NEGOTIATION
Jefferson SchemmerSpainAnna Fali QUALIFIED
Claire TollnerGermanyAmy Elsner UNQUALIFIED
Maria MarrierArgentinaIvan Magalhaes NEGOTIATION
Antonio CaudyIndiaStephen Shaw NEGOTIATION
Darci PoquetteCanadaAsiya Javayant 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>