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
Leja CaldareraArgentinaAnna Fali PROPOSAL
Tony FollerBrazilAmy Elsner PROPOSAL
Johnson SergiRussiaAnna Fali PROPOSAL
Leja CaldareraBrazilAsiya Javayant PROPOSAL
Munro FerenczCanadaOnyama Limba NEGOTIATION
Costa DilliardGermanyBernardo Dominic UNQUALIFIED
Mayumi KolmetzRussiaAnna Fali QUALIFIED
David DarakjyItalyAnna Fali UNQUALIFIED
Cody SaylorsFranceElwin Sharvill RENEWAL
Rodrigues CampainArgentinaElwin Sharvill PROPOSAL
Darci PoquetteBrazilXuxue Feng NEW
Morrow RutaJapanIoni Bowcher NEW
Ivar PaprockiArgentinaIoni Bowcher NEGOTIATION
Nicolas IturbideArgentinaBernardo Dominic NEW
Jeanfrancois VenereJapanIvan Magalhaes NEW
Mujtaba NickaUnited KingdomAnna Fali NEW
Claire TollnerBrazilAnna Fali PROPOSAL
Juan WieserAustraliaOnyama Limba PROPOSAL
Chavez BriddickArgentinaAnna Fali NEW
Arvin AlbaresArgentinaBernardo Dominic UNQUALIFIED
Jefferson SchemmerBrazilIvan Magalhaes PROPOSAL
Ricardo GauchoItalyStephen Shaw QUALIFIED
James ButtSpainStephen Shaw PROPOSAL
Jones VocelkaArgentinaElwin Sharvill NEGOTIATION
Chavez BriddickArgentinaBernardo Dominic PROPOSAL
Isabel BowleyJapanElwin Sharvill QUALIFIED
Misaki RoysterSpainAsiya Javayant UNQUALIFIED
Morrow RutaArgentinaXuxue Feng NEGOTIATION
Clifford RimRussiaElwin Sharvill UNQUALIFIED
Aruna FigeroaItalyAnna Fali NEGOTIATION
Ivar PaprockiIndiaOnyama Limba QUALIFIED
Kaitlin OstroskyJapanIvan Magalhaes NEGOTIATION
Maisha RulapaughGermanyStephen Shaw PROPOSAL
Ricardo GauchoGermanyIoni Bowcher RENEWAL
Chavez BriddickCanadaAnna Fali RENEWAL
Misaki RoysterSpainElwin Sharvill PROPOSAL
Wickens NestleSpainAsiya Javayant NEW
Ivar PaprockiItalyAmy Elsner PROPOSAL
Arvin AlbaresFranceAmy Elsner PROPOSAL
Aditya KuskoCanadaXuxue Feng UNQUALIFIED
David DarakjySpainOnyama Limba UNQUALIFIED
Ashley DoeArgentinaOnyama Limba NEW
Clifford RimIndiaOnyama Limba NEGOTIATION
Mujtaba NickaFranceIvan Magalhaes NEW
Aruna FigeroaRussiaBernardo Dominic PROPOSAL
Jennifer AmigonItalyIoni Bowcher NEGOTIATION
Chavez BriddickCanadaIvan Magalhaes NEGOTIATION
Costa DilliardArgentinaAnna Fali RENEWAL
Ricardo GauchoIndiaIoni Bowcher NEGOTIATION
Silvio SlusarskiGermanyOnyama Limba RENEWAL
Horizontal
NameCountryRepresentativeStatus
Francesco ShinkoGermanyStephen Shaw NEGOTIATION
Darci PoquetteGermanyAsiya Javayant NEGOTIATION
Aditya KuskoIndiaOnyama Limba NEW
Cody SaylorsRussiaElwin Sharvill NEGOTIATION
Mayumi KolmetzRussiaAsiya Javayant PROPOSAL
Mujtaba NickaJapanAmy Elsner RENEWAL
Greenwood BologniaRussiaIvan Magalhaes PROPOSAL
Leon OldroydJapanOnyama Limba UNQUALIFIED
Leja CaldareraAustraliaIoni Bowcher QUALIFIED
Morrow RutaUnited KingdomAsiya Javayant PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Juan WieserItaly2025-08-19Morlong Associates QUALIFIED43Onyama Limba
1001Francesco ShinkoGermany2025-08-11Buckley Miller Wright RENEWAL2Ivan Magalhaes
1002Johnson SergiJapan2025-08-11Benton, John B Jr PROPOSAL95Ioni Bowcher
1003Salvatore StockhamUnited Kingdom2025-08-02Printing Dimensions UNQUALIFIED74Stephen Shaw
1004Jefferson SchemmerBrazil2025-08-10Morlong Associates NEW48Onyama Limba
1005Stacey MacleadArgentina2025-08-28Truhlar And Truhlar Attys NEW92Anna Fali
1006Stacey MacleadGermany2025-08-25Chapman, Ross E Esq NEW18Onyama Limba
1007Morrow RutaArgentina2025-08-06Printing Dimensions NEW77Ivan Magalhaes
1008Maisha RulapaughUnited Kingdom2025-08-12Feiner Bros QUALIFIED77Elwin Sharvill
1009Misaki RoysterJapan2025-08-29Commercial Press UNQUALIFIED89Stephen Shaw
1010Misaki RoysterFrance2025-08-28Chapman, Ross E Esq NEGOTIATION78Onyama Limba
1011Sinclair WaycottUnited Kingdom2025-08-09Chanay, Jeffrey A Esq PROPOSAL26Elwin Sharvill
1012Kadeem FlosiSpain2025-08-02Morlong Associates NEGOTIATION12Asiya Javayant
1013Murillo MaletArgentina2025-08-19Dorl, James J Esq UNQUALIFIED23Amy Elsner
1014Izzy GarufiFrance2025-08-28Chapman, Ross E Esq UNQUALIFIED47Anna Fali
1015Ricardo GauchoBrazil2025-08-08Rangoni Of Florence UNQUALIFIED44Asiya Javayant
1016Octavia MaletUnited Kingdom2025-08-16Feiner Bros QUALIFIED99Bernardo Dominic
1017Octavia MaletSpain2025-08-08Rangoni Of Florence PROPOSAL69Onyama Limba
1018Cody SaylorsFrance2025-08-02Rousseaux, Michael Esq NEW92Ivan Magalhaes
1019Darci PoquetteSpain2025-08-03Feiner Bros RENEWAL47Amy Elsner
1020Antonio CaudyCanada2025-08-11Printing Dimensions RENEWAL84Anna Fali
1021Misaki RoysterUnited Kingdom2025-08-03Feiner Bros NEW95Xuxue Feng
1022Francesco ShinkoRussia2025-08-18Printing Dimensions QUALIFIED74Ioni Bowcher
1023Antonio CaudyIndia2025-08-09Rangoni Of Florence NEGOTIATION10Amy Elsner
1024Aika InouyeRussia2025-08-23Chemel, James L Cpa QUALIFIED2Xuxue Feng
1025Morrow RutaCanada2025-08-17Dorl, James J Esq NEW58Amy Elsner
1026Claire TollnerAustralia2025-08-05King, Christopher A Esq UNQUALIFIED77Onyama Limba
1027Adams MorascaJapan2025-08-14Feltz Printing Service NEW27Amy Elsner
1028Clifford RimBrazil2025-08-09Printing Dimensions QUALIFIED5Ivan Magalhaes
1029Aditya KuskoArgentina2025-08-06Commercial Press NEW36Ivan Magalhaes
1030Rodrigues CampainFrance2025-08-30Feltz Printing Service UNQUALIFIED36Bernardo Dominic
1031Munro FerenczAustralia2025-08-21Chapman, Ross E Esq NEW96Elwin Sharvill
1032Jefferson SchemmerGermany2025-08-19Feltz Printing Service NEGOTIATION8Asiya Javayant
1033Stacey MacleadGermany2025-08-18Morlong Associates QUALIFIED46Amy Elsner
1034Antonio CaudyRussia2025-08-02Morlong Associates PROPOSAL27Xuxue Feng
1035Salvatore StockhamBrazil2025-08-12Rangoni Of Florence QUALIFIED24Ioni Bowcher
1036Aika InouyeFrance2025-08-10Benton, John B Jr NEGOTIATION79Asiya Javayant
1037Rodrigues CampainRussia2025-08-17Buckley Miller Wright QUALIFIED26Ivan Magalhaes
1038Maisha RulapaughAustralia2025-08-16Commercial Press QUALIFIED8Ioni Bowcher
1039Maisha RulapaughAustralia2025-08-15Feltz Printing Service NEGOTIATION56Stephen Shaw
1040Izzy GarufiFrance2025-08-23Printing Dimensions NEW62Onyama Limba
1041Ivar PaprockiFrance2025-08-22Benton, John B Jr QUALIFIED20Asiya Javayant
1042Faith GillianCanada2025-08-31Truhlar And Truhlar Attys NEGOTIATION56Asiya Javayant
1043Faith GillianRussia2025-08-07Chanay, Jeffrey A Esq UNQUALIFIED34Amy Elsner
1044Deepesh ChuiUnited Kingdom2025-08-07Chapman, Ross E Esq QUALIFIED39Onyama Limba
1045Nicolas IturbideCanada2025-08-29Chanay, Jeffrey A Esq UNQUALIFIED56Xuxue Feng
1046Maisha RulapaughBrazil2025-08-04Truhlar And Truhlar Attys RENEWAL26Onyama Limba
1047Aditya KuskoFrance2025-08-28Chanay, Jeffrey A Esq RENEWAL65Amy Elsner
1048Mayumi KolmetzUnited Kingdom2025-08-28Benton, John B Jr UNQUALIFIED11Xuxue Feng
1049Leon OldroydItaly2025-08-14Dorl, James J Esq QUALIFIED26Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Ricardo GauchoSpainAnna Fali UNQUALIFIED
Jeanfrancois VenereFranceIoni Bowcher UNQUALIFIED
Antonio CaudyJapanBernardo Dominic UNQUALIFIED
Clifford RimItalyBernardo Dominic QUALIFIED
Jeanfrancois VenereCanadaAmy Elsner RENEWAL
Maria MarrierArgentinaBernardo Dominic RENEWAL
Nicolas IturbideFranceElwin Sharvill NEW
Greenwood BologniaJapanIvan Magalhaes PROPOSAL
Aruna FigeroaAustraliaElwin Sharvill NEGOTIATION
Jones VocelkaCanadaIvan Magalhaes QUALIFIED
Isabel BowleyFranceIoni Bowcher NEGOTIATION
Rodrigues CampainUnited KingdomIvan Magalhaes NEGOTIATION
Isabel BowleyFranceBernardo Dominic NEW
Aika InouyeFranceBernardo Dominic UNQUALIFIED
Ivar PaprockiAustraliaOnyama Limba NEGOTIATION
Clifford RimSpainAnna Fali UNQUALIFIED
Francesco ShinkoCanadaAmy Elsner UNQUALIFIED
Rodrigues CampainSpainOnyama Limba NEW
Jefferson SchemmerJapanIvan Magalhaes RENEWAL
Clifford RimAustraliaOnyama Limba NEW
Deepesh ChuiItalyAmy Elsner QUALIFIED
Jefferson SchemmerItalyAsiya Javayant NEGOTIATION
Alejandro PerinCanadaAsiya Javayant NEGOTIATION
Johnson SergiItalyAmy Elsner QUALIFIED
Alejandro PerinJapanAnna Fali PROPOSAL
Aruna FigeroaItalyAsiya Javayant PROPOSAL
Aika InouyeBrazilBernardo Dominic NEGOTIATION
Faith GillianUnited KingdomAnna Fali PROPOSAL
Wickens NestleGermanyAsiya Javayant RENEWAL
Juan WieserUnited KingdomStephen Shaw QUALIFIED
Deepesh ChuiItalyAsiya Javayant NEGOTIATION
Wickens NestleAustraliaAnna Fali NEGOTIATION
Mayumi KolmetzSpainAsiya Javayant NEW
Nicolas IturbideUnited KingdomElwin Sharvill PROPOSAL
Maisha RulapaughFranceIoni Bowcher QUALIFIED
Maria MarrierRussiaStephen Shaw NEGOTIATION
Leon OldroydAustraliaAmy Elsner RENEWAL
Aditya KuskoRussiaStephen Shaw NEGOTIATION
Jones VocelkaCanadaBernardo Dominic UNQUALIFIED
Julie StensethJapanIoni Bowcher RENEWAL
Ricardo GauchoArgentinaAsiya Javayant NEW
Munro FerenczArgentinaIvan Magalhaes PROPOSAL
Claire TollnerSpainStephen Shaw QUALIFIED
Jefferson SchemmerIndiaAmy Elsner RENEWAL
David DarakjyFranceAnna Fali UNQUALIFIED
Jefferson SchemmerAustraliaAnna Fali UNQUALIFIED
Jones VocelkaUnited KingdomOnyama Limba PROPOSAL
Aika InouyeJapanAnna Fali NEW
Greenwood BologniaSpainAsiya Javayant NEGOTIATION
Johnson SergiAustraliaIoni Bowcher PROPOSAL
Frozen Columns
Name
Clifford Rim
Leja Caldarera
Silvio Slusarski
Arvin Albares
Costa Dilliard
Maria Marrier
Alejandro Perin
Costa Dilliard
Arvin Albares
Smith Glick
Arvin Albares
James Butt
Ashley Doe
Greenwood Bolognia
Julie Stenseth
Leon Oldroyd
Misaki Royster
Jennifer Amigon
Cody Saylors
David Darakjy
Faith Gillian
Ashley Doe
Octavia Malet
Isabel Bowley
Alejandro Perin
Jefferson Schemmer
Wickens Nestle
Jefferson Schemmer
Jennifer Amigon
Alejandro Perin
Aika Inouye
Leja Caldarera
Clifford Rim
Jeanfrancois Venere
Ivar Paprocki
Maria Marrier
Adams Morasca
Aditya Kusko
Kaitlin Ostrosky
Wickens Nestle
Isabel Bowley
Juan Wieser
Isabel Bowley
Darci Poquette
Morrow Ruta
Alejandro Perin
Aditya Kusko
Antonio Caudy
Mayumi Kolmetz
Francesco Shinko
IdCountryDate
1000Canada2025-08-17
1001Australia2025-08-17
1002Argentina2025-08-15
1003Germany2025-08-04
1004Russia2025-08-18
1005Russia2025-08-14
1006Canada2025-08-11
1007Spain2025-08-28
1008Italy2025-08-15
1009Argentina2025-08-13
1010Spain2025-08-26
1011United Kingdom2025-08-12
1012France2025-08-19
1013Russia2025-08-18
1014Germany2025-08-03
1015Italy2025-08-13
1016United Kingdom2025-08-22
1017Canada2025-08-19
1018Italy2025-08-05
1019Brazil2025-08-06
1020Russia2025-08-28
1021Germany2025-08-13
1022Italy2025-08-10
1023Canada2025-08-03
1024United Kingdom2025-08-22
1025Canada2025-08-14
1026United Kingdom2025-08-31
1027Australia2025-08-27
1028Japan2025-08-05
1029Spain2025-08-19
1030Australia2025-08-03
1031Brazil2025-08-09
1032Italy2025-08-13
1033Spain2025-08-11
1034Japan2025-08-14
1035Japan2025-08-20
1036Italy2025-08-19
1037India2025-08-05
1038Australia2025-08-16
1039United Kingdom2025-08-20
1040Russia2025-08-25
1041Spain2025-08-13
1042Canada2025-08-09
1043Germany2025-08-25
1044France2025-08-19
1045United Kingdom2025-08-17
1046Australia2025-08-11
1047Japan2025-08-25
1048United Kingdom2025-08-13
1049Germany2025-08-14

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000Italy2025-08-24
Silvio Slusarski1001Russia2025-08-29
Leon Oldroyd1002India2025-08-16
Stacey Maclead1003Spain2025-08-02
Ashley Doe1004Spain2025-08-30
Darci Poquette1005France2025-08-09
Octavia Malet1006Argentina2025-08-13
Salvatore Stockham1007Germany2025-08-29
Johnson Sergi1008Spain2025-08-31
Aditya Kusko1009Argentina2025-08-13
Costa Dilliard1010United Kingdom2025-08-11
Isabel Bowley1011Argentina2025-08-24
Kaitlin Ostrosky1012Italy2025-08-24
James Butt1013France2025-08-11
Aruna Figeroa1014Russia2025-08-22
James Butt1015Italy2025-08-21
Aruna Figeroa1016Australia2025-08-24
Jennifer Amigon1017Japan2025-08-29
Salvatore Stockham1018Canada2025-08-31
Leja Caldarera1019India2025-08-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Maria MarrierGermanyStephen Shaw PROPOSAL
Clifford RimRussiaElwin Sharvill QUALIFIED
Salvatore StockhamUnited KingdomStephen Shaw PROPOSAL
Alejandro PerinFranceAmy Elsner NEW
Deepesh ChuiRussiaXuxue Feng PROPOSAL
Octavia MaletArgentinaBernardo Dominic UNQUALIFIED
Jeanfrancois VenereIndiaIoni Bowcher UNQUALIFIED
Julie StensethUnited KingdomAmy Elsner NEGOTIATION
Izzy GarufiAustraliaIvan Magalhaes PROPOSAL
Salvatore StockhamAustraliaAmy Elsner NEGOTIATION
Octavia MaletUnited KingdomXuxue Feng QUALIFIED
Sinclair WaycottJapanAsiya Javayant NEW
Wickens NestleRussiaIvan Magalhaes RENEWAL
Stacey MacleadBrazilBernardo Dominic RENEWAL
David DarakjyArgentinaAmy Elsner UNQUALIFIED
Faith GillianItalyIoni Bowcher NEGOTIATION
Sinclair WaycottSpainBernardo Dominic RENEWAL
Octavia MaletCanadaElwin Sharvill UNQUALIFIED
Aika InouyeRussiaIoni Bowcher PROPOSAL
Izzy GarufiCanadaStephen Shaw QUALIFIED
Aruna FigeroaSpainElwin Sharvill UNQUALIFIED
Mujtaba NickaJapanStephen Shaw NEW
Mayumi KolmetzSpainXuxue Feng NEW
Emily WhobreyJapanOnyama Limba UNQUALIFIED
Mujtaba NickaRussiaAsiya Javayant PROPOSAL
Juan WieserSpainXuxue Feng QUALIFIED
Ivar PaprockiSpainOnyama Limba NEW
Jeanfrancois VenereGermanyBernardo Dominic NEW
Darci PoquetteJapanOnyama Limba NEGOTIATION
Cody SaylorsItalyIoni Bowcher PROPOSAL
Clifford RimAustraliaOnyama Limba NEGOTIATION
Clifford RimRussiaAmy Elsner PROPOSAL
Clifford RimSpainXuxue Feng QUALIFIED
Kaitlin OstroskyFranceIoni Bowcher NEGOTIATION
Ashley DoeFranceAmy Elsner NEGOTIATION
Smith GlickGermanyAnna Fali QUALIFIED
Ivar PaprockiSpainIoni Bowcher UNQUALIFIED
Clifford RimCanadaXuxue Feng NEW
Munro FerenczIndiaElwin Sharvill NEW
Rodrigues CampainBrazilOnyama Limba 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>