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
Kaitlin OstroskyAustraliaAmy Elsner QUALIFIED
Darci PoquetteCanadaIoni Bowcher QUALIFIED
Silvio SlusarskiAustraliaAnna Fali UNQUALIFIED
Jennifer AmigonArgentinaElwin Sharvill QUALIFIED
Jennifer AmigonUnited KingdomStephen Shaw UNQUALIFIED
Aruna FigeroaFranceOnyama Limba UNQUALIFIED
James ButtAustraliaAsiya Javayant PROPOSAL
Adams MorascaItalyXuxue Feng NEGOTIATION
Jones VocelkaGermanyStephen Shaw QUALIFIED
Ashley DoeAustraliaAsiya Javayant UNQUALIFIED
Juan WieserSpainIvan Magalhaes PROPOSAL
Smith GlickJapanAnna Fali NEGOTIATION
Jennifer AmigonArgentinaXuxue Feng NEW
Arvin AlbaresUnited KingdomElwin Sharvill RENEWAL
Wickens NestleCanadaAsiya Javayant UNQUALIFIED
Jennifer AmigonArgentinaBernardo Dominic NEGOTIATION
Jeanfrancois VenereBrazilOnyama Limba PROPOSAL
Faith GillianBrazilStephen Shaw QUALIFIED
Munro FerenczArgentinaAmy Elsner RENEWAL
David DarakjyCanadaAmy Elsner PROPOSAL
Silvio SlusarskiBrazilStephen Shaw NEGOTIATION
Wickens NestleGermanyBernardo Dominic RENEWAL
Munro FerenczUnited KingdomBernardo Dominic NEGOTIATION
Costa DilliardItalyIoni Bowcher PROPOSAL
Alejandro PerinBrazilAmy Elsner NEGOTIATION
Deepesh ChuiGermanyAsiya Javayant PROPOSAL
Octavia MaletSpainAsiya Javayant NEW
Aditya KuskoItalyIvan Magalhaes NEGOTIATION
Murillo MaletCanadaXuxue Feng UNQUALIFIED
Adams MorascaAustraliaAnna Fali NEW
Sinclair WaycottUnited KingdomElwin Sharvill NEGOTIATION
Leon OldroydGermanyIoni Bowcher NEW
Misaki RoysterJapanIoni Bowcher NEGOTIATION
Mujtaba NickaJapanBernardo Dominic RENEWAL
Claire TollnerSpainIvan Magalhaes QUALIFIED
Salvatore StockhamIndiaStephen Shaw RENEWAL
Leon OldroydUnited KingdomAsiya Javayant UNQUALIFIED
Leja CaldareraIndiaAnna Fali NEW
Nicolas IturbideIndiaIoni Bowcher PROPOSAL
Ashley DoeRussiaIvan Magalhaes NEW
Leon OldroydItalyAsiya Javayant PROPOSAL
Antonio CaudyIndiaElwin Sharvill PROPOSAL
Aditya KuskoJapanBernardo Dominic PROPOSAL
Silvio SlusarskiFranceElwin Sharvill RENEWAL
Adams MorascaFranceAmy Elsner NEGOTIATION
Aruna FigeroaArgentinaStephen Shaw QUALIFIED
Jennifer AmigonCanadaOnyama Limba UNQUALIFIED
Cody SaylorsRussiaBernardo Dominic UNQUALIFIED
Leja CaldareraBrazilElwin Sharvill QUALIFIED
Silvio SlusarskiRussiaElwin Sharvill NEW
Horizontal
NameCountryRepresentativeStatus
Ivar PaprockiAustraliaIoni Bowcher QUALIFIED
Salvatore StockhamItalyElwin Sharvill NEW
Aruna FigeroaUnited KingdomXuxue Feng PROPOSAL
Sinclair WaycottItalyAnna Fali QUALIFIED
Aruna FigeroaSpainAsiya Javayant RENEWAL
Antonio CaudyFranceAsiya Javayant NEW
Julie StensethUnited KingdomBernardo Dominic UNQUALIFIED
David DarakjyBrazilAmy Elsner NEGOTIATION
Faith GillianCanadaAmy Elsner PROPOSAL
Costa DilliardArgentinaAsiya Javayant UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maria MarrierUnited Kingdom2026-06-13Morlong Associates NEGOTIATION90Anna Fali
1001Maria MarrierGermany2026-05-28King, Christopher A Esq NEGOTIATION97Xuxue Feng
1002Cody SaylorsAustralia2026-05-17King, Christopher A Esq PROPOSAL52Amy Elsner
1003Clifford RimRussia2026-05-28Chemel, James L Cpa NEW81Onyama Limba
1004Claire TollnerCanada2026-05-20Benton, John B Jr RENEWAL44Onyama Limba
1005Adams MorascaFrance2026-05-30Morlong Associates NEW10Xuxue Feng
1006Arvin AlbaresCanada2026-05-24Chapman, Ross E Esq PROPOSAL72Ivan Magalhaes
1007Morrow RutaIndia2026-05-19Chemel, James L Cpa UNQUALIFIED31Elwin Sharvill
1008Misaki RoysterCanada2026-06-05Truhlar And Truhlar Attys PROPOSAL38Asiya Javayant
1009Antonio CaudyRussia2026-05-20Morlong Associates UNQUALIFIED92Stephen Shaw
1010Emily WhobreyJapan2026-05-15Printing Dimensions NEW2Anna Fali
1011Ivar PaprockiBrazil2026-05-30Chanay, Jeffrey A Esq NEGOTIATION36Bernardo Dominic
1012Mujtaba NickaJapan2026-05-23King, Christopher A Esq QUALIFIED98Xuxue Feng
1013Adams MorascaArgentina2026-05-31Truhlar And Truhlar Attys PROPOSAL71Bernardo Dominic
1014Jennifer AmigonJapan2026-06-07Commercial Press UNQUALIFIED3Ivan Magalhaes
1015Murillo MaletArgentina2026-05-23Benton, John B Jr RENEWAL10Bernardo Dominic
1016Ashley DoeArgentina2026-05-17Benton, John B Jr NEW23Anna Fali
1017Smith GlickRussia2026-05-19Benton, John B Jr QUALIFIED11Bernardo Dominic
1018Emily WhobreyUnited Kingdom2026-06-10Chanay, Jeffrey A Esq RENEWAL9Amy Elsner
1019Aruna FigeroaFrance2026-05-19Buckley Miller Wright NEGOTIATION31Stephen Shaw
1020Arvin AlbaresArgentina2026-06-11Chemel, James L Cpa PROPOSAL43Amy Elsner
1021Jefferson SchemmerRussia2026-05-25Dorl, James J Esq UNQUALIFIED11Amy Elsner
1022Salvatore StockhamArgentina2026-06-13King, Christopher A Esq QUALIFIED88Elwin Sharvill
1023Maisha RulapaughIndia2026-05-29Truhlar And Truhlar Attys QUALIFIED80Stephen Shaw
1024Sinclair WaycottFrance2026-06-09Rousseaux, Michael Esq NEGOTIATION95Onyama Limba
1025Morrow RutaBrazil2026-06-13Truhlar And Truhlar Attys RENEWAL23Elwin Sharvill
1026Leon OldroydCanada2026-06-11Feltz Printing Service UNQUALIFIED49Elwin Sharvill
1027Costa DilliardIndia2026-06-10Truhlar And Truhlar Attys PROPOSAL29Bernardo Dominic
1028Jeanfrancois VenereUnited Kingdom2026-05-23Commercial Press UNQUALIFIED20Stephen Shaw
1029Juan WieserJapan2026-06-05Morlong Associates PROPOSAL40Amy Elsner
1030Misaki RoysterSpain2026-05-19Dorl, James J Esq QUALIFIED22Ivan Magalhaes
1031Greenwood BologniaBrazil2026-06-12Feltz Printing Service NEGOTIATION20Xuxue Feng
1032Mujtaba NickaArgentina2026-06-13Chemel, James L Cpa NEW63Amy Elsner
1033Arvin AlbaresGermany2026-05-26Rousseaux, Michael Esq UNQUALIFIED19Bernardo Dominic
1034Isabel BowleyCanada2026-05-22Truhlar And Truhlar Attys NEW31Anna Fali
1035Greenwood BologniaAustralia2026-06-03Rangoni Of Florence PROPOSAL99Amy Elsner
1036David DarakjyJapan2026-05-24King, Christopher A Esq NEGOTIATION66Ioni Bowcher
1037Leon OldroydAustralia2026-05-22Morlong Associates UNQUALIFIED68Ioni Bowcher
1038Nicolas IturbideSpain2026-06-06Morlong Associates PROPOSAL24Amy Elsner
1039Julie StensethRussia2026-05-30Chemel, James L Cpa PROPOSAL46Stephen Shaw
1040Costa DilliardItaly2026-05-30Rangoni Of Florence PROPOSAL21Ioni Bowcher
1041Stacey MacleadArgentina2026-06-10Rangoni Of Florence PROPOSAL14Elwin Sharvill
1042Nicolas IturbideSpain2026-05-21Benton, John B Jr QUALIFIED89Amy Elsner
1043Ricardo GauchoUnited Kingdom2026-06-06Dorl, James J Esq RENEWAL18Asiya Javayant
1044Maria MarrierCanada2026-05-31Chanay, Jeffrey A Esq QUALIFIED78Ioni Bowcher
1045Maria MarrierJapan2026-05-24Morlong Associates QUALIFIED5Elwin Sharvill
1046Ashley DoeBrazil2026-06-12Chanay, Jeffrey A Esq QUALIFIED66Xuxue Feng
1047Adams MorascaFrance2026-05-29Rousseaux, Michael Esq QUALIFIED59Ivan Magalhaes
1048Misaki RoysterArgentina2026-05-18Chanay, Jeffrey A Esq PROPOSAL81Bernardo Dominic
1049Aditya KuskoCanada2026-05-28Printing Dimensions RENEWAL99Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereGermanyAmy Elsner PROPOSAL
Jefferson SchemmerAustraliaStephen Shaw NEGOTIATION
Jennifer AmigonItalyOnyama Limba PROPOSAL
Darci PoquetteSpainXuxue Feng PROPOSAL
Jeanfrancois VenereArgentinaBernardo Dominic NEW
Smith GlickSpainBernardo Dominic UNQUALIFIED
Leon OldroydIndiaAnna Fali UNQUALIFIED
Wickens NestleAustraliaAsiya Javayant PROPOSAL
Salvatore StockhamItalyOnyama Limba UNQUALIFIED
Sinclair WaycottUnited KingdomIoni Bowcher PROPOSAL
Jefferson SchemmerGermanyIvan Magalhaes UNQUALIFIED
Maria MarrierJapanBernardo Dominic RENEWAL
Murillo MaletIndiaAnna Fali UNQUALIFIED
Aditya KuskoJapanAsiya Javayant NEW
Morrow RutaIndiaOnyama Limba NEW
Smith GlickBrazilAnna Fali QUALIFIED
David DarakjyJapanStephen Shaw NEW
Stacey MacleadAustraliaXuxue Feng UNQUALIFIED
Costa DilliardUnited KingdomXuxue Feng NEGOTIATION
Nicolas IturbideRussiaOnyama Limba PROPOSAL
Costa DilliardRussiaBernardo Dominic UNQUALIFIED
Francesco ShinkoBrazilAmy Elsner UNQUALIFIED
Sinclair WaycottIndiaOnyama Limba QUALIFIED
Salvatore StockhamFranceAmy Elsner QUALIFIED
Jefferson SchemmerJapanIoni Bowcher NEGOTIATION
Maisha RulapaughItalyOnyama Limba UNQUALIFIED
Murillo MaletBrazilElwin Sharvill NEW
Deepesh ChuiRussiaOnyama Limba RENEWAL
Leja CaldareraAustraliaOnyama Limba QUALIFIED
Sinclair WaycottJapanIvan Magalhaes NEW
Greenwood BologniaRussiaBernardo Dominic PROPOSAL
Claire TollnerIndiaBernardo Dominic RENEWAL
Kaitlin OstroskyItalyIvan Magalhaes NEGOTIATION
Sinclair WaycottGermanyAmy Elsner NEW
Clifford RimItalyElwin Sharvill NEGOTIATION
David DarakjyItalyOnyama Limba RENEWAL
Clifford RimGermanyAnna Fali QUALIFIED
Aruna FigeroaBrazilBernardo Dominic QUALIFIED
Morrow RutaBrazilOnyama Limba NEW
Aika InouyeRussiaAnna Fali PROPOSAL
Kaitlin OstroskyFranceIvan Magalhaes PROPOSAL
Isabel BowleyIndiaAsiya Javayant PROPOSAL
Clifford RimCanadaAnna Fali PROPOSAL
Aruna FigeroaSpainOnyama Limba QUALIFIED
Adams MorascaItalyIoni Bowcher RENEWAL
Sinclair WaycottSpainAsiya Javayant RENEWAL
Chavez BriddickBrazilElwin Sharvill QUALIFIED
Ricardo GauchoGermanyIvan Magalhaes NEGOTIATION
Sinclair WaycottBrazilAmy Elsner RENEWAL
Adams MorascaSpainIoni Bowcher PROPOSAL
Frozen Columns
Name
Maisha Rulapaugh
Octavia Malet
Jefferson Schemmer
Kaitlin Ostrosky
Maria Marrier
Izzy Garufi
Smith Glick
Smith Glick
Faith Gillian
Octavia Malet
Arvin Albares
Murillo Malet
Aika Inouye
Claire Tollner
Aruna Figeroa
Sinclair Waycott
Smith Glick
Deepesh Chui
Smith Glick
Misaki Royster
Ashley Doe
Julie Stenseth
Jones Vocelka
Kaitlin Ostrosky
Jeanfrancois Venere
Morrow Ruta
Morrow Ruta
Chavez Briddick
Leja Caldarera
Aditya Kusko
Emily Whobrey
Sinclair Waycott
Darci Poquette
Costa Dilliard
Smith Glick
Johnson Sergi
Jones Vocelka
Julie Stenseth
Greenwood Bolognia
Aditya Kusko
Greenwood Bolognia
Alejandro Perin
Nicolas Iturbide
Leon Oldroyd
Stacey Maclead
Costa Dilliard
Cody Saylors
Francesco Shinko
Costa Dilliard
Deepesh Chui
IdCountryDate
1000France2026-05-22
1001Brazil2026-05-22
1002Russia2026-06-09
1003Canada2026-05-16
1004France2026-05-18
1005Brazil2026-06-06
1006Japan2026-06-02
1007Russia2026-05-16
1008Italy2026-06-01
1009Italy2026-05-21
1010France2026-06-09
1011Australia2026-06-01
1012India2026-06-10
1013Germany2026-05-20
1014Japan2026-06-06
1015United Kingdom2026-06-04
1016Argentina2026-06-09
1017Brazil2026-05-16
1018Argentina2026-05-21
1019Argentina2026-05-30
1020Argentina2026-06-10
1021Australia2026-05-24
1022Russia2026-06-08
1023France2026-06-08
1024India2026-05-26
1025India2026-06-01
1026Spain2026-06-06
1027Canada2026-05-19
1028Canada2026-05-22
1029Germany2026-06-03
1030France2026-05-16
1031France2026-06-11
1032Russia2026-05-25
1033Japan2026-06-04
1034Brazil2026-06-05
1035Russia2026-06-13
1036United Kingdom2026-05-26
1037Italy2026-05-31
1038United Kingdom2026-06-13
1039India2026-05-29
1040France2026-05-26
1041France2026-05-18
1042Japan2026-06-04
1043United Kingdom2026-05-24
1044Japan2026-05-18
1045United Kingdom2026-05-29
1046Brazil2026-05-23
1047Australia2026-05-31
1048United Kingdom2026-05-25
1049Brazil2026-05-18

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000France2026-05-29
Kaitlin Ostrosky1001United Kingdom2026-06-09
Aika Inouye1002Australia2026-05-23
Maisha Rulapaugh1003Spain2026-05-15
Munro Ferencz1004Australia2026-05-24
Aditya Kusko1005Germany2026-05-15
Smith Glick1006France2026-06-13
Tony Foller1007Spain2026-05-21
Francesco Shinko1008Brazil2026-05-28
James Butt1009Japan2026-05-15
Smith Glick1010United Kingdom2026-05-20
Alejandro Perin1011Japan2026-06-08
Leja Caldarera1012France2026-06-08
Arvin Albares1013Brazil2026-05-27
Kaitlin Ostrosky1014Brazil2026-05-16
Jeanfrancois Venere1015Canada2026-06-07
Alejandro Perin1016Australia2026-06-01
Salvatore Stockham1017Australia2026-05-18
Aruna Figeroa1018Argentina2026-06-04
Leja Caldarera1019Russia2026-06-03
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Morrow RutaBrazilBernardo Dominic RENEWAL
Isabel BowleyJapanIoni Bowcher RENEWAL
Smith GlickGermanyStephen Shaw PROPOSAL
David DarakjyItalyXuxue Feng PROPOSAL
Leja CaldareraIndiaAmy Elsner PROPOSAL
Aika InouyeArgentinaAmy Elsner UNQUALIFIED
Claire TollnerItalyIvan Magalhaes QUALIFIED
Ivar PaprockiGermanyOnyama Limba QUALIFIED
Claire TollnerJapanStephen Shaw NEGOTIATION
Wickens NestleJapanXuxue Feng NEW
Antonio CaudyBrazilIoni Bowcher QUALIFIED
Rodrigues CampainBrazilElwin Sharvill QUALIFIED
Jeanfrancois VenereGermanyBernardo Dominic UNQUALIFIED
Munro FerenczArgentinaIoni Bowcher UNQUALIFIED
Morrow RutaRussiaIvan Magalhaes NEW
Jeanfrancois VenereSpainXuxue Feng UNQUALIFIED
Julie StensethArgentinaAnna Fali QUALIFIED
James ButtIndiaAsiya Javayant RENEWAL
Julie StensethSpainAnna Fali NEGOTIATION
Murillo MaletBrazilIoni Bowcher PROPOSAL
Kaitlin OstroskyUnited KingdomIoni Bowcher NEGOTIATION
Salvatore StockhamRussiaAmy Elsner NEGOTIATION
Adams MorascaSpainBernardo Dominic UNQUALIFIED
Claire TollnerGermanyIoni Bowcher PROPOSAL
Greenwood BologniaBrazilAsiya Javayant UNQUALIFIED
Jefferson SchemmerGermanyStephen Shaw RENEWAL
Arvin AlbaresAustraliaAmy Elsner NEW
Nicolas IturbideJapanIvan Magalhaes PROPOSAL
Aruna FigeroaArgentinaAnna Fali UNQUALIFIED
Mayumi KolmetzCanadaXuxue Feng RENEWAL
Deepesh ChuiCanadaIoni Bowcher UNQUALIFIED
Aditya KuskoFranceAmy Elsner RENEWAL
David DarakjyJapanIoni Bowcher NEGOTIATION
Claire TollnerUnited KingdomXuxue Feng NEGOTIATION
Arvin AlbaresAustraliaAsiya Javayant NEGOTIATION
Morrow RutaUnited KingdomIoni Bowcher PROPOSAL
Stacey MacleadSpainIoni Bowcher PROPOSAL
Jeanfrancois VenereArgentinaXuxue Feng UNQUALIFIED
Antonio CaudyCanadaElwin Sharvill NEGOTIATION
Aditya KuskoUnited KingdomIoni Bowcher 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>