Locale

Language
English
English
English
French
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Czech
Greek
Persian
Finnish
Danish
Hindi
Indonesian
Croatian
Japanese
Hungarian
Hebrew
Georgian
Central Kurdish
Khmer
Kyrgyz
Kazakh
Lithuanian
Latvian
Malay
Norwegian
Polish
Romanian
Russian
Slovak
Slovenian
Serbian
Swedish
Thai
Turkish
Ukrainian
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
Mayumi KolmetzAustraliaXuxue Feng RENEWAL
Octavia MaletBrazilAmy Elsner PROPOSAL
Faith GillianItalyBernardo Dominic UNQUALIFIED
Rodrigues CampainIndiaAnna Fali RENEWAL
Misaki RoysterCanadaBernardo Dominic QUALIFIED
Francesco ShinkoUnited KingdomIoni Bowcher NEW
Costa DilliardBrazilXuxue Feng QUALIFIED
Ashley DoeAustraliaElwin Sharvill PROPOSAL
Sinclair WaycottFranceAsiya Javayant UNQUALIFIED
Murillo MaletItalyIvan Magalhaes RENEWAL
Sinclair WaycottAustraliaAsiya Javayant RENEWAL
Emily WhobreyFranceOnyama Limba QUALIFIED
Maisha RulapaughRussiaAsiya Javayant UNQUALIFIED
Munro FerenczAustraliaIvan Magalhaes UNQUALIFIED
Jefferson SchemmerCanadaAmy Elsner RENEWAL
Costa DilliardCanadaBernardo Dominic PROPOSAL
David DarakjyUnited KingdomElwin Sharvill UNQUALIFIED
Claire TollnerAustraliaBernardo Dominic PROPOSAL
Munro FerenczRussiaElwin Sharvill NEGOTIATION
Isabel BowleyItalyBernardo Dominic RENEWAL
Deepesh ChuiArgentinaOnyama Limba NEGOTIATION
Izzy GarufiCanadaBernardo Dominic NEW
Munro FerenczFranceXuxue Feng PROPOSAL
Maria MarrierIndiaBernardo Dominic NEGOTIATION
Tony FollerBrazilStephen Shaw RENEWAL
Mayumi KolmetzJapanElwin Sharvill NEW
Leja CaldareraUnited KingdomIvan Magalhaes RENEWAL
Ivar PaprockiIndiaXuxue Feng NEGOTIATION
Clifford RimArgentinaElwin Sharvill NEGOTIATION
Octavia MaletBrazilOnyama Limba RENEWAL
Darci PoquetteArgentinaAnna Fali PROPOSAL
Johnson SergiCanadaAnna Fali QUALIFIED
Costa DilliardBrazilBernardo Dominic PROPOSAL
Maria MarrierBrazilOnyama Limba NEW
Rodrigues CampainSpainIvan Magalhaes NEGOTIATION
Salvatore StockhamArgentinaOnyama Limba UNQUALIFIED
Wickens NestleJapanOnyama Limba QUALIFIED
Stacey MacleadItalyIoni Bowcher NEGOTIATION
Ricardo GauchoSpainAmy Elsner NEW
Leon OldroydBrazilXuxue Feng UNQUALIFIED
Jeanfrancois VenereFranceXuxue Feng NEW
Maisha RulapaughRussiaBernardo Dominic QUALIFIED
Aruna FigeroaJapanBernardo Dominic NEW
Izzy GarufiRussiaAnna Fali NEGOTIATION
Cody SaylorsIndiaXuxue Feng QUALIFIED
Aruna FigeroaIndiaXuxue Feng NEGOTIATION
Jennifer AmigonRussiaOnyama Limba NEW
Maria MarrierSpainStephen Shaw NEGOTIATION
Jennifer AmigonGermanyOnyama Limba QUALIFIED
Mayumi KolmetzItalyOnyama Limba QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Leon OldroydSpainAmy Elsner PROPOSAL
Nicolas IturbideRussiaAsiya Javayant NEGOTIATION
Murillo MaletAustraliaElwin Sharvill RENEWAL
Sinclair WaycottRussiaAnna Fali NEGOTIATION
Mujtaba NickaArgentinaAmy Elsner NEW
Darci PoquetteSpainElwin Sharvill NEW
Deepesh ChuiIndiaStephen Shaw PROPOSAL
Smith GlickArgentinaBernardo Dominic PROPOSAL
Jeanfrancois VenereIndiaElwin Sharvill UNQUALIFIED
Morrow RutaJapanIoni Bowcher PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Darci PoquetteGermany2024-11-25King, Christopher A Esq UNQUALIFIED11Ioni Bowcher
1001Wickens NestleGermany2024-11-01Commercial Press NEW97Xuxue Feng
1002Octavia MaletBrazil2024-11-26Benton, John B Jr PROPOSAL42Xuxue Feng
1003Jeanfrancois VenereItaly2024-11-08Chemel, James L Cpa NEGOTIATION53Stephen Shaw
1004Julie StensethItaly2024-11-11Rousseaux, Michael Esq RENEWAL13Elwin Sharvill
1005Cody SaylorsAustralia2024-11-11Feiner Bros RENEWAL85Onyama Limba
1006Leja CaldareraAustralia2024-11-12Rousseaux, Michael Esq NEGOTIATION28Bernardo Dominic
1007Aditya KuskoCanada2024-11-11King, Christopher A Esq NEW52Asiya Javayant
1008Morrow RutaIndia2024-11-11Benton, John B Jr PROPOSAL96Stephen Shaw
1009Morrow RutaGermany2024-11-12Printing Dimensions UNQUALIFIED77Ivan Magalhaes
1010Adams MorascaFrance2024-11-22Rangoni Of Florence NEGOTIATION74Onyama Limba
1011James ButtArgentina2024-11-22Feltz Printing Service UNQUALIFIED31Anna Fali
1012Arvin AlbaresCanada2024-10-31Chapman, Ross E Esq PROPOSAL4Xuxue Feng
1013Darci PoquetteRussia2024-11-17Morlong Associates QUALIFIED60Ioni Bowcher
1014Emily WhobreyCanada2024-10-29Rangoni Of Florence UNQUALIFIED93Stephen Shaw
1015Ivar PaprockiUnited Kingdom2024-11-22Benton, John B Jr RENEWAL29Elwin Sharvill
1016Jennifer AmigonJapan2024-11-15Chemel, James L Cpa RENEWAL40Asiya Javayant
1017Murillo MaletIndia2024-11-03Rangoni Of Florence NEW93Bernardo Dominic
1018Johnson SergiRussia2024-11-18Chapman, Ross E Esq RENEWAL22Xuxue Feng
1019David DarakjyFrance2024-11-11Chanay, Jeffrey A Esq NEW42Ioni Bowcher
1020Nicolas IturbideAustralia2024-10-28Truhlar And Truhlar Attys RENEWAL77Bernardo Dominic
1021Leon OldroydAustralia2024-11-17Rousseaux, Michael Esq NEW96Ivan Magalhaes
1022Morrow RutaJapan2024-10-28Morlong Associates RENEWAL16Xuxue Feng
1023Aika InouyeArgentina2024-11-24Benton, John B Jr RENEWAL26Stephen Shaw
1024Morrow RutaSpain2024-11-26Rousseaux, Michael Esq NEW44Xuxue Feng
1025Clifford RimItaly2024-10-31Feltz Printing Service NEGOTIATION53Bernardo Dominic
1026Jones VocelkaIndia2024-10-30Morlong Associates UNQUALIFIED27Ioni Bowcher
1027Ivar PaprockiCanada2024-11-08Truhlar And Truhlar Attys RENEWAL59Xuxue Feng
1028Ricardo GauchoCanada2024-11-02Chapman, Ross E Esq QUALIFIED78Amy Elsner
1029Faith GillianSpain2024-10-30Rousseaux, Michael Esq RENEWAL74Xuxue Feng
1030Wickens NestleGermany2024-11-08Printing Dimensions NEGOTIATION37Xuxue Feng
1031Kaitlin OstroskyIndia2024-11-10Chanay, Jeffrey A Esq UNQUALIFIED16Onyama Limba
1032Ricardo GauchoArgentina2024-11-26Dorl, James J Esq QUALIFIED69Onyama Limba
1033Sinclair WaycottSpain2024-11-25Feltz Printing Service QUALIFIED96Ivan Magalhaes
1034Emily WhobreyUnited Kingdom2024-11-10Chemel, James L Cpa QUALIFIED51Asiya Javayant
1035Maisha RulapaughGermany2024-11-22Rangoni Of Florence QUALIFIED88Amy Elsner
1036Claire TollnerArgentina2024-11-14Chapman, Ross E Esq NEGOTIATION28Ioni Bowcher
1037Ashley DoeCanada2024-11-11Rousseaux, Michael Esq RENEWAL7Ivan Magalhaes
1038Leja CaldareraIndia2024-11-12Rousseaux, Michael Esq QUALIFIED42Elwin Sharvill
1039Cody SaylorsFrance2024-11-05Dorl, James J Esq PROPOSAL67Bernardo Dominic
1040Morrow RutaRussia2024-11-06Buckley Miller Wright UNQUALIFIED95Onyama Limba
1041Silvio SlusarskiAustralia2024-10-29Chemel, James L Cpa NEGOTIATION82Ivan Magalhaes
1042Arvin AlbaresItaly2024-11-09Feltz Printing Service UNQUALIFIED47Elwin Sharvill
1043Jefferson SchemmerAustralia2024-10-28Morlong Associates NEW50Amy Elsner
1044Kadeem FlosiUnited Kingdom2024-11-01Commercial Press NEGOTIATION7Elwin Sharvill
1045Jefferson SchemmerRussia2024-11-09Printing Dimensions QUALIFIED12Xuxue Feng
1046Juan WieserUnited Kingdom2024-11-15Morlong Associates PROPOSAL76Asiya Javayant
1047Mujtaba NickaJapan2024-11-24Benton, John B Jr UNQUALIFIED94Amy Elsner
1048Morrow RutaJapan2024-11-07Commercial Press PROPOSAL96Stephen Shaw
1049James ButtBrazil2024-11-04Morlong Associates NEW4Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Leon OldroydItalyElwin Sharvill QUALIFIED
Emily WhobreyArgentinaAmy Elsner NEGOTIATION
Alejandro PerinBrazilStephen Shaw QUALIFIED
Darci PoquetteIndiaElwin Sharvill RENEWAL
Ivar PaprockiArgentinaIvan Magalhaes NEGOTIATION
Aruna FigeroaGermanyAmy Elsner RENEWAL
Jefferson SchemmerUnited KingdomXuxue Feng NEGOTIATION
Leon OldroydUnited KingdomAmy Elsner RENEWAL
Chavez BriddickIndiaAmy Elsner RENEWAL
Clifford RimSpainBernardo Dominic NEW
Faith GillianRussiaStephen Shaw PROPOSAL
Isabel BowleyJapanAnna Fali NEGOTIATION
Aruna FigeroaJapanAmy Elsner UNQUALIFIED
Antonio CaudySpainXuxue Feng QUALIFIED
Adams MorascaCanadaAmy Elsner RENEWAL
Cody SaylorsBrazilXuxue Feng QUALIFIED
Greenwood BologniaRussiaIoni Bowcher UNQUALIFIED
Morrow RutaItalyBernardo Dominic NEW
Aditya KuskoFranceBernardo Dominic QUALIFIED
Claire TollnerItalyIoni Bowcher NEGOTIATION
Francesco ShinkoBrazilElwin Sharvill NEGOTIATION
Julie StensethIndiaBernardo Dominic NEW
Izzy GarufiGermanyStephen Shaw QUALIFIED
Mujtaba NickaSpainAnna Fali PROPOSAL
Silvio SlusarskiRussiaXuxue Feng QUALIFIED
Greenwood BologniaGermanyBernardo Dominic UNQUALIFIED
Darci PoquetteUnited KingdomBernardo Dominic PROPOSAL
Julie StensethItalyIvan Magalhaes UNQUALIFIED
Faith GillianAustraliaXuxue Feng PROPOSAL
Alejandro PerinItalyIvan Magalhaes NEGOTIATION
Jeanfrancois VenereIndiaIvan Magalhaes NEGOTIATION
Rodrigues CampainJapanIvan Magalhaes RENEWAL
Kaitlin OstroskyBrazilStephen Shaw NEGOTIATION
Francesco ShinkoRussiaAnna Fali NEW
Costa DilliardIndiaIoni Bowcher UNQUALIFIED
David DarakjyAustraliaStephen Shaw NEGOTIATION
Cody SaylorsFranceXuxue Feng UNQUALIFIED
Mayumi KolmetzCanadaElwin Sharvill NEW
Izzy GarufiAustraliaIoni Bowcher NEGOTIATION
Maria MarrierArgentinaAmy Elsner NEW
Faith GillianRussiaXuxue Feng UNQUALIFIED
Greenwood BologniaCanadaAsiya Javayant NEW
Aika InouyeIndiaXuxue Feng PROPOSAL
Arvin AlbaresSpainElwin Sharvill QUALIFIED
Maisha RulapaughAustraliaAmy Elsner NEGOTIATION
Claire TollnerUnited KingdomOnyama Limba NEGOTIATION
Greenwood BologniaRussiaAnna Fali RENEWAL
Leja CaldareraUnited KingdomOnyama Limba NEGOTIATION
Rodrigues CampainJapanOnyama Limba NEW
Antonio CaudyRussiaAsiya Javayant QUALIFIED
Frozen Columns
Name
David Darakjy
Ivar Paprocki
Isabel Bowley
Smith Glick
Jennifer Amigon
Leon Oldroyd
Greenwood Bolognia
Jones Vocelka
Nicolas Iturbide
Alejandro Perin
Stacey Maclead
Kaitlin Ostrosky
Cody Saylors
Francesco Shinko
David Darakjy
Emily Whobrey
Smith Glick
Wickens Nestle
Tony Foller
Mayumi Kolmetz
Faith Gillian
Morrow Ruta
Mujtaba Nicka
Isabel Bowley
Emily Whobrey
Octavia Malet
Clifford Rim
Jones Vocelka
Jones Vocelka
Jennifer Amigon
Ashley Doe
Costa Dilliard
Arvin Albares
Izzy Garufi
Tony Foller
Rodrigues Campain
Jones Vocelka
Kadeem Flosi
Silvio Slusarski
Ivar Paprocki
Jefferson Schemmer
Octavia Malet
Murillo Malet
Chavez Briddick
Claire Tollner
Arvin Albares
Aditya Kusko
Kadeem Flosi
Munro Ferencz
Aika Inouye
IdCountryDate
1000Italy2024-10-30
1001France2024-10-30
1002France2024-11-02
1003United Kingdom2024-11-11
1004Japan2024-11-08
1005France2024-11-06
1006Australia2024-10-28
1007France2024-11-06
1008United Kingdom2024-11-23
1009Australia2024-11-22
1010United Kingdom2024-11-24
1011Russia2024-11-09
1012Germany2024-11-03
1013Spain2024-10-29
1014Argentina2024-11-02
1015India2024-10-29
1016Australia2024-11-03
1017Canada2024-11-15
1018Brazil2024-11-22
1019Russia2024-11-26
1020Spain2024-11-20
1021France2024-11-01
1022Brazil2024-11-06
1023Germany2024-11-02
1024United Kingdom2024-11-12
1025India2024-11-19
1026Italy2024-11-02
1027India2024-11-08
1028Canada2024-11-09
1029United Kingdom2024-11-24
1030Germany2024-11-18
1031Argentina2024-11-24
1032Spain2024-10-31
1033Canada2024-10-31
1034Germany2024-11-08
1035Spain2024-11-26
1036Japan2024-11-15
1037Italy2024-11-04
1038Brazil2024-11-05
1039Australia2024-11-08
1040Brazil2024-11-12
1041France2024-11-08
1042Spain2024-11-21
1043Japan2024-11-08
1044France2024-11-12
1045Spain2024-11-18
1046Spain2024-11-04
1047Argentina2024-11-13
1048India2024-11-25
1049Spain2024-10-31

