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
Cody SaylorsJapanOnyama Limba PROPOSAL
Antonio CaudyRussiaOnyama Limba NEGOTIATION
Izzy GarufiGermanyAnna Fali QUALIFIED
Ivar PaprockiGermanyIoni Bowcher RENEWAL
Mayumi KolmetzRussiaStephen Shaw RENEWAL
Emily WhobreyUnited KingdomAsiya Javayant PROPOSAL
James ButtIndiaStephen Shaw RENEWAL
Maisha RulapaughCanadaAsiya Javayant PROPOSAL
David DarakjySpainXuxue Feng QUALIFIED
Stacey MacleadBrazilAsiya Javayant UNQUALIFIED
Chavez BriddickIndiaIoni Bowcher QUALIFIED
Stacey MacleadAustraliaAnna Fali NEW
Cody SaylorsRussiaBernardo Dominic NEGOTIATION
James ButtGermanyXuxue Feng QUALIFIED
Francesco ShinkoArgentinaIvan Magalhaes QUALIFIED
Mayumi KolmetzArgentinaStephen Shaw QUALIFIED
Clifford RimGermanyAsiya Javayant NEW
Aika InouyeAustraliaBernardo Dominic RENEWAL
Chavez BriddickIndiaIoni Bowcher QUALIFIED
Aditya KuskoBrazilIoni Bowcher UNQUALIFIED
Jefferson SchemmerRussiaIoni Bowcher NEW
Juan WieserSpainAsiya Javayant NEW
Isabel BowleyFranceOnyama Limba NEW
Faith GillianUnited KingdomXuxue Feng RENEWAL
Juan WieserAustraliaAmy Elsner PROPOSAL
Jefferson SchemmerCanadaIvan Magalhaes NEGOTIATION
Jones VocelkaItalyOnyama Limba QUALIFIED
Greenwood BologniaRussiaIvan Magalhaes QUALIFIED
Jones VocelkaItalyStephen Shaw NEW
Wickens NestleAustraliaIoni Bowcher RENEWAL
Aruna FigeroaRussiaIvan Magalhaes NEW
Leja CaldareraSpainStephen Shaw NEW
Jeanfrancois VenereItalyOnyama Limba QUALIFIED
Aditya KuskoItalyAsiya Javayant QUALIFIED
Nicolas IturbideArgentinaAnna Fali UNQUALIFIED
Aditya KuskoJapanElwin Sharvill PROPOSAL
Jefferson SchemmerAustraliaAsiya Javayant UNQUALIFIED
Salvatore StockhamIndiaIvan Magalhaes UNQUALIFIED
Ivar PaprockiGermanyAmy Elsner RENEWAL
Munro FerenczArgentinaIvan Magalhaes RENEWAL
Rodrigues CampainItalyIoni Bowcher PROPOSAL
Isabel BowleyCanadaXuxue Feng NEGOTIATION
Aruna FigeroaRussiaBernardo Dominic UNQUALIFIED
Emily WhobreyCanadaElwin Sharvill RENEWAL
Faith GillianBrazilAnna Fali RENEWAL
Kaitlin OstroskyItalyXuxue Feng RENEWAL
Stacey MacleadJapanStephen Shaw RENEWAL
Jennifer AmigonSpainBernardo Dominic NEW
Octavia MaletAustraliaXuxue Feng NEW
Clifford RimJapanAmy Elsner QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Clifford RimUnited KingdomXuxue Feng QUALIFIED
Stacey MacleadFranceAmy Elsner QUALIFIED
Francesco ShinkoBrazilAmy Elsner RENEWAL
Johnson SergiIndiaElwin Sharvill QUALIFIED
Jones VocelkaRussiaAnna Fali NEW
Alejandro PerinSpainAsiya Javayant UNQUALIFIED
Antonio CaudyBrazilBernardo Dominic NEW
Izzy GarufiRussiaIvan Magalhaes NEW
Murillo MaletSpainIvan Magalhaes UNQUALIFIED
Kaitlin OstroskyFranceIoni Bowcher RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Isabel BowleyAustralia2025-09-09Dorl, James J Esq NEGOTIATION67Anna Fali
1001Greenwood BologniaCanada2025-08-17Benton, John B Jr NEGOTIATION97Stephen Shaw
1002Salvatore StockhamIndia2025-08-22Truhlar And Truhlar Attys NEGOTIATION10Amy Elsner
1003Smith GlickSpain2025-09-02Chapman, Ross E Esq PROPOSAL69Onyama Limba
1004Octavia MaletRussia2025-08-18Morlong Associates NEW42Elwin Sharvill
1005Silvio SlusarskiRussia2025-08-14Rousseaux, Michael Esq UNQUALIFIED23Ivan Magalhaes
1006Ricardo GauchoItaly2025-09-01Chanay, Jeffrey A Esq PROPOSAL63Anna Fali
1007James ButtCanada2025-09-06Buckley Miller Wright QUALIFIED0Ivan Magalhaes
1008Julie StensethFrance2025-08-21Buckley Miller Wright NEW25Amy Elsner
1009Adams MorascaGermany2025-09-01Feltz Printing Service QUALIFIED11Ioni Bowcher
1010Faith GillianArgentina2025-08-16Rousseaux, Michael Esq NEW97Asiya Javayant
1011Alejandro PerinFrance2025-08-29Morlong Associates QUALIFIED4Ivan Magalhaes
1012Jefferson SchemmerArgentina2025-08-18Chanay, Jeffrey A Esq QUALIFIED27Ioni Bowcher
1013Isabel BowleySpain2025-08-30Chapman, Ross E Esq UNQUALIFIED3Bernardo Dominic
1014Octavia MaletItaly2025-08-17Rangoni Of Florence QUALIFIED35Anna Fali
1015Chavez BriddickItaly2025-08-25Feiner Bros PROPOSAL32Xuxue Feng
1016Cody SaylorsItaly2025-08-20Truhlar And Truhlar Attys PROPOSAL36Onyama Limba
1017Ricardo GauchoUnited Kingdom2025-09-05Buckley Miller Wright UNQUALIFIED43Bernardo Dominic
1018Aditya KuskoUnited Kingdom2025-08-21Chemel, James L Cpa PROPOSAL76Elwin Sharvill
1019Rodrigues CampainFrance2025-08-27Buckley Miller Wright NEGOTIATION34Bernardo Dominic
1020Johnson SergiItaly2025-08-18Buckley Miller Wright NEW79Onyama Limba
1021Nicolas IturbideItaly2025-09-07Benton, John B Jr NEGOTIATION15Onyama Limba
1022Claire TollnerUnited Kingdom2025-09-03Commercial Press NEW65Anna Fali
1023Murillo MaletCanada2025-09-06Morlong Associates QUALIFIED71Onyama Limba
1024Maisha RulapaughRussia2025-08-30Dorl, James J Esq QUALIFIED63Ivan Magalhaes
1025Jeanfrancois VenereIndia2025-09-05Rousseaux, Michael Esq NEW60Onyama Limba
1026Arvin AlbaresCanada2025-08-29Commercial Press UNQUALIFIED78Anna Fali
1027Cody SaylorsItaly2025-08-15Feltz Printing Service RENEWAL82Amy Elsner
1028Claire TollnerCanada2025-08-16Commercial Press NEGOTIATION56Asiya Javayant
1029Adams MorascaUnited Kingdom2025-09-07Printing Dimensions NEGOTIATION80Stephen Shaw
1030Ricardo GauchoGermany2025-08-29Truhlar And Truhlar Attys UNQUALIFIED21Asiya Javayant
1031Morrow RutaItaly2025-09-02Feiner Bros PROPOSAL61Amy Elsner
1032Juan WieserJapan2025-08-26Rousseaux, Michael Esq NEGOTIATION22Ivan Magalhaes
1033Johnson SergiCanada2025-08-15Truhlar And Truhlar Attys NEGOTIATION74Ioni Bowcher
1034Nicolas IturbideCanada2025-09-03Feltz Printing Service RENEWAL50Ivan Magalhaes
1035Emily WhobreyBrazil2025-08-11Chapman, Ross E Esq UNQUALIFIED41Ivan Magalhaes
1036Ivar PaprockiAustralia2025-08-15King, Christopher A Esq UNQUALIFIED0Asiya Javayant
1037Emily WhobreyJapan2025-09-09King, Christopher A Esq RENEWAL37Ivan Magalhaes
1038Jefferson SchemmerUnited Kingdom2025-09-08Feiner Bros PROPOSAL82Stephen Shaw
1039Francesco ShinkoUnited Kingdom2025-08-22Dorl, James J Esq PROPOSAL84Ioni Bowcher
1040Nicolas IturbideCanada2025-08-15Chanay, Jeffrey A Esq NEGOTIATION67Stephen Shaw
1041Jones VocelkaUnited Kingdom2025-08-12Buckley Miller Wright NEW77Asiya Javayant
1042Adams MorascaJapan2025-09-07Benton, John B Jr NEGOTIATION37Amy Elsner
1043Julie StensethArgentina2025-09-01Chanay, Jeffrey A Esq PROPOSAL45Asiya Javayant
1044Darci PoquetteFrance2025-08-27Buckley Miller Wright RENEWAL81Asiya Javayant
1045Juan WieserCanada2025-08-14Feiner Bros UNQUALIFIED31Ivan Magalhaes
1046Sinclair WaycottRussia2025-08-20Feltz Printing Service NEW97Ioni Bowcher
1047Silvio SlusarskiSpain2025-08-26King, Christopher A Esq NEGOTIATION99Amy Elsner
1048Ricardo GauchoArgentina2025-08-27Buckley Miller Wright QUALIFIED25Xuxue Feng
1049Arvin AlbaresAustralia2025-08-21Feltz Printing Service RENEWAL43Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Ricardo GauchoAustraliaBernardo Dominic NEW
Jennifer AmigonAustraliaAsiya Javayant UNQUALIFIED
Jennifer AmigonArgentinaIvan Magalhaes UNQUALIFIED
Jennifer AmigonFranceIvan Magalhaes RENEWAL
Clifford RimSpainIoni Bowcher NEGOTIATION
Deepesh ChuiAustraliaXuxue Feng QUALIFIED
Ashley DoeRussiaAmy Elsner QUALIFIED
Leon OldroydUnited KingdomIvan Magalhaes PROPOSAL
Morrow RutaAustraliaOnyama Limba PROPOSAL
Ashley DoeAustraliaStephen Shaw UNQUALIFIED
Cody SaylorsUnited KingdomElwin Sharvill RENEWAL
James ButtArgentinaIvan Magalhaes QUALIFIED
Chavez BriddickArgentinaOnyama Limba NEW
Antonio CaudyIndiaIvan Magalhaes RENEWAL
Emily WhobreyFranceAnna Fali PROPOSAL
Mayumi KolmetzArgentinaIoni Bowcher UNQUALIFIED
Ashley DoeUnited KingdomOnyama Limba PROPOSAL
Tony FollerArgentinaIoni Bowcher PROPOSAL
Faith GillianArgentinaIoni Bowcher PROPOSAL
Maisha RulapaughRussiaAnna Fali RENEWAL
Morrow RutaAustraliaIoni Bowcher PROPOSAL
Darci PoquetteUnited KingdomAsiya Javayant QUALIFIED
Misaki RoysterItalyIoni Bowcher UNQUALIFIED
Ivar PaprockiRussiaIvan Magalhaes QUALIFIED
Aika InouyeSpainXuxue Feng PROPOSAL
Munro FerenczBrazilAsiya Javayant QUALIFIED
Salvatore StockhamJapanStephen Shaw RENEWAL
Ivar PaprockiJapanIoni Bowcher RENEWAL
Jones VocelkaCanadaXuxue Feng NEGOTIATION
Aditya KuskoArgentinaOnyama Limba RENEWAL
Aditya KuskoArgentinaAnna Fali UNQUALIFIED
Morrow RutaItalyAmy Elsner NEW
Greenwood BologniaRussiaAnna Fali RENEWAL
Jennifer AmigonIndiaXuxue Feng RENEWAL
Johnson SergiIndiaBernardo Dominic UNQUALIFIED
Izzy GarufiSpainIvan Magalhaes RENEWAL
Mujtaba NickaItalyOnyama Limba UNQUALIFIED
Sinclair WaycottIndiaIoni Bowcher PROPOSAL
Ashley DoeArgentinaStephen Shaw NEW
Francesco ShinkoJapanOnyama Limba NEGOTIATION
Greenwood BologniaBrazilAmy Elsner NEW
Darci PoquetteItalyStephen Shaw NEW
Ricardo GauchoJapanAmy Elsner UNQUALIFIED
Faith GillianGermanyAmy Elsner NEW
Adams MorascaBrazilStephen Shaw QUALIFIED
Izzy GarufiRussiaElwin Sharvill UNQUALIFIED
Chavez BriddickIndiaAnna Fali UNQUALIFIED
Octavia MaletRussiaAnna Fali UNQUALIFIED
Jones VocelkaFranceElwin Sharvill NEGOTIATION
Maria MarrierGermanyOnyama Limba RENEWAL
Frozen Columns
Name
Juan Wieser
Izzy Garufi
Juan Wieser
Alejandro Perin
Jennifer Amigon
Jeanfrancois Venere
Stacey Maclead
Salvatore Stockham
Munro Ferencz
Faith Gillian
Alejandro Perin
Jennifer Amigon
Mayumi Kolmetz
Deepesh Chui
Murillo Malet
Murillo Malet
Adams Morasca
Juan Wieser
Jennifer Amigon
Francesco Shinko
Stacey Maclead
Leon Oldroyd
Mayumi Kolmetz
Francesco Shinko
Francesco Shinko
Jennifer Amigon
Clifford Rim
Salvatore Stockham
Leon Oldroyd
Costa Dilliard
Antonio Caudy
Emily Whobrey
Munro Ferencz
James Butt
Claire Tollner
Claire Tollner
Aruna Figeroa
Ricardo Gaucho
Murillo Malet
Jeanfrancois Venere
Claire Tollner
Smith Glick
Emily Whobrey
Kaitlin Ostrosky
Octavia Malet
Ricardo Gaucho
Mayumi Kolmetz
Mayumi Kolmetz
Jefferson Schemmer
Kaitlin Ostrosky
IdCountryDate
1000Japan2025-08-29
1001France2025-08-12
1002Germany2025-09-04
1003Argentina2025-09-06
1004Italy2025-08-17
1005United Kingdom2025-09-03
1006Russia2025-08-30
1007Russia2025-08-11
1008Spain2025-08-15
1009Russia2025-08-28
1010India2025-08-31
1011India2025-09-02
1012Argentina2025-08-11
1013Germany2025-08-26
1014Spain2025-08-16
1015Japan2025-09-07
1016United Kingdom2025-08-19
1017Australia2025-08-26
1018Germany2025-08-31
1019Italy2025-08-17
1020Argentina2025-08-24
1021India2025-08-18
1022Japan2025-08-20
1023Japan2025-08-31
1024Germany2025-08-19
1025Australia2025-08-27
1026Russia2025-08-20
1027Italy2025-09-06
1028Spain2025-08-18
1029Canada2025-08-29
1030Japan2025-09-08
1031United Kingdom2025-08-31
1032Italy2025-08-20
1033Italy2025-09-01
1034Argentina2025-09-07
1035United Kingdom2025-09-01
1036Italy2025-08-30
1037Australia2025-09-03
1038Argentina2025-09-03
1039Russia2025-08-28
1040France2025-08-15
1041Argentina2025-08-20
1042Australia2025-08-25
1043Russia2025-09-03
1044Germany2025-09-08
1045Japan2025-08-17
1046Spain2025-08-21
1047Argentina2025-08-25
1048Germany2025-09-01
1049India2025-08-25