On-Demand Data

NameIdCountryDate
Emily Whobrey1000India2024-11-22
Ricardo Gaucho1001India2024-11-22
Jennifer Amigon1002India2024-11-07
Claire Tollner1003United Kingdom2024-11-22
Greenwood Bolognia1004Italy2024-11-03
Greenwood Bolognia1005Brazil2024-11-10
Clifford Rim1006India2024-11-11
Ricardo Gaucho1007Germany2024-11-21
David Darakjy1008United Kingdom2024-10-31
Jeanfrancois Venere1009Australia2024-11-02
Morrow Ruta1010Australia2024-11-12
Johnson Sergi1011Canada2024-11-22
Clifford Rim1012Canada2024-11-06
David Darakjy1013Canada2024-11-04
Alejandro Perin1014Canada2024-11-01
Emily Whobrey1015Spain2024-11-21
Mujtaba Nicka1016Russia2024-11-04
Faith Gillian1017Spain2024-11-09
Kaitlin Ostrosky1018France2024-11-26
James Butt1019France2024-11-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerFranceIvan Magalhaes QUALIFIED
James ButtItalyAnna Fali RENEWAL
Octavia MaletItalyElwin Sharvill QUALIFIED
Misaki RoysterGermanyAmy Elsner UNQUALIFIED
Faith GillianArgentinaStephen Shaw NEW
Jeanfrancois VenereArgentinaIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereJapanIvan Magalhaes NEW
Emily WhobreyUnited KingdomAmy Elsner UNQUALIFIED
Juan WieserCanadaElwin Sharvill UNQUALIFIED
Emily WhobreyBrazilStephen Shaw NEGOTIATION
Francesco ShinkoJapanIvan Magalhaes NEGOTIATION
Murillo MaletIndiaAnna Fali RENEWAL
David DarakjyIndiaXuxue Feng RENEWAL
Jones VocelkaIndiaAmy Elsner UNQUALIFIED
Aditya KuskoUnited KingdomOnyama Limba NEW
Kaitlin OstroskyCanadaAsiya Javayant RENEWAL
Julie StensethAustraliaOnyama Limba NEW
Ricardo GauchoSpainIvan Magalhaes RENEWAL
Rodrigues CampainJapanXuxue Feng RENEWAL
Tony FollerBrazilAmy Elsner RENEWAL
Morrow RutaGermanyIvan Magalhaes UNQUALIFIED
Nicolas IturbideUnited KingdomAnna Fali RENEWAL
Rodrigues CampainJapanIvan Magalhaes RENEWAL
Juan WieserItalyBernardo Dominic UNQUALIFIED
Antonio CaudyAustraliaAsiya Javayant UNQUALIFIED
Nicolas IturbideIndiaAnna Fali RENEWAL
Rodrigues CampainJapanElwin Sharvill UNQUALIFIED
Deepesh ChuiFranceIvan Magalhaes QUALIFIED
Aika InouyeFranceIvan Magalhaes RENEWAL
Alejandro PerinFranceStephen Shaw PROPOSAL
Kadeem FlosiCanadaElwin Sharvill QUALIFIED
Aditya KuskoUnited KingdomAnna Fali QUALIFIED
Kadeem FlosiIndiaAsiya Javayant NEW
Sinclair WaycottGermanyAsiya Javayant QUALIFIED
Sinclair WaycottRussiaBernardo Dominic QUALIFIED
Wickens NestleAustraliaAnna Fali NEGOTIATION
Rodrigues CampainFranceIvan Magalhaes NEGOTIATION
Murillo MaletSpainAnna Fali NEW
Salvatore StockhamJapanAmy Elsner NEGOTIATION
Greenwood BologniaBrazilStephen Shaw 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>