On-Demand Data

NameIdCountryDate
Cody Saylors1000Argentina2025-09-07
Leja Caldarera1001Italy2025-08-15
Antonio Caudy1002Italy2025-08-11
Stacey Maclead1003Russia2025-08-27
Wickens Nestle1004Spain2025-08-20
Ivar Paprocki1005Germany2025-08-22
Francesco Shinko1006Argentina2025-08-29
Aika Inouye1007India2025-09-08
Misaki Royster1008France2025-08-13
Arvin Albares1009Japan2025-08-16
Silvio Slusarski1010Brazil2025-08-13
Tony Foller1011France2025-09-03
Julie Stenseth1012Germany2025-09-01
Mayumi Kolmetz1013France2025-08-29
Leja Caldarera1014Russia2025-08-15
Aika Inouye1015Japan2025-08-14
Octavia Malet1016Brazil2025-09-06
Adams Morasca1017Canada2025-08-21
Costa Dilliard1018France2025-08-11
Maria Marrier1019Australia2025-09-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aditya KuskoArgentinaStephen Shaw UNQUALIFIED
Chavez BriddickGermanyXuxue Feng NEGOTIATION
Clifford RimUnited KingdomAsiya Javayant QUALIFIED
Jones VocelkaItalyIoni Bowcher UNQUALIFIED
Maisha RulapaughFranceElwin Sharvill PROPOSAL
David DarakjyUnited KingdomBernardo Dominic UNQUALIFIED
Antonio CaudyFranceIvan Magalhaes NEGOTIATION
Aditya KuskoCanadaXuxue Feng UNQUALIFIED
Murillo MaletGermanyBernardo Dominic RENEWAL
Murillo MaletFranceAmy Elsner NEW
Morrow RutaArgentinaOnyama Limba NEW
Ashley DoeCanadaAnna Fali UNQUALIFIED
Izzy GarufiCanadaAnna Fali RENEWAL
Arvin AlbaresSpainAmy Elsner NEW
Adams MorascaGermanyIoni Bowcher NEW
Jeanfrancois VenereCanadaIvan Magalhaes RENEWAL
Mayumi KolmetzRussiaXuxue Feng UNQUALIFIED
Maisha RulapaughJapanIoni Bowcher NEW
Wickens NestleBrazilAnna Fali QUALIFIED
Maisha RulapaughRussiaAsiya Javayant NEW
Murillo MaletGermanyIvan Magalhaes RENEWAL
Octavia MaletItalyAsiya Javayant RENEWAL
Rodrigues CampainFranceIoni Bowcher RENEWAL
Aditya KuskoArgentinaXuxue Feng NEGOTIATION
Alejandro PerinFranceOnyama Limba NEW
Isabel BowleyIndiaBernardo Dominic RENEWAL
Claire TollnerSpainIoni Bowcher NEGOTIATION
Juan WieserUnited KingdomAnna Fali RENEWAL
Juan WieserBrazilStephen Shaw NEGOTIATION
Antonio CaudyRussiaStephen Shaw QUALIFIED
Misaki RoysterJapanXuxue Feng NEGOTIATION
James ButtJapanAnna Fali RENEWAL
Costa DilliardArgentinaXuxue Feng UNQUALIFIED
Adams MorascaFranceIoni Bowcher NEW
Mayumi KolmetzArgentinaXuxue Feng NEW
Kadeem FlosiIndiaXuxue Feng RENEWAL
Octavia MaletFranceElwin Sharvill PROPOSAL
Nicolas IturbideIndiaIoni Bowcher UNQUALIFIED
Cody SaylorsArgentinaBernardo Dominic UNQUALIFIED
James ButtUnited KingdomAmy Elsner 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>